js数组去重（区分object、“NaN”、NaN）

最新推荐文章于 2023-04-17 10:29:08 发布
最新推荐文章于 2023-04-17 10:29:08 发布
阅读量4.2k 收藏 30
点赞数 14
文章标签： 算法 javascript es6 面试 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39903567/article/details/113926241
版权

数组去重在前端面试中比较常见，今天来复习复习。

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

对这样一个数组进行去重，我尝试了几种方法，大多数不能对对象去重，或者不能区分true和"true"、NaN和"NaN"，

在第七种方法利用对象属性去重中优化了一下，成功去重，得到

[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}]

接下来依次呈现这几种去重方法

一、利用ES6 Set去重（ES6中常用）

不考虑兼容性，这种去重的方法代码最少。

无法去掉“{}”空对象

function unique1(arr) {
    return Array.from(new Set(arr))
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
    'NaN', 0, 0, 'a', 'a', {}, {}
];
console.log("set",unique1(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

二、利用for嵌套for，然后splice去重（ES5中常用）

双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值。

NaN和{}没有去重，两个null直接消失了。

function unique2(arr) {
    for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] == arr[j]) { //第一个等于第二个，splice方法删除第二个
                arr.splice(j, 1);
                j--;
            }
        }
    }
    return arr;
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
    'NaN', 0, 0, 'a', 'a', {}, {}
];
console.log("双重for循环",unique2(arr))
//[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]

三、利用indexOf去重

新建一个空的结果数组，for 循环原数组，判断结果数组是否存在当前元素，如果有相同的值则跳过，不相同则push进数组。

NaN、{}没有去重

function unique3(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array.indexOf(arr[i]) === -1) {
            array.push(arr[i])
        }
    }
    return array;
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
    'NaN', 0, 0, 'a', 'a', {}, {}
];
console.log("indexOf",unique3(arr))
// [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]

四、利用sort()

利用sort()排序方法，然后根据排序后的结果进行遍历及相邻元素比对。

NaN、{}没有去重

function unique4(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return;
    }
    arr = arr.sort()
    var arrry = [arr[0]];
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i - 1]) {
            arrry.push(arr[i]);
        }
    }
    return arrry;
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
    'NaN', 0, 0, 'a', 'a', {}, {}
];
console.log("排序去重相邻",unique4(arr))
// [0, 1, 15, NaN, NaN, "NaN", {…}, {…}, "a", false, null, "true", true, undefined]

五、利用includes

{}没有去重

