三、解构赋值

解构赋值是 ES6 引入的一种新语法，用于从数组或对象中提取值并赋给变量。它可以使代码更简洁易读。

数组解构

基本用法

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

跳过元素

const [d, , f] = [4, 5, 6];
console.log(d); // 4
console.log(f); // 6

剩余参数

const [g, ...rest] = [7, 8, 9, 10];
console.log(g); // 7
console.log(rest); // [8, 9, 10]

默认值

const [h, i = 10] = [11];
console.log(h); // 11
console.log(i); // 10

对象解构

基本用法

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

重命名

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

默认值

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

嵌套对象解构

const person = {
  name: 'John',
  address: {
    city: 'New York',
    country: 'USA'
  }
};

const { name, address: { city, country } } = person;
console.log(name); // John
console.log(city); // New York
console.log(country); // USA

字符串解构

const str = 'hello';
const [s1, s2, s3, s4, s5] = str;
console.log(s1); // h
console.log(s2); // e
console.log(s3); // l
console.log(s4); // l
console.log(s5); // o

函数参数解构

对象参数解构

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 sum([a, b]) {
  return a + b;
}

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

混合使用

function config({ host, port = 3000, protocols = ['http'] }) {
  console.log(`Host: ${host}`);
  console.log(`Port: ${port}`);
  console.log(`Protocols: ${protocols.join(', ')}`);
}

config({ host: 'localhost', protocols: ['http', 'https'] });
// Host: localhost
// Port: 3000
// Protocols: http, https

实战场景：快速获取接口数据

// 模拟接口返回数据
const apiResponse = {
  code: 200,
  data: {
    user: {
      id: 1,
      name: 'John',
      email: 'john@example.com'
    },
    posts: [
      { id: 1, title: 'Post 1' },
      { id: 2, title: 'Post 2' }
    ]
  },
  message: 'Success'
};

// 使用解构赋值快速获取数据
const { 
  code,
  data: { user, posts },
  message 
} = apiResponse;

console.log(code); // 200
console.log(user.name); // John
console.log(posts.length); // 2
console.log(message); // Success

解构赋值的优势

1. 代码简洁：减少了重复的变量声明和赋值代码
2. 可读性高：一眼就能看出变量与数据源的对应关系
3. 默认值处理：可以轻松设置默认值，避免undefined
4. 参数提取：方便从复杂对象中提取需要的属性

通过本章节的学习，你已经掌握了解构赋值的基本用法和实战场景。解构赋值是 ES6 中非常实用的语法特性，可以大大简化代码，提高开发效率。