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); // 1console.log(rest); // [2, 3, 4]
对象也一样:
const { a, ...others } = { a: 1, b: 2, c: 3 };console.log(a); // 1console.log(others); // { b: 2, c: 3 }
这种写法在处理数据时非常有用,尤其是你需要去掉某些字段或者提取部分数据的时候。
基本上就这些常见用法了。... 看起来只是一个符号,但理解清楚它在不同上下文中的行为,会让你写 JS 更加得心应手。
以上就是JS中的…运算符有什么作用?怎么用?的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1505613.html
微信扫一扫
支付宝扫一扫