ES6 - 基础学习(4): 变量的解构赋值 补充 ES6 - 基础学习(3): 变量的解构赋值

上接 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]

圆括号问题