JavaScript展开运算符(Spread Operator)详解:数组操作与对象去重实战

作者:小括号

时间:2026-10-31

浏览:136

本文详细解析JavaScript中的展开运算符(...),涵盖其在求数组最值、合并数组及对象去重中的应用。通过具体代码示例,展示如何结合Set数据结构实现对象数组去重,帮助开发者编写更简洁高效的ES6+代码。

文章目录

展开运算符的定义及其功能是什么?

该运算符具备将数组元素展开的能力

    const arr = [1,2,3,4,5]
    // 我们使用...展开数组
    console.log(...arr) //1 2 3 4 5

执行操作时不改变原始数组内容

常见应用场景包括获取数组最值及合并数组,有助于简化代码逻辑

最大值计算

    const arr = [1,2,3,4,5]
    //...arr 等价于 1,2,3,4,5
    console.log(Math.max(...arr)) // 5

最小值计算

    const arr = [1,2,3,4,5]
    //...arr 等价于 1,2,3,4,5
    console.log(Math.min(...arr)) // 1

数组合并

    const arr1 = [1,2,3]
    const arr2 = [4,5,6]
    const arr = [...arr1,...arr2]
    console.log(arr) //[1, 2, 3, 4, 5, 6]

补充:利用JS数组展开实现对象去重

在JavaScript里,结合数组展开运算符与Set数据结构可完成对象数组去重,具体步骤如下:

  • 首先定义一个含有重复对象的数组。
  • 接着利用数组展开运算符生成新数组。
  • 随后借助Set数据结构过滤重复元素。
  • 最后将Set结构转换回数组形式。

相关代码示例如下:

let arr = [
  {id: 1, name: '张三'},
  {id: 2, name: '李四'},
  {id: 1, name: '张三'},
  {id: 3, name: '王五'}
];

let uniqueArr = [...new Set([...arr])];

console.log(uniqueArr);
// 输出: [{id: 1, name: '张三'}, {id: 2, name: '李四'}, {id: 3, name: '王五'}]

上述代码中,通过数组展开运算符将原数组扩展为新数组,利用Set剔除重复项,再将Set还原为数组并赋值给uniqueArr变量。最终,uniqueArr存储了去重后的对象数组。

总结

至此,关于JavaScript数组展开运算符的介绍结束,如需了解更多JS数组展开运算符相关内容,请查阅本站往期文章或继续浏览下方关联文章,感谢大家的支持!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章