es6 同一数组内相同元素合并处理_

最新推荐文章于 2025-08-01 09:00:53 发布

原创最新推荐文章于 2025-08-01 09:00:53 发布 · 3.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #es6

这篇博客介绍了如何使用ES6语法来合并数组中具有相同ID的对象，通过累加它们的number属性。示例代码展示了如何遍历源数据，创建一个临时对象a用于存储ID，同时更新处理后的数组b，确保每个对象的number属性是所有匹配ID对象的number之和。

es6 同一数组内相同元素合并处理

源数据

 arr = [
        { id: 1, name: '张三', number: 11 },
        { id: 2, name: '李四', number: 22 },
        { id: 1, name: '张三', number: 22 },
        { id: 3, name: '王五', number: 44 },
        { id: 2, name: '李四', number: 11 },
      ]

实现效果

b = [
        { id: 1, name: '张三', number: 33 },
        { id: 2, name: '李四', number: 33 },
        { id: 3, name: '王五', number: 44 },
      ]

方法

     dataChange(arr) {
      // 设置一个对象放id 一个数组放处理后的数据
      let a = {}
      let b = []
      //  深拷贝源数据
      let arrs = JSON.parse(JSON.stringify(arr))
      // 循环遍历原始数据
      arrs.forEach((item) => {
        // 判断item.id 是否存在在 a 中 无则直接push进b
        if (!a[item.id]) {
          // 直接push b
          b.push(item)
          // 将 对象塞进 a中
          a[item.id] = item
        } else {
          // a中存在 则对b 进行累加
          b.forEach((ss) => {
            if (ss.id === item.id) {
              ss.number = (
                parseFloat(ss.number) + parseFloat(item.number)
              ).toString()
            }
          })
        }
      })
      this.$nextTick(() => {
       console.log(b);
      })
    },