技術標籤：demojsjavascript

需求
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>

結果

第二種方法

        // 資料合併    array:需合併的資料
        function arrMerge(array) {
            // 儲存新陣列
            let newArr = [];
            array.forEach(item => {
                // 儲存判斷結果
                let res = newArr.isExist(item.id, "id");
                // 若不存在新陣列中，則直接追加進新陣列
                if (res == -1) {
                    newArr.push(item);
                } else {
                    // 若存在,則將除id外的欄位追加進新陣列中
                    for (var key in newArr[res]) {

                        // if (key == "id") continue;
                        if (newArr[res][key] == item[key]) continue;

                        newArr[res][key] += item[key];
                    };
                };
            });
            return newArr;
        };

        // 判斷元素是否存在陣列中物件屬性中  value:元素   key:物件屬性   
        Array.prototype.isExist = function (value, key) {
            for (let i = 0, len = this.length; i < len; i++) {
                // 若存在，則返回對應的索引
                if (this[i][key] === value) {
                    return i;
                }
            }
            // 否則返回 -1
            return -1;
        }

        console.log(arrMerge(arr1));