Node.js 解构赋值快速入门

什么是解构赋值

解构赋值允许我们从数组或对象中快速提取值并赋给变量。

对比一下：

javascript 复制代码

// 传统写法
const name = user.name;
const age = user.age;

// 解构写法
const { name, age } = user;

数组解构

javascript 复制代码

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

// 跳过元素
const [first, , third] = [1, 2, 3];
console.log(first, third); // 1 3

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

// 交换变量
let m = 1, n = 2;
[m, n] = [n, m];
console.log(m, n); // 2 1

对象解构

javascript 复制代码

const user = {
  name: 'Alice',
  age: 25,
  email: 'alice@example.com'
};

// 基本解构
const { name, age } = user;
console.log(name, age); // 'Alice' 25

// 重命名
const { name: userName, age: userAge } = user;
console.log(userName, userAge); // 'Alice' 25

// 默认值
const { name, role = 'user' } = user;
console.log(role); // 'user'

// 嵌套解构
const data = {
  user: {
    profile: {
      avatar: 'avatar.jpg'
    }
  }
};
const { user: { profile: { avatar } } } = data;
console.log(avatar); // 'avatar.jpg'

// 剩余属性
const { name, ...others } = user;
console.log(others); // { age: 25, email: 'alice@example.com' }

函数参数解构

javascript 复制代码

// 对象参数解构
function createUser({ name, age, email = 'default@example.com' }) {
  console.log(name, age, email);
}

createUser({
  name: 'Alice',
  age: 25
});
// 'Alice' 25 'default@example.com'

// 数组参数解构
function sum([a, b, c]) {
  return a + b + c;
}

sum([1, 2, 3]); // 6

实际应用场景

1. API 响应处理

javascript 复制代码

const response = {
  data: {
    user: { id: 1, name: 'Alice' },
    posts: [{ id: 1, title: 'Hello' }]
  }
};

const { data: { user, posts } } = response;
console.log(user.name); // 'Alice'

2. 模块导入

javascript 复制代码

// 按需导入
import { useState, useEffect } from 'react';

// 或者
const { add, subtract } = require('./math');

3. Express 路由

javascript 复制代码

app.get('/api/posts', (req, res) => {
  const { page = 1, limit = 10 } = req.query;
  // 处理逻辑...
});

4. 数组方法

javascript 复制代码

const users = [
  { id: 1, name: 'Alice', score: 95 },
  { id: 2, name: 'Bob', score: 87 }
];

// map 中解构
const names = users.map(({ name }) => name);
// ['Alice', 'Bob']

// filter 中解构
const passed = users.filter(({ score }) => score >= 90);
// [{ id: 1, name: 'Alice', score: 95 }]

常见技巧

对象合并与克隆

javascript 复制代码

const defaults = { theme: 'light', lang: 'en' };
const settings = { theme: 'dark' };

// 合并对象
const final = { ...defaults, ...settings };
console.log(final); // { theme: 'dark', lang: 'en' }

// 排除某些属性
const user = { name: 'Alice', age: 25, password: 'secret' };
const { password, ...safeUser } = user;
console.log(safeUser); // { name: 'Alice', age: 25 }

函数返回多个值

javascript 复制代码

function getUser() {
  return {
    name: 'Alice',
    age: 25,
    email: 'alice@example.com'
  };
}

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

注意事项

javascript 复制代码

// ❌ 解构 null/undefined 会报错
const { name } = null; // TypeError

// ✅ 提供默认值
const { name } = null || {};
console.log(name); // undefined

// ❌ 已声明变量需要括号
let a, b;
{ a, b } = { a: 1, b: 2 }; // 语法错误

// ✅ 使用括号包裹
({ a, b } = { a: 1, b: 2 });

最佳实践

javascript 复制代码

// 1. 使用解构提高可读性
function handleUser({ name, age }) {
  // 比 user.name, user.age 更清晰
}

// 2. 提供默认值
function init({ timeout = 5000, retry = 3 } = {}) {
  // ...
}

// 3. 使用有意义的别名
const { name: userName } = user;

// 4. 避免过度嵌套
// ❌ const { a: { b: { c } } } = data;
// ✅ 分步解构更清晰

快速参考

javascript 复制代码

// 数组
const [a, b, ...rest] = [1, 2, 3, 4];

// 对象
const { name, age, ...rest } = { name: 'Alice', age: 25, email: '...' };

// 函数参数
function foo({ a, b } = {}) { }

// 重命名
const { name: userName } = user;

// 默认值
const { name = 'Anonymous' } = user;

总结

解构赋值让代码更简洁、更易读：

✅ 减少重复代码
✅ 提高可读性
✅ 简化数据提取
✅ 增强函数表达力