对于数组对象，根据指定的属性去重，并保留后一项

最新推荐文章于 2024-05-22 11:42:44 发布

学前端的小朱

最新推荐文章于 2024-05-22 11:42:44 发布

阅读量606

点赞数 7

文章标签： javascript 前端开发语言 es6

本文链接：https://blog.csdn.net/qq_45569925/article/details/138334182

版权

本文介绍了四种在JavaScript中处理数组重复元素的方法：双层for循环、使用新数组配合every，Map数据结构，以及ES6的reduce。展示了如何利用这些方法实现对给定数组去重并保持原始顺序。

摘要由CSDN通过智能技术生成

所需要去重的数组

var arr = [
    { name: 'a', id: 1 },
    { name: 'a', id: 2 },
    { name: 'b', id: 3 },
    { name: 'c', id: 4 },
    { name: 'c', id: 5 },
    { name: 'b', id: 6 },
    { name: 'd', id: 7 }
];

// 输出结果
/*
    [
        {name:'a', id:2},
        {name:'c', id:5},
        {name:'b', id:6},
        {name:'d', id:7},
    ]
*/

方式一：使用双层for循环可直接修改原数组

// 首先将数组反转，这样可以从后往前遍历
arr.reverse();

for (var i = 0; i < arr.length - 1; i++) {
    for (var j = i + 1; j < arr.length; j++) {
        if (arr[i].name === arr[j].name) {
            // 删除重复的元素，保留后者
            arr.splice(j, 1);
            // 因为删除了一个元素，所以要 j--
            j--;
        }
    }
}

// 循环结束后再次将数组反转，恢复原顺序
arr.reverse();

console.log(arr);

方式二：增加一个新数组，配合ES6的every方法

const temp = [];
arr.reverse().forEach((item) => {
    // 数组的every方法，只有所有的数据都满足条件的时候才会返回true，否则就为false
    var check = temp.every((obj) => {
        return item.name !== obj.name;
    })
    // 如果新数组中没有该项的时候，就把该项填进去
    check ? temp.push(item) : ''
})
console.log(temp.reverse());

//方法3：使用es6的Map()
let map = new Map();
for (let item of arr.reverse()) {
    if (!map.has(item.name)) {
        map.set(item.name, item);
    }
}
arr = [...map.values()]
console.log(arr.reverse());

方式三：使用ES6的map方法

let map = new Map();
for (let item of arr.reverse()) {
    if (!map.has(item.name)) {
        map.set(item.name, item);
    }
}
arr = [...map.values()]
console.log(arr.reverse());

方式四：使用ES5的reduce方法

var obj = {};
arr = arr.reverse().reduce((acculturate, current) => {
    obj[current.name] ? '' : obj[current.name] = true && acculturate.push(current);
    return acculturate;
}, [])
console.log(arr.reverse());