JavaScript实现数组对象去重的多种方法

 更新时间:2023年02月10日 14:13:25   作者:於生  
这篇文章主要介绍了JavaScript实现数组对象去重的多种方法,使用set对象或使用`reduce`方法,本文结合示例代码给大家介绍的非常详细,需要的朋友参考下吧

JavaScript实现数组对象去重的多种方法

有多种实现方式:

一、使用 Set 对象:

Array.from(new Set(array))

该方法会先创建一个 Set 对象,然后再使用 Array.from 方法将 Set 对象转换为数组,因为 Set 对象不允许有重复的元素,所以这样可以实现去重的效果。

但是,如果数组中的元素是对象,Set 对象会识别为不同的元素,所以不能直接使用该方法。为了解决这个问题,你可以使用一个映射函数,将数组中的对象映射为一个字符串或数字,然后再使用该方法。

以下是一个具体的例子:

const arr = [
    { id: 1, name: 'A' },
    { id: 2, name: 'B' },
    { id: 1, name: 'A' },
    { id: 3, name: 'C' }
];

const result = Array.from(new Set(arr.map(item => JSON.stringify(item)))).map(item => JSON.parse(item));
console.log(result);

二、使用`reduce`方法:

const arr = [
    { id: 1, name: 'A' },
    { id: 2, name: 'B' },
    { id: 1, name: 'A' },
    { id: 3, name: 'C' }
];
const result = arr.reduce((pre, cur) => {
    var exists = pre.find(item => JSON.stringify(item) === JSON.stringify(cur));
    if (!exists) {
        pre.push(cur);
    }
    return pre;
}, []);
console.log(result);

三、使用`filter`方法

const arr = [
    { id: 1, name: 'A' },
    { id: 2, name: 'B' },
    { id: 1, name: 'A' },
    { id: 3, name: 'C' }
];
const result =arr.filter((item, index, self) => {
    return self.findIndex(t => JSON.stringify(t) === JSON.stringify(item)) === index;
});
console.log(result);

补充:js数组对象去重

1、使用reduce()方法对象数组去重

通过数组的reduce()方法对数组的对象从左到右进行处理,定义一个空对象obj{};

如果数组当前对象的name不在obj{},就将当前对象的name加入到空对象,并将当前对象push到积累变量total数组里;

如果当前对象的name存在obj{},则跳过push操作。

//reduce第一个参数是遍历需要执行的函数,第二个参数是item的初始值
var arr = [{"id":1,"name":"张三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"},{"id":2,"name":"张三"}];
var obj = {};
arr = arr.reduce(function(item, next) {
       obj[next.id] ? '' : obj[next.id] = true && item.push(next);
       return item;
    }, []);
console.log(arr);

2、利用set去重

可以判断多个属性,这里判断了两个条件,(id 和 name)

var arr2 = [{"id":1,"name":"张三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"},{"id":2,"name":"张三"},{'id':4,'name':'李四'}];

function unique(arr){
    const res= new Map()
    return arr.filter((a)=> !res.has(a.id) && res.set(a.id,1) && !res.has(a.name) && res.set(a.name,1))
}
//输出结果:
unique(arr2)
[
    {
        "id": 1,
        "name": "张三"
    },
    {
        "id": 2,
        "name": "李四"
    },
    {
        "id": 3,
        "name": "王五"
    }
]

到此这篇关于JavaScript实现数组对象去重的多种方法的文章就介绍到这了,更多相关js数组对象去重内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js实现旋转的星空效果

    js实现旋转的星空效果

    这篇文章主要为大家详细介绍了js实现旋转的星空效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • echarts实现饼图与样式设置

    echarts实现饼图与样式设置

    这篇文章介绍了echarts实现饼图与样式设置的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • 动态添加js事件实现代码

    动态添加js事件实现代码

    动态添加js事件,主要是不用具体指定位置的事件,这种动态添加事件的方法比较方便,并可以扩展等。
    2009-03-03
  • js word表格动态添加代码

    js word表格动态添加代码

    最近听说了一个名词word宏编程。自己也学习了一下js动态添加word表格
    2010-06-06
  • JS+flash实现chrome和ie浏览器下同时可以复制粘贴

    JS+flash实现chrome和ie浏览器下同时可以复制粘贴

    chrome和ie同时可以复制粘贴,想必大家一直思索的问题在本文将有一个不错的实现,下面为大家介绍下JS+flash是如何实现的,感兴趣的朋友可以参考下
    2013-09-09
  • js动态设置div的值下例子

    js动态设置div的值下例子

    设置div的值想必大家都会吧,按要说动态设置想必知道的人及寥寥无几了,下面有个不错的示例,希望对大家有所帮助
    2013-10-10
  • get  post jsonp三种数据交互形式实例详解

    get post jsonp三种数据交互形式实例详解

    本文通过实例给大家详细介绍了get post jsonp三种数据交互形式,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-08-08
  • 浅述Javascript的外部对象

    浅述Javascript的外部对象

    本文主要对Javascript的外部对象进行介绍,列举了具体实例。便于理解。有需要的朋友可以看下
    2016-12-12
  • 10个最受欢迎的 JavaScript框架(推荐)

    10个最受欢迎的 JavaScript框架(推荐)

    这篇文章主要介绍了JavaScript框架特性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • JS实现根据URL批量下载文件并压缩成zip文件

    JS实现根据URL批量下载文件并压缩成zip文件

    这篇文章主要为大家学习介绍了JS如何实现根据URL批量下载文件并压缩成zip文件,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2023-08-08

最新评论