上接 ES6 - 基础学习(3): 变量的解构赋值
函数参数的解构赋值
1、基本用法
function add([x, y]) {
return x + y;
}
console.log(add([1, 2])); // 3
// 如上面代码所示,函数add的形参表面是一个数组,但在实参参数传入时,实参数组就被解构并赋值给变量x、y了。当然这些对于函数内部的代码来说,跟参数一个个传入是一样的,反正都只认参数x、y
[[1, 2], [3, 4]].map(([a, b]) => a + b);
console.log([[1, 2], [3, 4]].map(([a, b]) => a + b)); // [3, 7] 1+2=3,3+4=7 map函数以二维数组内每个成员数组作为参数,进行参数解构,然后计算每个成员数组内参数值之和
2、函数参数的解构也可以使用默认值
// 下面代码中,函数defaultParameter的形参是一个对象(空对象)。通过对这个对象进行解构,得到变量x、y的值,如果解构失败,x、y就等于默认值。
function defaultParameter({x = 0, y = 0} = {}) {
console.log([x, y]);
return [x, y];
}
defaultParameter({x: 1, y: 2}); // [1, 2]
defaultParameter({x: 3}); // [3, 0]
defaultParameter({}); // [0, 0]
defaultParameter(); // [0, 0]
// 注意,下面这种写法会得到不一样的结果。区别在于此处是给参数指定默认值,而不是给变量x、y指定默认值。
// 这两种写法的执行区别是:上一种写法 实参传入函数后,实参对象内没有对应属性的值,则函数参数采用变量已有的默认值进行相关处理,代码依然能正常执行,不会报错。
// 而下一种写法 实参传入函数后,实参对象内没有对应属性的值,则就真没有了,函数参数因为解构赋值操作,无对应属性值的变量就只能等于undefined。这时如果再执行代码,尤其是计算类相关操作,执行就会报错,代码就会中断执行。
function defaultParameter({x, y} = {x: 0, y: 0}) {
console.log([x, y]);
return [x, y];
}
defaultParameter({x: 1, y: 2}); // [1, 2]
defaultParameter({x: 3}); // [3, undefined]
defaultParameter({}); // [undefined, undefined]
defaultParameter(); // [0, 0] 没有传入参数,函数以默认对象进行解构赋值
// undefined会触发函数参数的默认值。
[1, undefined, 3].map((x = 'yes') => x);
console.log([1, undefined, 3].map((x = 'yes') => x)); // [1, "yes", 3]
圆括号问题