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中null与undefined分析

    JavaScript中null与undefined分析

    JavaScript null undefined分析
    2009-07-07
  • js读取注册表的键值示例

    js读取注册表的键值示例

    读取注册表的键值的方法有很多,在本文将为大家详细介绍下使用js如何实现注册表的键值读取,感兴趣的朋友可以参考下
    2013-09-09
  • js实现上传图片预览的方法

    js实现上传图片预览的方法

    这篇文章主要介绍了js实现上传图片预览的方法,通过自定义函数结合onchange方法实现上传图片的预览功能,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • zTree树形插件异步加载方法详解

    zTree树形插件异步加载方法详解

    这篇文章主要为大家详细介绍了zTree树形插件异步加载的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 深入解析js轮播插件核心代码的实现过程

    深入解析js轮播插件核心代码的实现过程

    这篇文章主要深度揭密了js轮播插件核心代码的实现过程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 前端处理文本换行展示4种处理方法

    前端处理文本换行展示4种处理方法

    在处理前端显示后端传递的包含换行符的文本时,可以通过多种方法实现换行显示,这篇文章主要介绍了前端处理文本换行展示4种处理方法,这些方法帮助前端正确展示格式化文本,解决了文本堆叠的问题,需要的朋友可以参考下
    2024-10-10
  • js实现input密码框提示信息的方法(附html5实现方法)

    js实现input密码框提示信息的方法(附html5实现方法)

    这篇文章主要介绍了js实现input密码框提示信息的方法,涉及JavaScript页面元素的获取,属性判断及样式设置等技巧,并附带html5的相关实现方法,需要的朋友可以参考下
    2016-01-01
  • javascript 正则表达式相关应介绍

    javascript 正则表达式相关应介绍

    javascript 中几个与正则表达式相关的应用,本文将详细介绍,需要的朋友可以参考下
    2012-11-11
  • IE浏览器兼容Firefox的JS脚本的代码

    IE浏览器兼容Firefox的JS脚本的代码

    对于经常用js的朋友,有时候一段脚本并不是两个浏览器都兼容的,下面一些对ie和firefox都兼容的一些代码,大家可以学习下。
    2008-10-10
  • JS 面向对象之神奇的prototype

    JS 面向对象之神奇的prototype

    对于初学 JavaScript 的人来说 prototype 是一种很神奇的特性,而事实上,prototype 对于 JavaScript 的意义重大,prototype 不仅仅是一种管理对象继承的机制,更是一种出色的设计思想。
    2011-02-02

最新评论