ES6 — 解构赋值

1、概述

解构赋值是对赋值运算符的扩展。

他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

结构赋值由两部分构成：解构的源，解构赋值表达式的右边部分。解构的目标，解构赋值表达式的左边部分。

2、数组解构

//基本：
let [a,b,c] = [1,2,3];
consloe.log(a);//1
consloe.log(b);//2
consloe.log(c);//3

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

//剩余运算符
let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]

　　

3、对象模型的解构

基本：

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

　　

可嵌套可忽略：

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'

　　

剩余运算符：

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

　　

4、函数解构

 function sum({sum = 10, num}) {
      return sum + num;
}
 let newObj = sum({num: 20});
 console.log(newObj);

　　在微信小程序中经常用到类似的解构函数。