JavaScript 解构赋值

zzginfo2026-04-06 13:57

什么是解构赋值？

解构赋值是一种 JavaScript 表达式，允许我们从数组或对象中提取数据，并赋值给不同的变量。解构赋值是 ES6 的强大特性，可以简化代码。

数组解构示例：

javascript 复制代码

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

// 只解构部分元素
const [first, second] = [10, 20, 30, 40];
console.log(first, second); // 10 20

// 跳过某些元素
const [x, , z] = [1, 2, 3];
console.log(x, z); // 1 3

// 设置默认值
const [p = 5, q = 10] = [1];
console.log(p, q); // 1 10（q使用默认值）

// 剩余元素
const [head, ...tail] = [1, 2, 3, 4, 5];
console.log(head); // 1
console.log(tail); // [2, 3, 4, 5]

// 变量交换（经典用法）
let m = 1, n = 2;
[m, n] = [n, m];
console.log(m, n); // 2 1

对象解构示例

javascript 复制代码

// 数组解构（按位置）
const [a, b] = [1, 2];           // a=1, b=2

// 对象解构（按键名）
const {name, age} = {name: '小明', age: 20};  // name='小明', age=20

嵌套解构

javascript 复制代码

// 嵌套数组
const [first, [second, third]] = [1, [2, 3]];
console.log(first, second, third); // 1 2 3

// 在函数参数中
function getUser([id, {name, age}]) {
  console.log(`ID: ${id}, 姓名: ${name}, 年龄: ${age}`);
}

getUser([1001, {name: '小明', age: 20}]);
// 输出: ID: 1001, 姓名: 小明, 年龄: 20

实际运用场景

如：一个函数返回多个值：

javascript 复制代码

// 函数返回多个值
function getMinMax(numbers) {
  return [Math.min(...numbers), Math.max(...numbers)];
}

// 使用解构接收
const [min, max] = getMinMax([5, 2, 8, 1, 9]);
console.log(`最小值: ${min}, 最大值: ${max}`);

解构赋值其实仅仅是个语法糖。它并没有为 JavaScript 添加新功能，只是提供了一种更简洁、更直观的语法来实现已有的功能。