ES6中的解构

解构赋值

原理

本质上，是一种“模式匹配”。解构分为完全解构和不完全解构。完全解构是指等号左右两边的结构相同，变量和值一一对应进行赋值；不完全解构(左边量的个数<右边量的个数)是指左边只匹配到一部分的右边。如果解构不成功，变量值就会变成undefined

应用

1. 数组（注：有interator接口就能使用数组解构）
   可以指定默认值（左边量的个数>右边量的个数），前提是该数组成员严格等于undefined ，默认值才会生效。
   默认值还可以引入解构赋值的其他变量，当改变量必须已经声明。

    // 数组解构 (右边两边结构一致)
    let [a, b, c] = ["wfwef","fewf","hrty"];
    let [d, [e, f ]] = ["wfwef",["fewf","hrty"]];
    // 不完全解构
    let [g] = [46,6578,754];
    console.log(`${a}----${b}---${c}----${d}---${e}---${f}----${g}`); // wfwef----fewf---hrty----wfwef---fewf---hrty----46
    //指定默认值（严格等于undefined,null都不可以）
    let [h="45645",i="546",j="1111"] = [33,,null];
    console.log(`${h}----${i}----${j}`); //33----546----null
    let [k,m=k] = [46546];	//可以引入解构赋值的其他变量
    console.log(`${k}----${m}`); //46546----46546
   

2. 对象
   与数组结构不同的是：不是按顺序赋值的，而是规定属性和变量必须同名。（对象解构的机制是：先找到同名属性，在进行属性值的赋值。注：属性名并不会进行赋值) 可以指定默认值，和数组解构相似。

    let {a, b} = {a: c} = {a: 546, b: 345};
    console.log(`${a}----${b}-----${c}`); //546----345-----546
    //默认值
    let {d= "dddddd", e= "ccccc"} = {f:"frefe",d:"fewfw"};
    console.log(`${d}-----${e}`); //fewfw-----ccccc
   

3. 字符串 & 数值 & 布尔值
   解构赋值时，只要等号右边不是对象或数组，都要先转化为对象，在进行解构。（注：null 和 undefined 正是因为不能转化为object类型，所以不能进行解构。）所以我们的string 、 number 、 boolean 都会先转化为object 。 String相对特殊，会被转化为类似数组的对象（有length属性） 。

    //字符串
    let {length: len} = "hello";
    let [a, b] = "hello";
    console.log(`${a}-----${b}----${len}`); //h-----e----5
    //数值 & 布尔值
    let {toString: s} = 3534;
    let {toString: k} = false;
    console.log(s === Number.prototype.toString); //true
    console.log(k === Boolean.prototype.toString); // true
   

4. 函数参数
   一般都是对象或者数组的写法居多，参考上面的数组和对象。

    function m([a,b]){
    	console.log(`${a}----${b}`);
    }
    function b([a = 1, b = 2] = []){
    	console.log(`${a}----${b}`);
    }
    function c({a,b}){
    	console.log(`${a}----${b}`);
    }
    function d({a = 1,b = 2} = {}){
    	console.log(`${a}----${b}`);
    }
    
    m([23,34]); //23----34
    b([34]); // 34----2
    c({a: 46,b: 67}); //46----67 (一定要传参，不然会报错)   
    d(); // 1----2
   

---

用途

1. 交换变量（之前我们是需要借助一个中间量的，现在不用了）

2. 从函数返回多个值（经常可以用来对外暴露接口）

3. 函数参数的定义，可以通过属性名去更好了解这个方法，而且在多参数的情况下，不需要记住排序，主要记住属性名，方便记忆和使用。

4. 方便提取json对象中的数据

5. 函数参数的默认值

6. 遍历Map 结构 （老用，但不知道是解构）

7. 输入模块的指定方法 （经常看到）

    // 1. 交换变量（之前我们是需要借助一个中间量的，现在不用了）
    let a = 2423;
    let b = 345;
    [a, b] = [b, a];
    // 2. 从函数返回多个值 & 3函数参数的定义 & // 5. 函数参数的默认值
    function getInfo({id, name, sex = "男"} = {}){
    	return [`ID是 ${id}`,`Name是 ${name}`，`sex是 ${sex}`];
    }
    let info = getInfo({id: 1, name: "麦兜"});
    console.log(info);
    // 4. 方便提取json对象中的数据
    let jsonData = {
    	id: 4654,
    	name: "小白"
    };
    let {id, name} = jsonData;
    console.log(`id是 ${id}`,`name是 ${name}`);
    
    // 6. 遍历Map 结构 （老用，但不知道是解构）
    let map = new Map(["id","45"],["name","小新"]);
    for (let [key,value] of map) {
    	console.log(`${key}======${key}`);
    }
    // 7. 输入模块的指定方法 （经常看到）
    // const {a, b} = require(file);
   

总结

解构的作用说白了，就是对变量的一种新的赋值方式。可以在相对复杂的结构里，轻松获取其中我们需要的数据。