ES6函数参数的解构赋值

0、摘要

若函数有参数，且参数是需要被解构赋值 ，且函数有参数默认值，
那么就要弄清楚当前被解构的参数是传入的参数，还是函数参数默认值。

然后，再看解构赋值的默认值和函数参数的默认值具体指的值。
函数参数的取值需要关注函数参数的默认值具体指的值。
解构的过程中需要关注解构赋值的默认值。

1、问题（跳过）

在学习《ECMAScript 6 入门》- ES6函数参数的解构赋值 时，看到下面这两段代码就慌了。

我被函数参数的默认值、解构赋值的默认值和解构赋值弄的有点晕。

// 代码1：
function move({x = 0, y = 0} = {}) {
    return [x, y];
}
console.log(move({x: 3, y: 8})); // [3, 8]
console.log(move({x: 3})); // [3, 0]
console.log(move({})); // [0, 0]
console.log(move()); // [0, 0]

// 代码2：
function move({x, y} = { x: 0, y: 0 }) {
    return [x, y];
}
console.log(move({x: 3, y: 8})); // [3, 8]
console.log(move({x: 3})); // [3, undefined]
console.log(move({})); // [undefined, undefined]
console.log(move()); // [0, 0]

---

2、默认值的理解

2.1、函数参数默认值

当没有传入参数（包括传入undefined）时，函数取参数（备用的）默认值。

不用解构赋值作为函数参数，函数参数默认值的写法：

function move(x = 0, y = 0) { console.log(`【${x}, ${y}】`);}
move(); // 【0,0】 x,y取默认值0

注意：
	1、这里的【函数参数默认值】是 x = 0, y = 0

使用解构赋值作为函数参数，函数参数默认值的写法：

function move({x, y} = {x: 0, y: 0}) { console.log(`【${x}, ${y}】`);} 
move(); // 【0,0】 因为没有传入参数，所以move取默认参数{x: 0, y: 0}进行处理

注意：
	1、这里{x: 0, y: 0} 是分号，默认值是一个对象，有实际的数值。
	2、这里的【函数参数默认值】是 x = 0, y = 0。
	3、当函数没有收到参数，则取默认值，然后再将其解构。解构的模式是{x, y}。

2.2、解构赋值及其默认值

默认值生效的条件是，对象的属性值严格等于undefined。

var {x, y = 5, z = 1} = {z = undefined};
x // undefined 解构失败
y // 5 对象的属性值严格等于undefined
z // 1 对象的属性值严格等于undefined

注意：
	1、默认值生效的条件是，对象的属性值严格等于undefined（如：y与z）。
	2、如果解构失败，变量的值等于undefined（如：x）。

2.3、默认值何时生效

默认值何时生效	怎么调用取默认值
取函数的默认值	move({}) move() move(undefined)
取解构赋值的默认值	{x = 0} = {x: undefined} {x = 0} = {}

---

3、简化问题

先用用假设法，把这个move函数的参数变成我认识的样子～

// 原本的代码1:
function move({x = 0, y = 0} = {}) {...}
// 假如move 函数没有默认值
function move({x = 0, y = 0}) {...}
// 假如move 函数没有默认值 && 被赋值对象没有默认值
function move({x, y}) {...}
// 假如move 函数 不使用解构赋值
function move(x, y) {...}

然后，画一个表格来比较分析一下。

“简化”的move()的参数	调用	结果	备注
x, y	move(1, 2)	{x: 1, y: 2}	原始赋值
x = 0, y = 0	move()	{x: 0, y: 0} 原始赋值也可以有默认值	原始赋值 函数参数有默认值
{x, y}	move({x: 1, y: 2})	{x, y} = {x: 1, y: 2}对象的解构赋值 等同于{x: x, y: y} = {x: 1, y: 2}	要解构赋值
{x = 0, y = 0}	move({x: 1, y: 2}) move({x: 1}) move({y: 2}) move({}) move()	{x:1, y: 2} {x:1, y: 0} {x:0, y: 2} {x:0, y: 0} 报错(Cannot destructure property x of ‘undefined’ or ‘null’.) 没有传入参数无法解构赋值	要解构赋值 解构赋值有默认值
{x = 0, y = 0} = {}	move()	{x: 0, y: 0} 调用函数时，没有传入参数 或 传入 undefined 则取默认值{}, 这就是不报错的原因	函数参数有默认值{} 要解构赋值 解构赋值有默认值
{x = 0, y = 0} = {x: 1, y: 1}	move()	{x: 1, y: 1} 默认值是{x: 1, y: 1}	函数参数有默认值 x=1, y=1 要解构赋值 解构赋值有默认值

总结：
	1、解构赋值：可以看作是对函数参数的处理。将传入的参数进行解构赋值。
	2、函数的默认值：当没有传入参数时才会起作用。
	3、解构赋值的默认值：当传入的参数缺少某一个属性，就有起作用。

为了更容易理解，将上面两个代码合成一个，如下。

function move({x = 0, y = 0} = { x: 1, y: 1 }) {
    return [x, y];
}
// 解构赋值的模式 {x, y}
// 解构赋值的默认值 x = 0, y = 0

console.log(move({x: 3, y: 8})); // 被解构赋值的参数 : {x: 3, y: 8} 
// [3, 8]
console.log(move({x: 3})); // 被解构赋值的参数 : {x: 3} 
// [3, 0]
console.log(move({})); // 被解构赋值的参数 : {} 
// [0, 0]
console.log(move()); // 被解构赋值的参数 : {x: 1, y: 1} 
// [1, 1]
console.log(move(undefined)); // 被解构赋值的参数 : {x: 1, y: 1} 
// [1, 1]

函数的参数需要被解构，那么要弄清：被解构的参数是什么？（默认值、传入的参数）。