javascript中过滤二维对象数组重复的字段并只保留唯一值(array.filter与Array.from)

简介: javascript中过滤二维对象数组重复的字段并只保留唯一值(array.filter与Array.from)

1.Array.filter过滤

在JavaScript中,你可以使用Array.filter()Set数据结构来过滤二维对象数组中重复的字段,只保留唯一值。下面是一种可能的写法:

// 示例数据
const array = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'John' },
  { id: 4, name: 'Alice' },
  { id: 5, name: 'Jane' }
];
// 使用 Set 过滤数组
const uniqueArray = array.filter((obj, index, self) =>
  index === self.findIndex((o) => (
    o.name === obj.name
  ))
);
console.log(uniqueArray);



在上面的例子中,我们使用Array.filter()方法来遍历数组,并使用Array.findIndex()方法找到第一个与当前对象相同名称的对象的索引位置。如此一来,只会保留第一个出现的对象,而将后续重复的对象过滤掉,得到的uniqueArray就是只包含唯一值的数组。


输出结果如下:

[
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 4, name: 'Alice' }
]


注意:上述方法只会过滤相同字段(这里是name)的对象,在本例中并不会过滤相同的id字段。如果你希望根据多个字段进行过滤,可以在Array.findIndex()的回调函数中增加适当的条件判断。

array.filter()方法

array.filter()是一个数组方法,用于创建一个新数组,其中包含满足指定条件的所有元素。它接受一个回调函数作为参数,并在每个数组元素上调用该函数。回调函数需要返回一个布尔值来确定是否保留该元素。


array.filter()的语法如下:

array.filter(callback(element[, index, [array]])[, thisArg])

其中:

  • callback:必需,表示用于测试每个元素的函数。
  • element:当前被处理的元素。
  • index(可选):当前元素在数组中的索引。
  • array(可选):调用filter方法的数组。
  • thisArg(可选):用来执行回调函数时的this值。


下面是一个简单的示例,演示如何使用array.filter()方法:

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // [2, 4]


在上面的例子中,我们定义了一个回调函数(num) => num % 2 === 0,用于测试每个数字是否是偶数。array.filter()方法会遍历数组中的每个元素,并将回调函数应用于每个元素。仅当回调函数返回true时,相应的元素才会被保留在新数组evenNumbers中。


注意,array.filter()会返回满足条件的元素组成的新数组,原始数组不受影响。


2.Array.from过滤

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'John' },
  { id: 4, name: 'Kate' },
  { id: 5, name: 'Jane' }
];
// 使用Set和map进行去重
const uniqueArr = Array.from(new Set(arr.map(obj => obj.name))).map(name => {
  return arr.find(obj => obj.name === name);
});
console.log(uniqueArr);


Array.from方法

使用Array.from方法可以将类数组对象或可迭代对象转换为数组。它的语法如下:

Array.from(arrayLike[, mapFn[, thisArg]])


其中:

  • arrayLike:要转换为数组的类数组对象或可迭代对象。
  • mapFn(可选):一个映射函数,可以对每个元素进行操作或转换。
  • thisArg(可选):可选地设置映射函数中的this值。

下面是一些示例,演示了不同情况下使用Array.from的写法:


  1. 将类数组对象转换为数组:
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const array = Array.from(arrayLike);
console.log(array); // ['a', 'b', 'c']
  1. 对可迭代对象进行操作:
const iterable = 'hello';
const array = Array.from(iterable, char => char.toUpperCase());
console.log(array); // ['H', 'E', 'L', 'L', 'O']


  1. 使用箭头函数设置this值:
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const array = Array.from(
  arrayLike,
  function (element) {
    // this 指向 object
    return element.toUpperCase() + this.postfix;
  },
  { postfix: '!' }
);
console.log(array); // ['A!', 'B!', 'C!']


以上是Array.from的基本用法。你可以根据具体需求来调整mapFnthisArg参数,以便对转换后的数组进行进一步的操作和处理。


@漏刻有时

相关文章
|
3月前
|
人工智能 Java
Java 中数组Array和列表List的转换
本文介绍了数组与列表之间的相互转换方法,主要包括三部分:1)使用`Collections.addAll()`方法将数组转为列表,适用于引用类型,效率较高;2)通过`new ArrayList<>()`构造器结合`Arrays.asList()`实现类似功能;3)利用JDK8的`Stream`流式计算,支持基本数据类型数组的转换。此外,还详细讲解了列表转数组的方法,如借助`Stream`实现不同类型数组间的转换,并附带代码示例与执行结果,帮助读者深入理解两种数据结构的互转技巧。
Java 中数组Array和列表List的转换
|
3月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
3月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
3月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
6月前
|
存储 Go 索引
go语言中的数组(Array)
go语言中的数组(Array)
158 67
|
3月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
3月前
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
3月前
|
Web App开发 存储 前端开发
别再用双层遍历循环来做新旧数组对比,寻找新增元素了!使用array.includes和Set来提升代码可读性
这类问题的重点在于能不能突破基础思路,突破基础思路是从程序员入门变成中级甚至高级的第一步,如果所有需求都通过最基础的业务逻辑来做,是得不到成长的。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
3月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
199 2