2019-01-29

5.函数参数的解构赋值

函数的参数也可以使用解构赋值

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

add([1,2]);//3

函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量 x和y。
对于函数内部的代码来说，它们能感受到的参数就是x和y

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

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

function move({x=0,y=0}={}){
      return [x,y];
}

move({x:3,y:8}); //[3,8]
move({x:3}); //[3,0]
move({}); //[0,0]
move(); //[0,0]
//上面代码中，函数move的函数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值

//但是下面的代码写法不同得到的结果也不同
//设定函数move的参数指定默认值，而不是为变量x和y指定默认值
function move({x,y} = {x:0,y:0}){
      return [x,y];
}
move({x:3,y:8}); //[3,8]
move({x:3}); //[3, undefined]
move({}); //[undefined,undefined]
move(); //[0,0]

undefined会触发函数参数的默认值

[1,undefined,3].map((x='yes')=>x);
//[1, "yes", 3]

6.圆括号问题

解构赋值虽然很方便，但是一个式子到底是模式还是表达式没有办法一开始就知道，必须解析到等号才能知道

由此带来的问题就是，如果模式中出现圆括号怎么处理。ES6的规则是，只要有可能导致解构的歧义，就不得使用圆括号。

建议只要有可能，就不要在模式中放置圆括号

不能使用圆括号的情况

1）变量声明语句

let [(a)]=[1];

let {x:(c)}={};
let({x:c})={};
let{(x:c)}={};
let{(x):c}={};

let { o:({p:p}) }= {o:{ p:2 } };
//上面6个语句都会报错，因为它们都是变量声明语句，模式不能使用圆括号

2）函数参数
函数参数也属于变量声明，因此不能带有圆括号

function f([(z)]) { return z; }

function f([z,(x)]){ return x; }
//上面代码将整个模式放在圆括号之中，导致报错


[({ p:a }),{ x:c }] = [{},{}];
//这段代码将一部分模式放在圆括号之中，导致报错

可以使用圆括号的情况

可以使用圆括号的情况只有一种：赋值语句的非模式部分，可以使用圆括号

[(b)] = [3];
({ p:(d) } = {});
[(parseInt.prop)] = [3];
//上面三行语句都可以正确执行，因为首先它们都是赋值语句，而不是声明语句
//其次它们的圆括号都不属于模式的一部分

第一行语句中，模式是取数组的第一个成员，跟圆括号无关
第二行语句中，模式是p，而不是d
第三行语句中与第一行语句的性质一致。

7.用途

变量的解构赋值用途很多

1）交换变量的值

let x=1;
let y=2;

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

2）从函数返回多个值

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。
有了解构赋值，取出这些值就非常方便

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

//返回一个对象
function example(){
      return{
           foo:1,
            bar:2   
      };
}
let{ foo,bar }=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）函数参数的默认值

jQuery.ajax = function (url,{
    async = true,
    beforeSend = function () {},
    cache = true,
    complete = function (){},
    crossDomain = false,
    global = true,
}={}){
};

6）遍历Map解构

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

const 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

如果只想获取键名，或者只想获取键值，可以这样写：

//获取键名
for (let [key] of map){
    //...
}

//获取键值
for(let [,value] of map){
}

7）输入模块的指定方法
加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰：
const { SourceMapConsumer, SourceNode } = require("source-map");