js实现解构赋值

解构赋值基础语法

解构赋值允许从数组或对象中提取值，并赋给对应的变量。JavaScript中解构赋值分为数组解构和对象解构两种形式。

数组解构示例：

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

对象解构示例：

const obj = { x: 10, y: 20 };
const { x, y } = obj;
console.log(x, y); // 输出: 10 20

默认值设置

解构时可以设置默认值，当对应位置值为undefined时会使用默认值。

数组解构默认值：

const [d = 5, e = 6] = [1];
console.log(d, e); // 输出: 1 6

对象解构默认值：

const { z = 30 } = {};
console.log(z); // 输出: 30

嵌套解构

支持嵌套数组或对象的解构赋值。

嵌套数组解构：

const nestedArr = [1, [2, 3], 4];
const [f, [g, h], i] = nestedArr;
console.log(f, g, h, i); // 输出: 1 2 3 4

嵌套对象解构：

const nestedObj = { p: { q: 42 } };
const { p: { q } } = nestedObj;
console.log(q); // 输出: 42

别名设置

对象解构时可以为属性设置别名。

const obj = { m: 100, n: 200 };
const { m: newM, n: newN } = obj;
console.log(newM, newN); // 输出: 100 200

剩余模式

使用...语法捕获剩余的值。

数组剩余模式：

const [j, ...rest] = [1, 2, 3];
console.log(j, rest); // 输出: 1 [2, 3]

对象剩余模式：

const { k, ...others } = { k: 10, l: 20, m: 30 };
console.log(k, others); // 输出: 10 { l: 20, m: 30 }

函数参数解构

直接在函数参数中使用解构赋值。

数组参数解构：

function foo([a, b]) {
  console.log(a + b);
}
foo([1, 2]); // 输出: 3

对象参数解构：

function bar({ name, age }) {
  console.log(`${name} is ${age} years old`);
}
bar({ name: 'Alice', age: 25 }); // 输出: Alice is 25 years old

解构赋值常见应用场景

交换变量值：

let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 输出: 2 1

处理函数返回的多个值：

function getCoords() {
  return [10, 20];
}
const [lat, lng] = getCoords();

模块导入时的解构：

const { useState, useEffect } = require('react');