js数组去重

发表于 |

数组的去重在日常的开发中经常碰到的需求，虽然我们真实开发过程中会有lodash，Jquery等框架帮助我们。但是，很多时候我们也需要自己来实现这个简单的功能

框架

1
2
3
4
5
6
7
8
9
10
var arr = [1, 2, 3, 4, 5, 5, 5, 5];

// Jquery
$.unique(arr);

// lodash
_.uniq(arr);

// underscore
_.uniq(arr);

方法-

1
2
3
4
5
6
7
var arr = [1, 2, 3, 4, 5, 5, 5, 5];
var res = [];
arr.forEach((d) => {
  if(res.indexOf(d) === -1) {
    res.push(d)
  }
});

方法二

1
2
3
4
var arr = [1, 2, 3, 4, 5, 5, 5, 5];
var res = arr.filter((d, i) => {
  return arr.indexOf(d) === i;
})

方法三

如果你的数组里面都是字符串类型，那么可以使用对象KEY的唯一性来实现数组的去重

1
2
3
4
5
6
var arr = ['a', 'b', 'c' , 'a', 'c', 'd'];
var resObject = {};
arr.forEach((d) => {
  resObject[d] = (resObject[d] || 1) + 1;
});
var res = Object.keys(resObject);

因为Object的键值必须要是字符串，所以当数组里面有数字，undefined，bool等类型时，就没有作用了，但是这个方法不但可以对字符串数组去重，同时也可以统计每个字符串出现的次数

方法四

当我们在往数组里面push的时候，如果数组本身就可以保持不重复就好了，在ES5中我们没有办法做到，但是在ES6中，我们有了一个新的数据结构Set

set并不是一个新的数据类型，是属于js基本类型的Object类型下面的

关于set的说明MDN有如下说明

The Set object lets you store unique values of any type, whether primitive values or object references.

这正是我们需要的，而且set还可以根传入数组来初始化，而set也可以很方便的转回数组

1
2
let arr = ['a', 'b', 'c' , 'a', 'c', 'd'];
let res = Array.from(new Set(arr));