JavaScript 中的 Spread 与 Rest 运算符

Source: Dev.to

Spread 操作符的作用

Spread 操作符（...）用于从已有的集合（如数组或对象）中提取所有项目。它通常放在赋值的右侧（variable = ...something）或在函数调用中使用（fn(...something)），以便逐个传递每个项目。

Rest 操作符的作用

Rest 操作符（...）收集单个项目并将它们包装成一个容器（通常是数组）。它常见于函数声明中（function fn(...params) {}），用于把传入函数的所有参数收集到一个参数中。

Spread 与 Rest 的区别

在数组和对象中使用 Spread

Spread 操作符可以合并数组、添加值，或创建对象的浅拷贝。

const postiveNums = [1,2,3,4];
const negativeNums = [-1, -2, -3, -4];
const user = {
    name: "anoop",
    salary: "50k",
};

// 合并并在中间插入 0
console.log([...negativeNums, 0, ...postiveNums]);
// [-1, -2, -3, -4, 0, 1, 2, 3, 4]

// 按值复制
const copy = {...user};
copy.salary("80k");
console.log(user); // salary: "50k"
console.log(copy); // salary: "80k"

实际使用场景

创建浅拷贝

使用 Spread 操作符创建的浅拷贝不会改变原始对象。

const user = {name: "anoop", isActive: true, salary: "50k"};
const temp = {...user};

temp.name = "dipesh";
temp.salary = "25k";

console.log(temp);
// {name: "dipesh", isActive: true, salary: "25k"}
console.log(user);
// {name: "anoop", isActive: true, salary: "50k"}

合并值

可以将对象（或数组）合并并添加额外属性。

const defaultSettings = {
    theme: "dark",
    font: 18,
    notification: true
};

const userPreference = {
    font: 24,
    notification: false
};

const settings = {
    ...defaultSettings,
    ...userPreference
};

console.log(settings);
/*
{
  theme: "dark",
  font: 24,
  notification: false
}
*/

与函数一起使用

使用 Rest 参数收集不确定数量的参数，使用 Spread 操作符将数组项逐个传递。

// Rest 操作符
function sumAll(...nums) {
    return nums.reduce((acc, cur) => acc + cur, 0);
}
console.log(sumAll(2, 4, 6, 3)); // 15

// Spread 操作符
const nums = [2, 4, 6, 3];
const max = Math.max(...nums);
console.log(max); // 6

小结

• Spread（展开）: 从容器中提取项目；用于创建新数据结构或传递参数。
• Rest（剩余）: 将项目收集到容器中；用于捕获函数参数。