如何理解JavaScript中的解构赋值？

const colors = ['red', 'green', 'blue'];

// 传统方式
// const firstColor = colors[0];
// const secondColor = colors[1];

// 解构赋值
const [firstColor, secondColor, thirdColor] = colors;
console.log(firstColor); // 'red'
console.log(secondColor); // 'green'
console.log(thirdColor); // 'blue'

// 跳过元素
const [,, favoriteColor] = colors;
console.log(favoriteColor); // 'blue' (跳过了red和green)

// 默认值：当解构的元素不存在时，可以提供一个默认值
const [c1, c2, c3, c4 = 'black'] = colors;
console.log(c4); // 'black'

// 剩余元素（Rest parameter）：将剩余的元素收集到一个新数组中
const [primary, ...remainingColors] = colors;
console.log(primary); // 'red'
console.log(remainingColors); // ['green', 'blue']

const user = {
  name: 'Alice',
  age: 30,
  city: 'New York',
  hobbies: ['reading', 'coding']
};

// 传统方式
// const userName = user.name;
// const userAge = user.age;

// 解构赋值
const { name, age } = user;
console.log(name); // 'Alice'
console.log(age); // 30

// 属性重命名：当解构的变量名与属性名冲突，或者想用一个更简洁的变量名时
const { name: userName, age: userAge } = user;
console.log(userName); // 'Alice'
console.log(userAge); // 30

// 默认值：当对象中不存在某个属性时，可以提供一个默认值
const { country = 'USA', city } = user;
console.log(country); // 'USA'
console.log(city); // 'New York'

// 剩余属性（Rest property）：将剩余的属性收集到一个新对象中
const { name: n, ...userInfo } = user;
console.log(n); // 'Alice'
console.log(userInfo); // { age: 30, city: 'New York', hobbies: ['reading', 'coding'] }

// 嵌套解构：处理复杂对象结构时非常有用
const { hobbies: [firstHobby, secondHobby] } = user;
console.log(firstHobby); // 'reading'
console.log(secondHobby); // 'coding'

// 在函数参数中使用解构赋值
function greet({ name, city }) {
  console.log(`Hello, ${name} from ${city}!`);
}
greet(user); // Hello, Alice from New York!

const obj = { a: null, b: undefined };
const { a = 1, b = 2 } = obj;
console.log(a); // null (a的值是null，不是undefined，所以默认值不生效)
console.log(b); // 2 (b的值是undefined，所以默认值生效)

let x = 1, y = 2;
const obj = { x: 10, y: 20 };

// 错误！解析器会认为 {x, y} 是一个代码块
// {x, y} = obj;

// 正确：用括号包裹
({ x, y } = obj);
console.log(x); // 10
console.log(y); // 20

const data = {};
// const { user: { name } } = data; // TypeError: Cannot read properties of undefined (reading 'name')

const data = {};
const { user } = data;
if (user) {
  const { name } = user;
  console.log(name); // undefined
}
// 或者更简洁（ES2020+）
const name = data.user?.name;
console.log(name); // undefined

// 传统或不解构
// const greet = (person) => {
//   console.log(`Hello, ${person.name} from ${person.city}!`);
// };

// 使用解构赋值
const greet = ({ name, city = 'Unknown' }) => { // 还可以直接给参数提供默认值
  console.log(`Hello, ${name} from ${city}!`);
};

greet({ name: 'Bob' }); // Hello, Bob from Unknown!

const config = {
  host: 'localhost',
  port: 8080,
  timeout: 5000,
  maxConnections: 100
};

const { host, port, ...otherSettings } = config;
console.log(host); // 'localhost'
console.log(port); // 8080
console.log(otherSettings); // { timeout: 5000, maxConnections: 100 }

// 展开操作符则可以用于创建新对象或数组，同时覆盖部分属性
const newConfig = { ...config, port: 9000, debug: true };
console.log(newConfig);
// { host: 'localhost', port: 9000, timeout: 5000, maxConnections: 100, debug: true }

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract as sub } from './utils'; // 这里就是对象解构
console.log(add(1, 2)); // 3
console.log(sub(5, 3)); // 2