ES6标准入门（2）-- 变量的解构赋值

一、数组的解构赋值

数组的结构赋值：
1）只要等号两边的模式相同，左边的变量就会被赋予相应的值；
2）解构不成功，变量的值就等于undefined；
3）如果等号右边不是数组，报错；
4）Set数据结构也可以解构赋值；

5）只要某种数据结构具有Iterator接口，都可以采用数组形式解构赋值；

例1 基本结构赋值

let [foo, [[bar],baz]] = [1, [[2], 3]];
console.log(foo, bar, baz);     //1 2 3

例2 赋值不成功，变量的值等于undefined

let [foo1] = [];
let [foo2, bar2] = [1];
console.log(foo1);      //undefined
console.log(bar2);      //undefined

例3 等号右边不是数组，报错

// let [foo3] = 1;
// let [foo3] = false;
// let [foo3] = NaN;
// let [foo3] = undefined;
// let [foo3] = null;
// let [foo3] = {};

例4 Set数据结构解构赋值

let [x, y, z] = new Set(['a', 'b', 'c']);
console.log(x, y, z);   //a b c

例5 generator函数的结构赋值

function * fibs() {
    let a = 0;
    let b = 1;
    while (true){
        yield a;
        [a, b] = [b, a+b];
    }
}
let [first, second, third, fourth, fifth, sixth] = fibs();
console.log(first);     //0
console.log(second);    //1
console.log(third);     //1
console.log(fourth);    //2
console.log(fifth);     //3
console.log(sixth);     //5

二、对象的解构赋值

对象的结构赋值：
1）变量名与对象的属性名相同才能赋值；
2）默认值生效的条件是，对象的属性值严格等于undefined；
3）解构失败，变量的值等于undefined；
4）可以将现有对象的方法赋值给某个变量；

5）可以指定默认值（对象的属性值严格等于undefined）；

例1 基本对象结构赋值

let {a, b} = {a:'111', b:'222'};
console.log(a, b);

let obj = {first:'hello', last:'world'};
let {first:f, last:l} = obj;        //对属性first的值f赋值，而不是first
console.log(f, l);        //hello world

例2 嵌套结构的对象

let obj2 = {
    p: [
        'hello',
        {y:'world'}
    ]
};
let {p:[x, {y}]} = obj2;
console.log(x, y);        //hello world

例3 给对象或数组创建值

let obj3 = {};
let arr = [];
({foo:obj3.prop, bar:arr[0]} = {foo:123, bar:true});
console.log(obj3);      //{ prop: 123 }
console.log(arr);       //[ true ]

例4 将现有方法赋值给某个变量

let {ceil, floor, round} = Math;
console.log(ceil(9.6));     //10
console.log(floor(9.6));    //9
console.log(round(9.6));    //10

三、字符串的解构赋值

字符串的结构赋值：字符串被转换成类似数组的一个对象；

const [a, b, c, d, e] = 'hello';
console.log(a, b, c, d, e);

四、解构赋值的应用

解构赋值的应用：
1）交换变量的值；
2）从函数返回多个值；
3）函数参数的定义；
4）提取json数据；
5）函数参数的默认值；
6）遍历Map结构；

7）输入模块的指导方法；

例1 交换变量的值

let a = 'aaa';
let b = 'bbb';
[a, b] = [b, a];
console.log(a, b);      //bbb aaa

例2 从函数返回多个值（返回一个对象或数组）

function f() {
    return [1,2,3];     //返回数组
}
let [a2,b2,c2] =f();
console.log(a2, b2, c2);    //1 2 3

function f1() {
    return obj = {      //返回对象
        foo : '123',
        bar : '456'
    }
}
let {foo, bar} =f1();
console.log(foo, bar);      //123 456

例3 函数参数的定义

function f2([x,y,z]) {
    return x+y+z;
}
console.log(f2([1,2,3]));       //6

例4 提取json数据

let json = {
    id : 111,
    status : 'ok',
    data : [666, 888]
};
let {id, status, data:number} =json;
console.log(id, status, number);        //111 'ok' [ 666, 888 ]

例5 遍历Map解构

let map = new Map();
map.set('first', 'aaa');
map.set('second', 'bbb');
for (let [key, value] of map){
    console.log(`${key} is ${value}`)   //first is aaa     second is bbb
}

例6 输入模块的指定方法

const {SourceMapConsumer, SourceNode} = require('source-map');

（完）

参考《ES6标准入门》第3版阮一峰

完整教程：https://blog.csdn.net/Mr_JavaScript/article/details/80245055

完整代码下载：https://github.com/KBeginner/Cool/tree/master/ECMAScript%206%20Primer