ECMAScript 2015（也称为 ES6）是 JavaScript 的一个重要版本，该版本引入了许多新的特性和语法糖，其中包括解构赋值。解构赋值是一种将数组或对象的值直接赋值给变量的方式，能够大大简化代码量，提高编程效率。
数组解构
数组解构是将数组中的每个元素提取出来，分别赋值给变量。它使用方括号 [] 包裹左侧的变量列表，右侧为待解构的数组变量。
例如，在不使用解构赋值的情况下，我们需要手动为每个数组元素赋值：
let arr = [1, 2, 3]; let a = arr[0]; let b = arr[1]; let c = arr[2]; console.log(a, b, c); // 1 2 3
使用数组解构赋值可以简化上述代码：
let arr = [1, 2, 3]; let [a, b, c] = arr; console.log(a, b, c); // 1 2 3
在数组解构中，还可以使用一些特殊的语法糖，如省略元素、默认值等，以便更精细地控制数组解构：
let arr1 = [1, 2, 3]; let arr2 = [1, 2]; let [a, b, c = 0] = arr1; let [x, ...y] = arr2; console.log(a, b, c); // 1 2 3 console.log(x, y); // 1 [2]
对象解构
对象解构是将对象中的每个属性提取出来，分别赋值给变量。它使用花括号 {} 包裹左侧的变量列表，右侧为待解构的对象变量。
例如，在不使用解构赋值的情况下，我们需要手动为每个对象属性赋值：
let obj = { name: 'Alice', age: 18 };
let name = obj.name;
let age = obj.age;
console.log(name, age); // 'Alice' 18使用对象解构赋值可以简化上述代码：
let obj = { name: 'Alice', age: 18 };
let { name, age } = obj;
console.log(name, age); // 'Alice' 18和数组解构一样，对象解构也支持省略属性和默认值等特殊语法糖：
let obj1 = { name: 'Alice', age: 18 };
let obj2 = { name: 'Bob' };
let { name, age = 0 } = obj1;
let { name: alias = 'Unknown', age: old = 0 } = obj2;
console.log(name, age); // 'Alice' 18
console.log(alias, old); // 'Bob' 0深度解构
前面介绍的数组解构和对象解构只是针对一级对象的解构，而实际应用中往往需要对深度嵌套的对象进行解构。为了实现深度解构，我们可以在左侧的变量列表中嵌套使用数组和对象的解构语法。
例如：
let obj = { name: 'Alice', age: 18, friend: { name: 'Bob', age: 20 } };
let { name, age, friend: { name: fname, age: fage } } = obj;
console.log(name, age, fname, fage); // 'Alice' 18 'Bob' 20上述代码中的 friend 属性其实也是一个包含了 name 和 age 的对象，使用深度解构可以轻松拿到这些值。
使用解构赋值的场景
在实际开发中，我们可以使用解构赋值来简化一些复杂的操作，例如：
- 函数返回值的解构，使得调用方更易获取需要的值，而不必关心函数返回值的具体结构；
- 箭头函数的传参解构，使得参数传递更为简便；
- 多变量赋值的解构，使得代码更加优雅精简。
例如：
function getValue() {
return { first: 'Hello', second: 'World' };
}
let { first, second } = getValue();
console.log(first, second); // 'Hello' 'World'-- -------------------- ---- ------- --- --- - --- -- --- ------------------- ------ ------ -- - ------------------ ------ ------- --- -- --- -------------------- ------ ------- -- - ------------------ ------ ------- ---
let a = 1, b = 2; [a, b] = [b, a]; console.log(a, b); // 2 1
使用注意事项
虽然解构赋值简化了代码，但在使用时也要注意几个问题：
- 变量声明必须要写，解构赋值不能单独使用；
- 解构赋值对目标的操作为浅拷贝，不能拷贝属性引用；
- 如果右侧的变量不是数组或对象，则无法进行解构。
要避免这些问题，可以使用解构赋值时进行相关的判断和容错处理。
总结
解构赋值是 ECMAScript 2015 中引入的一种语法糖，它可以大大简化代码，提高编程效率。解构赋值支持数组和对象的解构，以及深度解构等复杂操作。在实际应用中，解构赋值也得到了广泛的使用，可以在函数返回值、多变量赋值、对象属性获取等场景下发挥作用。在使用过程中，要注意各种注意事项，避免出现不必要的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d07cc1b5eee0b52576f84f