首页 › JavaScript › 对象与数组 › 解构与展开运算符

数组解构

const arr = [1, 2, 3, 4, 5];

// 基本解构
const [a, b] = arr;
console.log(a, b);  // 1 2

// 跳过元素
const [first, , third] = arr;
console.log(first, third);  // 1 3

// 剩余元素
const [head, ...tail] = arr;
console.log(head, tail);  // 1 [2,3,4,5]

// 默认值
const [x = 0, y = 0] = [];
console.log(x, y);  // 0 0

// 交换变量
let x = 1, y = 2;
[x, y] = [y, x];  // x=2, y=1

对象解构

const user = { name: '张三', age: 28, email: 'z@example.com' };

// 基本解构
const { name, age } = user;
console.log(name, age);  // "张三" 28

// 重命名
const { name: userName, age: userAge } = user;
console.log(userName, userAge);  // "张三" 28

// 默认值
const { role = 'user' } = user;
console.log(role);  // "user"

// 嵌套解构
const data = { user: { name: '张三', address: { city: '北京' } } };
const { user: { name: n, address: { city } } } = data;
console.log(n, city);  // "张三" "北京"

展开运算符

// 数组展开
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const merged = [...arr1, ...arr2];  // [1,2,3,4,5,6]
const copy = [...arr1];             // 浅拷贝

// 对象展开
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };  // { a:1, b:3, c:4 }
// 注意：同名属性后覆盖前

// 函数参数
function sum(...nums) { return nums.reduce((a,b) => a+b); }
sum(...[1, 2, 3]);  // 6

小结

语法	用途
[a, b] = arr	数组解构
{ name } = obj	对象解构
{ name: newName }	重命名
...rest	剩余元素
{ ...obj }	对象展开/浅拷贝
[...arr]	数组展开/浅拷贝

上一节：数组与高级方法 下一节：Map 与 Set

贡献者: 布欧-Lewyon