ES6解构赋值——数组解构与对象解构

ES6解构赋值——数组解构与对象解构

1.数组解构

1.1 基本方法

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

1.2 可嵌套

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

1.3 可忽略

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

1.4 不完全解构

let [a = 1, b] = [];
// a = 1, b = undefined

1.5 剩余运算符

let [a,...b] = [1,2,3];
// a = 1, b = [2,3]
// 字符串等，在数组的解构中，解构的目录若为可遍历对象，皆可进行解构赋值：
let [c,d,e,f,g] = ‘hello’;
// c = ‘h’
// d = ‘e’
// e = ‘l’
// f = ‘l’
// g = ‘o’

1.6 解构默认值

let [a = 2] = [undefined];
// a = 2
// 当解构模式有匹配结果，且匹配结果是undefined时，会触发默认值作为返回结果
let [ a = 3, b = a ] = []; // a = 3, b = 3
let [ a = 3, b = a ] = [1]; // a = 1, b = 1
let [ a = 3, b = a ] = [1, 2]; // a = 1, b = 2
// a与b匹配结果为undefined，触发默认值：a=3;b=a=3
// a正常解构赋值，匹配结果: a = 1; b匹配结果undefined，触发默认值：b=a=1
// a与b正常解构赋值，匹配结果：a=1,b=2

2.对象解构

2.1 基本

let { a, b} = { a: 'aaa', b: 'bbb' };
// a='aaa', b='bbb'
let { c: d} = { c: 'ddd' }
// d='ddd'

2.2 可嵌套可忽略

let obj = { a: ['hello', { b: 'world'}] };
let { a: [x, {b}]} = obj;
// x='hello',b='world'
let { a1: [{ b }, x ]} = obj;
// x='hello'

2.3 不完全解构

let obj = { a:[{y: 'world'}]};
let { a: [{y}, x]} = obj;
// x=undefined, y='world'

2.4 剩余运算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10, b = 20, rest = {c: 30, d: 40}

2.5 解构默认值

let {a = 10, b = 5} = {a: 3}
// a = 3; b = 5
let {a: aa = 10, b: bb = 5} = {a: 3}
// aa = 3; bb = 5;