ES6中 变量的解构赋值

1、数组的解构赋值

1.1、同时赋值多个变量
以前

let a = 1;
let b = 2;
let c = 3;
let d = 4;

运用es6

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

1.2、解构嵌套数组
只要等号两边的层级结构相同，就可以拿到对应位置的值

const ary = [1,2,[3,4,5,[6,7]]];
const  [a,b,[c,d,e,[f,g]]] = ary
console.log(a,b,c,d,e,f,g)  // 1 2 3 4 5 6 7

1.3、相同模式的不完全解构
当我们模式相同但是变量不完全相同时，会怎样输出呢？

let [a,b,c] = [1,2,3,4]  //1 2 3
let [a,b,c,d] = [1,2,3]  //1,2,3,undefined
let [a,b,[c,d,e,[f,g]]] = [1,2,[3,4,5,[6,7,8]]]  //1,2,3,4,5,6,7

let [ , , c] = [1,2,3]  // 3

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

let [a,...b] = [1,2,3,4]  // 1  [2,3,4]

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

1.4、解构的默认值

解构赋值允许指定默认值

let [foo = true] = []
foo  // true
let [x,y = 'b'] = ['a']  //x='a' y = 'b'
let [x,y = 'b'] = ['a',undefined]  //x='a' y = 'b'

默认值可以引用解构赋值的其他变量，但该变量必须已经声明

let [x = 1,y = x] = []  //x = 1 y = 1
let [x = 1,y = x] = [2]  //x = 1 y = 2
let [x = 1,y = x] = [1,2]  //x = 1 y = 2
let [x = y, y = 1] = []  //  ReferenceError: y is not defined

2、对象的解构赋值

对象的解构与数组有一个重要的不同点，既 数组元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确值

let {a,b} = {a:1 , b:2}
a  //1
b  //2

let {a} ={b:2,c:3}
a  //undefined

如果变量解构失败,变量的值为 undefined

如果变量名与属性名不一致，必须写成这样

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

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

也就是说，对象的解构赋值的内部机制，是先找到同名属性，再赋给对应的变量，被赋值的是后者，而不是前者

let { a: b} = { a: 'aaa', b: 'bbb' };
a  // error: a is not defined
b  // 'bbb'

2.2、解构嵌套对象

与数组一样，解构也可以用于嵌套结构的对象

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

注：此时 p 是模式，不是变量，因此不会被赋值

2.3、默认值

对象的解构也可以指定默认值

let {x = 3} = {}
x  // 3

let {x,y = 5} = {x: 1}
x  // 1
y  //5

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
x  // error:x is not defined
y // 5

var {x = 3} = {x: null};
x // null  ->属性x 等于 null，因为 null 与 undefined 不严格相等，所以是一个有效的赋值，导致属性 3 没有生效

注意点

（1）、 如果需要将一个已经声明的变量用于解构赋值，必须注意几点

//错误写法
let x;
{x} = {x:1}
//报错

上面代码之所以会报错，是因为JavaScript引擎会将{x} 理解成一个代码块，从而发生语法错误。
只有不把大括号放在句首，避免JavaScript将其理解成代码块，才能解决这个问题

//正确的写法
let x;
({x} = {x:1})

（2）、解构赋值允许等号左边的模式中，不放置任何变量名

({} = [1,2])
({} = [])

上诉代码虽然毫无意义，但是语法是合法的，可以执行

（3）、由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

数组arr的0键对应的值是1，[arr.length - 1]就是2键，对应的值是3。方括号这种写法，属于“属性名表达式”

3、字符串的解构赋值

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

字符串也可以解构赋值，因为此时，字符串被转换成了一个类似数组的对象

let {a:b} = 'hello'
b  // 'hello'

4、数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

上诉代码，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。

解构赋值的规则是，只要等号右边的值不是对象或者数组，就会先转换为对象，由于 undefined 和 null 无法转换为对象，所以将它们进行解构赋值，就会报错

let {prop:x} = undefined
let {prop:y} = null

5、函数参数的解构赋值

函数的参数也可以进行解构赋值

[[1,2],[3,4]].map(([a,b])=>a+b)
//  [3,7]

原文链接:https://blog.csdn.net/qq_45494634/article/details/114656383