JS解构赋值语法（Destructuring Assignment）（JS{}、JS花括号）数组解构、对象解构、嵌套解构、混合解构

🧩 JavaScript 解构赋值语法详解

在现代 JavaScript 中，解构赋值（Destructuring Assignment） 是一个非常实用的语法特性。它可以让我们从数组或对象中快速提取数据并赋值给变量，代码更简洁、可读性更强。本文将带你全面了解解构赋值的用法和技巧。

---

一、什么是解构赋值？

简单来说，解构赋值 就是按照一定的模式，从数组或对象中提取值，然后将它们赋值给变量。
示例：

// 数组解构
const [a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20// 对象解构
const { name, age } = { name: 'Alice', age: 25 };
console.log(name); // Alice
console.log(age);  // 25

相比传统的方式：

const arr = [10, 20];
const a = arr[0];
const b = arr[1];

解构赋值更加简洁明了。

---

二、数组解构

1. 基本用法

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

2. 默认值

如果对应位置没有值，可以给变量设置默认值：

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

3. 跳过元素

通过在解构中留空，可以跳过不需要的值：

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

4. 剩余运算符（Rest）

使用 ... 可以获取剩余元素：

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

---

三、对象解构

1. 基本用法

const person = { name: 'Tom', age: 30 };
const { name, age } = person;
console.log(name, age); // Tom 30

2. 变量重命名

可以将解构出的属性赋值给新的变量名：

const user = { id: 1, username: 'admin' };
const { username: name } = user;
console.log(name); // admin

3. 默认值

const { city = 'Unknown' } = { name: 'Jack' };
console.log(city); // Unknown

4. 嵌套解构

const student = {name: 'Lucy',scores: { math: 90, english: 85 }
};
const { scores: { math } } = student;
console.log(math); // 90

---

四、混合解构

数组和对象可以结合使用：

const users = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' }
];
const [{ name: firstUser }, { name: secondUser }] = users;
console.log(firstUser, secondUser); // Alice Bob

---

五、函数参数解构

解构赋值常用于函数参数，尤其在需要传入多个配置项时特别方便：

function createUser({ name, age = 18, city = 'Beijing' }) {console.log(`${name}, ${age}, ${city}`);
}createUser({ name: 'Eve', age: 20 });
// 输出：Eve, 20, Beijing

相比传统方式，代码更加优雅，且能避免多层访问。

---

六、应用场景举例

✅ 交换变量

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

✅ 从函数返回多个值

function getPosition() {return { x: 10, y: 20 };
}const { x, y } = getPosition();
console.log(x, y); // 10 20

---

七、总结

特性	数组解构	对象解构
匹配依据	位置顺序	属性名
支持默认值	✅	✅
支持嵌套	✅	✅
支持重命名	❌	✅

解构赋值不仅让代码更简洁，还能大大提升可读性与可维护性。无论在日常开发还是函数设计中，灵活使用解构语法都能让你的 JavaScript 代码更加优雅！

---

✍️ 结语
掌握解构赋值，是走向现代 JavaScript 编程风格的重要一步。建议在项目中多加实践，比如在 React/Vue 的 props 处理、API 返回值解析等场景中，都会频繁用到它。

补充

还有一种结合了ts的类型语法，对函数形参直接解构，比较奇葩

Next.js 13+ App Router 中 API 路由的标准语法：

export async function GET(request: NextRequest,           // 第一个参数：请求对象{ params }: { params: { userId: string } }  // 第二个参数：包含路由参数的对象
) {const { userId } = params;      // 从 params 中提取 userId// ...
}

这种写法等价于：

export async function GET(request: NextRequest,context: { params: { userId: string } }
) {const userId = context.params.userId;// ...
}

关键点：要理解{ params: { userId: string } }是ts类型，{ params }没有直接写成独立形参如context，而是直接把它解构了，后面用到解构后的params参数