ES6特性2—变量解构赋值

一、数组的解构赋值

 var [a, b, c] = [1, 2, 3];
 本质为“模式匹配”，只要等号两边模式相同，左边变量会被赋予对应的值。
 let[, , third] = ['foo', 'bar', 'baz'];
 third // "baz"

 let[head, ...tail] = [1, 2, 3, 4];
 head //1
 tail //[2,3,4]
 
 不完全解构：
 let[x,y] = [1,2,3];
 x //1
 y //2

 let[a, [b], d] = [1, [2,3], 4];
 a //1
 b //2
 d //4

如果等号右边不是数组。（严格说，不是可遍历的解构）,则报错

 let [foo] = 1;
 let [foo] = false;
 let [foo] = NaN;
 let [foo] = undefined;
 let [foo] = null;
 都会报错

解构赋值允许指定默认值( 默认值生效的条件是，对象的属性值严格等于undefined。)

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

二、对象的解构赋值

var {foo, bar} = {foo: "aaa", bar: "bbb"};
foo // "aaa"
bar // "bbb"

对象解构跟数组解构不同。数据结构按位置取值，对象解构按属性名取值；

var {bar, foo} = {foo: "aaa", bar: "bbb"};
foo // "aaa"
bar // "bbb"

var {taz} = {foo: "aaa", bar: "bbb"};
baz //undefined

如果变量名与属性名不一致，必须写成这样

var { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"

解构也可以用于嵌套解构对象

var obj = {
 p: [
     "Hello",
      {y: "World"} 
 ]
};
var { p: [x,{y}] } = obj;
x // "Hello"
y // "World"

如果解构失败，变量值等于undefined

三、字符串解构赋值

const[a, b] = 'hi';
a //"h"
b //"i"

可以对数据长度属性解构赋值

let{length: len} = 'hello';
len //5

四、函数参数解构赋值

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

函数add参数不是数组，而是通过解构得到变量x和y。

函数参数解构可以使用默认值

function move({x = 0, y = 0} = {}){
 return [x,y];
}
move({x: 3, y: 8}); //[3, 8]
move({x: 3}); //[3, 0]

五、圆括号问题
解构解析对编译器来说并不容易，尽量少用圆括号。

六、用途
1、交换变量值

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

2、从函数返回多个之=值

 (1)返回一个数组
      function example(){
          return [1, 2, 3] ;
      }
      var [a,b,c] = example();

 (2)返回一个对象
      function example(){
           return {
               foo: 1,
               bar: 2 
           }
      }
      var {foo , bar } = example;

3、函数参数定义，上面有

4、提取json数据

var jsonData = {
 id: 42,
 status: 'ok',
 data: [867,5309]
}

let { id, status, data: number } = jsonData;

console.log(id, status, number)
//42, ok, [867, 5309]

5、函数参数默认值，具体见上面

6、遍历Map解构

var map = new Map();
map.set('first': 'hello');
map.set('second': 'world');

for( let [key, value] of map ){
 console.log(key + 'id' + value);
}
// first is hello
// second is world

如果只获取键名或者只获取键值
//获取键名

for(let [key] of map){
 // ...
}

//获取键值

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

7、输入模块的指定方法

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