JS中的...运算符到底有啥用？这么用才酸爽！

想知道JS中的...运算符是什么？它就像一个神奇的工具，让你的JavaScript代码更简洁高效！本文为你详细解读...运算符的三大妙用：**展开**数组或对象，轻松合并数据或传递函数参数；**收集**函数剩余参数，灵活处理任意数量的输入；以及在**解构赋值**中提取剩余部分，方便数据处理。掌握...运算符，让你的JS技能更上一层楼，编写出更优雅、易维护的代码！例如，使用`[...arr1, ...arr2]`合并数组，使用`function sum(...numbers)`处理可变参数，以及通过`[first, ...rest]`解构获取剩余元素。赶快来学习，解锁...运算符的更多实用技巧吧！

JavaScript 中的 ... 运算符主要有三个用途：1. 展开数组或对象元素，用于函数参数传递或合并数组/对象；2. 在函数参数中收集剩余参数，形成数组处理任意数量输入；3. 在解构赋值中收集剩余部分，便于提取或排除特定数据。例如用 [...arr1, ...arr2] 合并数组，用 function sum(...numbers) 处理变参，以及通过 [first, ...rest] 解构获取剩余元素。

在 JavaScript 中，... 运算符是一个非常实用的语法，主要用在数组和对象的操作中。它看起来简单，但用途广泛，能让你写出更简洁、易读的代码。

展开数组或对象的内容

... 最常见的一个作用是“展开”数组或对象中的元素。比如你想把一个数组里的所有元素作为参数传给一个函数，或者合并多个数组时，就可以用它。

举个例子：

const arr = [1, 2, 3];
console.log(...arr); // 输出：1 2 3

上面这行代码等价于把数组中的每个元素单独传给 console.log。这种写法在合并数组时特别方便：

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]

对对象也是一样，比如合并两个对象：

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const merged = { ...obj1, ...obj2 }; // { a: 1, b: 2 }

收集函数参数

除了展开，... 还可以用在函数参数中，用来收集“剩余”的参数，也就是我们常说的“rest 参数”。

比如这个例子：

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

sum(1, 2, 3); // 6

这里的 ...numbers 把传进来的所有参数都收集成一个数组，这样你就可以处理任意数量的参数了。

需要注意的是，在函数定义里，... 只能出现在最后一个参数上，否则会报错。

在解构赋值中使用

... 还可以配合数组或对象的解构使用，把剩下的内容收集起来。

比如从数组中提取前几个元素，剩下的放在一起：

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

对象也一样：

const { a, ...others } = { a: 1, b: 2, c: 3 };
console.log(a);     // 1
console.log(others); // { b: 2, c: 3 }

这种写法在处理数据时非常有用，尤其是你需要去掉某些字段或者提取部分数据的时候。

基本上就这些常见用法了。... 看起来只是一个符号，但理解清楚它在不同上下文中的行为，会让你写 JS 更加得心应手。

终于介绍完啦！小伙伴们，这篇关于《JS中的...运算符到底有啥用？这么用才酸爽！》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！