大数跨境
0
0

当数据量大的时候,为什么大厂不建议使用indexOf去重?

当数据量大的时候,为什么大厂不建议使用indexOf去重? 前端新次元
2025-10-21
0

 

字数 613,阅读大约需 4 分钟

什么是Set?

想象你有一个装小球的袋子,但有个特殊规则:同颜色的小球只能放一个。这就是Set的核心思想 - 它只存储唯一值。


   
    
   // 创建Set
const
 mySet = new Set();

// 添加元素

mySet.add('苹果');
mySet.add('香蕉');
mySet.add('苹果'); // 重复添加无效

console
.log(mySet); // Set(2) {'苹果', '香蕉'}

Set的超能力

1. 唯一性保证(核心特性)

Set的最大特点:自动去重。无论你加多少次,相同值只存一次。


   
    
   const numbers = [1, 2, 2, 3, 3, 3];
const
 uniqueNumbers = new Set(numbers);

console
.log([...uniqueNumbers]); // [1, 2, 3]

底层原理Set使用哈希表实现,查找速度接近O(1),比数组快得多。

2. 数组去重(最常用场景)

这是Set最经典的应用,一行代码搞定去重:


   
    
   const fruits = ['苹果', '香蕉', '苹果', '橙子', '香蕉'];

// 传统方法

const
 uniqueFruits = fruits.filter((item, index) => 
  fruits.indexOf(item) === index
);

// Set方法(简洁高效)

const
 uniqueFruits = [...new Set(fruits)];

console
.log(uniqueFruits); // ['苹果', '香蕉', '橙子']

当数组长度10,000时,Set 与filter+indexOf 耗时差不多是这样的:

  • • Set去重:约0.5ms
  • • filter+indexOf:约15ms

3. 极速存在性检查

检查元素是否存在?Set.has()方法快到飞起:


   
    
   const userIds = new Set(['u001', 'u002', 'u003']);

// 检查用户是否在黑名单

if
 (userIds.has('u002')) {
  console
.log('该用户已被限制');
}

除了has 方法,Set 还有这些API:

  • • add(value):添加元素
  • • delete(value):删除元素
  • • clear():清空set
  • • size:元素数量

4. 集合运算(并集/交集/差集)

Set让集合操作变得简单优雅:


   
    
   const setA = new Set([1, 2, 3]);
const
 setB = new Set([3, 4, 5]);

// 并集

const
 union = new Set([...setA, ...setB]); // [1,2,3,4,5]

// 交集

const
 intersection = new Set(
  [...setA].filter(x => setB.has(x)) // [3]
);

// 差集 (A有B没有)

const
 difference = new Set(
  [...setA].filter(x => !setB.has(x)) // [1,2]
);

什么时候用Set?

推荐使用Set的场景:

  • • 需要自动去重
  • • 频繁检查元素是否存在
  • • 处理大型数据集
  • • 需要集合运算

当然也得注意以下问题:

  1. 1. NaN的处理Set认为NaN等于自身。

   
    
   const set = new Set();
set.add(NaN);
set.has(NaN); // true
  1. 2. 对象引用:对象按引用存储

   
    
   const obj = {id: 1};
set.add(obj);
set.add({id: 1}); // 新对象,会被添加
  1. 3. 类型转换:不会自动转换类型

   
    
   set.add(5);
set.add('5'); // 字符串5,会被添加

现在就去你的项目中试试Set吧!你会发现代码变得更简洁高效。

 

🚀专注前沿技术拆解 | 每日 9:00 更新

👇 关注 | 点赞 | 分享,我们共同进化



🔥 热门文章推荐:


前端开发:原来微信原生小程序页面通信还能这样玩!
告别 if else!JavaScript这五个条件判断更好用
三个方法教你本地Vue3项目启用HTTPS服务
一行js代码实现前端复制功能
为什么大厂不建议把用户标识放在浏览器缓存中?

【声明】内容源于网络
0
0
前端新次元
聚焦前端核心技术,分享实用干货与深度解析。每日分享 JavaScript、Vue、React等文章。关注我,持续提升开发力!
内容 115
粉丝 0
前端新次元 聚焦前端核心技术,分享实用干货与深度解析。每日分享 JavaScript、Vue、React等文章。关注我,持续提升开发力!
总阅读61
粉丝0
内容115