在 ES6 之前，用过 JavaScript 的人都知道，获取一个对象的属性值通常需要用到“点运算符”（“.”），如 object.property，或者通过“中括号”（“[]”）来获取键对应的值，如 object[key]。但是，在 ES6 里面，人们又有了一种更简便的方式来获取对象中的属性值，那就是解构赋值。
什么是解构赋值
解构赋值是一种使用数组和对象字面量提取值并对变量进行赋值的语法。它允许我们从数组或对象中快速提取出想要的值并赋值给变量，从而使代码更具可读性和可维护性。
解构数组
解构数组是指将一个数组中的值按照一定的规则提取出来，并且赋值给多个变量来使用。解构数组的语法是用方括号“[]”包裹一组变量，并将数组作为右值进行赋值。
const [a, b, c] = [1, 2, 3]; console.log(a); // 输出 1 console.log(b); // 输出 2 console.log(c); // 输出 3
上面的例子中，我们通过解构数组的方式将数组 [1,2,3] 中的第一个值赋给了变量 a，第二个值赋给了变量 b，第三个值赋给了变量 c。
我们还可以使用默认值的方式去避免在解构数组时因为数组的长度不够导致的错误，如：
const [a = 0, b = 0, c = 0, d = 0] = [1, 2, 3]; console.log(a, b, c, d); // 输出：1, 2, 3, 0
上面的代码中，我们定义了“默认值”，如果数组中没有对应元素，它将会被赋予默认值。
除此之外，我们还可以使用“剩余操作符”（“...”）来获取数组的其余元素。
const [a, ...rest] = [1, 2, 3]; console.log(a); // 输出 1 console.log(rest); // 输出 [2, 3]
上面的代码中，我们使用了“剩余操作符”来获取了数组 [1, 2, 3] 的其余部分 [2, 3]。
解构对象
除了可以解构数组之外，ES6 还引入了解构对象的方式来获取对象属性值。解构对象的语法通常是将对象的“key”值作为变量名，再将对象作为右值进行赋值。
const person = {
name: 'Tom',
age: 20,
sex: 'male'
};
const { name, age, sex } = person; // 解构对象
console.log(name, age, sex); // 输出：Tom, 20, male上面的代码中，我们使用解构对象的方式获取了对象 person 中的属性值，并赋值给了对应的变量名。
当然，我们还可以使用别名来解构对象中的键值对。
const person = {
name: 'Tom',
age: 20,
sex: 'male'
};
const { name: n, age: a, sex: s } = person;
console.log(n, a, s); // 输出：Tom, 20, male上面的代码中，我们为 person 对象的键分别指定了别名 n、a 和 s。
与解构数组类似，我们也可以在解构对象时使用默认值、剩余操作符等方式。
拓展：解构赋值的应用场景
交换变量
在 ES6 以前，如果需要交换 a 和 b 变量的值，我们通常需要借助一个错误的操作符“=”来实现，如：
var a = 1,
b = 2,
temp = null;
temp = a;
a = b;
b = temp;
console.log(a, b); // 输出：2, 1在 ES6 中，我们可以借助解构赋值语法来更简洁地实现变量的交换，如：
let a = 1,
b = 2;
[a, b] = [b, a];
console.log(a, b); // 输出：2, 1返回多个值
在 JavaScript 里面，函数只能够返回一个值，但是我们可以通过将多个值组合成数组或者对象来返回多个值。而使用解构赋值语法可以更清晰地表达我们所求的多个值，如：
function getNumber() {
return [1, 2, 3];
}
let [a, b, c] = getNumber();
console.log(a, b, c); // 输出 1, 2, 3递归遍历树状结构
引用一位大佬的例子：
// javascriptcn.com 代码示例
// 遍历一颗树状结构的所有节点
const tree = {
value: 0,
children: [
{
value: 1,
children: [
{
value: 3,
children: []
},
{
value: 4,
children: []
}
]
},
{
value: 2,
children: [
{
value: 5,
children: [
{
value: 7,
children: []
},
{
value: 8,
children: []
}
]
},
{
value: 6,
children: []
}
]
}
]
}
function walkTree(tree) {
const {value, children} = tree;
console.log(value);
children.forEach(child => walkTree(child));
}
walkTree(tree);上面的代码中，我们通过解构赋值语法来取出了 tree 对象中的 value 和 children 属性，并且通过 forEach 遍历了这颗树状结构中的所有节点。
总结
本文主要介绍了 ES6 中的解构赋值语法，包括解构数组和解构对象，以及解构赋值的应用场景，如交换变量、返回多个值、递归遍历树状结构等。
解构赋值语法虽然简洁易读，但是在使用中也需要注意一些小细节，如解构对象时不能直接访问原型链上的属性，解构数组时必须保证数组大小和解构变量个数一致等。
最后，相信通过熟练掌握解构赋值语法，可以让我们的代码更加优雅、简洁、易读、易维护。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65327dad7d4982a6eb53f04f