代码演示:
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 点击加入