JavaScript解构赋值的20个实用场景：从数组到对象

1. 解构赋值基础概念

1.1 什么是解构赋值

解构赋值是一种JavaScript表达式，它允许我们将数组或对象的属性/值"解包"到不同的变量中。

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

// 对象解构
const {
   
   name, age} = {
   
   name: 'Alice', age: 28};
console.log(name); // 'Alice'
console.log(age); // 28

1.2 解构赋值的优势对比

2. 数组解构的10个实用场景

2.1 基本数组解构

const rgb = [255, 128, 64];
const [red, green, blue] = rgb;
console.log(red, green, blue); // 255 128 64

2.2 跳过某些元素

const dateParts = ['2023', '05', '15'];
const [year, , day] = dateParts;
console.log(year, day); // '2023' '15'

2.3 默认值设置

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

2.4 剩余元素收集

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

2.5 变量交换

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

2.6 函数返回多值

function getCoords() {
   
   
  return [12.34, 56.78];
}
const [lat, lng] = getCoords();

2.7 正则表达式匹配

const url = 'https://example.com/users/123';
const matches = url.match(/\/users\/(\d+)/);
const [, userId] = matches;
console.log(userId); // '123'

2.8 迭代器解构

const map = new Map();
map.set