千家信息网

Javascript数组怎样去重

发表于:2025-01-16 作者:千家信息网编辑
千家信息网最后更新 2025年01月16日,这篇文章主要介绍Javascript数组怎样去重,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!数组去重1 双层for循环(类似冒泡排序的双层循环写法)var arr = [2,
千家信息网最后更新 2025年01月16日Javascript数组怎样去重

这篇文章主要介绍Javascript数组怎样去重,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

    数组去重

    1 双层for循环(类似冒泡排序的双层循环写法)

    var arr = [2,3,4,2,34,21,1,12,3,4,1]for(var i =0;i

    2 循环和indexof、循环和includes

    创建新数组,循环旧数组,看每次循环的元素是否存在于新数组中没有就把当前元素添加到新数组中

    //indexofvar arr = [2,3,4,2,34,21,1,12,3,4,1]var arr2 = []arr.forEach((e)=>{    if(arr2.indexOf(e)==-1){        arr2.push(e)    }})console.log(arr2)//arr2:[1, 2, 3, 4, 12, 21, 34]
    //includesvar arr = [2,3,4,2,34,21,1,12,3,4,1]var arr2 = []arr.forEach((e)=>{    if(!arr2.includes(e)){        arr2.push(e)    }})console.log(arr2)//arr2:[1, 2, 3, 4, 12, 21, 34]

    3 利用对象属性不能重复去重

    var arr = [2,3,4,2,34,21,1,12,3,4,1]var obj = {};arr.forEach((e,i)=>{    obj[arr[i]] = "abc";   });var arr2=Object.keys(obj)console.log(arr2)//arr2:["1", "2", "3", "4", "12", "21", "34"]var arr3 = arr2.map(e => ~~e )//arr3:[1, 2, 3, 4, 12, 21, 34]//注意这种方法不仅给数组重新排列而且还改变了数组中元素的类型

    ~是js里的按位取反操作符,~~就是执行两次按位取反,其实就是保持原值,但是注意虽然是原值,但是对布尔型变量执行这个操作,会转化成相应的数值型变量,也就是 ~~true === 1,~~false === 0。

    4 ES6 Set

    ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

    var arr = [2,3,4,2,34,21,1,12,3,4,1]var arr1 = [...new Set(arr)]console.log(arr1)//arr1:[1, 2, 3, 4, 12, 21, 34]

    5 ES6 Array. prototype.filter()

    注:indexOf在数组中找元素的时候,碰到符合条件的第一个就会把它的下标返回

    var arr = [2,3,4,2,34,21,1,12,3,4,1]var arr2 = arr.filter((e,i)=>{    //看每次循环的元素在数组中出现的第一个下标位置(indexOf返回的位置),和每次循环的元素的下标(filter循环每次的i)是否一致,一致就说明他就是第一个符合条件,不会被过滤掉。    return arr.indexOf(e)==i;})console.log(arr2)//arr2:[1, 2, 3, 4, 12, 21, 34]

    6 ES6 Array. prototype.reduce()

    var arr = [2,3,4,2,34,21,1,12,3,4,1]var arr2 = arr.reduce((pre,e)=>{    //这里当然也可以用indexOf来判断是否存在    pre.includes(e)?pre:pre.push(e);    return pre},[])console.log(arr2)//arr2:[1, 2, 3, 4, 12, 21, 34]

    以上是"Javascript数组怎样去重"这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

    0