ES6(二） Destructuring-变量的解构赋值

1、解构的含义  

    允许按照一定的模式，从数组和对象中取值，对变量进行赋值，称为解构。

    解构赋值时，只要等号右边的值不是对象，就先将其转换成对象。

 本质上，这种写法属于 “模式匹配”，只要两边模式相同，左边的变量就会被赋予对应的值。

let [head,...tail]=[1, 2, 3, 4]; //不完全解构，左边的模式，只匹配一部分的等号右边的数组

    解构后： head=1，tail=[2,3,4]。

 

2、解构的限制。

     （1）undefined与null 无法转换成对象，解构赋值就会报错。

let { y } = null;    // Cannot match against 'undefined' or 'null'.

     （2）如果等号的右边不是数组，转换对象以后不具备 Iterator接口，或本身就不具备Iterator接口，

  即某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值。

    let [foo]=1; //undefined is not a function，报错的行数会指向上一行代码

    let [foo1,foo2]=new Set(['a', 'b', 'c']);

 3、解构赋值时， 左边参数允许默认值。

    (1)ES6内部使用严格相对运算符，因此，若defaultValue!==undefined,默认值失效。

    var [x=1]=[undefined]; //x=1
    var [y=2]=[null];  //y=2

    (2)赋予默认值时，左边参数 可以引用解构赋值的其他变量，但该变量必须已经声明.

let [x1=y1,y1=1]=[]; //error，因为此时y1还没有值，应该如此写： let[y=1,x=y]=[];

4、对象解构赋值

 对象属性没有次序，变量名必须与属性相同。

    let { fishInstance,dogInstance}={
        dogInstance: {
            name: 'dog',
            moveType: 'run'
        },
        fishInstance{
            name:'fish'
        }
    }

5、变量名与属性名不一致，必须写成下面这样。

    真正被赋值的是后者，而不是前者。

let { oldName:newName}={oldName: '12222222', bar: 'barTest'}

6、

 let tree = {
        root: {
            leaf: {
                left: 5,
                right: 5
            }
        }
    }

var { root:{leaf:{left}} }=tree; //此时， root 与 leaf 都是模式,不会被赋值，只有leaf是变量

console.log(root);  /*root is not defined*/

7、对象的解构也可以指定默认值,生效的条件是对象的属性严格等于 undefined

 如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，则error。

 let {x=3}={};

 let { foo: { name }}={bar: 'bar'};

 将一个已经申明的变量用于解构赋值，必须非常小心。

 let temp;
 {temp}= {x: 1}; /error

 ( { temp }={x: 1} ); //使用圆括号，避免JS引擎将 "{ }" 解释为代码块

8、字符串解构赋值，会将字符串转换成类似数组的对象。

 const [a,b,c,d,e]='hello world';
    let { length:strLen }='world';

 9、解构 数值和布尔值时，先转换成对象

   let { toString:s1 } =123; //s1===Number.prototype.toString

    let { toString: s2}=true; //s2===Boolean.prototype.toString

解构使用场景

  (1)可以很方便的将 现有对象的方法，赋值给某个变量.

let { log: selfLog}=console;
selfLog('test log');

  (2)交换变量.

[x,y]=[y,x];

  (3)从函数返回多个值

    function getPerson() {
        return {
            name: 'jack',
            age: 19
        }
    }

    var {name,age}=getPerson();

  (4) 定义函数参数后，可以不按顺序传入

    function setPerson({name,age,address}) {

    }

    setPerson({age: 19, address: 'china', name: 'Tom'});

  (5)提取JSON对象中的数据

  let jsonData = {
        age: 19,
        name: 'Tom',
        son: [
            'little Jack',
            'little Tom'
        ]
    };

    let { son:child }=jsonData;

  (6)遍历map结构

    var map =new Map();

    for(let [key,value] of map) { }

    for(let [,value] of map ) { }

  (7)获取模块的指定方法

 const { SourceMapConsumer }= require('');