解构赋值是什么#

认识解构赋值

1
// 下标获取数组
2
const arr = [1, 2, 3];
3
const a = arr[0];
4
const b = arr[1];
5
const c = arr[2];
6
console.log(a);
7
console.log(b);
8
console.log(c);
9
//解构赋值
10
const [a, b, c] = [1, 2, 3];
11
console.log(a, b, c);

什么是解构赋值：解析某一数据结构，将我们想要的的东西提取出来，赋值给变量或

数组解构赋值的原理#

模式（结构）匹配

1
const [a, b, c] = [a,b,c];
2
console.log(a, b, c);

等价于“按位置匹配数组元素”：第 0 位 → a；第 1 位 → b；第 2 位 → c；底层逻辑是：左边是“结构模板”，右边是“数据源”

索引值相同的完成赋值

1
const [a, [, , b], c] = [1, [2, 4, 5], 3];
2
console.log(a, c, b);//1,3,5  不取的，可以直接用逗号跳过

先求值右侧表达式

1
function getArr() {
2
  console.log('getArr 被调用');
3
  return [10, 20, 30];
4
}
5
const [a, b, c] = getArr();
6
console.log(a, b, c);

数组解构赋值的默认值#

数组解构赋值的默认值机制，本质是：当“取到的值是 undefined 时”，才使用默认值，注意：不是 null，也不是“没有值”，而是 严格 === undefined

1
//基本用法
2
const [a = 10, b = 20] = [];
3
console.log(a, b);
4

5
//正常有值时，不使用默认值
6
const [a = 10, b = 20] = [1];
7
console.log(a); // 1
8
console.log(b); // 20
9

10
//只有 undefined 才触发默认值，重点
11
const [a = 10] = [null];
12
console.log(a); // null ❗不是 10
13

14
//位置缺失才会触发默认值
15
const [a = 10, b = 20, c = 30] = [1, undefined];
16
console.log(a); // 1
17
console.log(b); // 20
18
console.log(c); // 30
19

20
//默认值可以是表达式（惰性执行）
21
function getValue() {
22
  console.log("执行了 getValue");
23
  return 99;
24
}
25
const [a = getValue()] = [];
26
console.log(a);
27

28
//默认值不会重复执行（只在需要时执行）
29
const [a = getValue()] = [1];
30
console.log(a);//不会打印 "执行了 getValue"因为a 已经是 1不需要默认值

数组解构赋值的应用#

快速交换变量（最经典）：不用临时变量，本质是用数组打包 → 再解构

1
let a = 1;
2
let b = 2;
3

4
[a, b] = [b, a];
5
console.log(a, b); // 2 1

函数返回多个值：替代“返回对象+手动取属性”

1
function getUser() {
2
  return ["Tom", 18];
3
}
4

5
const [name, age] = getUser();
6
console.log(name); // Tom
7
console.log(age);  // 18

忽略不需要的值：中间用空位跳过

1
const [a, , c] = [1, 2, 3];
2

3
console.log(a); // 1
4
console.log(c); // 3

结合默认值（防 undefined）：常用于接口数据不完整时

1
const [a = 10, b = 20] = [1];
2

3
console.log(a); // 1
4
console.log(b); // 20

拆分函数返回的数组（API常见）：很多“Promise封装库”都这么设计

1
const [data, error] = await fetchData();
2

3
if (error) {
4
  console.log("出错了");
5
} else {
6
  console.log(data);
7
}

处理 split 字符串结果：超高频使用

1
const [year, month, day] = "2026-06-17".split("-");
2

3
console.log(year);  // 2026
4
console.log(month); // 06
5
console.log(day);   // 17

遍历数组时同时取 index / value：配合 entries：

1
const arr = ["a", "b", "c"];
2

3
for (const [index, value] of arr.entries()) {
4
  console.log(index, value);
5
}
6
//输出：
7
//0 a
8
//1 b
9
//2 c

解构 Map Map 天然就是可解构结构

