JS 中 一个数组中有多个对象，若对象的某个属性相同，则合并对象

START

• 最近遇到一个场景，需要前端去处理一下数据，需求如题。
• 实现起来，发现有点恶心，记录一下。

详情介绍

1.需要处理的数据

let arr = [{
    id: 1,
    name: "11111"
}, {
    id: 2,
    name: "22211"
}, {
    id: 3,
    name: "33311"
}, {
    id: 3,
    name: "33322"
}, {
    id: 1,
    name: "11122"
}, {
    id: 1,
    name: "11133"
}]

2.需要做的操作

• 为了方便理解，我这里在讲一下实际的需求
  1. 存在一个数组，包含多个对象
  2. 找到id相同的对象，并且合并
  3. 合并要求：相同属性抽离出来，不相同的属性，统一放在这个对象的list中（对象的形式）

3.实现方式

var arr = [{
    id: 1,
    name: "11111"
}, {
    id: 2,
    name: "22211"
}, {
    id: 3,
    name: "33311"
}, {
    id: 3,
    name: "33322"
}, {
    id: 1,
    name: "11122"
}, {
    id: 1,
    name: "11133"
}]


// 1.声明一个变量，存储处理过后的数组
let end = []

// 2.第一项肯定是不会重复的，我们直接将第一项存储到最终的数组中
end.push({
    id: arr[0].id,
    list: [arr[0]]
})
console.log(end, end[0].list, 'qqq')

// 3.这里对要处理的数组大小做一下校验
if (arr.length > 0) {

    // 4.第一层遍历，遍历我们要处理的数组，注意，第一项我们处理了，所以这里索引从数组第二项 `1` 开始 
    for (let i = 1; i < arr.length; i++) {

        // 5.这里遍历一下 我们最终要输出的数组， `j`放在外面声明，因为后续或用到。
        let j = 0
        for (; j < end.length; j++) {
            // 6. 判断两个数组中的id是否相同
            if (arr[i].id === end[j].id) {
                // 7.相等就将我们比较的对象 `arr[i]` 存储到  相同id对象的list 中
                end[j]["list"].push(arr[i])
                // *** 8.这里要理解，我们每次遍历，其实都是处理  `arr[i]` ，而上面的逻辑已经处理了，所以终止后续的循环 break;
                break;
            }
        }

        // 9. 如果j 和 end.length相等，说明上面的 for循环没有被跳过，循环都执行完了。那么就说明，两个对象没有相同的id。所以下面去按照要求去push一下 
        if (j === end.length) {
            let list = []
            list.push(end[i])
            end.push({
                id: arr[i].id,
                list: [arr[i]]
            })
        }

    }
}

console.log(end)

4.运行结果

如下图

394fb6a55fd36409adc3e1122d66ec6.png

END

• 说实话这个需求还是有点意思的。
• 研究了好一会，希望后续再遇到这种需求，上手就来，互勉。