ES6 解构赋值

一. 解构

1. 对象解构

1.1 同名变量解构

代码如下：

let node = {
    type: 'DOM',
    name: 'document object model'
};
let {type, name} = node;
console.log(type)    // 'DOM';
console.log(name)    // 'document object model'

这样,就把 node.type 中的值（ 'DOM' ）存储到了变量 type 中,把 node.name 中的值（'document object model'）存储到了变量 name 中。
在使用结构赋值表达式时,如果指定的变量名称不存在于被解构的对象中,这个变量就会被赋值为 undefined,就像这样:

let node = {
    type: 'DOM',
    name: 'document object model'
};
let {type, name, value} = node;
console.log(type)    // 'DOM';
console.log(name)    // 'document object model'
console.log(value)     //  undefined   // 因为 node 对象中没有 value 的值

1.2 非同名变变量解构

let node = {
    type: 'DOM',
    name: 'document object model'
};
let {type: localType,name: localName} = node;
console.log(localType) ;   // 'DOM'
console.log(localName);    // 'document object model'

这样,就把node.type 和 node.name 的值分别存储到了变量 localType 和 localName 中。其中，tyoe:localType 语法的含义是读取名为 type 的属性并将其值存储在变量 localType中。就相当于

let node = {
    type: 'DOM',
    name: 'document object model'
};
let {type, name} = node;
let localType = type;

2 . 数组解构

let colors = [ 'red', 'green', 'blue' ]; 
let [ firstColor, secondColor ] = colors ;
console.log(firstColor);  // 'red'
console.log(secondColor);  // 'green'

如上,我们从 colors 中解构出了 'red' 和 'green' 这两个值并粉饼存储在变量firstColor 和 secondColor 中。

二. 解构赋值

1 对象的解构赋值

如果我们需要在定义变量之后想要修改它们的值,就需要用到解构赋值

    let node = {
        type: 'DOM',
        name: 'document object model'
    },
    type = 'BOM',
    name = 'Browser Object Model';
    
    // 以上,我们初始化了三个变量,现在我们需要用对象 node 中 type 和 name 的值分别修改变量 type 和 name 的值,这里就需要使用对象的解构赋值方法 : 

    ({type, name} = node);
    
    console.log(type)       // 'DOM'
    console.log(name)       // 'Browser Object Model'
    

注意点: 在对象的解构赋值中,一定要用一堆小括号包裹解构赋值语句,因为 Javascript 引擎会将一对开放的花括号视为一个代码块,而语法规定,代码块不允许出现在赋值语句的左侧,添加小括号后可以将块语句转化成为一个表达式,从而实现整个解构赋值的过程.

2数组解构赋值

数组的解构也可用于赋值上下文,但不需要用小括号包裹表达式,

let colors = ['red','green'],
    firstColor = 'black',
    lastColor = 'purple';
    
    [firstColor,lastColor] = colors;
    
    console.log(firstColor);        // 'red'
    console.log(lastColor);         // 'green'
    

数组解构赋值还有一个独特的用法:交换两个变量,如果用 ES5 交换两个变量的值,则必须要引入第三个临时变量,在ES6中可以这样做:

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