1
const map = new Map([
2
  ["name", "Tom"],
3
  ["age", 18]
4
]);
5

6
for (const [key, value] of map) {
7
  console.log(key, value);
8
}

函数参数解构（非常重要）：直接在参数里解构数组

1
function sum([a, b]) {
2
  return a + b;
3
}
4

5
console.log(sum([3, 5])); // 8

类数组解构

1
function fn() {
2
  const [a, b, c] = arguments;
3
  console.log(a, b, c);
4
}
5
fn(10, 20, 30);

对象解构赋值的原理#

从对象中快速提取属性并赋值给变量。

模式（结构）匹配

1
{}={}

属性名相同的完成赋值

1
const { age, name } = { name: 'Alex', age: 18 };
2
console.log(age, name);

对象解构的本质

对象解构并不是创建新的对象，而是根据属性名从对象中读取对应的值，然后赋值给变量。

1
const { name, age } = user;
2
//本质上等价于
3
const name = user.name;
4
const age = user.age;

属性重命名

如果不想使用同名变量，可以进行重命名：

1
const user = { name: 'Tom', age: 18 };
2
const { name: userName } = user;
3
//等价于
4
// const userName = user.name;
5
console.log(userName); // Tom

对象解构赋值的注意事项#

对象解构赋值的默认值，默认值仅在属性值为 undefined 时生效。

1
/**
2
 * 1. 基本用法：没有对应属性时使用默认值
3
 */
4
const obj1 = {};
5

6
const { a = 10, b = 20 } = obj1;
7

8
console.log('1:', a, b); // 10 20
9

10
/**
11
 * 2. 有值时不使用默认值
12
 */
13
const obj2 = { a: 1 };
14

15
const { a: a2 = 10, b: b2 = 20 } = obj2;
16

17
console.log('2:', a2); // 1
18
console.log('2:', b2); // 20
19

20
/**
21
 * 3. 重点：只有 undefined 才会触发默认值
22
 * null 不会触发默认值
23
 */
24
const obj3 = { a: null };
25

26
const { a: a3 = 10 } = obj3;
27

28
console.log('3:', a3); // null ❗不是 10
29

30
/**
31
 * 4. 属性缺失 / undefined 才会触发默认值
32
 */
33
const obj4 = { a: 1, b: undefined };
34

35
const { a: a4 = 10, b: b4 = 20, c: c4 = 30 } = obj4;
36

37
console.log('4:', a4); // 1
38
console.log('4:', b4); // 20（undefined -> 默认值）
39
console.log('4:', c4); // 30（不存在 -> 默认值）
40

41
/**
42
 * 5. 默认值可以是表达式（惰性执行）
43
 */
44
function getValue() {
45
  console.log('执行了 getValue()');
46
  return 99;
47
}
48

49
const obj5 = {};
50

51
const { a: a5 = getValue() } = obj5;
52

53
console.log('5:', a5); // 会触发 getValue()
54

55
/**
56
 * 6. 默认值不会重复执行（只有需要时才执行）
57
 */
58
const obj6 = { a: 1 };
59

60
const { a: a6 = getValue() } = obj6;
61

62
console.log('6:', a6);
63
// 不会执行 getValue()
64

65
/**
66
 * 7. 属性重命名 + 默认值
67
 */
68
const obj7 = {};
69

70
const { a: x7 = 10 } = obj7;
71

72
console.log('7:', x7); // 10
73

74
/**
75
 * 8. 嵌套对象解构 + 默认值
76
 */
77
const obj8 = {};
78

79
const {profile: { name: name8 = 'Anonymous' } = {} } = obj8;// ⚠️ 防止 profile 是 undefined
80

81
console.log('8:', name8); // Anonymous

将一个已经声明的变量用于解构赋值

1
let b = 1;
2
const { b } = { b: 2 };
3
console.log(b);//报错
4

5
var b = 1;
6
const { b } = { b: 2 };
7
console.log(b);//报错
8

