详解JS ES6变量的解构赋值

ES6（ECMAScript 2015）引入了一种新的变量赋值方式--解构赋值（Destructuring Assignment），使得我们可以更加简洁地从数组或者对象中提取值，并赋值给新的变量。本攻略将详细讲解JS ES6变量的解构赋值。

数组的解构赋值

让我们先看一个简单的例子：如何用传统的方式（不使用解构赋值）从数组中获取元素并赋值给变量：

let arr = [1, 2, 3];
let a = arr[0];
let b = arr[1];
let c = arr[2];

使用解构赋值可以更简单地实现同样的功能：

let arr = [1, 2, 3];
let [a, b, c] = arr;

在解构赋值语法中，方括号（[]）表示将一个数组解构成若干个变量，并按照数组的顺序进行赋值。左边的变量名必须和数组中元素的个数相等，并按照顺序一一对应赋值。

需要注意的是，方括号里面的变量名与数组的元素是一一对应的，也就是说，只要变量数量对得上，即使数组元素多余或者不足，也不会产生错误。如果只想获取特定位置的元素，可以用逗号（,）将不需要的位置占位符留空。

下面再看一个稍微复杂的例子：

let arr = [1, 2, [3.1, 3.2], 4];
let [a, b, [c, d], e] = arr;
console.log(a, b, c, d, e); // 1, 2, 3.1, 3.2, 4

在这个例子中，数组中有一个元素是一个数组，使用解构赋值时，可以嵌套使用方括号表示取出嵌套数组中的元素，并赋值给变量。

对象的解构赋值

对象的解构赋值和数组类似，也是按照一定的规则从对象中提取值，并赋值给新的变量。让我们来看一个简单的例子：如何使用传统的方式（不使用解构赋值）从对象中获取元素并赋值给变量：

let obj = { name: '张三', age: 18 };
let name = obj.name;
let age = obj.age;

使用解构赋值可以更简单地实现同样的功能：

let obj = { name: '张三', age: 18 };
let { name, age } = obj;

在解构对象时，大括号（{}）表示将一个对象解构成若干个变量，并按照对象的属性名进行赋值。左边的变量名必须和对象的属性名称一一对应。

需要注意的是，如果解构的属性名和变量名不一致，需要用“属性名:变量名”的方式进行赋值。

下面再看一个稍微复杂的例子：

let obj = { name: '张三', age: 18, address: { province: '广东', city: '广州' } };
let { name, age, address: { province } } = obj;
console.log(name, age, province); // 张三, 18, 广东

在这个例子中，对象中有一个属性是另一个嵌套对象。使用解构赋值时，可以以相同的方式嵌套使用大括号表示取出嵌套对象中的属性，并赋值给变量。

结语

本攻略介绍了两种解构赋值的用法，分别是数组的解构赋值和对象的解构赋值。除此之外，还有更多高级的用法，例如默认值、剩余操作符等等，有需要的读者可以自行深入了解。