js 数组去重的几种方式及原理

let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

/ 该方法最佳

// 该hasOwnProperty()方法返回一个布尔值，指示对象是否具有指定的属性作为其自己的属性

// const object1 = new Object();

// object1.property1 = 42;

// console.log(object1.hasOwnProperty('property1'));

// // expected output: true

// console.log(object1.hasOwnProperty('toString'));

// // expected output: false

// console.log(object1.hasOwnProperty('hasOwnProperty'));

// // expected output: false

// 该方法与第二种使用的indexOf的特性有异曲同工之妙，同样是用filter做过滤，判断当前obj是否有遍历的参数

// 没有就添加进去，有的话就跳过

function unique4(params) {

let obj = {};

return arr.filter((item,index,arr)=>{

return obj.hasOwnProperty(typeof item + item)?false:(obj[typeof item + item] = true)

})

}

console.log(unique4(arr))

// 利用ES6 set 去重

function unique1(arr) {

return Array.from(new Set(arr))

}

console.log(unique1(arr))

// Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例。

// console.log(Array.from('foo'));

// expected output: Array ["f", "o", "o"]

// console.log(Array.from([1, 2, 3], x => x + x));

// expected output: Array [2, 4, 6]

// Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。下边是地址

// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set

// 数组去重

// 方法。 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

// 利用indexOf 检索的字符串值没有出现，则该方法返回 -1。

function unique2(params) {

let temp = [];

let len = params.length;

for(let i = 0; i < len; i++) {

if(temp.indexOf(params[i]) === -1) {

temp.push(params[i]);

}

}

return temp;

}

console.log(unique2(arr))

// item 必须。当前元素的值 index  可选。当前元素的索引值 arr可选。当前元素属于的数组对象

 

// 特别点：利用filter作为for循环，使用indexOf(item,0)拿到当前索引的下标，做对比

function unique3(params) {

return params.filter((item,index,arr)=>{

return arr.indexOf(item,0) === index;

})

}

console.log(unique3(arr))

 

// includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

// var array1 = [1, 2, 3];

// console.log(array1.includes(2));

// expected output: true

// var pets = ['cat', 'dog', 'bat'];

// console.log(pets.includes('cat'));

// expected output: true

// console.log(pets.includes('at'));

// expected output: false

function unique5(params) {

// if(!Array.isArray(arr)) { // 用于确定传递的值是否是一个 Array。

// console.log('type error');

// return

// }

let array = [];

let len = params.length;

for(let i = 0; i < len; i++) {

if(!array.includes(arr[i])) {

array.push(arr[i]);

}

}

return array;

}

console.log(unique5(arr))

// 该reduce()方法在数组的每个成员上执行reducer函数（您提供），从而生成单个输出值。

const array1 = [1, 2, 3, 4];

// const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4

// console.log(array1.reduce(reducer));

// expected output: 10

// 5 + 1 + 2 + 3 + 4

// console.log(array1.reduce(reducer, 5));

// expected output: 15

// 该方法的思路依然是reduce作循环，利用includes判断是否有这个参数，没有的话就放进返回数组里

function unique6(params) {

return params.reduce((prev,cur)=> prev.includes(cur)? prev: [...prev,cur],[]);

}

console.log(unique6(arr));

// set() 方法为 Map 对象添加或更新一个指定了键（key）和值（value）的（新）键值对。

// has()返回一个布尔值，指示项是否存在具有指定键的项。

// 思路：首先在空的map实例中判断是否有当前Boolean值，如有没有进入else

// 将当前值存入map,再当前值push进入array，

// 如果当前值存在map里，就将当前值再放入map中

function unique7(params) {

let map = new Map();

let array = new Array();

let len = params.length;

for(let i = 0; i < len; i++) {

if(map.has(params[i])) {

map.set(params[i], true)

}else {

map.set(params[i], false)

array.push(params[i])

}

}

return array;

}

console.log(unique7(arr));

// 该sort()方法对数组中的元素进行排序并返回该数组。默认排序顺序是在将元素转换为字符串，

// 然后比较它们的UTF-16代码单元值序列时构建的。

// 由于它取决于实现，因此无法保证排序的时间和空间复杂性

function unique8(params) {

// if(!Array.isArray(params)) {

// console.log('type error!')

// return;

// }

params = params.sort();

let array = [params[0]];

let len = params.length;

for(let i = 1; i < len; i++) {

if(params[i] !== arr[i-1]) {

array.push(arr[i])

}

}

return array;

}

console.log(unique8(arr));//NaN、{}没有去重

 

function unique9(params){

for(let i=0; i<params.length; i++){

for(let j=i+1; j<params.length; j++){

if(params[i]==params[j]){ //第一个等同于第二个，splice方法删除第二个

params.splice(j,1);

j--;

}

}

}

return params;

}

console.log(unique9(arr));//NaN、{}没有去重

 

 

 

 

参考地址： https://segmentfault.com/a/1190000016418021