function unique5(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (!array.includes(arr[i])) { //includes 检测数组是否有某个值
            array.push(arr[i]);
        }
    }
    return array
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
    'NaN', 0, 0, 'a', 'a', {}, {}
];
console.log("includes",unique5(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]     //{}没有去重

六、对象属性

判断是否存在对象属性

不能区分true和"true"、NaN和"NaN"

function unique7(arr) {
    var obj = {};
    return arr.filter(function (item, index, arr) {
        return obj.hasOwnProperty(item) ? false : (obj[item] = true)//已存在则过滤，不然就新增属性
    })
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
    'NaN', 0, 0, 'a', 'a', {}, {}
];
console.log("对象属性", unique7(arr))
//[1, "true", 15, false, undefined, null, NaN, 0, "a", {…}]

六pro、对象属性去重改良

把类型也判断进去可解决之前的问题

所有的都去重了,去重效果最好

function unique7_1(arr) {
    var obj = {};
    return arr.filter(function (item, index, arr) {
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)//已存在则过滤，不然就新增属性
    })
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
    'NaN', 0, 0, 'a', 'a', {}, {}
];
console.log("对象属性改良", unique7_1(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]

七、利用filter

{}没有去重，NaN没了

function unique7(arr) {
    return arr.filter(function (item, index, arr) {
        //过滤掉元素索引值不等于该元素在数组中第一个索引的元素
        return arr.indexOf(item) === index;
    });
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
    'NaN', 0, 0, 'a', 'a', {}, {}
];
console.log("filter",unique7(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]

// 八、利用递归去重
NaN,{}未去重

function unique8(arr) {
    var array = arr;
    var len = array.length;

    array.sort(function (a, b) { //排序后更加方便去重
        return a - b;
    })

    function loop(index) {
        if (index >= 1) {
            if (array[index] === array[index - 1]) {
                array.splice(index, 1);
            }
            loop(index - 1); //递归loop，然后数组去重
        }
    }
    loop(len - 1);
    return array;
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
    'NaN', 0, 0, 'a', 'a', {}, {}
];
console.log("递归", unique8(arr))
//[1, "true", false, null, 0, true, 15, NaN, NaN, "NaN", "a", {…}, {…}, undefined]

九、利用Map数据结构去重

{}未去重

function unique9(arr) {
    let map = new Map();
    let array = new Array(); // 数组用于返回结果    
    for (let i = 0; i < arr.length; i++) {
        if (!map.has(arr[i])) { // 不存在则放入结果数组
            map.set(arr[i], true);
            array.push(arr[i]);
        } 
    }
    return array;
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
    'NaN', 0, 0, 'a', 'a', {}, {}
];
console.log("Map", unique9(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

十、利用reduce

{}未去重

function unique11(arr) {
    return arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []);
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
    'NaN', 0, 0, 'a', 'a', {}, {}
];
console.log("reduce", unique11(arr));
// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]
LYFlied
关注
  • 14
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
JS实现的Object数组去重功能示例【数组成员为Object对象】
10-17
在JavaScript中，处理数据去重是一项常见的任务，尤其当数据结构是数组且包含复杂对象时。本示例探讨了如何实现一个针对数组中成员为Object对象的去重功能。这个功能对于那些需要确保数据集合唯一性的场景至关重要，...
js代码-数组去重(Object)
07-15
JavaScript的Array对象虽然提供了多种方法，如filter、indexOf等，但在处理某些特定场景时，利用Object的键唯一性进行数组去重能提供一种高效且简洁的解决方案。 首先，我们需要理解JavaScript中的Object。Object是...
数组去重的两种方法（包括NaN去重）
w18789476022的博客
04-19 325
（1）for循环 function delArr(arr) { var nan = []; for (var i = 0; i < arr.length; i++) { var temp = arr[i]; if (typeof temp === 'number' && isNaN(temp)) { nan.push(temp); //删除多余的NaN judg
JavaScript - 包含NaN的数组去重
Charonmomo的博客
08-18 353
我们可以根据arr.indexof(item)是否等于当前项的下标来筛选数据,因为indexof只会返回数组中第一次出现的元素的下标, 对于除NaN以外的其他数据来说, 可以通过判断返回的下标和当前元素的下标是否相同来判断。 需要注意的问题是: 数组中包含NaN, NaN==NaN =>false, 所以indexof是无法判断NaN的下标的。 判断NaN的方法: 用Number.isNaN(item)先判断其值是否为number类型, 再判断是否为NaN; 提前声明flag=0, 通过判断flag
JS强力去重，包括NaN和Object
u013992330的博客
07-01 8078
JavaScript数组强力去重，数组中的内容可为任意值，包括NaN和Object function distinct(arr) { let NaNFlag = false; let objStrArr = []; return arr.filter((item, index)=> { // 判断NaN if (item !== item) { if (NaNFlag) { retur.
原生JS过滤数组中的undefined,null,空串,NaN等
08-26 2421
项目中经常用到的方法，放这边省的写其他项目用到了还要重新写或者翻以前项目 let arr = [1,'',2,null,3,NaN,4,unfined,5,'',6] let arr1 = arr.filter(Boolean); console.log(arr1);//[1,2,3,4,5,6]
js 除掉数组中的NAN
pig_ning的博客
04-17 298
js 除掉数组中的NAN
高性能js数组去重(12种方法，史上最全)
10-15
这里我们将探讨12种不同的方法来实现JS数组去重，以提高对这些技术的理解。 1. **利用ES6 Set去重**： Set是ES6中新增的数据结构，它不允许重复的值。通过将数组转换为Set，然后再转回数组，可以实现去重。 ```...
2022-JavaScript-过滤数组中的undefined,null,空串,NaN
itwangyang520的博客
07-20 485
let arr = [1,'',2,null,3,NaN,4,unfined,5,'',6] let arr1 = arr.filter(Boolean); console.log(arr1);//[1,2,3,4,5,6]
js 数组过滤空值（undefined、null、""、0、false、NaN）
热门推荐
Martin 的博客
10-24 1万+
js 数组过滤空值（undefined、null、""、0、false、NaN） const arr = [undefined, null, "", 0, false, NaN, 1, 2].filter(Boolean); // arr => [1, 2]
JS里的sort（）你真的了解吗？
VIf_LL的博客
06-15 285
学习JS前期看到sort()函数以为和java一样属于是自动升序输出，看了很多案例发现并不一样举例子 var arr = [10,50,40,60,230,120,-130]; arr.sort(); console.log(arr) 结果 敲黑帮，并不是我们想象的按数字排列，查看概念发现，自己犯了大错 JavaScript sort() 方法 JavaScript Array 对象参考手册 定义和用法 sort() 方法用于对数组的元素进行排序。 语法 arrayObject.sort(s
javascript中sort()的怪现象！！
梁业灿
11-21 309
var arr=new Array();arr[0]=3.5;arr[1]=300;arr[2]=50;//换成30arr[3]=1.5;//换成40 之后就OK排序就是升序的arr[4]=400;arr.sort();//这个排序出来怎么不是升序的for(var i=0;i{document.write(arr[i]+"");}    //这个排序出来怎么不是升序的?
数组中含有NaN的排序问题
ninerwsx的博客
03-02 236
数组中的元素存在NaN，无论正序还是倒序，均让NaN在最后
js中['1','2','3'].map(parseInt)输出1，NaN，NaN问题解析
summer199605的博客
04-08 757
由于map的回调函数的参数index索引值作了parseInt的基数radix，导致出现超范围的radix赋值和不合法的进制解析，才会返回NaN。 详解： https://blog.csdn.net/freshlover/article/details/19034079#commentBox ...
关于数组去重的10种方法
君凉夜_的博客
12-17 371
使用javascript对数组去重
js的sort函数的api写的太水了
当下的七炎
11-01 681
他妹的，这api说的什么鸟语  sss=[5,10,1].sort(function(x,y){ if(x>y){ return 1;}else{return -1} }) alert(sss)//1,5,10 sss=[5,10,1].sort(function(x,y){ return x-y; }) alert(sss)//1,5,10 sss=[5,10,1].sort
数组对象（如果数组中有NaN）和push的使用总结（持续更新）
飞翔༒之翼
03-09 773
这个是我在项目中遇到的问题，虽然简单但当初自己做的时候很难受，所以记录一下。 ** 第一种情况 ** /* 需求：已知一个A数组对象就是这个[{},{}],然后把A中的值取出来新建字段把这些值赋上去， 成为一个新的B对象数组 */ var A = [ {name: 'zhangsan', ages: '38', plcode:'7223238'}, {name: 'w...
javascript 字符串转换二进制数组_奇怪的JavaScript：map和parseInt的反常应用
weixin_33193480的博客
12-02 270
作者 | Eric Tong 译者 | 刘雅梦 编辑 | 张之栋 在JavaScript 中，当使用 map 和 parseInt 将字符数组转换为整数时，却出现了奇怪的现象。控制台输入 ['1', '7', '11'].map(parseInt)后，得到的结果是 [1, NaN, 3] ，而不是 [1, 7, 11] 。本文将通过解释一些相关的 JavaS...
判断JS中值的类型是否为undefined或者NaN并替换成其他符号
weixin_51010510的博客
11-16 845
在前端页面渲染数据时，数据库很多数据的值为null或空字符串，在js中类型就成了undefined 例： 解决办法，直接上代码 function flag(e) { if (e == undefined || e == "") { return e = "-"; } return e } 我用的是 - 代替undefined,可以自行替换 直接调用方法即可 结果如下: ...
JavaScript 数组去重
最新发布
08-25
### 回答1： 要在 JavaScript 中去除数组中的重复项，可以使用下列方法之一： 1. 使用 Set 对象：Set 对象具有去除数组中重复项的功能，可以这样使用： ``` let array = [1, 2, 3, 3, 4, 4, 5]; let uniqueArray = [...new Set(array)]; console.log(uniqueArray); // [1, 2, 3, 4, 5] ``` 2. 使用 Array.prototype.filter() 和 indexOf()： ``` let array = [1, 2, 3, 3, 4, 4, 5]; let uniqueArray = array.filter(function(item, index) { return array.indexOf(item) === index; }); console.log(uniqueArray); // [1, 2, 3, 4, 5] ``` 3. 使用 Array.prototype.reduce()： ``` let array = [1, 2, 3, 3, 4, 4, 5]; let uniqueArray = array.reduce(function(accumulator, currentValue) { if (accumulator.indexOf(currentValue) === -1) { accumulator.push(currentValue); } return accumulator; }, []); console.log(uniqueArray); // [1, 2, 3, 4, 5] ``` 注意，上述方法仅适用于去除数字数组中的重复项。如果数组包含对象，则需要使用其他方法来处理。 希望这些信息对你有帮助！ ### 回答2： JavaScript 中实现数组去重可以使用多种方法，下面我会介绍两种常用的方法。 方法一：使用 Set Set 是 ES6 中新增的数据结构，它类似于数组，但是成员的值都是唯一的。所以我们可以利用 Set 的特性来快速去除数组重复元素。 ```javascript let arr = [1, 2, 2, 3, 4, 4, 5]; let uniqueArr = [...new Set(arr)]; console.log(uniqueArr); // [1, 2, 3, 4, 5] ``` 方法二：使用 filter 我们可以利用数组的 filter 方法，通过判断元素第一次出现的索引是否和当前索引相等来实现数组去重。 ```javascript let arr = [1, 2, 2, 3, 4, 4, 5]; let uniqueArr = arr.filter((item, index) => { return arr.indexOf(item) === index; }); console.log(uniqueArr); // [1, 2, 3, 4, 5] ``` 以上是两种常用的 JavaScript 数组去重方法，根据具体场景使用不同的方法可以提高性能和代码可读性。 ### 回答3： JavaScript 数组去重可以使用多种方法。以下是几种常见的方法： 1. 使用 Set 数据结构: 可以利用 Set 数据结构的特性来实现数组去重。Set 是一种数据结构，它只允许存储不重复的值。我们可以将数组转换为 Set，然后再将 Set 转回为数组即可实现去重。 ```javascript let arr = [1, 2, 2, 3, 4, 4, 5]; let uniqueArr = Array.from(new Set(arr)); console.log(uniqueArr); // [1, 2, 3, 4, 5] ``` 2. 使用 Array.prototype.filter() 方法：使用 `filter()` 方法可以遍历数组，并返回满足条件的新数组。我们可以利用 `indexOf()` 方法来判断元素第一次出现的位置与当前索引位置是否相同，如果相同则保留，否则过滤掉。 ```javascript let arr = [1, 2, 2, 3, 4, 4, 5]; let uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index); console.log(uniqueArr); // [1, 2, 3, 4, 5] ``` 3. 使用对象键值对：利用对象的键值对是唯一的特性来实现数组去重。遍历数组，将元素作为对象的键，将出现的次数作为键的值保存在对象中。最后，提取对象中的键即可得到去重后的数组。 ```javascript let arr = [1, 2, 2, 3, 4, 4, 5]; let obj = {}; arr.forEach(item => obj[item] = true); let uniqueArr = Object.keys(obj).map(Number); console.log(uniqueArr); // [1, 2, 3, 4, 5] ``` 以上是几种常见的 JavaScript 数组去重方法，根据实际需求选择适合的方法即可。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值