深入浅出：了解世上最全的数组去重方式
//第一种：IndexOf(最简单数组去重法)
/*
* 新建一新数组，遍历传入数组，值不在新数组就push进该新数组中
* IE8以下不支持数组的indexOf方法
* */
function uniq(array) {
var temp = []; //一个新的临时数组
for (var i = 0; i < array.length; i++) {
if (temp.indexOf(array[i]) == -1) {
temp.push(array[i]);
}
}
return temp;
}
var aa = [{}, {}, 2, 4, 9, 6, 7, 5, 2, 3, 5, 6, 5];
var bb = [2, 4, 9, 6, 7, 5, 2, 3, 5, 6, 5]
console.log(uniq(aa)); //[{},{},2,4,9,6,7,5,3] 无法去除空对象
console.log(uniq(bb)); //[2,4,9,6,7,5,3]
(2)也可以用lastIndexOf
function unique(arr){
var res = [];
for(var i=0; i<arr.length; i++){
res.lastIndexOf(arr[i]) !== -1 ? '' : res.push(arr[i]);
}
return res;
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4, {}, {},[],[]]));
//[1, 2, 3, 5, 6, 7, 4, {}, {}, Array(0), Array(0)]
//第二种去重：(可去重复对象)
/*
* 速度最快， 占空间最多（空间换时间）
*
* 该方法执行的速度比其他任何方法都快， 就是占用的内存大一些。
* 现思路：新建一js对象以及新数组，遍历传入数组时，判断值是否为js对象的键，
* 不是的话给对象新增该键并放入新数组。
* 注意点：判断是否为js对象键时，会自动对传入的键执行“toString()”，
* 不同的键可能会被误认为一样，例如n[val]-- n[1]、n["1"]；
* 解决上述问题还是得调用“indexOf”。*/
function uniq(array) {
var temp = {},
arr = [],
len = array.length,val, type;
for (var i = 0; i < len; i++) {
val = array[i];
type = typeof val;
if (!temp[val]) {
temp[val] = [type];
arr.push(val);
} else if (temp[val].indexOf(type) < 0) {
temp[val].push(type);
arr.push(val);
}
}
return arr;
}
var aa = [1, 2, "2", 4, 9, "a", "a", 2, 3, 5, 6, 5];
var bb = [{a:1},{a:1},[],[],NaN,NaN,null,null,1,1,"1","1","a","a"]
console.log(uniq(aa));// [1, 2, "2", 4, 9, "a", 3, 5, 6]
console.log(uniq(bb));// [{a:1}, Array(0), NaN, null, 1, "1", "a"]
// 第三种去重(无法去空对象)
/*
* 给传入数组排序，排序后相同值相邻，
* 然后遍历时,新数组只加入不与前一值重复的值。
* 会打乱原来数组的顺序
* */
function uniq(array){
array.sort();
var temp=[array[0]];
for(var i = 1; i < array.length; i++){
if( array[i] !== temp[temp.length-1]){
temp.push(array[i]);
}
}
return temp;
}
var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
var bb = [{},{},[],[],NaN,NaN,1,1,"a","a","b","c"];
console.log(uniq(aa));//[1, "2", 2, 3, 4, 5, 6, 9, "a"]
console.log(uniq(bb));// [Array(0), Array(0), 1, NaN, NaN, {…}, {…}, "a", "b", "c"]
第四种去重（无法去空对象，会把NaN删掉）
* 还是得调用“indexOf”性能跟方法1差不多，
* 实现思路：如果当前数组的第i项在当前数组中第一次出现的位置不是i，
* 那么表示第i项是重复的，忽略掉。否则存入结果数组。
* */
function uniq(array){
var temp = [];
for(var i = 0; i < array.length; i++) {
//如果当前数组的第i项在当前数组中第一次出现的位置是i，才存入数组；否则代表是重复的
if(array.indexOf(array[i]) == i){
temp.push(array[i])
}
}
return temp;
}
var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
var bb = [{},{},[],[],NaN,NaN,1,1,"a","a","b","c"];
console.log(uniq(aa));//[1, "2", 2, 3, 4, 5, 6, 9, "a"]
console.log(uniq(bb));// [{…}, {…}, Array(0), Array(0), 1, "a", "b", "c"]
//第五种：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。(无法去除空对象)
function unique(arr) {
var res = [arr[0]];
for (var i = 1; i < arr.length; i++) {
var repeat = false;
for (var j = 0; j < res.length; j++) {
if (arr[i] === res[j]) {
repeat = true;
break;
}
}
if (!repeat) {
res.push(arr[i]);
}
}
return res;
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4, {}, {},[],[]]));//[1,2,3,5,6,7,4,{},{},[],[]]
// 第六种去重（无法去空对象）
// 思路：获取没重复的最右一值放入新数组
* 推荐的方法
* 方法的实现代码相当酷炫，
* 实现思路：获取没重复的最右一值放入新数组。
* （检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断）*/
function uniq(array) {
var temp = [];
var l = array.length;
for (var i = 0; i < l; i++) {
for (var j = i + 1; j < l; j++) {
if (array[i] === array[j]) {
i++;
j = i;
}
}
temp.push(array[i]);
}
return temp;
}
var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
var bb = [{},{},[],[],NaN,NaN,1,1,"a","a","b","c"];
console.log(uniq(aa));// [1, "2", 4, 9, "a", 2, 3, 6, 5]
console.log(uniq(bb));// [{…}, {…}, Array(0), Array(0), NaN, NaN, 1, "a", "b", "c"]
第七种：对象去重：（利用属性名不重复，后面会覆盖前面，可去空对象）
var ary1 =[{},{},[],[],"a","a",1,2,2,1,6,NaN,NaN,null,null];
function uniq(ary1){
var obj={};
var arr=[];
for (var key in ary1){
obj[ary1[key]]=ary1[key]
}
for(var key in obj){
arr.push(obj[key])
}
console.log(arr);//[1, 2, 6, {…}, Array(0), "a", NaN, null]
}
uniq(ary1)
第八种去重（es6）：
1.Set去重：
ES6中新增了Set数据结构，类似于数组，但是 它的成员都是唯一的 ，其构造函数可以接受一个数组作为参数，如：
let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];
let set = new Set(array);
console.log(set); // => Set {1, 2, 3, 4, 5};
2.Set配合Array.from
ES6中新增了一个静态方法可以把类似数组的对象转换为数组，如通过querySelectAll方法得到HTML DOM Node List，以及ES6中新增的等可遍历对象，如：
let array = Array.from(new Set([1, 1, 1, 2, 3, 2, 4]));
console.log(array); // => [1, 2, 3, 4]
3.Map对象(无法去重复空对象)
var arr =[{},{},[],[],"a","a",1,2,2,1,6,NaN,NaN,null,null];
var brr = ["a","a",1,2,2,1,6]
function unique(arr) {
const res = new Map();
return arr.filter((a) => !res.has(a) && res.set(a, 1))
}
console.log(unique(arr))//[{…}, {…}, Array(0), Array(0), "a", 1, 2, 6, NaN, null]
console.log(unique(brr))// ["a", 1, 2, 6]
4.filter(无法去重复空对象)
var oldArr = [1, 2, 1, 2, 1, 23, 4, 1, 23, 24, 4, 5, 2, 3, 6, 7];
var oldArr1 = [{},{},[],[],NaN,NaN,"a","a"]
function uniq(arrs){
var arr = arrs.filter(function (item, index) {
//每拿到一项,然后去看之前组成的数组中有没有这一项,如果有不留下,没有的话留下
return !(arrs.slice(0, index).includes(item));
});
return arr;
}
console.log(uniq(oldArr));//[1, 2, 23, 4, 24, 5, 3, 6, 7]
console.log(uniq(oldArr1));//[{…}, {…}, Array(0), Array(0), NaN, "a"]
5.可去重复对象的去重
var arr =[{a:1},{a:2},[],[],1,1,"a","a","b"];
(function(){//去除数组中重复对象
var unique = {};
arr.forEach(function(a){ unique[ JSON.stringify(a) ] = 1 });
arr= Object.keys(unique).map(function(u){return JSON.parse(u) });
return arr;
})(arr)
console.log(arr)// [1, {a:1}, {b:2}, Array(0), "a", "b"]
以上是我找了各种示例总结的，如果道友还有，求分享一下，谢谢！
