3种JavaScript过滤数组中重复对象的方法 |
您所在的位置：网站首页 › 重复值只保留一个函数 › 3种JavaScript过滤数组中重复对象的方法 |
3种JavaScript过滤数组中重复对象的方法
|
1.只将第一个对象保留在具有属性值的数组中 要通过 JavaScript 中的属性过滤数组中的重复对象，请使用 filter() 方法过滤掉不是数组中第一个具有该属性值的元素。 例如： const arr = [ { name: 'John', location: 'Los Angeles', }, { name: 'Kate', location: 'New York', }, { name: 'Mike', location: 'New York', }, ]; const unique = arr.filter( (obj, index) => arr.findIndex((item) => item.location === obj.location) === index ); /* [ { name: 'John', location: 'Los Angeles' }, { name: 'Kate', location: 'New York' } ] */ console.log(unique);Array filter() 根据回调函数指定的条件测试数组中的每个元素，并创建一个新数组，其中填充通过测试的元素，它不会修改原始数组。 const arr = [1, 2, 3, 4]; const filtered = arr.filter((num) => num > 2); console.log(filtered); // [ 3, 4 ]Array findIndex() 方法搜索数组中的元素并返回第一个通过测试的元素的索引，由传递给它的回调函数指定。我们使用它来查找与当前正在测试的对象 filter() 具有相同属性值的第一个数组元素。 在我们的示例中，对象的 filter() 条件是其数组索引与 findIndex() 的结果相同。如果此条件为真，则意味着该对象是具有属性值的第一个数组元素。如果为假，则意味着已经有一个具有该属性值的数组项，因此该对象是重复的，不应包含在结果中。 const arr = [ { name: 'John', location: 'Los Angeles', }, { name: 'Kate', location: 'New York', }, { name: 'Mike', location: 'New York', }, ]; // true - first object with location of New York console.log(1 === arr.findIndex((obj) => obj.location === 'New York')); // false - will not be included in result console.log(2 === arr.findIndex((obj) => obj.location === 'New York'));按多个属性过滤数组中的重复对象 根据您的情况，您可能希望仅当对象具有两个或多个具有相同值的属性时才将其视为重复对象——多个属性值相同。 对于这种情况，我们将像以前一样使用 filter() 和 findIndex()，但我们将为所有属性添加 filter() 的对象和 findIndex() 的对象之间的额外比较。 例如： const arr = [ { name: 'Kate', location: 'New York' }, { name: 'Mike', location: 'New York' }, { name: 'Kate', location: 'New York' } ]; const unique = arr.filter( (obj, index) => arr.findIndex( (item) => item.location === obj.location && item.name === obj.name ) === index ) /* [ { name: 'Kate', location: 'New York' }, { name: 'Mike', location: 'New York' } ] */ console.log(unique);2.从唯一数组中排除重复项 这是在 JavaScript 中从数组中过滤重复对象的另一种方法： 创建一个空的唯一数组来存储唯一对象。 循环遍历数组中的对象。 对于每个对象，如果它不是重复的，则将其添加到唯一数组。否则，忽略它。 例如： const arr = [ { name: 'John', location: 'Los Angeles', }, { name: 'Kate', location: 'New York', }, { name: 'Mike', location: 'New York', }, ]; const unique = []; for (const item of arr) { const isDuplicate = unique.find((obj) => obj.location === item.location); if (!isDuplicate) { unique.push(item); } } /* [ { name: 'John', location: 'Los Angeles' }, { name: 'Kate', location: 'New York' } ] */ console.log(unique);我们使用 for...of 循环遍历数组并对每个对象执行一个操作。 对于每个对象，我们使用 find() 方法检查它是否已经存在于唯一数组中。Array find() 搜索数组中第一个通过指定测试的对象，类似于 findIndex()，但它返回对象本身而不是它的数组索引。 const nums = [2, 5, 8, 13, 19]; const doubleDigit = nums.find((num) => num > 9); console.log(doubleDigit); // 13如果它不在唯一数组中，我们只需使用 push() 方法添加它。 这种方法不像第一种方法那样单行，但您可能会发现它更容易理解。这似乎是您作为人类从列表中删除重复项目的自然方式。 3.按多个属性过滤数组中的重复对象 与前面的方法一样，如果使用多个属性来确定一个对象是否重复，您可以简单地为属性添加更多检查——这次是在 find() 方法中： const arr = [ { name: 'Kate', location: 'New York', }, { name: 'Mike', location: 'New York', }, { name: 'Kate', location: 'New York', }, ]; const unique = []; for (const item of arr) { // 👇 "name" and "location" used for duplicate check const duplicate = unique.find( (obj) => obj.location === item.location && obj.name === item.name ); if (!duplicate) { unique.push(item); } } /* [ { name: 'Kate', location: 'New York' }, { name: 'Mike', location: 'New York' } ] */ console.log(unique);总结 以上就是我今天跟你分享的全部内容，希望这些内容能够对你有所帮助。 学习更多技能 请点击下方公众号
|
【本文地址】
今日新闻 |
推荐新闻 |