ES6函数参数的解构赋值，以及2种设置参数默认值方法的区别

1. 函数参数的解构赋值方式

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

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

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

如下代码所示，函数参数写成对象的形式也可以，毕竟数组也是对象的一种。

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

add({x:1,y:2}); // 3

2. 函数参数解构设置参数默认值

1. 方法1

下面代码中，函数show的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值。
注意：之所以触发参数默认值，是因为传递的参数值为undefined。

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

show({x: 1, y: 2}); // [1, 2]
show({x: 1}); // [1, 0]
show({}); // [0, 0]
show(); // [0, 0]

show({x: 1, y: undefined}); // [1, 0]

2. 方法2

该方法的写法与上面方法的唯一区别就是将默认值写到了后面的大括号里，就得到了完全不一样的结果。
这是因为该方法是为函数参数指定默认值，而方法1是为变量x，y指定默认值。因此，当有参数传入时，无论传入的参数是何值，包括undefined，都会被当做有参数传入，不会触发默认值。只有完全没有参数传入时，才会触发默认值[0, 0]。

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

show({x: 1, y: 2}); // [1, 2]
show({x: 1}); // [1, undefined]
show({}); // [undefined, undefined]
show(); // [0, 0]

show({x: 1, y: undefined}); // [1, undefined]

3. 总结

1. 参与解构的函数参数可以写成对象或者数组的形式。
2. 当默认值写在前面大括号里时，传入参数是undefined时会触发默认值。
3. 当默认值写在后面大括号中时，无参数传入时触发默认值。

参考文献：《ECMAScript 6 入门教程》