Javascript——js中数组、对象的解构

js解构：

所谓解构，就是按照一定模式，从数组和对象中提取值，对变量进行赋值。

1.数组中的解构。

let [a,b,c]=[1,2,3]
[1,2,3] 数组中的值会依次的赋值给a,b,c

如果变量的个数小于数组的元素的个数，无影响。
let [a, b] = [1,2,3]
//a 1 
//b 2 

如果变量的个数大于数组的元素的个数,值为undefined
let [a, b, c, d] = [1,2,3]
//a 1 
//b 2 
//c 3 
//d undefined 

如果说需要取数组的一部分元素,在解构的时候使用,进行占位，用标识符接收我们真正需要的元素。
let [, b] = [1,2,3]
//b  2
let [a,...b] = [1,2,3,4]
//a 1
//b [2, 3, 4]
⚠️注意的是：拓展运算符（也就是…）只能出现在解构语法中的最后。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2.对象中的解构：

• 对象的解构所用的变量要和对象的属性名一样才能拿到相应的值。没有顺序要求

let obj = {a: 1, b: 2};
let {x, y} = obj;//错误🙅的
//x undefined
//y undefined

let {a, b} = obj;//正确的🙆
//a 1
//b 2

在对象的解构中，还能为变量重命名：
let obj = {a: 1, b: 2};
let {a: x, b: y} = obj;
//a 报错
//b 报错
//x 1
//y 2


对象的解构同样能够使用默认值：
let x, y;
({a: x, b: y, d: z = {num: 1}} = {a: 1, b: 2, c: 3});
//x 1
//y 2
//z {num: 1}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

为什么 JS 中存在解构？实际应用

eg：
const names = {
    taylor: '码云笔记',
    shawn: '前端博客',
    zayn: '前端开发',
    halsey: '前端技术',
}
如果让你手动打印所有人名到控制台，你可能会这样写：
console.log(names.taylor)//笔记
console.log(names.shawn)//博客
.....


**使用对象解构简写：**
const names = {
    taylor: '云笔记',
    shawn: '博客',
    zayn: '开发',
    halsey: '技术',
}

const { taylor, shawn, zayn, halsey} = names
console.log(taylor)//云笔记
console.log(shawn)//博客
console.log(zayn)//开发
console.log(halsey)//技术

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

嵌套对象和数组解构

const taylor = {
  name: '空',
  age: 21,
  address: {
      city: 'Hang Zhou',
      country: 'China',
  },
  albums: ['Lover', 'Evermore', 'Red', 'Fearless'],
}

const {
  name,
  age,
  address: { city },
  albums: [lover, ...rest],
} = taylor

console.log(name) // 空
console.log(age) // 21
console.log(city) // Hang Zhou
console.log(lover) // Lover
console.log(rest) // [ 'Evermore', 'Red', 'Fearless' ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22