JavaScript数组去重多种姿势

解锁多种JavaScript数组去重姿势

JavaScript数组去重,一个老生常谈的问题了,但这次是解锁多种JavaScript数组去重姿势。

对以下所有的实现算法,都使用以下代码进行粗略测试:

const arr = [];
// 生成[0, 100000]之间的随机数
for (let i = 0; i < 100000; i++) {
  arr.push(0 + Math.floor((100000 - 0 + 1) * Math.random()))
}

// ...实现算法

console.time('test');
arr.unique();
console.timeEnd('test');

双重循环

双重循环去重实现比较容易。
实现一:

Array.prototype.unique = function () {
  const newArray = [];
  let isRepeat;
  for (let i = 0; i < this.length; i++) {
    isRepeat = false;
    for (let j = 0; j < newArray.length; j++) {
      if (this[i] === newArray[j]) {
        isRepeat = true;
        break;
      }
    }
    if (!isRepeat) {
      newArray.push(this[i]);
    }
  }
  return newArray;
}

实现二:

Array.prototype.unique = function () {
  const newArray = [];
  let isRepeat;
  for (let i = 0; i < this.length; i++) {
    isRepeat = false;
    for (let j = i + 1; j < this.length; j++) {
      if (this[i] === this[j]) {
        isRepeat = true;
        break;
      }
    }
    if (!isRepeat) {
      newArray.push(this[i]);
    }
  }
  return newArray;
}

基于思路二的写法改进版,实现三:

Array.prototype.unique = function () {
  const newArray = [];
  
  for (let i = 0; i < this.length; i++) {
    for (let j = i + 1; j < this.length; j++) {
      if (this[i] === this[j]) {
        j = ++i;
      }
    }
    newArray.push(this[i]);
  }
  return newArray;
}

经过测试代码测试的时间如下:

test1: 3688.440185546875ms
test2: 4641.60498046875ms
test3: 17684.365966796875ms

Array.prototype.indexOf()

基本思路:如果索引不是第一个索引,说明是重复值。

实现一:

  • 利用Array.prototype.filter()过滤功能
  • Array.prototype.indexOf()返回的是第一个索引值
  • 只将数组中元素第一次出现的返回
  • 之后出现的将被过滤掉
Array.prototype.unique = function () {
  return this.filter((item, index) => {
    return this.indexOf(item) === index;
  })
}

实现二:

let arr = [1, 2, 3, 22, 233, 22, 2, 233, 'a', 3, 'b', 'a'];
Array.prototype.unique = function () {
  const newArray = [];
  this.forEach(item => {
    if (newArray.indexOf(item) === -1) {
      newArray.push(item);
    }
  });
  return newArray;
}

经过测试代码测试的时间如下:

test1: 4887.201904296875ms
test2: 3766.324951171875ms

Array.prototype.sort()

基本思路:先对原数组进行排序,然后再进行元素比较。
实现一:

Array.prototype.unique = function () {
  const newArray = [];
  this.sort();
  for (let i = 0; i < this.length; i++) {
    if (this[i] !== this[i + 1]) {
      newArray.push(this[i]);
    }
  }
  return newArray;
}

经过测试代码测试的时间如下:

test: 4300.39990234375ms

实现二:

Array.prototype.unique = function () {
  const newArray = [];
  this.sort();
  for (let i = 0; i < this.length; i++) {
    if (this[i] !== newArray[newArray.length - 1]) {
      newArray.push(this[i]);
    }
  }
  return newArray;
}

经过测试代码测试的时间如下:

test1: 121.6259765625ms
test2: 123.02197265625ms

Array.prototype.includes()

Array.prototype.unique = function () {
  const newArray = [];
  this.forEach(item => {
    if (!newArray.includes(item)) {
      newArray.push(item);
    }
  });
  return newArray;
}

经过测试代码测试的时间如下:

test: 4123.377197265625ms

Array.prototype.reduce()

Array.prototype.unique = function () {
  return this.sort().reduce((init, current) => {
    if(init.length === 0 || init[init.length - 1] !== current){
      init.push(current);
    }
    return init;
  }, []);
}

经过测试代码测试的时间如下:

test: 180.401123046875ms

Map

实现一:

Array.prototype.unique = function () {
  const newArray = [];
  const tmp = new Map();
  for(let i = 0; i < this.length; i++){
        if(!tmp.get(this[i])){
            tmp.set(this[i], 1);
            newArray.push(this[i]);
        }
    }
    return newArray;
}

实现二:

Array.prototype.unique = function () {
  const tmp = new Map();
  return this.filter(item => {
    return !tmp.has(item) && tmp.set(item, 1);
  })
}

Set

Array.prototype.unique = function () {
  const set = new Set(this);
  return Array.from(set);
}
Array.prototype.unique = function () {
  return [...new Set(this)];
}

经过测试代码测试的时间如下:

test1: 36.8046875ms
test2: 31.98681640625ms
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值