ES6之解构赋值

什么是解构赋值
按照一定的模式从数组或对象中提取值，然后对变量进行赋值的过程。这样能够简化书写的长度，提升效率。
下面简单的举个列子来对比一下：

//es6之前的写法
var arr =[1,2,3];
var a= arr[0];
var b= arr[1];
var c= arr[2];
console.log(a,b,c)
//使用es6解构赋值的写法
let[a,b,c] = arr;
console.log(a,b,c)
//相对与之前的写法是不是简单了很多
//注意执行代码时将上面的a，b，c的赋值注释掉

下面写一下解构赋值的一些大致用法和用途
一，数组中的

//数组的元素是按次序排列的，变量的取值由它的位置决定；
//1.基本用法
let [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c);  // 3
//2. 对嵌套数组解构
let [a, [[b], c],d] = [1, [[2], 3],4];
console.log(a); // 1
console.log(b); // 2
console.log(c);  // 3
console.log(d); // 4
//能够更好的获取二维数组、三维数组。
//3.不需要匹配的位置可以置空
[,,c] = [1, 2, 3];
console.log(c);//3
//4.获取字符串
let [a, b, c, d, e] = 'hello'; 
console.log(a)//'h'
console.log(b)//'e'
console.log(c)//'l'
console.log(d)//'l'
console.log(e)//'o'
//5.使用...扩展运算符，匹配余下的所以值，形成一个数组
var [a,b,...c] = [1,2,3,4,5,6,7,8,9];
console.log(a)//1
console.log(b)//2
console.log(c)//[3,4,5,6,7,8,9]

二。对象中的

//对象中对象的属性没有次序，变量必须与属性同名，才能取到正确的值，如果没有值则为undefined。
let { a, b } = { a : 1, c : 2 };
 console.log(a) // 1
 console.log(b) // undefined

//2.对任意深度的嵌套对象进行解构赋值
let obj= {
   arr: [1,{ a: 2 } ]
 };
 let { arr: [x, { y}] } = obj;
 console.log(x); // 1
 console.log(y); // 2

//3.自定义属性名称
var {name, id: ID} = { name: 'jack', id: 1  };
console.log(ID) // 1
console.log(id) // Uncaught ReferenceError: id is not defined
//对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量，所以真正被赋值的是后者，当我们输出前者时会报错。

注意有一条原则：要解构成数组的前提：如果等号右边，不是数组，则直接报错（对象也是一样的原则），例如：

let [a] = 1;//报错
let [b] = false;//报错
let [c] = NaN;//报错
let [d] = undefined;//报错
let [e] = null;//报错
let [f] = {};//报错

常见用途

 1）交换变量的值

    let x = 1; 
    let y = 2; 
    [x,y] = [y,x];

 2）从函数返回多个值

    function example(){
       return [1,2,3];
    }
    let [a,b,c] = example();   

 3）函数参数的定义
    
    function f([x,y,z]){...}
    f([1,2,3]);

 4）提取JSON数据
 
    let jsonData = {id:42,status:'OK',data:[867,5309]};
    let {id,status,data:number} = jsonData;   

 5）输入模块的指定方法

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

 6）函数参数的默认值         

    jQuery.ajax = function(url,{
      async = true,cache = true,global = true,
      beforeSend = function(){},
      complete = function(){},
      //...more config
    }){//...do stuff};

    指定参数的默认值，就避免了在函数体内部再写var foo = config.foo||'default foo';这样的语句。

 7）遍历map结构
 
    var map = new Map();
    map.set('first','hello');
    map.set('second','world');
    for(let [key,value] of map){
       console.log(key + "is" + value);
    }