0

0

JavaScript中的解构赋值有哪些高级用法?

betcha

betcha

发布时间:2025-10-07 20:39:01

|

149人浏览过

|

来源于php中文网

原创

JavaScript解构赋值支持嵌套提取、重命名、默认值、函数参数解构、动态属性和剩余操作符。1. 可从深层对象或数组直接取值,如{ profile: { address: { city } } } = user获取city;2. 用冒号: 重命名变量,如username: name;3. 设置默认值仅在undefined时生效,null不触发;4. 函数参数可直接解构对象,提升接口可读性;5. 动态属性[key]实现运行时键名解构;6. 结合...rest收集剩余属性,便于数据过滤与重组。综合运用使代码更简洁清晰。

javascript中的解构赋值有哪些高级用法?

JavaScript中的解构赋值不仅仅是从数组或对象中提取变量,它还能在多种复杂场景中提升代码的简洁性和可读性。掌握一些高级用法,能让你写出更优雅的代码。

1. 嵌套结构的解构

当对象或数组包含深层嵌套时,可以直接从中提取所需字段。

例如,处理一个复杂的用户配置对象:

const user = { id: 101, profile: { name: 'Alice', address: { city: 'Beijing', zip: '100000' } }, hobbies: ['reading', 'coding'] }; const { profile: { address: { city } }, hobbies: [firstHobby] } = user; // city => 'Beijing' // firstHobby => 'reading'

这种写法避免了连续访问 user.profile.address.city,同时防止中间层级为 undefined 导致报错(需确保结构匹配)。

立即学习Java免费学习笔记(深入)”;

2. 解构时重命名变量

原始属性名可能不便于使用,可以通过冒号 : 指定新的变量名。

const data = { username: 'bob', msgCount: 5 }; const { username: name, msgCount: count = 0 } = data; // name => 'bob' // count => 5

这在处理API返回字段与本地变量命名冲突时特别有用,比如后端返回 user_name,你可以直接映射为 userName

3. 设置默认值

解构时可以为变量指定默认值,当属性不存在或为 undefined 时生效。

DALL·E 2
DALL·E 2

OpenAI基于GPT-3模型开发的AI绘图生成工具,可以根据自然语言的描述创建逼真的图像和艺术。

下载
const config = { timeout: null, retries: undefined, mode: 'dev' }; const { timeout = 3000, retries = 3, featureEnabled = true } = config; // timeout => null(注意:null 不触发默认值) // retries => 3 // featureEnabled => true(原对象无此字段)

注意:默认值只在值为 undefined 时起作用,null 不会触发默认值。

4. 函数参数的解构

函数定义时可以直接对传入的对象或数组参数进行解构,常用于配置项函数。

function connect({ host, port = 8080, ssl = false }) { console.log(`Connecting to ${host}:${port}, SSL: ${ssl}`); } connect({ host: 'localhost', port: 3000 }); // 输出:Connecting to localhost:3000, SSL: false connect({ host: 'api.example.com' }); // 输出:Connecting to api.example.com:8080, SSL: false

这种方式让函数接口更清晰,调用者只需传入一个对象,无需记住参数顺序。

5. 动态属性解构

使用计算属性名进行解构,适用于属性名在运行时确定的情况。

const key = 'email'; const user = { email: 'test@example.com', name: 'Tom' }; const { [key]: value } = user; // value => 'test@example.com'

这在处理动态字段或配置映射时非常实用。

6. 结合剩余操作符(Rest)使用

提取部分属性后,将剩余属性收集到一个新对象或数组中。

const { id, ...rest } = { id: 1, name: 'John', age: 25 }; // id => 1 // rest => { name: 'John', age: 25 } const [first, ...others] = [10, 20, 30, 40]; // first => 10 // others => [20, 30, 40]

这在过滤不需要的字段或重构数据结构时很有用,比如去除敏感字段后再传递数据。

基本上就这些。这些高级用法结合使用,能让代码更简洁、意图更明确。关键在于理解模式匹配的逻辑和默认值的触发条件。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

236

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

458

2024.03.01

counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

198

2023.11.20

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

531

2023.09.20

treenode的用法
treenode的用法

​在计算机编程领域,TreeNode是一种常见的数据结构,通常用于构建树形结构。在不同的编程语言中,TreeNode可能有不同的实现方式和用法,通常用于表示树的节点信息。更多关于treenode相关问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

538

2023.12.01

C++ 高效算法与数据结构
C++ 高效算法与数据结构

本专题讲解 C++ 中常用算法与数据结构的实现与优化,涵盖排序算法(快速排序、归并排序)、查找算法、图算法、动态规划、贪心算法等,并结合实际案例分析如何选择最优算法来提高程序效率。通过深入理解数据结构(链表、树、堆、哈希表等),帮助开发者提升 在复杂应用中的算法设计与性能优化能力。

17

2025.12.22

深入理解算法:高效算法与数据结构专题
深入理解算法:高效算法与数据结构专题

本专题专注于算法与数据结构的核心概念,适合想深入理解并提升编程能力的开发者。专题内容包括常见数据结构的实现与应用,如数组、链表、栈、队列、哈希表、树、图等;以及高效的排序算法、搜索算法、动态规划等经典算法。通过详细的讲解与复杂度分析,帮助开发者不仅能熟练运用这些基础知识,还能在实际编程中优化性能,提高代码的执行效率。本专题适合准备面试的开发者,也适合希望提高算法思维的编程爱好者。

27

2026.01.06

硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

1126

2023.10.19

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

158

2026.01.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
MongoDB 教程
MongoDB 教程

共17课时 | 2.4万人学习

Go语言实战之 GraphQL
Go语言实战之 GraphQL

共10课时 | 0.8万人学习

微信小程序开发之API篇
微信小程序开发之API篇

共15课时 | 1.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号