1. 什么是解构赋值

解构赋值是一种 JavaScript 表达式，允许我们将数组或对象的值提取到变量中，使代码更加简洁和易读。

2. 数组解构

2.1 基本语法

// 基本数组解构
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c); // 1 2 3

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

// 使用 rest 操作符
const [head, ...tail] = [1, 2, 3, 4, 5];
console.log(head); // 1
console.log(tail); // [2, 3, 4, 5]

2.2 默认值

// 为变量设置默认值
const [x = 10, y = 20] = [5];
console.log(x, y); // 5 20

// 复杂默认值
const [name = 'Anonymous', age = 18] = [];
console.log(name, age); // Anonymous 18

2.3 交换变量

// 无需临时变量交换值
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1

3. 对象解构

3.1 基本语法

// 基本对象解构
const person = { name: 'Alice', age: 25, city: 'Beijing' };
const { name, age } = person;
console.log(name, age); // Alice 25

// 重命名属性
const { name: fullName, age: years } = person;
console.log(fullName, years); // Alice 25

3.2 默认值

// 对象解构默认值
const { name = 'Anonymous', gender = 'unknown' } = { name: 'Bob' };
console.log(name, gender); // Bob unknown

3.3 嵌套对象解构

// 嵌套对象解构
const user = {
  name: 'Alice',
  address: {
    city: 'Beijing',
    street: 'Main St'
  }
};

const { name, address: { city } } = user;
console.log(name, city); // Alice Beijing

// 混合重命名和默认值
const { 
  address: { 
    city: cityName = 'Unknown', 
    country = 'China' 
  } 
} = user;
console.log(cityName, country); // Beijing China

4. 函数参数解构

4.1 对象参数解构

// 函数参数解构
function createUser({ name, age = 18, email = '' }) {
  return { name, age, email };
}

const user = createUser({ name: 'Alice', email: 'alice@example.com' });
console.log(user); // { name: 'Alice', age: 18, email: 'alice@example.com' }

// 复杂参数解构
function renderUser({
  name,
  profile: { 
    avatar = 'default.jpg', 
    bio = '' 
  } = {},
  settings: { 
    theme = 'light', 
    notifications = true 
  } = {}
} = {}) {
  console.log(name, avatar, theme);
}

4.2 数组参数解构

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

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

5. 解构的实际应用

5.1 处理函数返回值

// 函数返回多个值
function getCoordinates() {
  return [10, 20];
}

const [x, y] = getCoordinates();
console.log(x, y); // 10 20

// 返回对象
function getUserInfo() {
  return {
    id: 1,
    name: 'Alice',
    permissions: ['read', 'write']
  };
}

const { id, name, permissions } = getUserInfo();
console.log(id, name, permissions); // 1 Alice ['read', 'write']

5.2 处理 API 响应

// 解构 API 响应
const response = {
  status: 200,
  data: {
    users: [
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' }
    ],
    pagination: {
      page: 1,
      total: 2
    }
  },
  headers: {
    'content-type': 'application/json'
  }
};

const { 
  data: { users, pagination: { page, total } },
  headers: { 'content-type': contentType }
} = response;

console.log(users, page, total, contentType);

5.3 配置对象处理

// 配置对象解构
function createChart({
  type = 'line',
  width = 800,
  height = 600,
  colors = ['#ff0000', '#00ff00'],
  options: {
    responsive = true,
    animation = true
  } = {}
} = {}) {
  console.log(type, width, height, colors, responsive, animation);
}

createChart({
  type: 'bar',
  width: 1000,
  options: {
    responsive: false
  }
});

6. 高级解构技巧

6.1 动态属性名解构

// 计算属性名解构
const key = 'name';
const { [key]: userName } = { name: 'Alice', age: 25 };
console.log(userName); // Alice

6.2 解构与 rest 操作符

// 对象 rest 操作符（ES2018）
const { name, age, ...rest } = { 
  name: 'Alice', 
  age: 25, 
  city: 'Beijing', 
  country: 'China' 
};

console.log(name, age); // Alice 25
console.log(rest); // { city: 'Beijing', country: 'China' }

6.3 解构赋值表达式

// 解构赋值返回右侧的值
let a, b;
({ a, b } = { a: 1, b: 2 });
console.log(a, b); // 1 2

// 在循环中使用
const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 }
];

users.forEach(({ name, age }) => {
  console.log(`${name} is ${age} years old`);
});

7. 解构的注意事项

7.1 语法陷阱

// 空对象解构不会创建变量
const {} = { a: 1, b: 2 }; // 不会创建 a, b 变量

// 解构已声明的变量需要括号
let a, b;
// { a, b } = { a: 1, b: 2 }; // 语法错误
({ a, b } = { a: 1, b: 2 }); // 正确

// 数组解构与迭代器
const [a, b, ...rest] = 'hello';
console.log(a, b, rest); // h e ['l', 'l', 'o']

7.2 性能考虑

// 复杂解构可能影响性能
const complexObject = {
  user: {
    profile: {
      settings: {
        preferences: {
          theme: 'dark'
        }
      }
    }
  }
};

// 深层解构
const { user: { profile: { settings: { preferences: { theme } } } } } = complexObject;

// 有时直接访问更清晰
const theme2 = complexObject.user.profile.settings.preferences.theme;

8. 实用示例

8.1 React Hooks 风格

// 模拟 useState
function useState(initialValue) {
  let state = initialValue;
  const setState = (newValue) => {
    state = newValue;
  };
  return [state, setState];
}

const [count, setCount] = useState(0);
console.log(count); // 0
setCount(5);

8.2 Promise 处理

// Promise.all 解构
Promise.all([fetch('/api/users'), fetch('/api/posts')])
  .then(([usersResponse, postsResponse]) => {
    // 分别处理响应
    return Promise.all([usersResponse.json(), postsResponse.json()]);
  })
  .then(([users, posts]) => {
    console.log('Users:', users);
    console.log('Posts:', posts);
  });

9. 浏览器兼容性

解构赋值在现代浏览器中支持良好：

• ES6 (2015)：数组和对象解构
• ES2018：对象 rest/spread 属性
• 需要转译工具（如 Babel）支持旧浏览器

总结

解构赋值的优势：

1. 代码简洁：减少重复代码
2. 可读性强：明确表达数据结构
3. 灵活性高：支持嵌套、默认值、重命名
4. 功能丰富：适用于多种场景

合理使用解构赋值可以让 JavaScript 代码更加优雅和易维护。