重温ES6之解构

---

---

前话

• 解构是一种赋值语法，可以从数组中提取元素或从对象中提取属性，将其赋给对应的变量或另一个对象的属性
• 两种解构语法：
  • 1.数组解构
  • 2.对象解构

解构语法初体验

// 未使用解构
let arr = [1, 2],
    obj = {
        a: 3,
        b: 4
    },
    x, y, a, b

x = arr[0]
y = arr[1]
a = obj.a
b = obj.b


let [d, f] = [1, 2]  // 数组解构
let {g, h} = {g: 10,h: 20}  // 对象解构

数组解构和对象解构的通用特性

带关键字时需要初始化

• 下面是两种不正确的写法

// let [x, y];
// let {a, b};

对象解构时，不带关键字，则必须用圆括号包裹

[x, y] = [1, 2];
console.log(x, y);  // 1 2 

({a, b} = {a:10, b:20})
console.log(a,b)  // 10 20

解构时没有一一匹配

• 如果解构时没有一一匹配到，那么就会被赋为undefined

[c, d] = [1];
({e, f} = {e: 3});
console.log(d)   // undefined
console.log(f)   // undefined

数组解构详解

利用数组解构交换变量

[x, y] = [1, 2]
console.log(x, y);
[y, x] = [1, 2];
console.log(x, y)

var obj = {};
[obj.a, obj.b] = [1, 2];
console.log(obj.a, obj.b); // 1 2  

[obj.b, obj.a] = [1, 2]
console.log(obj.a, obj.b) // 2 1

数组解构中有选择性的赋值

• 如下，只对数组中的第三个元素提供变量名，前两个用逗号占位

[, , z] = [1, 2, 3]
console.log(z)  // 3

解构赋值表达式的右侧必须是可迭代的对象

• 下面是错误的写法

[x, y] = NaN;
[x, y] = undefined;
[x, y] = null;

// NaN，undefined，null is not iterable (cannot read property Symbol(Symbol.iterator))

扩展运算符放在表达式的左侧

[x, ...y] = [1, 2, 3]
console.log(x)  // 1
console.log(y)  // [ 2, 3 ]

• 在上面的代码中，…y称为剩余元素，右侧数组的第一个元素赋给了x变量，剩下的两个元素被收集起来赋给了y数组
• 注意：剩余元素必须是数组的最后一个元素

对象解构详解

对象解构初体验

({a, b} = {b:1, a:2});
// 上面的代码相当于下面的
({a:a, b:b} = {b:1,a:2})

对象解构的原理

• 1.先找到同名属性
• 2.然后把各自的属性值对应起来

对象解构时使用别名

({a:e, b:f} = {b:5, a:6});
console.log(e, f)  // 6 5 

let obj = {e, f};
({a:obj.e, b:obj.f} = {a:10,b:20});
console.log(obj.e,obj.f)  // 10 20

对象解构出现多个同名属性*

({a:e, a:f} = {b:5, a:6});
console.log(e, f)  // 6 6 

对象字面量的属性名用表达式定义（即属性名可计算）

var obj = {
        preName: 'strick'
    },
    attr = 'Name';
({['pre'+attr]:value} = obj)

console.log(value)  // "strick"

数组解构含默认值

• 如果数组解构并且指定位置的元素不存在或其值不存在，那么就会使用默认值
• 判断元素的值是否存在，只要与undefined做全等（===）比较，当结果为真，表示值不存在

[x, y = 2] = [1]
console.log(y)  // 2

[x, y = 2] = [1, undefined]
console.log(y)  // 2

[x, y] = [1, null]
console.log(y)  // null

对象解构含默认值

• 判断属性或属性值是否存在，也是要与 undefined 进行全等比较

({a, b=2 } = {a:1});
console.log(b)  // 2
console.log(a)  // 1

({a, b=2} = {a:1, b:undefined})
console.log(a)  // 1
console.log(b)  // 2

({a, b=2} = {a:1, b:null});
console.log(a)
console.log(2)

对象解构中为别名变量提供默认值

({a, b:digit=2} = {a:1});
console.log(digit);  // 2

嵌套解构

[x, [y], z] = [1, [2, 3], 4];
console.log(y); // 输出：2，说明并没有把内嵌数组赋值给y变量

({a:{b:digit}} = {a:{b:1}});
console.log(digit);  // 1

对象和数组的混合解构

({a:[b]} = {a:[1]});
console.log(b)  // 1

参数解构

函数的参数是一个对象

function func({name,age}){
    console.log(name)  // zsy
    console.log(age)  // 21
}

func({name:'zsy', age: 21})

• 注意：如果参数解构的目标是对象，那么调用函数必须传递对象
• 下面的代码会抛出异常

function func({name,age}){
    console.log(name)  
    console.log(age) 
}

func()

函数的参数是一个数组

• 下述代码也是使用剩余参数来实现相同效果的参数解构

function func(...[name, age]) {
    console.log(name) // 'zsy'
    console.log(age) // 21
}
func('zsy', 21)

解构默认值和参数默认的对比

function func5({name = 'zsy'} = {}){    // 解构默认值
    console.log(name)
}

function func6({name} = {name:'freedom'}){   // 参数默认值
    console.log(name)
}

func5()  // 'zsy'
func6()  // 'freedom'
func5(undefined)  // 'zsy'
func6(undefined) // 'freedom'
func5({})  // 'zsy'
func6({})  // undefined