JS中对数组进行去重的几种方法

代码演示：

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

// 方法1，可以对NaN进行去重，因为 Set 加入值时认为NaN等于自身
function f1(arr) {
    
    
  // return Array.from(new Set(arr));
  return [...new Set(arr)];
}
console.log('方法1：',f1(arr));

// 方法2，不可以对NaN进行去重（indexOf方法无法识别数组的NaN成员）
function f2(arr) {
    
    
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    
    
    if (result.indexOf(arr[i]) === -1) {
    
    
      result.push(arr[i]);
    }
  }
  return result;
}
console.log('方法2：',f2(arr));

// 方法3，使用ES6的findIndex方法，可以结合Object.is()方法对NaN进行去重
// Object.is()方法认为NaN等于自身
function f3(arr) {
    
    
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    
    
    if (result.findIndex(value => Object.is(arr[i],value)) === -1) {
    
    
      result.push(arr[i]);
    }
  }

  return result;
}
console.log('方法3：',f3(arr));

// 方法4：可以对NaN进行去重
// 数组的includes()方法认为NaN等于自身
function f4(arr) {
    
    
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    
    
    if (!result.includes(arr[i])) {
    
    
      result.push(arr[i]);
    }
  }
  return result;
}
console.log('方法4：',f4(arr));

// 方法5：这种方法会将NaN跳过去，最后的结果中不会包含NaN
// indexOf内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。
function f5(arr) {
    
    
  return arr.filter((value,index) => {
    
    
    return arr.indexOf(value) === index;
  });
}
console.log('方法5：',f5(arr));

以上介绍的几种方法大同小异，下边对涉及到NaN的内容进行一个总结：

NaN == NaN // false
NaN === NaN // false

// indexOf方法无法识别数组的NaN成员
[NaN].indexOf(NaN) // -1

// 向 Set 数据结构中加入值时认为NaN等于自身
let set = new Set();
set.add(NaN);
set.add(NaN);
console.log(set); // Set {NaN}

// Object.is()方法认为NaN等于NaN
Object.is(NaN, NaN) // true
+0 === -0 //true
Object.is(+0, -0) // false

// ES2016中新增的数组实例方法：includes()方法认为NaN等于自身
[1, 2, NaN].includes(NaN) // true

前端学习交流QQ群，群内学习讨论的氛围很好，大佬云集，期待您的加入：862748629 点击加入