JavaScript 解构赋值详解

什么是解构赋值？

解构赋值（Destructuring Assignment）是 ES6 引入的语法特性，允许通过模式匹配的方式从数组或对象中提取值，并赋值给对应的变量。可以显著简化从数据结构中获取值的操作。

这是一个带脚注的文本¹

• 已完成任务
• 未完成任务

print("Hello World")

高亮需用HTML：高亮文本

基础用法

// 基础用法
const colors = ['红', '绿', '蓝'];
const [firstColor, secondColor] = colors;
console.log(firstColor);  // 输出：红
console.log(secondColor); // 输出：绿

// 跳过元素
const [,, thirdColor] = colors;
console.log(thirdColor);  // 输出：蓝

// 默认值
const [a = 10, b = 20] = [1];
console.log(a, b); // 输出：1 20

// 交换变量
let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 输出：2 1

对象解构

const user = {
  name: '李华',
  age: 25,
  address: {
    city: '北京',
    postcode: '100000'
  }
};

// 基础解构
const { name, age } = user;
console.log(name, age); // 输出：李华 25

// 别名解构
const { name: userName } = user;
console.log(userName); // 输出：李华

// 嵌套解构
const { address: { city } } = user;
console.log(city); // 输出：北京

// 默认值
const { gender = '男' } = user;
console.log(gender); // 输出：男

高级用法

函数参数解构

// 对象参数解构
function printUser({name, age = 18}) {
  console.log(`${name}今年${age}岁`);
}
printUser(user); // 输出：李华今年25岁
printUser({name: '王芳'}); // 输出：王芳今年18岁

// 数组参数解构
function getFirst([firstItem]) {
  return firstItem;
}
console.log(getFirst(colors)); // 输出：红

混合解构

const data = {
  results: [
    { id: 1, value: 'A' },
    { id: 2, value: 'B' }
  ]
};

const {
  results: [
    { value: firstValue },
    { value: secondValue }
  ]
} = data;

console.log(firstValue, secondValue); // 输出：A B

使用注意事项

1. 变量声明：解构赋值需要配合 let/const/var 使用
2. 已声明变量：对已存在的变量解构时需要加括号

let a, b;
({a, b} = {a: 1, b: 2});

3. 模式匹配：解构的左右两侧结构要保持一致
4. 默认值生效条件：只有当对应值为 undefined 时默认值才会生效

典型应用场景

• 处理 API 返回的 JSON 数据
• 交换变量值
• 导入模块特定方法
• 函数返回多个值

function getCoords() {
  return [12.34, 56.78];
}
const [lng, lat] = getCoords();