二.解构赋值

基本用法

从数组和对象中提取值，对变量进行赋值，被称为解构。

//es5之前的写法
let a =1;
let b=2;
let c=3;

//es6解构写法
let [a,b,c]=[1,2,3];

如果解构不成功，变量的值等于 "undefined"

let [foo]=[];
let [bar,foo]=[1];
//foo都为 "undefined"

默认值

解构赋值允许指定默认值

let [foo=true]=[];
console.log(foo);//true

let [x,y='b']=['a']; //x='a',y='b'
let [x,y='b']=['a',undefined]; // x='a',y='b'

es6内部严格使用相等运算符 ( === ),判断一个位置是否有值。所以一个数组成员不严格等于 "undefined" 解构赋值会生效，而默认值不生效。

let [x = 1] = [undefined] ; 
console.log(x);//1

let [x = 1] =[null];
console.log(x);//null

---

对象的解构赋值

let {foo,bar}={foo:"aaa",bar:"bbb"};
console.log(foo,bar)//"aaa","bbb"

对象的解构与数组解构最大的不同 :

• 数组的元素是按次序排列的，变量的取值由它的位置决定。
• 对象那个的属性没有次序，所以变量必须与属性同名。

如果变量名与属性名不一致，必须携程下面这样。

var {foo:baz}={foo:"aaa",bar:'bbb'};
console.log(baz)//'aaa'
console.log(foo)//error:foo is not defined

上面代码中， foo 是匹配的模式，baz 才是变量。真正被赋值的是 baz，而不是模式 foo。

实际上说明，对象的解构赋值是 下面的简写:

let {foo:foo,bar:bar}={foo:'aaa',bar:'bbb'}

嵌套赋值

与数组一样，解构也可以用于嵌套结构的对象。

let obj={
    p:['Hello',[y:"World"]];
}
let {p:[x,{y}]}=obj;
console.log(x,y);//'Hello','World'

let obj={};
let arr=[];
({foo:obj.prop,bar:arr[0]}={foo:123,bar:true});
console.log(obj,arr)// {prop:123},[true]

---

字符串的结构赋值

字符串也支持解构赋值,这是因为此时，字符串被转换成一个类似数组的对象

const [a,b,c,d,e]='hello';
console.log(a,b,c,d,e)//'h','e','l','l','o'
let{length:len}='hello'
console.log(len)//5

---

数值和布尔值的解构赋值

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

• 解构赋值的规则是：只要等号右边的值不是对象或者数组，就先将其转为对象，由于 undefined和 null 无法转为对象，所以对它们进行接哦股赋值，都会报错。

---

函数参数的解构赋值

function add([x,y]){
    return x+y;
}
console.log(add([1,2]);)//3

另一个例子：

[[1, 2], [3, 4]].map(([a, b]) => a + b);//[3,7]

---

用途

1. 交换变量的值

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

2. 从函数返回多个值

   函数只能返回一个值，如果要返回多个值，解构方便

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

3. 函数参数的定义

   解构赋值可以方便地将一组参数与变量名对应起来。

   // 参数是一组有次序的值
   function f([x, y, z]) { ... }
   f([1, 2, 3]);
   
   // 参数是一组无次序的值
   function f({x, y, z}) { ... }
   f({z: 3, y: 2, x: 1});
   

4. 提取JSON数据

   解构赋值对提取JSON对象中的数据，尤其有用。

   let jsonData = {
     id: 42,
     status: "OK",
     data: [867, 5309]
   };
   
   let { id, status, data: number } = jsonData;
   
   console.log(id, status, number);
   // 42, "OK", [867, 5309]
   

5. 函数参数的默认值

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

6. 遍历Map结构

   任何部署了Iterator接口的对象，都可以用for...of循环遍历。Map结构原生支持Iterator接口，配合变量的解构赋值，获取键名和键值就非常方便。

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

7. 输入模块的指定方法

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