js-多种数组去重性能对比

简介: 多种数组去重性能对比

多种数组去重性能对比

测试模板

// 创建一个 1 ~ 10w 的数组,Array.from为ES6语法
let arr1 = Array.from(new Array(1000000), (x, index) => { 
  return index
})
let arr2 = Array.from(new Array(500000), (x, index) => {
  return index + index
})
let start = new Date().getTime()
console.log('开始数组去重')
// 数组去重
function distinct(a, b) {
  let arr = a.concat(b);
  // 去重方法
}
console.log('去重后的长度', distinct(arr1, arr2).length)
let end = new Date().getTime()
console.log('耗时', end - start + 'ms')

测试代码

// 创建一个 1 ~ 10w 的数组,Array.from为ES6语法
let arr1 = Array.from(new Array(1000000), (x, index) => { 
  return index
})
let arr2 = Array.from(new Array(500000), (x, index) => {
  return index + index
})
let start = new Date().getTime()
console.log('开始数组去重')
// 数组去重
function distinct(a, b) {
  let arr = a.concat(b);
  
  // 方法1,耗时约11675ms,约11s
  // return arr.filter((item, index) => {
  //   return arr.indexOf(item) === index
  // })
  // 方法2,耗时约22851ms,约22s,性能最差
  // for (let i = 0, len = arr.length; i < len; i++) {
  //   for (let j = i + 1; j < len; j++) {
  //     if (arr[i] == arr[j]) {
  //       arr.splice(j, 1);
  //       // splice 会改变数组长度,所以要将数组长度 len 和下标 j 减一
  //       len--;
  //       j--;
  //     }
  //   }
  // }
  // return arr
  //方法3,耗时约12789ms,约12s,和方法1相当
  // let result = []
  // for (let i of arr) {
  //   !result.includes(i) && result.push(i)
  // }
  // return result
  //方法4,耗时约23ms,ES5标准中性能最高
  // arr = arr.sort()
  // let result = [arr[0]]
  // for (let i = 1, len = arr.length; i < len; i++) {
  //   arr[i] !== arr[i - 1] && result.push(arr[i])
  // }
  // return result
  // 方法5,ES6的Set数据结构,耗时约20ms,性能高,代码简洁
  // return Array.from(new Set([...a, ...b]))
  // 方法6,耗时约16ms,所有方法中 性能最高! (千万级数据量下效率比方法5高4倍,for...of 为ES6语法)
  let result = []
  let obj = {}
  for (let i of arr) {
    if (!obj[i]) {
      result.push(i)
      obj[i] = 1
    }
  }
  return result
}
console.log('去重后的长度', distinct(arr1, arr2).length)
let end = new Date().getTime()
console.log('耗时', end - start + 'ms')

结论

ES5标准中性能最高的数组去重方法为:

// 耗时约23ms
arr = arr.sort()
let result = [arr[0]]
for (let i = 1, len = arr.length; i < len; i++) {
    arr[i] !== arr[i - 1] && result.push(arr[i])
}
return result

ES6标准中性能最高的数组去重方法为:

// 耗时约16ms (千万级数据量下效率比使用Set数据结构方法高4倍,for...of 为ES6语法)
let result = []
let obj = {}
for (let i of arr) {
    if (!obj[i]) {
        result.push(i)
        obj[i] = 1
    }
}
return result

代码既简洁性能又相对高的去重方法为:

// 耗时约20ms,性能高,代码简洁
return Array.from(new Set([...a, ...b]))
相关文章
|
13天前
|
算法 JavaScript 前端开发
垃圾回收机制对 JavaScript 性能的影响有哪些?
【10月更文挑战第29天】垃圾回收机制对JavaScript性能有着重要的影响。开发者需要了解不同垃圾回收算法的特点和性能开销,通过合理的代码优化和内存管理策略,来降低垃圾回收对性能的负面影响,提高JavaScript程序的整体性能。
|
11天前
|
JavaScript 前端开发
利用事件循环提高 JavaScript 程序的性能
本文介绍了事件循环在JavaScript中的工作原理,以及如何通过合理利用事件循环来优化程序性能,包括异步操作、任务优先级和避免阻塞等技巧。
|
5月前
|
JavaScript 前端开发
事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。
【6月更文挑战第27天】事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。例如,动态列表可共享一个`click`事件处理器,通过`event.target`识别触发事件的子元素,简化管理和响应动态内容变化。
46 0
|
6月前
|
存储 JavaScript 前端开发
史上最详细JavaScript数组去重方法(11种)
使用set和Array.from ()方法 array.from可以将set结构转成数组
61 7
|
2月前
|
缓存 JavaScript 中间件
优化Express.js应用程序性能:缓存策略、请求压缩和路由匹配
在开发Express.js应用时,采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据,并通过精确匹配、模块化路由及参数化路由提高路由处理效率,从而打造高效应用。
152 11
|
1月前
|
存储 JavaScript 前端开发
JavaScript数组去重的八种方法详解及性能对比
在JavaScript开发中,数组去重是一个常见的操作。本文详细介绍了八种实现数组去重的方法,从基础的双重循环和 indexOf() 方法,到较为高级的 Set 和 Map 实现。同时,分析了每种方法的原理和适用场景,并指出了使用 Set 和 Map 是目前最优的解决方案。通过本文,读者可以深入理解每种方法的优缺点,并选择最合适的数组去重方式。
58 0
|
3月前
|
缓存 前端开发 JavaScript
超时空加速秘籍:揭秘JavaScript前端开发中的性能魔法,让您的Web应用瞬间穿越到未来!
【8月更文挑战第27天】本文介绍了一系列实用的JavaScript性能优化方法并提供了示例代码,包括减少DOM操作、使用事件委托、避免阻塞主线程、异步加载资源、利用浏览器缓存、代码分割以及使用Service Worker等技术,帮助开发者有效提升Web应用性能和用户体验。
51 2
|
3月前
|
JavaScript 前端开发
深入理解Node.js事件循环及其对后端性能的影响
【8月更文挑战第31天】 本文将带你一探Node.js的核心概念—事件循环,揭示其工作原理及如何影响后端应用的性能。我们将从基础的事件驱动模型出发,通过代码示例和性能分析,展示如何有效利用事件循环来提升应用响应速度和处理能力。
|
5月前
|
缓存 编解码 JavaScript
在JavaScript小游戏开发中,优化游戏性能是非常重要的
【6月更文挑战第16天】JavaScript小游戏性能优化涉及动画流畅度和减少重绘:使用requestAnimationFrame替代定时器;减少DOM操作,利用DocumentFragment或虚拟DOM;Canvas/WebGL高效渲染;压缩图像,使用雪碧图;分层渲染与视口裁剪;Web Workers处理后台计算;缓存计算结果;事件委托;定期性能分析。优化是持续过程,需结合具体需求调整。
70 8
|
5月前
|
存储 JavaScript 前端开发
JS中数组去重的几种方法
JS中数组去重的几种方法
27 1