js常见数组去重方法

最新推荐文章于 2022-11-18 19:41:50 发布

这是一个对象

最新推荐文章于 2022-11-18 19:41:50 发布

阅读量53

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_67576744/article/details/126805736

版权

1，newSet方法

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    let arr = [1, 1, 2, 2, 3, 3,];

    function unique(arr) {

        return Array.from(new Set(arr));

    }

    console.log(unique(arr));// [1, 2, 3]

    console.log([...new Set(arr)]);// [1,2,3]
</script>

</html>

2，利用数组的indexOf方法去重

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    let arr = [1, 1, 2, 2, 3, 3,];
    function unique(arr) {
        let arr1 = [];
        for (let i = 0; i < arr.length; i++) {
            if (arr1.indexOf(arr[i]) === -1) {
                arr1.push(arr[i]);
            }
        }
        return arr1;
    }
    console.log(unique(arr));//[1,2,3]
</script>

</html>

3，利用数组的sort方法去重（相邻元素对比法）

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    let arr = [1, 1, 2, 2, 3, 3,];
    function unique(arr) {
        let arr1 = [];
        arr.sort();
        arr1.push(arr[0]);
        for (let i = 1; i < arr.length; i++) {
            if (arr[i] !== arr[i - 1]) {
                arr1.push(arr[i]);
            }
        }
        return arr1;
    }
    console.log(unique(arr));//[1,2,3]
</script>

</html>

4，利用数组的includes,返回true,false 的特性

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    let arr = [1, 1, 2, 2, 3, 3,];

    function unique(arr) {
        let arr1 = [];
        for (let i = 0; i < arr.length; i++) {
            if (!arr1.includes(arr[i])) {
                arr1.push(arr[i]);
            }
        }
        return arr1;
    }
    console.log(unique(arr));//[1,2,3]
</script>

</html>

5，filter 方式过滤,第一次出现的索引等于当前索引

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    let arr = [1, 1, 2, 2, 3, 3,];


    function unique(arr) {
        return arr.filter((item, index) => {
            return arr.indexOf(item, 0) === index;
        });
    }
    console.log(unique(arr));//[1,2,3]

</script>

</html>

6，递归, 数组赋值一个改变一个也改变，要想不改变原数组，需要for 循环赋值

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    let arr = [1, 1, 2, 2, 3, 3,];



    function unique(arr) {
        let arr1 = [];
        for (let i = 0; i < arr.length; i++) {
            arr1.push(arr[i]);
        }
        arr1.sort();
        let len = arr1.length;
        function loop(index) {
            if (index >= 1) {
                if (arr1[index] === arr1[index - 1]) {
                    arr1.splice(index, 1);
                }
                index--;
                loop(index);
            }
        }
        loop(len - 1);
        return arr1;
    }
    console.log(unique(arr));//[1,2,3]
    // console.log(arr);//[1,1,2,2,3,3]
</script>

</html>

7，使用双重for循环

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    let arr = [1, 1, 2, 2, 3, 3,];

    function noRepeat(arr) {
        for (var i = 0; i < arr.length - 1; i++) {
            for (var j = i + 1; j < arr.length; j++) {
                if (arr[i] === arr[j]) {
                    arr.splice(j, 1);
                    j--;
                }
            }
        }
        return arr;
    }
    var arr2 = noRepeat(arr);
    console.log(arr2);//[1,2,3]
</script>

</html>