JavaScript展开运算符(Spread Operator)详解:数组操作与对象去重实战
作者:小括号时间:2026-10-31 09:32:31浏览:137
本文详细解析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数组展开运算符相关内容,请查阅本站往期文章或继续浏览下方关联文章,感谢大家的支持!
作者最新文章
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
