什么是解构赋值_如何在数组和对象中使用

浅静同学_1444

浅静同学_1444

2026-01-06

250人浏览

原创

解构赋值是JavaScript中直接从数组或对象提取值的底层能力:数组解构按位置匹配,支持跳过、默认值和剩余操作符;对象解构按属性名匹配,支持重命名、嵌套和默认值;字符串、Map等可迭代对象也可解构;函数参数解构需防null/undefined。

什么是解构赋值_如何在数组和对象中使用

解构赋值不是语法糖,而是 JavaScript 中真正改变变量提取方式的底层能力——它让你跳过点号、下标和重复声明,直接从数组或对象里“拎出”需要的值。

数组解构:按位置“拆包”,跳过、默认、剩余全支持

数组解构靠的是顺序匹配,左边方括号 [] 里的变量位置,严格对应右边数组索引。它不修改原数组,只做一次性提取。

  • 基础用法:
    const [x, y] = [100, 200]; // x = 100, y = 200
  • 跳过中间项:用逗号占位,比如只取第 1 和第 4 个元素
    const [first, , , fourth] = ['a', 'b', 'c', 'd']; // first = 'a', fourth = 'd'
  • 设置默认值:仅当对应位置是 undefined 时生效(null、0、false 都不会触发)
    const [a = 1, b = 2] = [undefined, 0]; // a = 1, b = 0
  • 收集剩余项:用 ... 操作符捕获剩余所有元素
    const [head, ...tail] = [1, 2, 3, 4]; // head = 1, tail = [2, 3, 4]

⚠️ 注意:如果右边不是可遍历对象(如 null 或 undefined),会直接报 TypeError: Cannot destructure property 'x' of 'y' as it is undefined.

对象解构:按属性名匹配,顺序无关,重命名很常见

对象解构靠的是属性名,不是位置。左边花括号 {} 中的标识符必须与右边对象的键名一致,否则得到 undefined;想换个变量名?用 旧名: 新名 语法。

  • 基础匹配:
    const { name, age } = { name: 'Alice', age: 30 }; // name = 'Alice', age = 30
  • 重命名变量:
    const { name: fullName, age: years } = { name: 'Bob', age: 25 }; // fullName = 'Bob', years = 25
  • 嵌套解构(一次取深层属性):
    const { user: { profile: { avatar } } } = { user: { profile: { avatar: 'url.jpg' } } }; // avatar = 'url.jpg'
  • 默认值 + 安全访问:
    const { title = 'Untitled', tags = [] } = {}; // title = 'Untitled', tags = []

⚠️ 常见坑:不能直接对未声明变量解构,比如 { x } = obj 会报语法错误;必须写成 const { x } = obj 或 let { x }; ({ x } = obj)(加括号绕过解析歧义)。

java-api-doc-generator
java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

字符串也能解构?是的,但本质是数组式遍历

字符串在解构时被当作类数组处理(实现了 Symbol.iterator),所以能用数组解构语法逐字符提取,还能拿到 length 属性。

  • 逐字符拆解:
    const [a, b, c] = 'hey'; // a = 'h', b = 'e', c = 'y'
  • 混合属性提取:
    const { 0: first, 2: third, length } = 'hello'; // first = 'h', third = 'l', length = 5

这说明解构的目标不限于 Array 或 Object,只要可迭代(iterable)或有属性访问能力,就能参与解构——比如 Map、Set,甚至自定义对象。

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

把解构直接写进函数形参,是高频且实用的场景,尤其适合配置对象传参。

  • 基础用法:
    function draw({ x = 0, y = 0, color = 'black' }) { console.log(x, y, color); }draw({ x: 10, y: 20 }); // 10 20 'black'
  • 嵌套参数解构:
    function connect({ host, port, timeout = 5000, retry: { max = 3 } }) { /* ... */ }connect({ host: 'api.example.com', port: 8080, retry: { max: 5 } });
  • ⚠️ 关键限制:如果调用时传了 undefined 或 null,整个解构会失败,报错;务必加防御,比如
    function safe({ a = 1 } = {}) { return a; } // 默认空对象兜底

最易被忽略的一点:解构默认值的求值时机是「运行时」,不是定义时——这意味着你可以写 a = expensiveCalc(),它只在需要时才执行。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

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

下载

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

相关专题

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

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

2023.09.22

549

3

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

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

2024.03.01

1698

6

mysql标识符无效错误怎么解决
mysql标识符无效错误怎么解决

mysql标识符无效错误的解决办法:1、检查标识符是否被其他表或数据库使用;2、检查标识符是否包含特殊字符;3、使用引号包裹标识符;4、使用反引号包裹标识符;5、检查MySQL的配置文件等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.12.04

16360

5

Python标识符有哪些
Python标识符有哪些

Python标识符有变量标识符、函数标识符、类标识符、模块标识符、下划线开头的标识符、双下划线开头、双下划线结尾的标识符、整型标识符、浮点型标识符等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.02.23

1183

5

java标识符合集
java标识符合集

本专题整合了java标识符相关内容,想了解更多详细内容,请阅读下面的文章。

2025.06.11

8950

9

c++标识符介绍
c++标识符介绍

本专题整合了c++标识符相关内容,阅读专题下面的文章了解更多详细内容。

2025.08.07

3562

7

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

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

2023.09.20

2338

7

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

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

2023.08.03

1838

5

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

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

2023.09.04

2944

5

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习