神族九帝's blog 神族九帝's blog
首页
网盘 (opens new window)
线报 (opens new window)
商城 (opens new window)
  • 复习指导
  • HTML
  • CSS
  • JavaScript
  • 设计模式
  • 浏览器
  • 手写系列
  • Vue
  • Webpack
  • Http
  • 前端优化
  • 项目
  • 面试真题
  • 算法
  • 精选文章
  • 八股文
  • 前端工程化
  • 基础篇
  • 进阶篇
  • 高级篇
  • 计算机基础
  • 高频考点
  • 精简题
  • 综合问题
  • 复习题
  • vue
  • vue2源码学习
  • 剖析vuejs内部运行机制
  • TypeScript 入门实战笔记
  • vue3源码学习
  • 2周刷完100道前端优质面试真题
  • npm发包
  • 重学node
  • 前端性能优化方法与实战
  • webpack原理与实战
  • webGl
  • 前端优化
  • Web3
  • 更多
  • 网站
  • 资源
  • Vue资源
  • 收藏的一些API
  • 未来要做的事
  • 宝塔面板+青龙面板
  • 安卓手机当服务器使用
  • 京东自动评价代码
  • 搭建x-ui免流服务器(已失效)
  • 海外联盟
  • 好玩的docker
  • 导航
GitHub (opens new window)

神族九帝,永不言弃

首页
网盘 (opens new window)
线报 (opens new window)
商城 (opens new window)
  • 复习指导
  • HTML
  • CSS
  • JavaScript
  • 设计模式
  • 浏览器
  • 手写系列
  • Vue
  • Webpack
  • Http
  • 前端优化
  • 项目
  • 面试真题
  • 算法
  • 精选文章
  • 八股文
  • 前端工程化
  • 基础篇
  • 进阶篇
  • 高级篇
  • 计算机基础
  • 高频考点
  • 精简题
  • 综合问题
  • 复习题
  • vue
  • vue2源码学习
  • 剖析vuejs内部运行机制
  • TypeScript 入门实战笔记
  • vue3源码学习
  • 2周刷完100道前端优质面试真题
  • npm发包
  • 重学node
  • 前端性能优化方法与实战
  • webpack原理与实战
  • webGl
  • 前端优化
  • Web3
  • 更多
  • 网站
  • 资源
  • Vue资源
  • 收藏的一些API
  • 未来要做的事
  • 宝塔面板+青龙面板
  • 安卓手机当服务器使用
  • 京东自动评价代码
  • 搭建x-ui免流服务器(已失效)
  • 海外联盟
  • 好玩的docker
  • 导航
GitHub (opens new window)
  • 复习指导

  • HTML

  • CSS

  • JavaScript

    • 思维导图
    • 数据类型
    • 隐式类型转换
    • 闭包
    • 原型和原型链
    • 继承
    • 数组扁平化flat
    • new操作符做了什么
    • 数组去重性能
      • 测试用例 1
      • 测试用例 2
      • 方法
        • es6 的 set 去重 代码既简洁性能又相对高的去重方法为
        • for 循环嵌套,然后 split
        • indexOf
        • sort ES5 标准中性能最高
        • includes
        • filter
        • forof 所有方法中 性能最高
      • 结论
    • 防抖与节流函数
    • 深浅拷贝
    • Event Loop
    • 数组方法和类数组
    • 数组排序
    • 异步编程
    • 获取URL参数
    • 模块规范
    • tree-shaking的原理
    • 隔离沙箱
  • 设计模式

  • 浏览器

  • 手写系列

  • Vue

  • Webpack

  • Http

  • 前端优化

  • 项目

  • 面试真题

  • 算法

  • 精选文章

  • 八股文

  • 前端工程化

  • 面试题
  • JavaScript
wu529778790
2019-06-05

数组去重性能

# 测试用例 1

let arr1 = Array.from(new Array(1e4), (x, index) => {
  return index;
});
let arr2 = Array.from(new Array(2e4), (x, index) => {
  return index * 2;
});
console.time("数组去重时间:");
// 数组去重
function unique(a, b) {
  let arr = a.concat(b);
  // 去重方法
}
console.log("去重后的长度", unique(arr1, arr2).length);
console.timeEnd("数组去重时间:");

# 测试用例 2

const arr = [
  1,
  1,
  "true",
  "true",
  true,
  true,
  15,
  15,
  false,
  false,
  undefined,
  undefined,
  null,
  null,
  NaN,
  NaN,
  "NaN",
  0,
  0,
  "a",
  "a",
  {},
  {},
];
console.time("数组去重时间:");
// 数组去重
function unique(arr) {
  // 去重方法
}
console.log("去重后的长度", unique(arr).length);
console.timeEnd("数组去重时间:");

# 方法

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

unique = (arr) => {
  return arr.from(new Set(arr));
};

这种去重的方法代码最少,这种方法还无法去掉“{}”空对象

去重后的长度 25000

数组去重时间:: 3.474853515625 ms

# for 循环嵌套,然后 split

unique = (a, b) => {
  let arr = a.concat(b);
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        //第一个等同于第二个,splice方法删除第二个
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
};

双层循环,外层循环元素,内层循环时比较值。值相同时,则删去这个值

去重后的长度 25000

数组去重时间:: 690.177001953125 ms

# indexOf

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

去重后的长度 25000

数组去重时间:: 331.825927734375 ms

# sort ES5 标准中性能最高

unique = (arr) => {
  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;
};

利用 sort()排序方法,然后根据排序后的结果进行遍历及相邻元素比对

去重后的长度 25001

数组去重时间:: 5.1328125 ms

# includes

unique = (arr) => {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    if (!result.includes(arr[i])) {
      result.push(arr[i]);
    }
  }
  return result;
};

去重后的长度 25000

数组去重时间:: 320.510009765625 ms

# filter

unique = (arr) => {
  return arr.filter((item) => {
    return arr.indexOf(item, 0) === index;
  });
};

去重后的长度 25000

数组去重时间:: 401.141845703125 ms

# forof 所有方法中 性能最高

unique = (arr) => {
  let result = [];
  let obj = {};
  for (let i of arr) {
    if (!obj[i]) {
      result.push(i);
      obj[i] = 1;
    }
  }
  return result;
};

去重后的长度 25000

数组去重时间:: 7.01806640625 ms

# 结论

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;

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

let result = [];
let obj = {};
for (let i of arr) {
  if (!obj[i]) {
    result.push(i);
    obj[i] = 1;
  }
}
return result;

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

return Array.from(new Set([...a, ...b]));
编辑 (opens new window)
上次更新: 2022/01/08, 21:09:11
new操作符做了什么
防抖与节流函数

← new操作符做了什么 防抖与节流函数→

最近更新
01
好玩的docker
07-04
02
我的第一个NFT
07-03
03
海外迅雷
06-01
更多文章>
Power by vuepress | Copyright © 2015-2023 神族九帝
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×