ES6的解构赋值-类别说明与应用

数组解构：

支持：解构字符串、跳跃解构、利用剩余参数解构，也支持默认值。

// example 1
const text = "Hello world";
const [,e,l, ...rest] = text;
// H is skipped.
// e --> e
// l --> l
// rest --> ["l", "o", " ", "w", "o", "r", "l", "d"]

// example 2
const array = [1,2,3];
const [a, b, c, d = 100] = array;
// d === 100 

对象解构：

关键：用对应的键名来解构对象，如果想取别的名字要用别名（见example 2）。

支持：键名解构（example 1）、别名解构（example 2）、层级结构（example 3）；也支持剩余属性解构和默认赋值。

实际上，example 3中的层级结构类似于example 2的别名，只是这个别名也被解构了。

// example 1 basic
const Person = {name: "Fiona", age: 22, title: "Miss"};
const {name, age, title} = Person; // declare three variables and assgin them values.

// example 2 alias
// formate: {attribute: variable name}
const Person = {name: "Fiona", age: 22, title: "Miss"};
const {name: who} = Person // who === "Fiona";

// example 3 hierarchical structure
const family = {
    property: 567222333,
    members: [
        {name: "Fiona", age: 22},
        {name: "Eris", age: 24},
    ]
};

const { members:[first, ...rest] } = family;
//first === {name: "Fiona", age: 22}
//rest === [ {name: "Eris", age: 24} ]

应用：

for of循环：以快速获取对象属性。比如遍历一个班级的名单（每一项为{name:xxx, age:xxx}），可以for (const {name, age} of array) { ... }

解构参数：以快速获取内容。比如在定义、调用中都以[name, age]作为参数。

 

参数默认值：联合结构参数一起使用，把默认值也写成一个结构体。

// array
function add([x, y] = [1, 2]) {
    return x + y;
}
add() === 3;

// object
function sub({x, y} = {x: 10, y: 5}) {
    return x - y;
}
sub() === 5;

交换变量：

[a, b] = [b, a]

import 语句：

ES6的import语句也是解构赋值。

 

注意事项：

对已经声明了的变量使用解构赋值时，要把这个语句包裹在小括号里（）。不然，由于以大括号 { 开头，会被解释器认为本语句将是一个块级代码。

此外：基本类型解构：解释器将{}中的变量自动转化为对象（比如输入一个函数的名字作为变量名，就会变为这个函数对象）；而null和undefined因为无法被转换为对象，因此无法解构。