首页 > web前端 > js教程 > 正文

js 怎样用unique对数组元素进行去重

小老鼠
发布: 2025-08-08 09:06:02
原创
989人浏览过

数组去重的首选方法是使用set,因为其基于哈希表实现,查找效率为o(1),性能优于其他方法;1. 使用set去重:通过[...new set(arr)]可快速去除重复值,适用于简单数据类型且通常保持原顺序;2. 使用filter与indexof:通过arr.filter((item, index) => arr.indexof(item) === index)实现,兼容性好但性能较低;3. 使用reduce与includes:通过累加器和includes判断是否包含当前元素,逻辑清晰但效率不高;4. 处理对象数组时需自定义比较函数,如利用some方法结合id等属性判断唯一性;5. 若需排除null和undefined,可在去重前先用filter过滤;6. set还可用于集合运算,如求交集、并集、差集等,具备add、delete、has、clear和size等实用方法,功能丰富。因此,set是高效且多功能的去重选择。

js 怎样用unique对数组元素进行去重

数组去重,简单来说,就是把数组里重复的元素去掉,留下唯一的值。JavaScript 提供了多种方法来实现这个目标,但哪种方法最适合你的场景,取决于你的具体需求,比如数组的大小、数据类型、性能要求等等。

解决方案

  1. 使用 Set 数据结构

    ES6 引入了 Set,它是一种集合数据结构,其特性就是不允许存储重复的值。利用这个特性,我们可以很方便地对数组进行去重。

    function unique(arr) {
      return [...new Set(arr)];
    }
    
    // 示例
    const numbers = [1, 2, 2, 3, 4, 4, 5];
    const uniqueNumbers = unique(numbers);
    console.log(uniqueNumbers); // 输出: [1, 2, 3, 4, 5]
    登录后复制

    这种方法简洁高效,是处理简单数据类型数组(如数字、字符串)的常用选择。

  2. 使用 Array.filter() 和 Array.indexOf()

    这种方法利用

    filter()
    登录后复制
    遍历数组,并使用
    indexOf()
    登录后复制
    检查当前元素是否已经存在于结果数组中。如果不存在,则将其添加到结果数组。

    function unique(arr) {
      return arr.filter((item, index) => arr.indexOf(item) === index);
    }
    
    // 示例
    const numbers = [1, 2, 2, 3, 4, 4, 5];
    const uniqueNumbers = unique(numbers);
    console.log(uniqueNumbers); // 输出: [1, 2, 3, 4, 5]
    登录后复制

    这种方法兼容性较好,但对于大型数组,性能可能不如使用 Set。

  3. 使用 Array.reduce() 和 includes()

    reduce()
    登录后复制
    方法可以将数组中的每个值(从左到右)累加,最终计算为一个值。我们可以利用它来构建一个去重后的数组。

    降重鸟
    降重鸟

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

    降重鸟113
    查看详情 降重鸟
    function unique(arr) {
      return arr.reduce((acc, curr) => {
        if (!acc.includes(curr)) {
          acc.push(curr);
        }
        return acc;
      }, []);
    }
    
    // 示例
    const numbers = [1, 2, 2, 3, 4, 4, 5];
    const uniqueNumbers = unique(numbers);
    console.log(uniqueNumbers); // 输出: [1, 2, 3, 4, 5]
    登录后复制

    这种方法思路清晰,但

    includes()
    登录后复制
    方法在大型数组中查找元素时效率较低。

  4. 处理包含对象或复杂数据类型的数组

    如果数组包含对象或其他复杂数据类型,简单的

    ===
    登录后复制
    比较无法判断两个对象是否相等。这时,我们需要自定义比较函数。

    function unique(arr, compare) {
      const result = [];
      arr.forEach(item => {
        if (!result.some(existing => compare(item, existing))) {
          result.push(item);
        }
      });
      return result;
    }
    
    // 示例:比较两个对象是否具有相同的 id 属性
    const objects = [{ id: 1, name: 'A' }, { id: 2, name: 'B' }, { id: 1, name: 'C' }];
    const uniqueObjects = unique(objects, (a, b) => a.id === b.id);
    console.log(uniqueObjects); // 输出: [{ id: 1, name: 'A' }, { id: 2, name: 'B' }]
    登录后复制

    这里,

    compare
    登录后复制
    函数用于比较两个对象是否相等。你需要根据对象的具体结构和比较逻辑来实现这个函数。

为什么 Set 通常是首选的去重方法?

Set 的底层实现通常基于哈希表,这使得它在查找元素时具有近乎常数时间的复杂度 O(1)。相比之下,

indexOf()
登录后复制
includes()
登录后复制
方法在数组中查找元素的时间复杂度为 O(n)。因此,对于大型数组,使用 Set 可以显著提高去重效率。

去重后数组的顺序会改变吗?

使用 Set 去重通常会保留原始数组的顺序。然而,不同的 JavaScript 引擎可能对此有不同的实现。如果你需要绝对保证去重后数组的顺序与原始数组一致,可以考虑使用

Array.filter()
登录后复制
Array.indexOf()
登录后复制
方法,或者在去重后对数组进行排序。

如何处理数组中的 null 和 undefined 值?

在去重时,

null
登录后复制
undefined
登录后复制
也被视为普通的值。如果需要将它们排除在去重结果之外,可以在去重前先将它们过滤掉。

function unique(arr) {
  return [...new Set(arr.filter(item => item !== null && item !== undefined))];
}

// 示例
const values = [1, 2, null, undefined, 2, 3, null];
const uniqueValues = unique(values);
console.log(uniqueValues); // 输出: [1, 2, 3]
登录后复制

除了去重,还能用 Set 做什么?

Set 不仅仅可以用于去重。它还提供了一些其他有用的方法,例如:

  • add(value)
    登录后复制
    : 向 Set 中添加一个值。
  • delete(value)
    登录后复制
    : 从 Set 中删除一个值。
  • has(value)
    登录后复制
    : 检查 Set 中是否包含一个值。
  • clear()
    登录后复制
    : 清空 Set 中的所有值。
  • size
    登录后复制
    : 返回 Set 中值的数量。

你可以利用这些方法来实现一些集合操作,例如求交集、并集、差集等。比如,求两个数组的交集可以这样做:

function intersection(arr1, arr2) {
  const set1 = new Set(arr1);
  return [...new Set(arr2)].filter(item => set1.has(item));
}

// 示例
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [3, 4, 5, 6, 7];
const intersectionResult = intersection(arr1, arr2);
console.log(intersectionResult); // 输出: [3, 4, 5]
登录后复制

以上就是js 怎样用unique对数组元素进行去重的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号