9
let c = 5;
10
[c] = [2, 3, 4];
11
console.log(c);//2 覆盖let c = 5
12

13
const c = 5;
14
[c] = [2, 3, 4];
15
console.log(c);//报错，接口出变量c，c是常量无法更改

可以取到继承的属性

1
const { toString } = {};
2
console.log(toString);

1
const parent = {
2
  a: 10
3
};
4

5
const obj = Object.create(parent);
6

7
obj.b = 20;
8

9
const { a, b } = obj;
10

11
console.log(a); // 10
12
console.log(b); // 20

对象解构：

1
obj
2
 ├── b: 20 (自身属性)
3
 └── [[Prototype]]
4
       └── a: 10 (继承属性)

解构时：b → 在自身找到；a → 在原型链找到

常见错误：

解构 undefined

1
const { name } = undefined;
2
//报错TypeError: Cannot destructure property 'name' of undefined
3
//undefined.name 本身就是非法操作。

解构 null

1
const { name } = null;
2
//TypeError
3
//null.name本身就是非法操作。

解构只“读取”，不复制结构

1
const parent = {
2
  a: 1,
3
};
4

5
const obj = Object.create(parent); //obj = {} 创建一个新对象 obj，并让它的原型指向 parent
6

7
const { a } = obj; //const a = 1
8

9
obj.a = 999;//这是在解构之后赋值的，所以a还是1，如果写在解构之前，a就是999
10

11
console.log(a); // 1 ❗不会变
12
console.log(obj); //999
13
console.log(parent.a); //1

对象解构与数组解构的区别

特性	对象解构	数组解构
匹配方式	按属性名匹配	按位置匹配
是否依赖顺序	否	是
底层原理	属性读取	迭代器读取
典型写法	`{ name }`	`[first]`

对象解构赋值的应用#

1
//函数参数的解构赋值
2
const logPersonInfo = ({ username, age }) => console.log(username, age);
3

4
logPersonInfo({ username: 'alex', age: 18 });
5

6
//复杂嵌套 模式匹配-跳过的用逗号
7
const obj = {
8
  x: 1,
9
  y: [3, 4, 5],
10
  z: {
11
    a: 5,
12
    b: 6,
13
  },
14
};
15
// const { x, y, z } = obj;
16
// console.log(x, y, z);
17
const {
18
  x,
19
  y: [, b, c], //这个一定要写对属性名，根据属性名匹配
20
  y: y, //第一个y是属性值，第二个y是常量
21
  y, //简写
22
} = obj;
23
console.log(b, y);

其它数据类型的解构赋值#

字符串解构赋值：

1
//字符串解构赋值，可以数组解构也可以是对象
2
const [a, b, c, , d] = 'hello';
3
console.log(a, b, c, d);
4

5
const { 0: e, 1: f, length } = 'hello';
6
console.log(e, f, length);

数值和布尔值

1
// 数值和布尔值的解构赋值-没有意义-只能拿到的是方法，不是数字的“结构内容”。
2
// 先将右边的值转为对象
3
const { toString } = 123; //等价于：const { toString }new Number(123);
4
console.log(toString);
5
// 布尔值也一样
6
const flag = true;
7
const { toString, valueOf } = flag;
8
console.log(toString); // function toString()

undefined和null

这两个没法解构赋值，直接报错

音乐

音乐

解构赋值是什么#

数组解构赋值的原理#

数组解构赋值的默认值#

数组解构赋值的应用#

对象解构赋值的原理#

对象解构赋值的注意事项#

对象解构赋值的应用#

其它数据类型的解构赋值#

文章分享

评论区

音乐

ES6解构赋值

解构赋值是什么#

数组解构赋值的原理#

数组解构赋值的默认值#

数组解构赋值的应用#

对象解构赋值的原理#

对象解构赋值的注意事项#

对象解构赋值的应用#

其它数据类型的解构赋值#

文章分享

评论区