JavaScript解构赋值

解构赋值（Destructuring assignment）是 JavaScript ES6 引入的一种表达式语法，允许你从数组或对象中提取数据，并将其赋值给一组变量。这种语法可以使代码更加简洁和易读。

数组解构赋值

数组解构赋值允许你直接从数组中提取值并赋值给变量。

const array = [1, 2, 3];

// 传统方式
const first = array[0];
const second = array[1];
const third = array[2];

// 解构赋值方式
const [first, second, third] = array;

console.log(first); // 输出: 1
console.log(second); // 输出: 2
console.log(third); // 输出: 3

你还可以跳过某些值，或者为变量设置默认值：

const array = [1, , 3];

// 跳过第二个值
const [first, , third] = array;

console.log(first); // 输出: 1
console.log(third); // 输出: 3

// 设置默认值
const [a = 10, b = 20] = [1, undefined];

console.log(a); // 输出: 1
console.log(b); // 输出: 20（因为 b 的值是 undefined，所以使用默认值 20）

对象解构赋值

对象解构赋值允许你从对象中提取属性并赋值给变量。

const person = {
  name: 'Alice',
  age: 25,
  city: 'New York'
};

// 传统方式
const name = person.name;
const age = person.age;
const city = person.city;

// 解构赋值方式
const { name, age, city } = person;

console.log(name); // 输出: Alice
console.log(age); // 输出: 25
console.log(city); // 输出: New York

你也可以为变量设置别名或默认值：

const person = {
  firstName: 'Alice',
  age: 25
};

// 设置别名
const { firstName: name, age } = person;

console.log(name); // 输出: Alice
console.log(age); // 输出: 25

// 设置默认值
const { age: personAge = 30, country = 'Unknown' } = person;

console.log(personAge); // 输出: 25
console.log(country); // 输出: Unknown（因为 person 对象中没有 country 属性）

嵌套解构赋值

你还可以进行嵌套解构赋值，从嵌套的对象或数组中提取数据。

const nestedObject = {
  user: {
    firstName: 'Alice',
    lastName: 'Smith',
    age: 25
  },
  permissions: ['read', 'write']
};

// 嵌套解构赋值
const { user: { firstName, lastName }, permissions: [read, write] } = nestedObject;

console.log(firstName); // 输出: Alice
console.log(lastName); // 输出: Smith
console.log(read); // 输出: read
console.log(write); // 输出: write

函数参数解构赋值

解构赋值也可以用于函数参数，使函数签名更加清晰。

function greet({ firstName, lastName }) {
  console.log(`Hello, ${firstName} ${lastName}!`);
}

const person = {
  firstName: 'Alice',
  lastName: 'Smith'
};

greet(person); // 输出: Hello, Alice Smith!