ES6——解构赋值

解构赋值

1.1 数组的解构赋值

等号右边的值或是转为对象以后不具备Iterator接口的（前五个表达式），或是本身就不具备Iterator接口（最后一个表达式）

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

1.2 对象的解构赋值

对象的解构赋值呢，无关次序，内部机制是先找到同名属性，然后再赋值给对应的变量，而对于数组的结构赋值，是按照次序排列进行赋值的。
还有还有，真正被赋值的是冒号后面的变量，而不是冒号前面滴，前面的只是用来找对应的~

let {foo:x} = {foo:1};
    // console.log(foo);//error
    console.log(x);//1

另外对于已经声明过的变量进行结构赋值有一点要注意哦，对于已经声明过的变量直接加{}，JS引擎会将{x}理解成一段代码块，避免这种小误会就需要再解构赋值外面再加一对小括号（这样大括号就不在行首啦），
错误写法：

let x;
{x} = {x:1};

正确写法：

 	let x;
    ({x}  =  {x:1});

对于对象的嵌套赋值，也是有一些点容易出错滴，不信来看看下面的栗子

var obj = {
            p:[
                'hello',
                {
                    name:'xiaoming'
                }
            ]
        }
        let {p:[x,name]} = obj;
        // console.log(p);//error
        console.log(x);//'hello'
        console.log(name);//'xiaoming'

怎么解释第一个console.log出错了呢？
原因就是p在赋值的时候不是作为了变量，而是作为模式进行匹配，作为变量的是x和name，如果想让p也进行赋值，需要另外再加一个解构的源（等式右边的），看看下面代码怎么具体实现的吧（看完就会懂滴）

var obj = {
            p:[
                'hello',
                {
                    name:'xiaoming'
                }
            ]
        }
        let {p,p:[x,name]} = obj;
        console.log(p);//(2) ['hello', {…}]
        console.log(x);//'hello'
        console.log(name);//'xiaoming'

所以你懂了吧，冒号前面的是用于匹配的模式，不会对其进行赋值哦

另外数组本质上是特殊的对象哦，因此可以对数组也进行对象属性的赋值，比如下面代码

    let arr = ['aba','xiao','aaa'];
    let{0:x,2:y} = arr;
    console.log(x);//'aba'
    console.log(y);//'aaa'

解释
解构赋值左边对象的键表示给冒号后的对应赋值的数组元素下标，咦这么说好像有一点点绕，简单一点说呢，就比如上面的代码，0：x 就是去arr下标为0的元素（arr【0】）的值赋给x，这样x就变为‘aba’啦

1.3 字符串的解构赋值

字符串也可以结构赋值哦，没想到吧，字符串会被单个拆分然后赋值，看看下面输出什么吧~

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

没错啦，就是’m,‘i’,‘n’,‘g’,你答对了吗？

1.4 数值和布尔值的解构赋值

对于数值和布尔值的结构赋值 会将其转为对象，再进行赋值滴

博主对这块的代码还不太理解，待我再修炼修炼后补上hh

而对于null和undefined无法转为对象所以结构赋值的时候会出错滴

1.5 函数参数的解构赋值

函数参数用解构赋值也是有讲究滴

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

别看上面这个代码函数参数是数组，但是当传入参数之后呢，数组参数就变成了单独的变量x和y了 对于函数内部的代码呢接受到的也自然就只是变量x和变量y了 最后调用函数执行结果就为5啦 怎么样是不是有些许神奇

函数的解构赋值也是可以设置默认值的~ 但是还是在这里博主发现了一个神奇的不同
看看下面两种代码 你能解释清楚为什么输出会有所不同呢？

function fn({x = 0, y = 0} = {}){
        return [x,y];
    }
    console.log(fn({x:1,y:2}));//[1,2]
    console.log(fn({x:1}));//[1,0]
    console.log(fn({}));//[0,0]
    console.log(fn());//[0,0]

function fn({x, y} = {x:0,y:0}){
        return [x,y];
    }
    console.log(fn({x:1,y:2}));//[1,2]
    console.log(fn({x:1}));//[1,undefined]
    console.log(fn({}));//[undefined,undefined]
    console.log(fn());//[0,0]

待博主再修炼修炼再来解释…

1.6 圆括号的问题

在这里就先一步带过啦，就是解构赋值的时候圆括号只能在非模式部分添加，如下

[(b)] = [3];
    console.log(b);//3

1.7 解构赋值的应用

最后，让我们来看看这个解构赋值到底有什么本事
上面基础打好了，下面就不过多叙述啦

• 交换变量的值

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

• 从函数返回多个值

//返回一个数组
function exp(){
        return [1,2,3];
    }
    var arr = exp();
    console.log(arr);//[1,2,3]

//返回一个对象
function exp(){
        return {x:1,y:2};
    }
    var {x,y} = exp();
    console.log(x);//1
    console.log(y);//2

• 函数参数的定义

function f({x, y, z}){
        console.log(x);//1
        console.log(y);//2
        console.log(z);//3
    }
    f({z:3,y:2,x:1});

• 提取JSON数据

通过同名属性就可以提取变量啦

let jsonData = {
        id:34,
        status:'ok',
        data:[867,5309],
    }
    let {id,status,data} = jsonData;

• 遍历Map结构

const myMap = new Map();
    myMap.set('x',1);
    myMap.set('y',2);
    for(let [key,value] of myMap){
        console.log(key);
        console.log(value);
    }
    //x 1 y 2

如果只想获取键名，把上面代码的[key,value]换成[key]就可以啦
如果只想获取键名，把上面代码的[key,value]换成[,value]就可以啦

• 输入模块的指定方法

const {obj1,obj2} = require('source-map');