es6之详解变量的解构赋值

学习一门新技术，从它是什么东东？能解决什么问题？具体在代码层面怎么实现？三个方面来深入浅出即可。

一、变量的解构赋值是什么东东

// 使用解构赋值之前的写法
let a = 1;
let b = 2;
let c = 3;
// 使用解构赋值之后的写法
let [a, b, c] = [1, 2, 3];

定义：变量的解构赋值就是一种写法，掌握了这种写法可以让我们在书写 javascript 代码时可以更加的简单，迅捷。

我们需要掌握的：

掌握解构赋值的原理——代码层面如何实现

掌握解构赋值的使用场景——能解决哪些问题

二、学习解构赋值的机理从而实现代码层面的使用

变量的解构赋值——【变量】 + 【解构】 如何理解

let name = 'dk';        // 这里的变量指的是 "name"，而 "dk" 是变量的值

// 【变量】这里的变量指的是等号左边的数组，也就是[a, b, c]。
// 【解构】解构指按照某种规则同时声明多个变量并赋值。
let [a, b, c] = [1, 2, 3];

解构的种类

判断变量的解构赋值类型：看等号右边的值是什么数据类型就是什么类型的解构赋值。

let [a, b, c] = [1, 2, 3];        // 数组的解构赋值
let {foo, bar} = {foo: 'dk', bar: 'virus'};        // 对象的解构赋值
let [a, b, c, d, e] = 'hello';        // 字符串的解构赋值
let {toString: s} = 123;            // 数值的解构赋值

了解解构的类型有助于我们能够有规律的总结解构的原理。也就是说等号右边值的数据类型必定是 Javascript 数据类型的一种。

4.复杂数据类型的解构原理

Object 类型

对象解构赋值机理：
先看等号左右两边的对象是否有属性相同的，有的话将右边的值赋值给左边属性相同的那个值。

let { firstName, lastName } = { lastName: 'virus', firstName: 'dk' };
// firstName = dk
// lastName = virus
// 上面的代码还可以像下面这么写：
let { firstName: firstName, lastName: lastName } = { lastName: 'virus', firstName: 'dk' };
// 看左边会发现   { firstName: firstName, lastName: lastName }
// 其中第一个 firstName 叫做模式，第二个 firstName 才是变量名，不写变量名时默认与模式名相同
// 手动给变量名
let { firstName: fn, lastName: ln } = { lastName: 'virus', firstName: 'dk' };
// fn = 'dk';
// ln = 'virus'
// 注意，这里的 fn 和 ln 才是变量名，而 firstName 和 lastName 只是模式名，值是赋值给变量名的。

一张图总结对象的解构赋值：

Array 类型
一张图总结数组的解构赋值：


Function 类型

函数的解构赋值只要把下面两段代码看明白即可。

// 参数中等号右边的 {} 是等号左边 {x = 0, y = 0} 的默认值
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: 3, y: 8}) 此时参数为 {x: 3, y: 8} 不为undefined，不会调用 function 参数的默认值 {}，

从而变成了 {x=0, y=0} = {x: 3, y:8}，结果自然是 [3, 8]；

move({x: 3}) 此时参数 {x: 3} 不为 undefined，不会调用 function 参数的默认值 {}，从而变成

了 {x=0, y=0} = {x: 3}，此时 y 值为 undefined，会调用默认值 0，结果自然就是 [3, 0]；

move({}) 此时参数 {} 不为 undefined，不会调用 function 参数的默认值 {}，从而变成

了 {x=0, y=0} = {}，这里 x, y 取值都为 undefined，因此都可以取默认值 0，结果为 [0, 0]；

move() 此时的参数为 undefined，会调用 function 参数的默认值 {}，从而变成了 {x=0, y=0} = {}

,这里 x, y 取值都为 undefined，因此都可以取默认值 0，结果为 [0, 0]。

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]

说明：

move({x: 3, y: 8}) 此时参数为 {x: 3, y: 8} 不为undefined，不会调用 function 参数的默认值 { x: 0,

y: 0 }，从而变成了 {x, y} = {x: 3, y:8}，结果自然是 [3, 8]；

move({x: 3}) 此时参数 {x: 3} 不为 undefined，不会调用 function 参数的默认值 { x: 0,

y: 0 }，从而变成了 {x, y} = {x: 3}，此时 y 值为 undefined，结果自然就是 [3, undefined]；

move({}) 此时参数 {} 不为 undefined，不会调用 function 参数的默认值 { x: 0,

y: 0 }，从而变成了 {x, y} = {}，这里 x, y 取值都为 undefined，结果为 [undefined, undefined]；

move() 此时的参数为 undefined，会调用 function 参数的默认值 {x: 0, y: 0}，从而变成了 {x, y}

= {x: 0, y: 0} ,这里 x, y 取值都为 0，结果为 [0, 0]。

5.简单数据类型的解构原理

String、Number、Boolean

基本数据类型都会先转换为对象，再参照对象的解构赋值进行操作。

let {length} = 'hello';
// length = 5;
let {toString: s} = 123;
// s = Number.prototype.toString;

以字符串为例：

let str = 'hello';
转换为对象后就会是这样的：
let str = {
length: function () {
// ... 求字符串长度
}
}

Null、Undefined

Null 和 Undefined 都没办法转换为对象，因此这两种类型没有解构赋值。

6.小括弧的用处

三、我在什么时候使用变量的解构赋值语法