JS数组去重的常用4种方法

 更新时间:2022年04月06日 09:48:29   投稿:wdc  
这篇文章主要介绍了JS数组去重的常用4种方法,ES6的Set类数组去重,for循环嵌套for循环,indexOf去重,利用filter需要的朋友可以参考下

1.ES6的Set类数组去重

var arr = [1,2,2,3,3,4,4,1,5,6,6,5]
function unique (arr) {
  return Array.from(new Set(arr))
}

console.log(unique(arr))
 //[1,2,3,4,5,6]

ES6的Set是类数组,里面的值是唯一的,但是不是真正的数组所以要通过Array.from()方法转化为数组,不考虑兼容问题是最简单的去重方法

2.for循环嵌套for循环

var arr = [1,2,2,3,3,4,4,1,5,6,6,5];

function unique(arr) {
    for (var i = 0; i < arr.length; i++) {    // 首次遍历数组
        for (var j = i + 1; j < arr.length; j++) {   // 再次遍历数组
            if (arr[i] == arr[j]) {          // 判断连个值是否相等
                arr.splice(j, 1);           // 相等删除后者
                j--;
            }
        }
    }
    return arr
}
console.log(unique(arr));

两个for循环加上spliceES5常用的方法
第一个for遍历每个数组项,第二个for循环遍历第一个for循环当前遍历项后面的数组项与第一个for当前数组项作比较,后面存在相等的项,则删除掉此项,并且j要减一,因为删除了一项,所以后面的元素往前移了,所以减一来抵消迁移确保每一项遍历完

3.indexOf去重

var arr = [1,2,2,3,3,4,4,1,5,6,6,5];
function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('错误!')
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {    // 首次遍历数组
        if (array.indexOf(arr[i]) === -1) {   // 判断索引有没有等于
            array.push(arr[i])
        }
    }
    return array
}
console.log(unique(arr));

indexOf()会判断数组里面是否含有这个值,没有则返回-1,有则返回存在的数组下标值,有多个只返回第一个,不再继续判断
for循环加indexOf,for循环存在newArr里则什么都不做,不存在则加入新数组里,返回新数组

4.利用filter

var arr = [1,2,2,3,3,4,4,1,5,6,6,5];
function unique(arr) {
    return arr.filter( (item, index, arr) => {
        //当前元素,在原始数组中的第一个索引==当前索引值,否则返回当前元素
        return arr.indexOf(item) === index;
    });
}
console.log(unique(arr));

filter加indexOf,判断当前的索引值等不等于indexOf返回的索引值,等于就是同一个数组项,不等于的情况就是当前的item是第二次出现,而indexOf判断出来的下标值还是第一个,这一项则不会返回,所以达到了去重的要求

更多关于JS数组去重的方法请查看下面的相关链接

相关文章

  • 深入认识javascript中的eval函数

    深入认识javascript中的eval函数

    发现为本文起一个合适的标题还不是那么容易,呵呵,所以在此先说明下本文的两个目的.
    2009-11-11
  • 使用JS读秒使用示例

    使用JS读秒使用示例

    JS读秒,在某些情况下还是比较实用的,下面有个简单的示例,感兴趣的朋友可以参考下
    2013-09-09
  • JS实现超级好看的鼠标小尾巴特效

    JS实现超级好看的鼠标小尾巴特效

    这篇文章主要给大家介绍了关于JS实现超级好看的鼠标小尾巴特效的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 微信小程序渲染性能调优小结

    微信小程序渲染性能调优小结

    这篇文章主要介绍了微信小程序渲染性能调优,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-07-07
  • JavaScript实现无刷新上传预览图片功能

    JavaScript实现无刷新上传预览图片功能

    这篇文章主要为大家详细介绍了JavaScript实现无刷新上传预览图片功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 微信小程序比较两个数大小的实现方法

    微信小程序比较两个数大小的实现方法

    最近在工作中遇到一个需求,可以自动对比两个数的大小,下面这篇文章主要给大家介绍了关于微信小程序比较两个数大小的实现方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • BootStrap模态框闪退问题实例代码详解

    BootStrap模态框闪退问题实例代码详解

    这篇文章主要介绍了BootStrap模态框闪退问题实例代码详解,需要的朋友可以参考下
    2018-12-12
  • 谈谈对JavaScript原生拖放的深入理解

    谈谈对JavaScript原生拖放的深入理解

    拖放(drag-and-drop,DnD)其实是两个动作——拖和放。所以,它涉及到两个元素。一个是被拖的元素,称为拖放源;另一个是要放的目标,称为拖放目标。本文将通过拆分这两个概念来详细介绍原生拖放,感兴趣的朋友一起学习吧
    2016-09-09
  • html+js实现动态显示本地时间

    html+js实现动态显示本地时间

    显示本地时间的方法有很多,在本文将为大家介绍下如何使用html+js实现动态显示本地时间,感兴趣的朋友可以了解下
    2013-09-09
  • JavaScript监听和禁用浏览器回车事件实例

    JavaScript监听和禁用浏览器回车事件实例

    这篇文章主要介绍了JavaScript监听和禁用浏览器回车事件实例,本文直接给出示例代码,需要的朋友可以参考下
    2015-01-01

最新评论