解构赋值

解构赋值语法是一种 JavaScript 表达式。可以将数组中的值或对象的属性值取出，赋值给其他变量。

• 传统方式取值赋值

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

• ES6 中，通过解构赋值来获取数组中元素

const arr = [1, 2, 3]
let [a, b, c] = arr // 解构赋值  let [a,b,c]=[1,2,3]
console.log(a, b, c) // 1,2,3

两种解构模式

TIP

对于对象和数组的解构，有两种解构模式：绑定模式和赋值模式，他们的语法略有不同。

绑定模式

在绑定模式中，模式以声明关键字（var、let 或 const）开始。然后按照相应的模式匹配，只要等号两边的模式相同，左边的变量就会被赋予对应的值

// 数组解构赋值，左边相当于声明了两个变量a和c 用来接受右边对应结构位置上的值
const [a, , c] = [1, 2, 3]
console.log(a, c)
// 对象解构赋值的内部机制是：先找对象中与变量名同名的属性名，然后再将对象对应的属性值赋值给到对应变量。
// 以下代码等号左边的x,y为对象属性名， _x 和 _z 才是新声明的变量，
const { x: _x, y: _y } = { x: 1, y: 2 }
console.log(_x, _y)

在绑定模式中，所有变量共享相同的声明，如果希望两个变量分别用 let 和 const 声明，则需要解构两次

// 数组解构赋值，左边相当于声明了两个变量a和c 用来接受右边对应结构位置上的值
const [a, , c] = [1, 2, 3]
console.log(a, c)
// 对象解构赋值的内部机制是：先找对象中与变量名同名的属性名，然后再将对象对应的属性值赋值给到对应变量。
// 以下代码等号左边的x,y为对象属性名， _x 和 _z 才是新声明的变量，
const { x: _x, y: _y } = { x: 1, y: 2 }
console.log(_x, _y)

赋值模式

在赋值模式中，模式不以关键字开头，赋值语句中的变量已提前声明好了。然后按照相应的模式匹配，只要只要等号两边的模式相同，左边的变量就会被赋予对应的值。

// 数组解构赋值
let a,b;
[a,b]=[1,2,3];
console.log(a,b); // 1 2

// 对象解构赋值  ，记得一定要用()将赋值语句包裹起来，否则会报错
let _x, _y;
({ x: _x, y: _y } = { x: 1, y: 2 });
console.log(_x, _y);

// 以下这种情况，如果省略括号前; 相当于执行 x(x:_x)这个函数，所以一定要在()前加上;号
let x
;(x:_x)={x:1,y:2}