ES6 解构赋值

概述

解构赋值，是一种对数组或者对象进行赋值的操作；

解构赋值表达式的左边（等于号左边）称为解构目标，右边称为解构源。

数组的解构赋值

基本的

let [a, b, c] = [1, 2, 3];

console.log(a)  // 1
console.log(b)  // 2
console.log(c)  // 3

嵌套

注意，嵌套的时候，解构目标和解构源的数据格式要相同，否则会报错，如：

let [a, [[b], c]] = [1, [2], 3];

正确的写法：

let [a, [[b], c]] = [1, [[2], 3]];
console.log(a)  // 1
console.log(b)  // 2
console.log(c)  // 3

可忽略

如果解构目标和解构源的数据格式相同，但是解构源有值，然后相对应的解构目标的变量为空的时候，会自动忽略；如：

let [a, , b] = [1, 2, 3];
console.log(a)  // 1
console.log(b)  // 3

 不完全解构

解构目标没有对应的解构源，那么解构目标的变量的值就为undefined。如：

let [a, , b] = [, 2, 3];

console.log(a)  // undefined
console.log(b)  // 3

剩余运算符

let [a, ...b] = [1, 2, 3];

console.log(a)  // 1
console.log(b)  // [2. 3]

加了扩展运算符的b，会接收剩余的解构源的值，而且会被转为一个数组

字符串

let [a, b, c, d, e] = "12345";

console.log(a)  // 1
console.log(b)  // 2
console.log(c)  // 3
console.log(d)  // 4
console.log(e)  // 5

对于字符串而言，跟前面的数组也是基本一样，如果解构目标的变量比右边的解构源的值多的话，那么 多出来的变量的值将为undefined

解构默认值

当解构模式匹配不到结果，就会按照默认值输出。

let [a = 2, b = 3] = [];

console.log(a)  // 3
console.log(b)  // 3

 一个有匹配，一个没有匹配，有匹配的按照匹配的值输出，没有匹配的按照默认值输出。

let [a = 2, b = 3] = [1];

console.log(a)  // 1
console.log(b)  // 3

两个都有匹配的，按照匹配的值输出，会忽略默认值。

let [a = 2, b = 3] = [1, 22];

console.log(a)  // 1
console.log(b)  // 22

变量之间可以相互赋值

let [a = 2, b = a, c = a] = [];

console.log(a)  // 2
console.log(b)  // 2
console.log(c)  // 2

因为所有变量都没有匹配到，所以a输出默认值，b和c的默认值指向a，所以会输出3个2。

 

对象模型解构赋值

基本

let {obj, foo} = {obj: 'aa', foo: 'bb'}

console.log(obj)    // aa
console.log(foo)    // bb

嵌套

let obj = {a: ['hello', {y: 'enen'}]}
let {a: [x, { y }]} = obj

console.log(x, y)    // x = hello, y = enen

忽略

let obj = {a: ['enen', {}]}
let {a: [a1, {b}]} = obj

console.log(a1, b)    // a1 = enen; b = undefined

不完全解构

let obj = {a: 'h', b: 'e', c: 'llo', d: 'world'}
let {a, b, c, d, e} = obj

console.log(a, b, c, d, e)

 

剩余运算符

let {a, b, ...c} = {a: "1", b: '2', c: '3', d: '4', e: '5'}
console.log(a, b, c)

 

解构默认值

没有解构源的情况下，还是按照解构目标的默认值输出

let {a = 5, b = 2} = {};
console.log(a, b)    // a = 5,  b = 2

有对应的解构源，就会匹配

let {a = 5, b = 2} = {a:21};
console.log(a, b)    // a = 21, b = 2