一次无意接受到json数组去重的帮助需求,自信满满的直接上手,不到两分钟留下代码就转身而去,不等屁股挨上座椅就被告知,无法实现去重效果。。。。立马转身再次回头梳理代码,经过各种梳理与尝试,最终完成了预期效果的实现,也意外的发现中间的一些容易忽略的坑与迷失点,现整理出来给自己梳理知识点的同时也给码友们提供参考。
json数组去重的方法其实很多,最原生的js写法就是for循环遍历,然后剔除重复的对象之后新建一个数组,最后这个新建的数组就是自己需要的,如下实例代码:
function unique(arr)
{
var result = []; //结果数组
for(var i = 0; i < arr.length; i++)
{
//如果在结果数组result中没有找到arr[i],则把arr[i]压入结果数组result中
if (result.indexOf(arr[i]) == -1) result.push(arr[i]);
}
return result;
}
但自从es6语法问世了之后,总会在不经意中或者刻意中去精简自己的代码或者提升代码体验感用es6的语法来处理问题,最开始就直接拿了数组和set的拓展方法来处理去重,语法如下:
// 去除数组的重复成员
[...new Set(array)]
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]
再通过Array.from()转换成数组就以为ok了,结果想当然的就掉坑了。
在es6的官方文档中,所有的示例基本都是用的最简单的数组(可称之为一维数组)来进行的示范,但在我这里的实际需求上是json数组,json数组与一维数组还是有根本上的区别,所以不出意外的就掉坑。
借用网上前辈的一些示例来说明:
let person = [
{id: 0, name: "小明"},
{id: 1, name: "小张"},
{id: 2, name: "小李"},
{id: 3, name: "小孙"},
{id: 1, name: "小周"},
{id: 2, name: "小陈"},
];
json数组如果单纯的从数组上来看其实也就是一个一维数组,但前提是将里面的各对象看做一个整体,而我们在实际运用中需要经常将里面的对象拆开来使用里面的各种属性进行相关控制。。。。
因此,在这里,我们需要借助map来进行处理:
const map = new Map()
let list = person.filter((item) => !map.has(item['name'] + '') && map.set(item['name'] + '', 1))
console.log(list)
我这里用的是对象的name属性来进行去重筛选,其实我们也可以通过对象的其他属性来进行筛选,类似我这里的id属性:
const map = new Map()
let list = person.filter((item) => !map.has(item['id'] + '') && map.set(item['id'] + '', 1))
console.log(list)
如果对es6兴趣不高,其实也可以用js的reduce方法来实现去重:
let obj = {};
let peon = person.reduce((cur,next) => {
obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
return cur;
},[]) //设置cur默认类型为数组,并且初始值为空的数组
console.log(peon);