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");
网友评论