ECMAScript 2015（简称 ES6）引入了解构赋值（Destructuring Assignment）语法，方便快捷地提取数组和对象中的值。在前端开发中，解构赋值已经成为必不可少的 ES6 特性之一。下面，我们详细介绍解构赋值的使用方法和注意事项。
数组解构
基本用法
数组解构是指通过解构赋值语法，将一个数组中的元素赋值给多个变量。例如：
const array = [1, 2, 3]; const [a, b, c] = array; console.log(a, b, c); // 1 2 3
在上面的代码中，解构赋值将数组 [1, 2, 3] 中的元素分别赋值给了变量 a、b、c。
默认值
同时也可以为解构赋值设置默认值，避免变量值为 undefined。例如：
const array = [1, 2]; const [a, b, c = 3] = array; console.log(a, b, c); // 1 2 3
在上面的代码中，由于数组只有两个元素，所以变量 c 没有对应的值，因此使用了默认值 3。
忽略特定元素
还可以通过在解构赋值中使用逗号 ,，来忽略数组中的特定元素，例如：
const array = [1, 2, 3, 4, 5]; const [, b, , d] = array; console.log(b, d); // 2 4
在上面的代码中，变量 a 和 c 使用了逗号 , 忽略了数组中的第一个和第三个元素。
交换变量的值
解构赋值还可以用来交换两个变量的值，例如：
let a = 1, b = 2; [a, b] = [b, a]; console.log(a, b); // 2 1
在上面的代码中，将变量 a 和 b 的值互换了。
对象解构
基本用法
对象解构是指通过解构赋值语法，将一个对象中的属性值赋值给多个变量。例如：
const obj = { a: 1, b: 2, c: 3 };
const { a, b, c } = obj;
console.log(a, b, c); // 1 2 3在上面的代码中，解构赋值将对象 { a: 1, b: 2, c: 3 } 中的属性值分别赋值给了变量 a、b、c。
与数组解构的区别
对象解构与数组解构类似，但也有一些区别。对象解构使用的是属性名而不是下标，而且可以设置默认值：
const obj = { a: 1, b: 2 };
const { a, b = 3, c = 4 } = obj;
console.log(a, b, c); // 1 2 4在上面的代码中，变量 b 设置了默认值 3，变量 c 也设置了默认值 4，因为对象中并没有属性名为 c 的属性。
重命名属性
还可以通过解构赋值，将一个属性名赋值给另一个变量名：
const obj = { a: 1 };
const { a: b } = obj;
console.log(b); // 1在上面的代码中，将对象 obj 中的属性名 a 赋值给了变量 b。
嵌套的对象解构
还可以使用嵌套的对象解构：
const obj = { a: { b: 1 } };
const { a: { b } } = obj;
console.log(b); // 1在上面的代码中，将对象 obj 中的属性名 a.b 赋值给了变量 b。
总结
解构赋值是 ES6 中的一个重要特性，能够让开发者更加方便快捷地提取数组和对象中的值。在实际开发中，我们应该熟练掌握这一特性的使用方法和注意事项，以提高代码的简洁性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f2a570f6b2d6eab3c463a6