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

JavaScript中NaN是什么？对NaN的认识

---

NaN 非数字（not a number）属性是代表非数字值的特殊值。该属性用于指示某个值不是数字，如果有非数值参与计算,结果就是 NaN。

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

//定义一个数组
let arr = [1,1,'true','true',15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 'a', 'a'];

• 方法一：可以对NaN进行去重，因为 Set 加入值时认为NaN等于自身

function f1(arr) {
  // return Array.from(new Set(arr));
  return [...new Set(arr)];
}
console.log('方法1：',f1(arr));

• 方法二：不可以对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));

• 方法三：使用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));

• 方法四：可以对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));

• 方法五：这种方法会将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