ES6+ 新特性
展开与剩余运算符
掌握 ... 运算符在数组和对象中的妙用
展开与剩余运算符
... 运算符是 ES6 最强大的特性之一，在数组和对象中大有用处。
学完本章你将： 掌握展开运算符与剩余参数的各种用法。
数组展开
javascript
// 合并数组
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]
// 浅拷贝
let original = [1, 2, 3];
let copy = [...original];
copy[0] = 99;
console.log(original); // [1, 2, 3]（未影响）
// 插入元素
let middle = [1, ...["a", "b"], 5];
console.log(middle); // [1, "a", "b", 5]
// 字符串转数组
let chars = [..."hello"];
console.log(chars); // ["h", "e", "l", "l", "o"]
// 函数参数
let nums = [3, 1, 4, 1, 5];
console.log(Math.max(...nums)); // 5
console.log(Math.min(...nums)); // 1对象展开
javascript
// 合并对象
let defaults = { theme: "light", lang: "zh" };
let user = { name: "Alice", ...defaults };
console.log(user); // { name: "Alice", theme: "light", lang: "zh" }
// 覆盖属性（后面的覆盖前面的）
let config = { ...defaults, theme: "dark" };
console.log(config); // { theme: "dark", lang: "zh" }
// 浅拷贝
let obj = { a: 1, b: { c: 2 } };
let clone = { ...obj };
clone.b.c = 99;
console.log(obj.b.c); // 99（嵌套对象是浅拷贝）
// 条件属性
let isAdmin = true;
let profile = {
name: "Alice",
...(isAdmin && { role: "admin", permissions: ["all"] }),
};
console.log(profile); // { name: "Alice", role: "admin", permissions: ["all"] }剩余运算符
javascript
// 函数剩余参数
function sum(first, ...rest) {
console.log("first:", first);
console.log("rest:", rest);
return rest.reduce((a, b) => a + b, first);
}
console.log(sum(1, 2, 3, 4)); // 10
// 数组解构剩余
let [head, ...tail] = [1, 2, 3, 4, 5];
console.log(head); // 1
console.log(tail); // [2, 3, 4, 5]
// 对象解构剩余
let { name, ...otherProps } = { name: "Alice", age: 25, city: "北京" };
console.log(name); // "Alice"
console.log(otherProps); // { age: 25, city: "北京" }实战技巧
javascript
// 1. 不可变更新
let state = { count: 1, items: ["a", "b"] };
let newState = {
...state,
count: state.count + 1,
items: [...state.items, "c"],
};
// 2. 删除属性（不改变原对象）
let { password, ...safeUser } = {
name: "Alice", password: "12345", email: "a@test.com"
};
console.log(safeUser); // { name: "Alice", email: "a@test.com" }
// 3. 数组合并去重
let a = [1, 2, 3], b = [2, 3, 4];
let unique = [...new Set([...a, ...b])];
console.log(unique); // [1, 2, 3, 4]