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

2024-04-30 11:20

本文主要是介绍对于数组对象,根据指定的属性去重,并保留后一项,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

所需要去重的数组

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,否则就为falsevar 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());

reduce( function (初始值或计算后返回值,当前元素,索引,原数组) {

        // 代码块

}, 函数初始值)

其中必选的有:

  •  初始值或计算后返回值
  • 当前元素

其中可选的有

  • 索引
  • 原数组
  • 函数初始值

这篇关于对于数组对象,根据指定的属性去重,并保留后一项的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/948736

相关文章

HTML5的input标签的`type`属性值详解和代码示例

《HTML5的input标签的`type`属性值详解和代码示例》HTML5的`input`标签提供了多种`type`属性值,用于创建不同类型的输入控件,满足用户输入的多样化需求,从文本输入、密码输入、... 目录一、引言二、文本类输入类型2.1 text2.2 password2.3 textarea(严格

input的accept属性让文件上传安全高效

《input的accept属性让文件上传安全高效》文章介绍了HTML的input文件上传`accept`属性在文件上传校验中的重要性和优势,通过使用`accept`属性,可以减少前端JavaScrip... 目录前言那个悄悄毁掉你上传体验的“常见写法”改变一切的 html 小特性:accept真正的魔法:让

C#借助Spire.XLS for .NET实现在Excel中添加文档属性

《C#借助Spire.XLSfor.NET实现在Excel中添加文档属性》在日常的数据处理和项目管理中,Excel文档扮演着举足轻重的角色,本文将深入探讨如何在C#中借助强大的第三方库Spire.... 目录为什么需要程序化添加Excel文档属性使用Spire.XLS for .NET库实现文档属性管理Sp

Java数组动态扩容的实现示例

《Java数组动态扩容的实现示例》本文主要介绍了Java数组动态扩容的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录1 问题2 方法3 结语1 问题实现动态的给数组添加元素效果,实现对数组扩容,原始数组使用静态分配

java创建xls文件放到指定文件夹中实现方式

《java创建xls文件放到指定文件夹中实现方式》本文介绍了如何在Java中使用ApachePOI库创建和操作Excel文件,重点是如何创建一个XLS文件并将其放置到指定文件夹中... 目录Java创建XLS文件并放到指定文件夹中步骤一:引入依赖步骤二:创建XLS文件总结Java创建XLS文件并放到指定文件

sqlserver、mysql、oracle、pgsql、sqlite五大关系数据库的对象名称和转义字符

《sqlserver、mysql、oracle、pgsql、sqlite五大关系数据库的对象名称和转义字符》:本文主要介绍sqlserver、mysql、oracle、pgsql、sqlite五大... 目录一、转义符1.1 oracle1.2 sqlserver1.3 PostgreSQL1.4 SQLi

JavaScript对象转数组的三种方法实现

《JavaScript对象转数组的三种方法实现》本文介绍了在JavaScript中将对象转换为数组的三种实用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友... 目录方法1:使用Object.keys()和Array.map()方法2:使用Object.entr

vue监听属性watch的用法及使用场景详解

《vue监听属性watch的用法及使用场景详解》watch是vue中常用的监听器,它主要用于侦听数据的变化,在数据发生变化的时候执行一些操作,:本文主要介绍vue监听属性watch的用法及使用场景... 目录1. 监听属性 watch2. 常规用法3. 监听对象和route变化4. 使用场景附Watch 的

使用MapStruct实现Java对象映射的示例代码

《使用MapStruct实现Java对象映射的示例代码》本文主要介绍了使用MapStruct实现Java对象映射的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、什么是 MapStruct?二、实战演练:三步集成 MapStruct第一步:添加 Mave

Java中实现对象的拷贝案例讲解

《Java中实现对象的拷贝案例讲解》Java对象拷贝分为浅拷贝(复制值及引用地址)和深拷贝(递归复制所有引用对象),常用方法包括Object.clone()、序列化及JSON转换,需处理循环引用问题,... 目录对象的拷贝简介浅拷贝和深拷贝浅拷贝深拷贝深拷贝和循环引用总结对象的拷贝简介对象的拷贝,把一个