JS 解构与展开运算符

学习 ... 展开运算符和解构赋值 · 难度：进阶 · +15XP

JS 解构与展开运算符

JavaScript 展开运算符与解构赋值

学习前的准备

打开浏览器的开发者控制台（按 F12 键），切换到 Console 标签页。本教程适合已经掌握了基本数组和对象操作的初学者。建议你先跟着示例代码敲一遍，不必一次性理解所有内容，学习编程最重要的是动手实践。

展开运算符——三个点的魔法

展开运算符（Spread Operator）用三个点 ... 表示。它的作用很简单：把一个可迭代对象“展开”成独立的元素。想象你有一副扑克牌拿在手里，展开运算符就是把牌一张一张摊开在桌面上。

const fruits = ['苹果', '香蕉', '橙子'];
console.log(...fruits);  // 苹果 香蕉 橙子
// 合并数组——最常用的场景
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined);  // [1, 2, 3, 4, 5, 6]
// 浅拷贝数组（修改副本不影响原数组）
const original = ['a', 'b', 'c'];
const copy = [...original];
copy[0] = 'z';
console.log(original[0]);  // 'a'——原数组未改变

对象展开运算符（ES2018）

ES2018 把展开运算符扩展到了对象。你可以用它来合并对象或创建一个对象的浅拷贝。注意：如果有同名属性，后面的值会覆盖前面的。

const user = { name: '张三', age: 25 };
const job = { position: '前端工程师', company: '某科技公司' };
const fullProfile = { ...user, ...job };
const updated = { ...user, age: 26, city: '上海' };
const cloned = { ...user };

数组解构赋值

解构赋值（Destructuring Assignment）让你把数组或对象中的值“解包”出来，一次性赋给多个变量。这是 JavaScript 中最让人爱不释手的语法之一。

const colors = ['红', '绿', '蓝'];
const [red, green, blue] = colors;
console.log(red);    // '红'
console.log(green);  // '绿'
// 跳过不需要的元素
const [first, , third] = colors;
console.log(first);  // '红'
// 使用 rest 收集剩余元素
const [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a);     // 1
console.log(rest);  // [3, 4, 5]
// 交换变量值（不需要临时变量！）
let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y);  // 2 1

对象解构赋值

对象解构按属性名提取值，这在处理 API 返回的数据时尤其方便。

const book = { title: '深入理解ES6', author: '李四', year: 2020 };
const { title, author } = book;
console.log(title);   // '深入理解ES6'
// 重命名变量
const { title: bookName, year: pubYear } = book;
console.log(bookName);  // '深入理解ES6'
// 设置默认值
const { price = 59 } = book;
console.log(price);  // 59（使用默认值）

函数参数解构——实际开发中最常用的模式

function createUser({ name, age, city = '未知' }) {
  console.log(name + ', ' + age + '岁, ' + city);
}
createUser({ age: 20, name: '小明', city: '北京' });
// 注意到参数的顺序可以任意排列

小结

展开运算符让数据的展开、合并和拷贝变得极其简洁。解构赋值让你用最少的代码提取需要的值。这两个特性是现代 JavaScript 开发中每天都会用到的语法。刚开始可能会觉得三个点有点奇怪，但坚持用一周，你就会发现已经离不开它们了。