ES6数组与对象解构赋值完整指南
本文深入解析ES6中的解构赋值语法，涵盖数组与对象两种主要形式。详细阐述基于位置的模式匹配原理、严格相等判断下的默认值生效条件、惰性求值特性以及变量声明顺序限制。通过嵌套解构与属性重命名示例，说明对象解构需属性名一致的核心规则，并提供常见报错场景分析。
ES6解构赋值概述
本文详细介绍ES6中数组与对象的解构赋值机制，供读者参考学习。
数组解构赋值详解
数组的解构赋值
基本用法
ES6标准允许依据特定模式，从数组或对象中提取值并赋值给变量，这一过程称为解构（Destructuring）。
// 以前为变量赋值，只能直接指定值
var a = 1;
var b = 2;
var c = 3;
// ES6允许写成这样
var [a,b,c] = [1,2,3];
这种写法在本质上属于“模式匹配”。只要等号两侧的模式结构一致，左侧变量即可被赋予对应的值。
以下示例展示了利用嵌套数组进行解构的操作：
let [foo,[[bar],baz]] = [1,[[2],3]];
foo // 1
bar // 2
baz // 3
let [,,third] = ["foo","bar","baz"];
third // "baz"
let [head,...tail] = [1,2,3,4];
head // 1
tail // [2,3,4]
let [x,y,...z] = ['a'];
x // "a"
y // undefined
z // []
默认值
解构赋值语法支持为变量指定默认值。
var [foo = true] = [];
foo // true
[x,y='b'] = ['a'];
// x='a', y='b'
需注意，ES6内部使用严格相等运算符（===）来判断对应位置是否存在值。
因此，若数组成员的值不严格等于undefined，则默认值不会生效。
var [x=1] = [undefined];
x //1
var [x=1] = [null];
x // null
若默认值是一个表达式，则该表达式采用惰性求值策略，即仅在实际用到该变量时才会执行求值：
function f(){
console.log('aaa');
}
let [x=f()] = [1];
上述代码中，由于变量x成功获取到值，函数f()实际上并未执行。此逻辑等价于以下代码：
let x;
if([1][0] === undefined){
x = f();
}else{
x = [1][0];
}
默认值可以引用其他已解构的变量，但被引用的变量必须在此之前已经声明：
let [x=1,y=x] = [];
// x=1; y=1
let [x=1,y=x] = [2];
// x=2; y=2
let [x=1,y=x] = [1,2];
// x=1; y=2
let [x=y,y=1] = []; // ReferenceError
在最后一个表达式中，当x使用默认值y时，y尚未声明，因此会报错。
对象解构赋值详解
对象的解构赋值
解构操作不仅适用于数组，同样适用于对象。
var {foo,bar} = {foo:"aaa",bar:"bbb"};
foo // "aaa"
bar // "bbb"
对象解构与数组存在关键差异：数组元素按顺序排列，变量取值取决于位置；而对象属性无序，变量必须与属性名同名，才能正确获取值。
var {bar,foo} = {foo:"aaa",bar:"bbb"};
foo // "aaa"
bar // "bbb"
var {baz} = {foo:"aaa",bar:"bbb"};
baz // undefined
若变量名与属性名不一致，需采用特定写法：
var {foo:baz} = {foo:"aaa",bar:"bbb"};
baz // "aaa"
let obj = {first:"hello",last:"world"};
let {first:f,lats:l} = obj;
f // "hello"
l // "world"
对象解构的内部机制是先查找同名属性，再将其赋值给对应变量。
真正接收赋值的是右侧的变量，而非左侧的模式标识。
var {foo:baz} = {foo:"aaa",bar:"bbb"};
baz // "aaa"
foo // error: foo is not defined
在示例代码中，foo是匹配的模式，而baz才是实际变量。最终被赋值的是变量baz，而非模式foo。
与数组类似，解构也可应用于嵌套的对象结构：
var obj = {
p:["hello",{y:"world"}]
};
var {p:[x,{y}]} = obj;
x // "hello"
y // "world"
注意，此时p仅作为匹配模式存在，并非变量，因此不会被赋值。
对象解构同样支持指定默认值：
var {x=3} = {};
x // 3
var {x,y=5} = {x:1};
x // 1
y // 5
var {x: y=3} = {x: 5};
y // 5
若解构操作失败，变量值将等于undefined。
var {foo} = {bar:"baz"};
foo // undefined
若解构模式涉及嵌套对象，且子对象所在的父属性不存在，则会引发错误：
// 报错
var {foo: {bar}} = {baz:"baz"};
由于数组本质上是特殊的对象，因此可以对数组进行对象属性的解构操作：
var arr = [1,2,3];
var {0:first, [arr.length-1]:last} = arr;
first // 1
last // 3
如需了解更多JavaScript相关内容，可查阅本站系列教程：《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。
希望本文所述内容能对读者的JavaScript程序设计有所帮助。
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法：concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19