ECMAScript6变量的解构赋值实例详解

什么是解构赋值

解构赋值是ES6中的一个新特性，它允许你从数组或者对象中提取出数据并赋值到新的变量中。

数组解构赋值

let [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

数组解构赋值中，将等号左侧的变量以数组的形式包裹，等号右侧的值也以数组的形式包裹，然后通过匹配两者的位置，将右侧的值赋值给左侧的变量。

数组解构赋值中的默认值

let [a, b, c = 3] = [1, 2];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

在上述例子中，由于数组右侧只有两个元素，所以变量 c 没有任何值，同时它的默认值被设置为 3。

对象解构赋值

let user = { name: 'Bob', age: 18 };
let { name, age } = user;
console.log(name); // Bob
console.log(age); // 18

可以看到，与数组解构赋值类似，对象解构赋值也是将等号左侧以一个对象的形式包裹，而等号右侧直接是一个对象。对象解构赋值的原理是，会在右侧寻找与左侧变量同名的属性，并将它的值赋给左侧对应的变量。

对象解构赋值中的别名和默认值

let user = { name: 'Bob', age: 18 };
let { name: userName, age: userAge = 20 } = user;
console.log(userName); // Bob
console.log(userAge); // 18

在上述例子中，我们使用了别名将原始属性名 name 和 age 转换为了 userName 和 userAge。同时，我们也给 userAge 设置了默认值 20。

总结

解构赋值是ES6中一个十分实用的新特性，它可以方便地将数组和对象中的数据提取出来并赋值到新的变量中。同时，在解构赋值的过程中，也可以使用默认值和别名功能，来对变量进行更完善的处理。