数组元素为对象的数组如何去重

数组元素为对象的数组如何去重

本文行文中使用的 _underscore.js

需求: 在 JavaScript 中有一个数组,数组的元素是一个个的对象,我们想对它进行去重处理。

[
  { age: 20, name: "John" }, 
  { age: 31, name: "Mary" },
  { age: 20, name: "John" }
]

关于如上数据,进行去重:

var user = [
  { age: 20, name: "John" }, 
  { age: 31, name: "Mary" },
  { age: 20, name: "John" }
];

var uniq_user = _.uniq(user,false,function(item){
  return item.name && item.age;
});
console.log(uniq_user);
// [{age: 20, name: "John"},{age: 31, name: "Mary"}]
console.log(uniq_user.length);  // 2

因为数组的第一个元素和第三个元素相同,结果是2,符合预期。

如果我们将函数的第二个参数改为 true 呢,再来看看结果:

var user = [
  { age: 20, name: "John" }, 
  { age: 31, name: "Mary" },
  { age: 20, name: "John" }
];

var uniq_user = _.uniq(user,true,function(item){
  return item.name && item.age;
});

console.log(uniq_user.length);  // 2

结果还是2。因为有一个重复的元素,所以我们去重后,还剩2个不重复的元素

那么第二个参数 true 和 false 有什么区别呢?

我们来看 API :
_.uniq(array, [isSorted], [iteratee]) Alias: unique

Produces a duplicate-free version of the array, using === to test object equality. In particular only the first occurence of each value is kept. If you know in advance that the array is sorted, passing true for isSorted will run a much faster algorithm. If you want to compute unique items based on a transformation, pass an iteratee function.

第二个参数:[isSorted]

解读:如果你能确保你的数组是排序过的,那么这个地方可以用 true(_.uniq 函数将运行更快的算法)。如果你的数组没有排序过,这个地方用 false,那么 _.uniq 就知道你这是没排过序的,所以在去重之前会进行排序(虽然这样性能会下降)。但是如果你没排序的数组强行要说排序过了,然后用 true ,造成的可能错误结果由你自己负责哦。


好啦好啦(^o^)/我相信对于第二个参数 [isSorted] 你一定很了解了。

那么我们再来看另外一种情况吧:
第一个和第三个 age 相同,name 不同

var user = [
  { age: 20, name: "John" }, 
  { age: 31, name: "Mary" },
  { age: 20, name: "Kevin" }
];
var uniq_user = _.uniq(user);
console.log(uniq_user.length);  // 3

结果是3。没毛病,因为第一个跟第三个并不相同。


如果,我们希望是以 age 做为唯一值来进行去重呢。

var user = [
  { age: 20, name: "John" }, 
  { age: 31, name: "Mary" },
  { age: 20, name: "Kevin" }
];
var uniq_user = _.uniq(user,false,function(item){
  return item.age
});
console.log(uniq_user); 
// [{age: 20, name: "John"},{age: 31, name: "Mary"}]
console.log(uniq_user.length);  // 2

结果是2。没毛病,第三个元素,因为 age 与第一个相同,被去掉了。

【结论:默认情况下,我们是认为元素完全相同就去掉。所以使用 _.uniq(arr) 就够了,如果你的数组排序过了,你希望去重速度快一点,可以使用第二个参数 true 表明你的数组是排序过的。如果你希望去重依据是对象的某个元素的话,可以使用第三个参数,传入一个函数。】


OK,好啦。关于 _.uniq 的解读差不多就这么多啦(≧▽≦)/

下面是
彩蛋

但如果两个对象,需求是: age 相同就认为是一个对象,这个时候应该是这样写:

var user = [
  { age: 20, name: "John" }, 
  { age: 31, name: "Mary" },
  { age: 20, name: "Kevin" }
];
var uniq_user = _.uniq(user,false,function(item){
  return item.age;
});
console.log(uniq_user.length);  // 2

结果是2。 没毛病


如果两个对象,需求是: name 相同就认为是一个对象,这个时候应该是这样写:

var user = [
  { age: 20, name: "John" }, 
  { age: 31, name: "Mary" },
  { age: 20, name: "Kevin" }
];
var uniq_user = _.uniq(user,false,function(item){
  return item.name;
});
console.log(uniq_user.length);  // 3

结果是3。 没毛病,老铁


---------------------------(正文完)------------------------------------
一个前端的学习交流群,想进来面基的,可以点击这个logoVue学习交流,或者手动search群号:685486827


写在最后: 约定优于配置-------软件开发的简约原则.
-------------------------------- (完)--------------------------------------

我的:
个人网站: https://neveryu.github.io/neveryu/
Github: https://github.com/Neveryu
新浪微博: https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博…

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值