js 怎样过滤数组中的重复项-js教程-PHP中文网

js 怎样过滤数组中的重复项

畫卷琴夢

发布： 2025-08-18 11:24:02

原创

745人浏览过

过滤 javascript 数组中的重复项有多种方法，1. 基础循环结合 indexof 检查，简单但性能差；2. 利用 es6 的 set 结构，代码简洁且效率高，适用于基本数据类型；3. 使用 filter 结合 indexof 或 includes，可保持原始顺序；4. 对象数组去重需基于唯一键使用 set 和自定义逻辑；5. set 能正确区分 null 和 undefined；6. 大型数组推荐使用 set 或 map 以获得 o(1) 查找性能；7. 若需保持顺序，可结合 set 与循环或使用 filter 方法。这些方法根据数据类型和性能需求选择使用，最终均能实现数组去重的目标。

js 怎样过滤数组中的重复项

过滤 JavaScript 数组中的重复项，本质上就是去重。有很多方法可以实现，从简单粗暴的循环判断，到利用 ES6 的 Set 数据结构，甚至还有更高级的利用 Map 的方式。选择哪种，主要看你的具体需求，比如数组大小、数据类型，以及对性能的要求。

解决方案

最基础的方法，就是用一个循环，然后每次检查当前元素是否已经存在于一个“已存在”的数组里。如果不存在，就把它加进去。这种方法简单直接，但效率相对较低，特别是对于大型数组。

function uniqueArray(arr) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    if (result.indexOf(arr[i]) === -1) {
      result.push(arr[i]);
    }
  }
  return result;
}

const myArray = [1, 2, 2, 3, 4, 4, 5];
const unique = uniqueArray(myArray);
console.log(unique); // 输出: [1, 2, 3, 4, 5]

登录后复制

ES6 引入了 Set 数据结构，它类似于数组，但是成员的值都是唯一的，没有重复的值。利用 Set 去重，代码简洁，效率也更高。

function uniqueArrayWithSet(arr) {
  return [...new Set(arr)];
}

const myArray = [1, 2, 2, 3, 4, 4, 5];
const unique = uniqueArrayWithSet(myArray);
console.log(unique); // 输出: [1, 2, 3, 4, 5]

登录后复制

还可以使用

filter

登录后复制

方法结合

indexOf

登录后复制

或

includes

登录后复制

实现去重。

filter

登录后复制

方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

113

查看详情

function uniqueArrayWithFilter(arr) {
  return arr.filter((item, index) => arr.indexOf(item) === index);
}

const myArray = [1, 2, 2, 3, 4, 4, 5];
const unique = uniqueArrayWithFilter(myArray);
console.log(unique); // 输出: [1, 2, 3, 4, 5]

登录后复制

更进一步，如果数组中的元素是对象，那么简单的

indexOf

登录后复制

或 Set 就不好使了，因为对象是引用类型，即使属性值相同，它们在内存中的地址也不同。这时候，就需要自定义比较函数。

function uniqueArrayWithObjects(arr, key) {
  const seen = new Set();
  return arr.filter(item => {
    const k = item[key];
    return seen.has(k) ? false : seen.add(k);
  });
}

const myArray = [{id: 1, name: 'a'}, {id: 2, name: 'b'}, {id: 1, name: 'a'}];
const unique = uniqueArrayWithObjects(myArray, 'id');
console.log(unique); // 输出: [{id: 1, name: 'a'}, {id: 2, name: 'b'}]

登录后复制

如何处理包含

null

登录后复制

或

undefined

登录后复制

的数组去重？

如果数组中包含

null

登录后复制

或

undefined

登录后复制

，需要特别注意。因为

null == undefined

登录后复制

为 true，但

null === undefined

登录后复制

为 false。使用

Set

登录后复制

可以很好地处理这种情况，因为

Set

登录后复制

认为

null

登录后复制

和

undefined

登录后复制

是不同的值。如果使用

indexOf

登录后复制

，需要额外判断。

function uniqueArrayWithNullUndefined(arr) {
  return [...new Set(arr)];
}

const myArray = [1, 2, null, undefined, 2, null, 3];
const unique = uniqueArrayWithNullUndefined(myArray);
console.log(unique); // 输出: [1, 2, null, undefined, 3]

登录后复制

在大型数组中，哪种去重方法性能最佳？

在大数据量的数组中，使用 Set 的性能通常是最好的。这是因为 Set 的

has

登录后复制

方法的时间复杂度是 O(1)，而

indexOf

登录后复制

的时间复杂度是 O(n)。这意味着，随着数组大小的增加，

indexOf

登录后复制

的性能会急剧下降。当然，如果数组非常小，或者去重操作不是性能瓶颈，那么使用哪种方法都无所谓。

如何保持去重后数组元素的原始顺序？

如果需要保持去重后数组元素的原始顺序，使用 Set 可能不是最佳选择，因为它不保证元素的顺序。在这种情况下，可以使用

filter

登录后复制

方法，或者手动循环并记录已存在的元素。

function uniqueArrayWithOrder(arr) {
  const seen = new Set();
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    if (!seen.has(arr[i])) {
      result.push(arr[i]);
      seen.add(arr[i]);
    }
  }
  return result;
}

const myArray = [5, 2, 2, 3, 4, 4, 1];
const unique = uniqueArrayWithOrder(myArray);
console.log(unique); // 输出: [5, 2, 3, 4, 1]

登录后复制

以上就是js 怎样过滤数组中的重复项的详细内容，更多请关注php中文网其它相关文章！