ES6：解构赋值

本文参考《es6入门标准》来写。

01-解构赋值初识
ES6允许按照一定模式，从数组和对象中提取值，对变量进行性赋值，
这被称为解构。

以前为变量赋值，只能直接指定值。

eg1：{
    let a = 1,
    b = 2,
    c = 3;
}

eg2: {
    let [a,b,c] = [1,2,3];
}

这种语法，可以从数组中提取值，按照对应位置，对变量赋值。
本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

02-数组的解构赋值
两个例子：

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

        let [x, ...y] = [1, 2, 3, 4];
        console.log(x,y); // 1 (3) [2, 3, 4]

01-一些特殊情况：

 如果结构不成功，变量的值就等于undefined
    let [x, y, ...z] = ['a'];
    console.log(x,y,z);  //a undefined []

    let [x, y, z] = [1,2];
    console.log(x,y,z);

    不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。依旧ok
    let [x,y] = [1,2,3];
    console.log(x,y); // 1 2

02-解构赋值允许指定默认值

   let [x,y = 1] = ["a"]
    console.log(x,y)  // a 

    let [x,y = 1] = ["a","b"]
    console.log(x,y)  // a b

    当一个数组成员严格等于undefined，默认值才会生效。
    let [x,y = 1] = ["a",undefined]
    console.log(x,y)  // a 1

    默认值可以引用解构赋值的其他变量，但该变量必须已经声明。
     let [x = 1,y = x] = [];
    console.log(x,y);

    let [x = y,y = 1] = [];
    console.log(x,y);

03-对象的解构赋值

1.解构不仅可以用于数组，还可以用于对象

  let { foo , bar} = {foo:'aaa', bar:'bbb'};
    console.log(foo,bar);
    对象的结构赋值，变量必须与属性同名才能取到正确的值。
  let {baz} = {foo:'aaa',bar:'bbb'}
    console.log(baz)
   没有与有便同名的属性，导致取不到值，最后得到undefined

2.对象的解构赋值，可以将现有对象的方法赋值到某个变量

    let { log } = console;
    log("es6");  //将console.log()赋值到log身上

3.变量名与属性名不一致(解析赋值的实质)

   let {foo:foo} = {foo:123}
    console.log(foo); //123

    let {foo: baz} = { foo: 345};
    console.log(foo);  //foo is not defined
    console.log(baz);

    实际上说明对象的解构赋值是下面形式的简写
    内部机制为，先找到同名属性，然后赋值给对应的变量。
    真正被赋值的是变量，而不是这个属性

4.对象的解构赋值也可以用于嵌套的对象

  let obj = {
        p:[
            'hello',
            {
                y:'world'
            }
        ]
    };

    let { p:[x,{ y }] } = obj;

    console.log("x:"+x,"y:"+y);

5.默认值

 let {x = 3} = {};
    console.log(x) // 3

    let {x, y = 5} = {1};
    console.log(x,y) // 1 5

04-字符串解构赋值
1.字符串也可以结构赋值，这是因为欸此时，字符串被转化为了一个类似数组的对象。

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

2.类似数组的对象都有一个length属性，还可以用这个属性解构赋值

 let {length : len} = 'hello'
    console.log(len)  //5

05-函数参数的解构赋值

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

06-解构赋值的用途
1，交换变量的值

  let x = 1,
        y = 2;
    console.log("x:"+x,"y:"+y);
    [x,y] = [y,x];
    console.log("x:"+x,"y:"+y);

2.从函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组
或对象里返回。有了解构赋值，取出这些值就非常方便。

 返回一个数组
    function arr1(){
        return [1,2,3];
    }
    let [ a,b,c] = arr1();
    console.log(a,b,c);

    返回一个对象
    function obj1(){
        return {
            first_name:'james',
            last_name:'john'
        };
    }

    let {first_name,last_name} = obj1();
    console.log(first_name,last_name);

3.函数参数的定义
解构赋值可以将一组参数和变量名对应起来

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

4.提取json数据
解构赋值对提取json对象中的数据，尤其有用

  let jsonDate = {
        id:42,
        name:'kjh',
        status:'ok',
        data:[867,5309]
    };
    let {id, name, status,data} = jsonDate;
    console.log(id, name, status,data); //42 "kjh" "ok" (2) [867, 5309]

5.遍历map结构

   const map = new Map();
    map.set('first','hello');
    map.set('second','world');

    for(let [key,value] of map){
        console.log(key + 'is' + value);
    }