解构赋值是 ES6 （ECMAScript 6）所引进的新特性之一。通过解构赋值，我们可以从一个数组或对象中快速提取出需要的数据，使代码更加简洁易读。下面，我们将从语法、用法、注意事项等多个方面来详细探讨 ES6 中的解构赋值。
语法
ES6 中，解构赋值的语法非常简洁明了，以下是基本的解构赋值语法：
// 数组解构赋值
let [a, b, c] = [1, 2, 3];
// 对象解构赋值
let { x, y, z } = { x: 1, y: 2, z: 3 };用法
解构赋值在实际使用中，可以极大地提升代码的简洁性与可读性。下面，我们来看一些具体使用场景。
数组解构赋值
在数组解构赋值中，我们可以直接将数组中的值依次赋值给变量。例如：
let [a, b, c] = [1, 2, 3]; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3
此时，相当于声明了三个变量 a, b, c，并且分别被赋值为 1, 2, 3。
那么，如果我们只需要数组中某个位置的值呢？可以采用以下方式：
let [, b, c] = [1, 2, 3]; console.log(b); // 2 console.log(c); // 3
此时，数组中的第一个值被忽略了，相当于我们只需要第二个和第三个元素的值。
对象解构赋值
在对象解构赋值中，我们可以通过指定键名来访问对象中对应的属性值。例如：
let { x, y, z } = { x: 1, y: 2, z: 3 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // 3此时，相当于声明了三个变量 x, y, z，并且分别被赋值为 1, 2, 3。
那么，如果对象中并不存在某个键名，我们该怎么办呢？可以采用以下方式：
let { x, y, z, w } = { x: 1, y: 2, z: 3 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // 3
console.log(w); // undefined此时，由于对象中不存在 w 键名，所以 w 的值被赋值为 undefined。
函数参数中的解构
在函数参数中，我们可以使用解构赋值来快速获取一些必要的数据。例如：
function print({ x, y, z }) {
console.log(x, y, z);
}
print({ x: 1, y: 2, z: 3 }); // 1 2 3此时，函数 print 中的参数被声明为一个对象，并且直接对对象中的 x、y、z 属性进行了解构，相当于我们在函数内部声明了三个变量 x, y, z。而调用这个函数时，我们只需要传入一个对象，用于赋值给这三个变量即可。
剩余参数
在解构赋值中，我们也可以使用 ... 符号来获取数组或对象中剩余的元素。例如：
-- -------------------- ---- ------- --- --- -- ----- - --- -- -- -- --- --------------- -- - --------------- -- - --------------- -- --- -- -- --- - -- -- ---- - - - -- -- -- -- -- -- -- - -- --------------- -- - --------------- -- - --------------- -- - -- -- -- - -
此时，使用 ... 符号可以把数组或对象中除去前面已经解构过的元素之外的剩余元素赋值给一个新的数组或对象。
注意事项
在使用解构赋值时，有一些常见的错误需要注意：
对象解构赋值中的重名问题
在对象解构赋值中，如果我们使用相同名称的变量，会导致问题。例如：
let { x, y, x } = { x: 1, y: 2, z: 3 };
// Uncaught SyntaxError: Identifier 'x' has already been declared此时，由于我们声明了两个相同名称的变量 x，所以会导致语法错误。
数组解构赋值中的默认值问题
在数组解构赋值中，如果我们给某个变量指定默认值，在对应位置上的元素为 undefined 时才会生效。例如：
let [a = 1, b, c = 3] = [undefined, 2]; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3
此时，由于数组中 a, c 对应位置的元素为 undefined，所以才会使用它们的默认值。
总结
解构赋值是 ES6 中非常实用的语法特性之一。它可以帮助我们快速地提取所需的数据，并且使代码更加简洁易读。在实际开发中，我们可以灵活地运用解构赋值，来提高代码的效率和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e5a24cf6b2d6eab311236c