[ES6]解构与赋值

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

通过解构，可以更加简单的获取复杂对象的属性

解构模型

解构的源，解构赋值表达式的右边部分
解构的目标，解构赋值表达式的左边部分

对象属性解构

当变量名称与对象中的属性名称一致时，可简写

const PI = Math.PI;
const E = Math.E;

//等价于

const { PI, E } = Math;

函数参数解构

//解构
// const PI = Math.PI;
// const E = Math.E;

const { PI, E } = Math;

const circle = {
  label: "circleX",
  radius: 2
};

//设置参数默认值 {precision=2}，={}表示参数可选,设置其他参数值 {precision:4}
const circleArea = ({ radius }, { precision = 2 } = {}) => (PI * radius * radius).toFixed(precision);

console.log(circleArea(circle, { precision: 4 }));

{attr}使用解构方式获取对象参数中的对应属性,这样在函数内部就可以直接使用该属性变量 attr，而不是通过对象再去获取对应的属性 obj.attr 的方式去使用该属性值

{attr=value}使用该方式设置解构参数的默认值

{radius}对 circle 对象进行解构，获取当前函数所需属性

字符串的解构

let [a, b, c, d, e] = "hello";
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'

数组解构

如果不需要当前位置解构，对应的位置置空，但是必须用逗号隔开

const [one, two, , , five] = [1, 2, 3, 4, 5];
console.log(one); //1
console.log(two); //2
console.log(five); //5

REST 运算符参与的解构–…

数组解构

const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); //1
console.log(rest); //[2,3,4,5]

构建新的数组

const array1 = [...rest];
console.log(array1); //[2,3,4,5]

array1 是 rest 副本，浅拷贝

属性解构

解构

const { temp0, temp1, ...person } = obj;
console.log(temp0);
console.log(person);

构建新的对象键值对

const newObj = {
  ...person
};

newObj 是 person 副本，浅拷贝

解构的赋值

解构的过程中：

如果左边的变量在右边存在匹配值，则解构后值为匹配值；

let [a] = [3]; // a = 3

如果左边的变量设置了默认值，并且在右边存在匹配值，则解构后值为匹配值；

let [a = 2] = [3]; // a = 3

如果左边的变量在右边不存在匹配值，则解构后值为 undefined；

let [a] = []; //a=undefined
let [a] = [undefined]; //a=undefined

如果左边的变量设置了默认值，并且在右边不存在匹配值，则解构后值为默认值；

let [a = 2] = []; // a = 2
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