使用js进行数组对象去重

简介: 前言大家好,今天为大家分享几个数组对象去重的方法,数组对象去重也是经常要用到的,就和大家分享一下。

前言

大家好,今天为大家分享几个数组对象去重的方法,数组对象去重也是经常要用到的,就和大家分享一下。

一、数组内容

我们先创建一个数组,以下为创建的数组。

let arrs = [{
     id: '1',
     key: '1',
     value: '张三'
   }, {
     id: '3',
     key: '2',
     value: '李四'
   }, {
     id: '2',
     key: '3',
     value: '王五'
   }, {
     id: '1',
     key: '1',
     value: '赵六'
   }, {
     id: '1',
     key: '2',
     value: '马七'
}]

二、去除方法

1.对象访问属性方法

代码如下(示例):

let newArr = [];
    let obj = {};
    for (var i = 0; i < arrs.length; i++) {
       if (!obj[arrs[i].key]) {
         newArr.push(arrs[i])
         obj[arrs[i].key] = true
       }
    }
console.log(newArr);

2.Map()方法

代码如下(示例):

let map = new Map();
for (let item of this.arrs) {
    map.set(item.id, item);
 }
this.arrs = [...map.values()];
console.log(this.arrs)

set方法设置key所对应的键值,然后返回整个Map结构。如果key已经有值,则键值会被更新,否则就新生成该键。

values方法可以返回Map对象值的遍历器对象。

3.reduce() 方法

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

9f8566a87e0c4fea87f5cd3228d9f69e.png

const obj = {}
arr = arrs.reduce((total, next) => {
  obj[next.key] ? '' : obj[next.key] = true && total.push(next)
  return total
}, [])
console.log(arrs)

这里还有一个需求,如果有两个或者多个判断条件,给数组对象去重,加一个判断条件就行了

const hasObj = {}
arrs = arrs.reduce((total, next) => {
   const filterKey = next.key + next.id;
   hasObj[filterKey] ? "" : hasObj[filterKey] = true && total.push(next)
   return total
}, [])
console.log(arrs)

结束语:

以上就是本章的全部内容,希望能够帮助到您。

相关文章
|
4天前
|
JSON JavaScript 前端开发
JavaScript实现字符串转json对象的方法
JavaScript实现字符串转json对象的方法
|
1天前
|
JSON JavaScript 前端开发
如何检查 JavaScript 对象是否为空
【8月更文挑战第18天】
10 0
如何检查 JavaScript 对象是否为空
|
4天前
|
JavaScript 前端开发
JavaScript BOM 的概念(浏览器对象模型)
JavaScript BOM 的概念(浏览器对象模型)
12 1
|
4天前
|
JavaScript 前端开发
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
这篇文章介绍了JavaScript中的数组、Date对象、Math对象以及包装类(String、Number、Boolean),并详细讲解了数组的创建、方法(如forEach、push、pop、unshift、slice、splice)和遍历操作,以及工厂方法创建对象和原型对象的概念。
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
|
4天前
|
JavaScript 前端开发
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
这篇文章介绍了JavaScript中对象的基本概念和操作,包括对象属性和方法的使用、对象字面量的创建、函数的定义和作用域的概念,以及全局作用域和局部作用域的区别和特性。
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
|
4天前
|
JavaScript 前端开发 索引
JavaScript数组相关的方法有哪些?
JavaScript数组相关的方法有哪些?
|
4天前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
|
4天前
|
JavaScript 前端开发
JS遍历数组和对象的方法有哪些
JS遍历数组和对象的方法有哪些
|
4天前
|
JavaScript 前端开发
记录Javascript数组类练习
记录Javascript数组类练习
|
4天前
|
JavaScript 容器
JS-数组的定义
JS-数组的定义