讲师中心 微信公众号

工具推荐

视频效率加速
updream

一键生成高质量推广成片

Seko
Seko

AI短剧一键生成成片

AniShort
AniShort

AI短剧协同制作平台

剧云
剧云

中文短剧剧本制作平台

javascript解构赋值是什么_如何用于数组和对象【教程】

阿浩吖_9438

阿浩吖_9438

发布时间:2026-01-23 08:53:33

|

711人浏览过

|

来源于php中文网

原创

解构赋值是JavaScript中按模式直接提取数组或对象值的底层能力:数组按位置、对象按属性名;支持跳过、剩余、重命名、嵌套及默认值,但对null/undefined会报错,且不创建新引用。

javascript解构赋值是什么_如何用于数组和对象【教程】

解构赋值不是语法糖,是 JavaScript 中真正改变数据提取方式的底层能力——它直接从数组或对象中“按模式提取值”,而非先取整个结构再手动索引。

数组解构:按位置取值,顺序敏感

本质是把等号右边的可迭代对象(如数组)按索引位置,映射到左边的变量列表。不关心变量名,只认位置。

  • 基础用法:const [a, b, c] = [1, 2, 3] → a 得 1,b 得 2,c 得 3
  • 跳过某位:用逗号占位,const [first, , third] = ['a', 'b', 'c'] → first 是 'a',third 是 'c'
  • 剩余元素:用 ... 收集,const [x, ...rest] = [10, 20, 30, 40] → rest 是 [20, 30, 40]
  • 默认值仅在对应项为 undefined 时生效,null、0、false 都不会触发:const [d = 99] = [0] → d 是 0,不是 99

对象解构:按属性名取值,名称必须匹配

左边写的是“模式”,不是声明;变量名默认需与属性名一致。想换名?得用冒号重绑定。

  • 基础用法:const { name, age } = { name: 'Alice', age: 30 } → 直接得到两个变量
  • 重命名:用 原属性名: 新变量名,const { title: bookName } = { title: 'JS Guide' } → bookName 是 'JS Guide'
  • 嵌套解构:路径要写全,const { user: { profile: { city } } } = { user: { profile: { city: 'Beijing' } } } → city 是 'Beijing'
  • 默认值逻辑同数组,但只对缺失属性或显式 undefined 生效;若属性存在且值为 null,默认值不触发

函数参数中的解构:让接口更清晰,也更易出错

函数形参支持直接解构,常用于配置对象传参,但容易忽略“传入非对象”导致的运行时错误。

Expanso yaml-to-json
Expanso yaml-to-json

使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

下载

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

  • 安全写法:给整个参数设默认值 {},避免 undefined 解构报错:function log({ level = 'info', msg } = {}) { ... }
  • 慎用嵌套解构作参数:一旦某层属性不存在(比如 opts.user.name 但 opts.user 是 undefined),会立即抛 Cannot destructure property 'name' of 'undefined'
  • 数组参数解构较少见,但合法:function first([head]) { return head; } → first([1,2,3]) 返回 1

常见陷阱:null/undefined、引用与重新赋值

解构本身不创建新对象或数组,只是绑定已有值的引用。修改解构出的变量,一般不影响源数据——但若解构的是对象属性,而该属性本身是引用类型,就另当别论。

  • let obj = { list: [1, 2] }; const { list } = obj; list.push(3); → 源 obj.list 也被改了,因为 list 和 obj.list 指向同一数组
  • 对 null 或 undefined 解构会直接报错:const { x } = null → TypeError;不能靠默认值兜底,必须提前判空或设参数默认值
  • 解构赋值语句不能单独出现,比如 { a, b } = data 会报语法错误(被解释为代码块),必须加括号:({ a, b } = data) 或放在 let/const 声明中

最常被忽略的是解构的“静默失败”边界:它只在结构完全不匹配时才报错,其余时候宁可给 undefined 也不中断。这意味着你得主动检查解构结果是否符合预期,尤其在处理 API 响应或用户输入时。

相关文章

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

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

下载

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

热门AI工具

更多
Laper
Laper Hot

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

讯飞绘文

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

DeepSeek

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

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

豆包大模型

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

Flowith
Flowith Hot

Flowith是一款基于画布和智能体工作流的 AI 协作工作空间。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

WorkBuddy

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

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

相关专题

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

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

569

2023.09.22

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

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

1698

2024.03.01

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

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

2458

2023.09.20

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

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

3248

2023.10.19

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

5449

2025.10.17

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

3909

2025.12.29

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

506

2026.01.19

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4976

2023.06.20

Go-Zero API开发使用教程
Go-Zero API开发使用教程

本专题聚焦Go-Zero的API开发,拆解.api描述文件的语法结构、路由与分组定义、参数绑定与校验规则,说明统一响应体、JWT鉴权、跨域与接口文档生成的落地方式,并给出网关聚合与接口测试的实践建议。

0

2026.11.12

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

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

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