JavaScript 解构赋值

解构赋值是 ES6 (ECMAScript 2015) 引入的一种语法，允许你从数组或对象中提取值，并赋值给变量，这是一种简洁且易读的方式。

数组解构

基本用法

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

跳过元素

const [x, , z] = [1, 2, 3];
console.log(x, z); // 1 3

默认值

const [a = 10, b = 20] = [1];
console.log(a, b); // 1 20

剩余元素

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

交换变量

let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1

对象解构

基本用法

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

重命名变量

const { name: userName, age: userAge } = obj;
console.log(userName, userAge); // Alice 25

默认值

const { name = 'Unknown', country = 'USA' } = { name: 'Bob' };
console.log(name, country); // Bob USA

嵌套解构

const user = {
  id: 1,
  name: 'Alice',
  address: {
    city: 'New York',
    zip: '10001'
  }
};

const { address: { city, zip } } = user;
console.log(city, zip); // New York 10001

剩余属性

const { name, ...rest } = user;
console.log(rest); // { id: 1, address: { city: 'New York', zip: '10001' } }

函数参数解构

对象参数

function greet({ name, age }) {
  console.log(`Hello, ${name}. You are ${age} years old.`);
}

greet({ name: 'Alice', age: 25 }); // Hello, Alice. You are 25 years old.

数组参数

function sum([a, b]) {
  return a + b;
}

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

混合解构

const props = {
  user: {
    name: 'Alice',
    friends: ['Bob', 'Charlie']
  },
  color: 'blue'
};

const {
  user: {
    name,
    friends: [firstFriend]
  },
  color
} = props;

console.log(name, firstFriend, color); // Alice Bob blue

解构赋值使代码更简洁易读，特别是在处理复杂数据结构时非常有用。