讲师中心 微信公众号
AI工具推荐 视频效率加速

javascript中的解构赋值是什么【教程】

云浩酱_4650

云浩酱_4650

发布时间:2026-01-25 17:49:02

|

937人浏览过

|

来源于php中文网

原创

解构赋值是JavaScript原生支持的数据提取机制,按结构从数组或对象中取值:数组按索引位置匹配,支持跳过、剩余元素收集和默认值(仅undefined生效);对象按属性名匹配,支持重命名、嵌套解构、默认值及防崩兜底。

javascript中的解构赋值是什么【教程】

解构赋值 是 JavaScript 中直接从数组或对象里“按结构取值”的语法机制,不是糖衣炮弹,而是语言原生支持的数据提取方式——它不改变源数据,只帮你跳过 obj.name、arr[0] 这类重复访问,让变量绑定更贴近你的意图。

数组解构:位置决定一切,跳过和收尾靠逗号与...

数组解构按索引顺序匹配,左边变量的位置严格对应右边元素的下标。

  • 跳过中间项?用连续逗号:[first, , third] = ['a', 'b', 'c'] → first === 'a',third === 'c'
  • 想拿剩余所有?... 必须放在最后:[head, ...tail] = [1, 2, 3, 4] → tail 是 [2, 3, 4](真数组,不是类数组)
  • 默认值只在 undefined 时生效:[x = 10] = [null] → x 是 null,不是 10;但 [x = 10] = [] → x === 10
  • 交换变量不用临时量:[a, b] = [b, a] —— 注意前一行若没分号,可能被误解析为上一行函数调用的参数

对象解构:属性名匹配,别名和默认值必须显式写清楚

对象解构不看顺序,只认属性名;但一旦嵌套深或属性缺失,就容易报错或得 undefined。

  • 重命名必须用冒号:{ title: bookTitle },左边是源属性名,右边才是变量名
  • 默认值写在等号后,且等号两边不能有空格:{ role = 'user' } ✅,{ role = 'user' } ❌(空格会导致 SyntaxError)
  • 嵌套解构要路径完整:{ user: { profile: { city } } },但如果 user 是 null 或 undefined,会直接抛 Cannot destructure property 'profile' of 'undefined'
  • 防崩关键:给整个对象设默认值:function fn({ timeout = 5000 } = {}) {...},否则 fn(undefined) 就挂了

函数参数里的解构:意图清晰但默认值易漏设

把解构写进形参,能让调用方一眼看懂要传什么,但也是最容易忽略防御性默认值的地方。

Java Maven Common
Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载
  • 常见错误:function connect({ host, port }) {...} → connect(null) 或 connect() 全都报错
  • 正确写法:function connect({ host = 'localhost', port = 3000 } = {}) {...},两个 = 缺一不可
  • 默认值支持惰性求值:timeout = prompt('Enter timeout') 只在 timeout 确实未提供时才执行
  • 别名 + 默认值可共存:{ count: num = 0 },num 拿不到时才用 0

容易被忽略的边界行为

解构看着简单,但几个细节不注意就会埋雷:

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

  • const [x] = [] → x 是 undefined,不报错;但 const { name } = null → 直接 TypeError
  • 字符串也能解构:const [a, b] = 'hi' → a === 'h',b === 'i'(因为字符串可迭代)
  • 已声明变量再解构,必须加括号:let x; ({ x } = { x: 1 });,否则会被当成代码块
  • ... 在数组解构中返回新数组,在对象解构中收集剩余属性(返回新对象),语义不同但写法一样
真正难的不是语法,而是判断右侧数据是否“结构可靠”——API 返回字段缺失、嵌套层级变动、甚至后端返回 null 而非空对象,都会让看似优雅的解构当场翻车。所以别光图写得少,多想想它“塌方”时你有没有兜底。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

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

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

549

2023.09.22

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

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

1678

2024.03.01

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

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

3088

2023.11.20

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

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

2178

2023.09.20

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1718

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2644

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

6044

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

5589

2023.11.24

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

20

2026.10.16

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn