跳至主要內容

解构赋值

2025/8/24大约 7 分钟

解构赋值

解构赋值（Destructuring Assignment）是ES6引入的一种革命性赋值语法，它允许我们从数组或对象中提取值，并直接赋给变量，使代码更加简洁、清晰。通过解构赋值，我们可以告别繁琐的索引访问和属性访问，以更声明式的方式处理数据。

基本语法

解构赋值的核心思想是"模式匹配"：使用与数据源结构相匹配的模式来提取值。

  • 对于数组，使用方括号[]包裹变量名
  • 对于对象，使用花括号{}包裹变量名
  • 变量名的位置或名称应与数据源中的对应位置或属性名匹配

数组解构

基本用法

// 传统方式
const numbers = [1, 2, 3];
const a = numbers[0];
const b = numbers[1];
const c = numbers[2];

// 解构赋值 - 简洁优雅
const [a, b, c] = numbers;
console.log(a, b, c); // 1 2 3

跳过元素

可以通过空位置跳过不需要的元素，非常适合提取数组中间的特定元素：

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

// 跳过多个元素
const [first, , , fourth] = [1, 2, 3, 4, 5];
console.log(first, fourth); // 1 4

剩余元素

使用...语法可以捕获数组中的剩余元素，创建一个新数组：

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

// 注意：剩余元素必须是最后一个元素
const [...rest, last] = [1, 2, 3]; // 语法错误

默认值

可以为解构的变量设置默认值，当数组中对应位置的元素不存在或为undefined时，将使用默认值：

// 单个元素有值，其他使用默认值
const [a = 10, b = 20] = [5];
console.log(a, b); // 5 20

// 所有元素都使用默认值
const [x = 100, y = 200] = [];
console.log(x, y); // 100 200

// 默认值可以是表达式
const [z = getDefaultValue()] = [];
function getDefaultValue() {
  return 300;
}
console.log(z); // 300

对象解构

基本用法

// 传统方式
const person = { name: 'John', age: 30 };
const name = person.name;
const age = person.age;

// 解构赋值
const { name, age } = person;
console.log(name, age); // John 30

重命名变量

当变量名与对象属性名不一致时，可以使用:重命名变量：

const { name: fullName, age } = person;
console.log(fullName, age); // John 30

// 重命名并设置默认值
const { name: userName = 'Anonymous' } = { name: 'John' };
console.log(userName); // John

默认值

对象解构也可以设置默认值，当对象中没有对应的属性或属性值为undefined时生效：

const { name, age = 25 } = { name: 'John' };
console.log(name, age); // John 25

// 复杂默认值
const { config = { timeout: 3000, retries: 3 } } = {};
console.log(config.timeout); // 3000

剩余属性

使用...语法可以捕获对象中的剩余属性，创建一个新对象：

const { name, ...rest } = { name: 'John', age: 30, city: 'New York' };
console.log(name); // John
console.log(rest); // { age: 30, city: 'New York' }

计算属性名

可以使用表达式作为属性名进行解构，这在处理动态属性时非常有用：

const prop = 'name';
const { [prop]: value } = { name: 'John' };
console.log(value); // John

// 结合模板字符串
const prefix = 'user_';
const { [prefix + 'id']: userId } = { user_id: 123 };
console.log(userId); // 123

嵌套解构

解构赋值可以嵌套使用，轻松处理复杂的嵌套结构：

嵌套数组

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

// 更复杂的嵌套
const complexArray = [1, [2, [3, 4], 5], 6];
const [x, [y, [z, w], v], u] = complexArray;
console.log(x, y, z, w, v, u); // 1 2 3 4 5 6

嵌套对象

const nestedObject = {
  name: 'John',
  address: {
    city: 'New York',
    zip: '10001',
    coordinates: {
      lat: 40.7128,
      lng: -74.0060
    }
  }
};

// 多层解构
const { name, address: { city, zip, coordinates: { lat, lng } } } = nestedObject;
console.log(name, city, zip, lat, lng); // John New York 10001 40.7128 -74.0060

应用场景

1. 函数参数解构

解构赋值可以极大简化函数参数的处理，特别是当函数接收一个配置对象时：

// 传统方式
function greet(person) {
  const name = person.name;
  const age = person.age;
  console.log(`Hello, ${name}, you are ${age} years old.`);
}

// 使用解构赋值 - 更清晰
function greet({ name, age }) {
  console.log(`Hello, ${name}, you are ${age} years old.`);
}

greet({ name: 'John', age: 30 }); // Hello, John, you are 30 years old.

// 设置默认值
function greet({ name = 'Guest', age = 25 } = {}) {
  console.log(`Hello, ${name}, you are ${age} years old.`);
}

greet(); // Hello, Guest, you are 25 years old.

2. 交换变量值

不需要临时变量即可优雅地交换变量值：

let a = 10;
let b = 20;

// 传统方式需要临时变量
let temp = a;
a = b;
b = temp;

// 解构赋值方式 - 更简洁
[a, b] = [b, a];
console.log(a, b); // 20 10

3. 从函数返回多个值

函数只能返回一个值，但通过返回数组或对象，结合解构赋值可以模拟返回多个值：

function calculate(a, b) {
  return {
    sum: a + b,
    difference: a - b,
    product: a * b,
    quotient: a / b
  };
}

// 数组形式返回
const { sum, difference, product, quotient } = calculate(10, 5);
console.log(sum, difference, product, quotient); // 15 5 50 2

4. 处理API响应

API响应通常是复杂的嵌套结构，解构赋值可以轻松提取所需数据：

// 假设API返回的响应
const response = {
  data: {
    users: [
      { id: 1, name: 'John', email: 'john@example.com' },
      { id: 2, name: 'Jane', email: 'jane@example.com' }
    ],
    pagination: {
      total: 2,
      page: 1,
      perPage: 10
    }
  },
  status: 200,
  headers: {
    'content-type': 'application/json',
    'x-rate-limit': '100/hour'
  }
};

// 提取所需数据
const {
  data: {
    users,
    pagination: { total, page }
  },
  status,
  headers: { 'x-rate-limit': rateLimit }
} = response;

console.log(users); // 用户数组
console.log(`Total: ${total}, Page: ${page}`); // Total: 2, Page: 1
console.log(`Status: ${status}`); // Status: 200
console.log(`Rate Limit: ${rateLimit}`); // Rate Limit: 100/hour

5. 模块导入

在导入模块时，解构赋值可以只导入需要的部分：

// 假设utils.js导出多个函数
// export const add = (a, b) => a + b;
// export const subtract = (a, b) => a - b;
// export const multiply = (a, b) => a * b;

// 只导入需要的函数
import { add, multiply } from './utils.js';

console.log(add(2, 3)); // 5
console.log(multiply(2, 3)); // 6

注意事项

1. 变量声明

在使用const、let或var声明变量时，解构赋值的语法必须正确：

// 正确
const [a, b] = [1, 2];
let { name, age } = person;
var [x, y] = [3, 4];

// 错误（缺少声明关键字）
[a, b] = [1, 2]; // 这在严格模式下会报错

// 正确（在非严格模式下，可以省略声明关键字，但不推荐）
let a, b;
[a, b] = [1, 2];

2. 对象解构的顺序

对象解构时，变量名必须与对象的属性名匹配，而不关心顺序：

const { age, name } = { name: 'John', age: 30 };
console.log(name, age); // John 30

3. 括号的使用

在赋值语句中使用对象解构时，需要用括号包裹，以避免被解析为代码块：

// 正确
let name, age;
({ name, age } = { name: 'John', age: 30 });

// 错误
{ name, age } = { name: 'John', age: 30 }; // 会被解析为代码块

4. 解构 undefined 或 null

如果尝试解构undefined或null，会抛出错误：

const [a] = undefined; // 抛出 TypeError: Cannot destructure property '0' of 'undefined' as it is undefined.
const { b } = null; // 抛出 TypeError: Cannot destructure property 'b' of 'null' as it is null.

5. 解构后的变量修改

解构赋值只是创建变量引用，修改解构后的变量不会影响原始数据：

const person = { name: 'John', age: 30 };
const { name } = person;
name = 'Jane'; // 错误，const变量不能重新赋值

let { age } = person;
age = 31; // 正确，但不会改变person.age
console.log(person.age); // 30

常见误区

1. 混淆数组解构和对象解构

数组解构使用[]，按位置匹配；对象解构使用{}，按属性名匹配：

const arr = [1, 2];
const { 0: first, 1: second } = arr; // 这是对象解构，通过索引作为属性名
console.log(first, second); // 1 2

const obj = { 0: 'a', 1: 'b' };
const [x, y] = obj; // 这会得到undefined，因为obj不是数组

2. 忽略默认值的生效条件

默认值只有在对应位置的元素不存在或为undefined时才会生效，null、0、''等 falsy 值不会触发默认值：

const [a = 10] = [null];
console.log(a); // null，而不是10

const { b = 20 } = { b: 0 };
console.log(b); // 0，而不是20

总结

解构赋值是ES6引入的一个非常强大且实用的特性，它彻底改变了我们处理数组和对象的方式：

  1. 简洁性：大幅减少了提取数据所需的代码量
  2. 可读性：以声明式的方式清晰表达数据提取意图
  3. 灵活性：支持复杂的嵌套结构、默认值、重命名等高级用法
  4. 多功能：可应用于函数参数、变量交换、API响应处理等多种场景

在现代JavaScript开发中，解构赋值已经成为必备技能。掌握解构赋值不仅能提高代码质量，还能显著提升开发效率。无论是处理简单的数据结构还是复杂的API响应，解构赋值都能让你的代码更加优雅、简洁。

默认页脚