js對陣列中相同物件元素進行去重，裡面物件相同id，其他不同屬性進行文字疊加

需求
js對陣列中相同物件元素進行去重，裡面物件相同id，其他不同屬性進行文字疊加

 let arr1 = [
            {
                id: 1,
                name: 'ui1'
            }, {
                id: 2,
                name: 'ui2'
            },
            {
                id: 2,
                name: '測試'
            },
            {
                id: 2,
                name: 'ui2'
            },
            {
                id: 3,
                name: '前端'
            }, {
                id: 3,
                name: 'ui3'
            },
            {
                id: 3,
                name: 'ui3'
            },
            {
                id: 3,
                name: 'ui3'
            },

        ]
        

要求輸出

let arr1=[
{id:1,name:'ui1'},
{id:2,name:'ui2測試'},
{id:3,name:'前端測試'}
]

思路：
先對陣列去重，再進行相同id name的疊加,結果發現全部相同的id的name都會疊加，所以只取第一個相同id的name
上程式碼

 <script>
        let arr1 = [
            {
                id: 1,
                name: 'ui1'
            }, {
                id: 2,
                name: 'ui2'
            },
            {
                id: 2,
                name: '測試'
            },
            {
                id: 2,
                name: 'ui2'
            },
            {
                id: 3,
                name: '前端'
            }, {
                id: 3,
                name: 'ui3'
            },
            {
                id: 3,
                name: 'ui3'
            },
            {
                id: 3,
                name: 'ui3'
            },

        ]
        // 先去重
        function deteleObject(obj) {
            var uniques = [];
            var stringify = {};
            for (var i = 0; i < obj.length; i++) {
                var keys = Object.keys(obj[i]);
                keys.sort(function (a, b) {
                    return (Number(a) - Number(b));
                });
                var str = '';
                for (var j = 0; j < keys.length; j++) {
                    str += JSON.stringify(keys[j]);
                    str += JSON.stringify(obj[i][keys[j]]);
                }
                if (!stringify.hasOwnProperty(str)) {
                    uniques.push(obj[i]);
                    stringify[str] = true;
                }
            }
            uniques = uniques;
            return uniques;
        }
        arr1 = deteleObject(arr1)
        console.log(arr1)
        // 不同name相加
        let arr2 = JSON.parse(JSON.stringify(arr1));
        arr1.forEach(key => {
            arr2.forEach(item => {
                if (item.id == key.id && item.name !== key.name) {
                    key.name = key.name + item.name
                }
            })
        })
        // 發現name重複疊加
        // 只取第一個相同id的疊加name
        let obj = {}
        arr1 = arr1.reduce((item, next) => {
            obj[next.id] ? '' : obj[next.id] = true && item.push(next)
            return item
        }, [])
        console.log(arr1)
    </script>

結果