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参数,以便对转换后的数组进行进一步的操作和处理。


@漏刻有时

相关文章
|
20天前
|
人工智能 前端开发 JavaScript
拿下奇怪的前端报错(一):报错信息是一个看不懂的数字数组Buffer(475) [Uint8Array],让AI大模型帮忙解析
本文介绍了前端开发中遇到的奇怪报错问题,特别是当错误信息不明确时的处理方法。作者分享了自己通过还原代码、试错等方式解决问题的经验,并以一个Vue3+TypeScript项目的构建失败为例,详细解析了如何从错误信息中定位问题,最终通过解读错误信息中的ASCII码找到了具体的错误文件。文章强调了基础知识的重要性,并鼓励读者遇到类似问题时不要慌张,耐心分析。
|
22天前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
17 2
|
22天前
|
存储 Java
Java“(array) <X> Not Initialized” (数组未初始化)错误解决
在Java中,遇到“(array) &lt;X&gt; Not Initialized”(数组未初始化)错误时,表示数组变量已被声明但尚未初始化。解决方法是在使用数组之前,通过指定数组的大小和类型来初始化数组,例如:`int[] arr = new int[5];` 或 `String[] strArr = new String[10];`。
|
25天前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
19 3
|
3天前
|
JavaScript 前端开发 开发者
|
27天前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
34 4
|
25天前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
27 1
|
29天前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
22 5
|
1月前
|
JavaScript 前端开发 索引
JS 删除数组元素( 5种方法 )
JS 删除数组元素( 5种方法 )
30 1
|
25天前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
13 0