数组去重方法

最新推荐文章于 2024-07-12 16:55:56 发布

小金子.

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量777

点赞数 17

文章标签：前端

本文链接：https://blog.csdn.net/m0_74114605/article/details/136955427

版权

一、ES6的new Set去重（最常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr=[1,2,2,3,4,4,5,6,6,7,7,8,9,10]

        const set = new Set(arr)  //返回set数据结构

        //方法一：es6的...解构
        const result1=Array.from(new Set(arr))

        //方法二：Array.from()解析类数组为数组 
        const result2=[...new Set(arr)]

        console.log(set);
        console.log(result1);
        console.log(result2);
    </script>
</body>
</html>

二、双层for循环与splice

采用双指针思想，外层循环元素，内层循环时比较值，值相同时则删掉这个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //第一轮：arr[0]分别与arr[1]、arr[2]、arr[3]...直到最后一个元素去比较，重复时用splice去删除第j位的一个元素
        //第二轮：arr[1]分别与arr[2]、arr[3]、arr[4]...直到最后一个元素去比较，删除重复
        //后面几轮同理...
        let arr=[1,2,2,3,4,4,5,6,6,7,7,8,9,10]

        function uniqueFun(array) {
            let len=arr.length
            for(let i=0;i<len;i++){
                for(let j=i+1;j<len;j++){
                    if(arr[i]===arr[j]) {
                        arr.splice(j,1);
                        len--;
                        j++
                    }
                }
            }

            return array
        }

        console.log(uniqueFun(arr));
    </script>
</body>
</html>

三、indexOf去重

indexOf()方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue，如果找到searchvalue则返回第一次出现在stringObject字符串中的位置，否则返回-1。

创建一个新数组，然后去遍历旧数组，利用forEach遍历判断，如果在新数组的查询中没有发现这个元素就会返回-1，执行数组的push方法，否则结束此次循环进入下一循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr=[1,2,2,3,4,4,5,6,6,7,7,8,9,10]

        function uniqueFun(array) {
            const newArr=[];
            arr.forEach(item=>{
                if(newArr.indexOf((item)===-1)){
                    newArr.push(item)
                }
            });
            return newArr
        }

        console.log(uniqueFun(arr));
    </script>
</body>
</html>

四、利用includes

includes()方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

通过遍历原数组来判断元素是否存在新数组中，存在则把元素push到新数组，该方法会更改数组的原始数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 利用includes 检查新数组是否包含原数组的每一项，如果不包含，就push进去
        let arr = [1, 2, 2, 3, 4, 4, 5, 6, 6, 7, 7, 8, 9, 10]

        function uniqueFun(array) {
            const newArr = [];
            arr.forEach((item) => {
                if (!newArr.includes(item)) {
                    newArr.push(item)
                }
            });
            return newArr
        }

        console.log(uniqueFun(arr));
    </script>
</body>

</html>

五、数组的filter()+indexOf()

filter方法

array.filter(function(currentValue,index,arr), thisValue);
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件(匿名函数中的条件)的所有元素；

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件(匿名函数中的条件)的所有元素；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let arr = [1, 2, 2, 3, 4, 4, 5, 6, 6, 7, 7, 8, 9, 10]

        function uniqueFun(array) {
            return arr.filter((item,index)=>{
                //indexOf每次从头到尾地检索array数组，返回第一次出现的位置（索引）**
                return arr.indexOf(item)===index
            })
        }

        console.log(uniqueFun(arr));
    </script>
</body>

</html>

六、Map数据结构

Map对象是JavaScript提供的一种数据结构，结构为键值对形式。将数组元素作为map的键存入，然后结合has()和set()方法，判断键是否重复

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let arr = [1, 2, 2, 3, 4, 4, 5, 6, 6, 7, 7, 8, 9, 10]

        function uniqueFun(array) {
            const map =new Map();
            const newArr=[];
            arr.forEach((item)=>{
                if(!map.has(item)){
                    map.set(item,true);
                    newArr.push(item)
                }
            })
            return newArr
        }

        console.log(uniqueFun(arr));
    </script>
</body>

</html>

七、对象属性特征

实现思想和Map()差不多，主要是利用了对象的属性名不可重复这一特性，虽然能达到去重的目的，但会存在问题：如果1和"1"比较，会被判断为同一个值进行去除，所以不建议大家使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let arr = [1, 2, 2, 3, 4, 4, 5, 6, 6, 7, 7, 8, 9, 10]

        function uniqueFun(array) {
            const newArr=[];
            const obj={};

            arr.forEach((item)=>{
                if(!obj[item]){
                    newArr.push(item)
                    obj[item]=true    //设置键的值
                }
            })
            return newArr
        }

        console.log(uniqueFun(arr));
    </script>
</body>

</html>

八、reduce与includes方法

先创建一个空数组prev，然后遍历原数组arr，对于每一个元素进行对比，看它是否出现在prev中，如果不存在就将它添加到prev中，最后返回prev数组，它就是去重后的数组

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let arr = [1, 2, 2, 3, 4, 4, 5, 6, 6, 7, 7, 8, 9, 10]

        function uniqueFun(array) {
            return arr.reduce(
                (prev,cur)=>(prev.includes(cur)?prev:[...prev,cur]),[]
            )
        }

        console.log(uniqueFun(arr));
    </script>
</body>

</html>

小金子.

关注

17
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
数组去重方法

先创建一个空数组prev，然后遍历原数组arr，对于每一个元素进行对比，看它是否出现在prev中，如果不存在就将它添加到prev中，最后返回prev数组，它就是去重后的数组。创建一个新数组，然后去遍历旧数组，利用forEach遍历判断，如果在新数组的查询中没有发现这个元素就会返回-1，执行数组的push方法，否则结束此次循环进入下一循环。通过遍历原数组来判断元素是否存在新数组中，存在则把元素push到新数组，该方法会更改数组的原始数据。是否包含一个指定的值，如果是返回 true，否则false。
复制链接

扫一扫