当前位置：首页 > news >正文

【JS 解构赋值】

news 2025/7/10 23:21:18

JS 解构赋值是 ES6 中一种简洁、高效的赋值方式，它可以将数组和对象中的值拆分出来并赋值给变量。

解构赋值

- 解构数组
- 解构对象
- 嵌套解构
- 结语

解构数组

解构数组时，需要使用方括号 [] 包围变量名，并用逗号 , 将变量名隔开。

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

我们还可以通过解构来交换变量值。

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

如果数组中元素不够用来解构，未赋值的变量会被赋值为 undefined。

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

我们可以通过给变量指定默认值来避免变量值为 undefined。

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

也可以使用 ... 运算符将剩余的数组元素赋值给一个数组。（...展开运算符）

let [a, ...rest] = [1, 2, 3, 4];
console.log(a); // 1
console.log(rest); // [2, 3, 4]

解构对象

解构对象时，需要使用花括号 {} 包围变量名，并使用冒号 : 将变量名与对象属性名对应。

let {name, age} = {name: "Tom", age: 18};
console.log(name); // Tom
console.log(age); // 18

如果对象中没有对应的属性，未赋值的变量会被赋值为 undefined。

let {name, age, gender} = {name: "Tom", age: 18};
console.log(name, age, gender); // Tom, 18, undefined

我们也可以通过给变量指定默认值来避免变量为 undefined。

let {name = "Tom", age = 18, gender = "male"} = {name: "Jerry", age: 20};
console.log(name, age, gender); // Jerry, 20, male

还可以使用别名给变量指定不同的名字。

let {name: n, age: a} = {name: "Tom", age: 18};
console.log(n, a); // Tom, 18

嵌套解构

我们还可以使用嵌套解构来解构数组和对象中的属性。

let {name, age, hobby: [h1, h2]} = {name: "Tom", age: 18, hobby: ["reading", "running"]};
console.log(name, age, h1, h2); // Tom, 18, reading, running

注意，如果要解构对象中的属性，需要将对象用括号 ( ) 包围。

let obj = {name: "Tom", age: 18, hobby: ["reading", "running"]};
let {name, age, hobby: [h1, h2]} = obj;
console.log(name, age, h1, h2); // Tom, 18, reading, running

解构数组中的元素也可以是对象。

let [{name, age}, {hobby}] = [{name: "Tom", age: 18}, {hobby: ["reading", "running"]}];
console.log(name, age, hobby); // Tom, 18, ["reading", "running"]