数组去重的八种方法

最新推荐文章于 2023-12-11 17:34:47 发布

芋泥糯米团子

最新推荐文章于 2023-12-11 17:34:47 发布

阅读量1.9k

点赞数 1

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_50809560/article/details/131363718

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、利用数组.includes(数组元素)来判断去重

建立一个新数组，把原来数组里的元素一个个循环遍历放进新数组里，利用数组.includes（数组元素）判断新数组内是否有该元素，如果没有就放入。

 <script>
        function noreapeat(ary) {
            var resArr = []
            for (var i = 0; i < ary.length; i++) {
                var v = ary[i]
                var flag = resArr.includes(v)//判断新数组内是否有这个元素
                if (flag === false) {
                    // 如果没有，就把元素放进去
                    resArr.push(v)
                }
            }
            return resArr
        }
        var arr = [2, 2, 6, 6, 8, 8, 10]
        console.log(noreapeat(arr));
        //  [2, 6, 8, 10]
    </script>

2、利用数组.indexOf(数据元素)来判断，去重

先建立一个新数组，将原数组进行循环遍历，把元素一个个放进新数组里，但只放新数组.indexOf(数据元素) === -1的元素

<script>
        function noreapeat(ary) {
            var resArr = []
            for (var i = 0; i < ary.length; i++) {
                var v = ary[i]
                var index = resArr.indexOf(v)
                if (index === -1) {
                    resArr.push(v)
                }
            }
            return resArr
        }
        var arr = [2,2,2,4,4,4,6,6,6,8,8]
        console.log(noreapeat(arr));
        //  [2, 4, 6, 8]
    </script>

3、用双循环，让前面的元素和它后边的元素一个个进行比较，如果后边还有该元素，就删除

 <script>
        function noreapeat(ary) {
            ary = ary.slice(0)//这样就不直接在原数组内进行删除了，
            for (var i = 0; i < ary.length; i++) {
                var v = ary[i]
                for (var j = i + 1; j < ary.length; j++) {
                    // 让arr[j] 和v/arr[i] 进行比较，相等了 就把arr[j]删除
                    if (ary[j] === v) {
                        ary.splice(j, 1)
                        //如果arr[j]和arr[i]相等，并删除了，那么后一个元素就会往前移，那这个元素的下标就会改变，
                        // 但遍历一直在进行，j一直在++,那元素前移，就不能和arr[i]进行比较了，就干扰了判断
                        // 所以每次判断 删除以后，就让j再-- 一次，确保每个元素都能进行比较
                        j--
                    }
                }
            }
            return ary
        }
        var arr = [20,20,20,40,40,40,60,60]
        console.log(noreapeat(arr));
    </script>

4、利用对象的键名（属性名）的唯一性

 <script>
        function noreapeat(ary) {
            var obj = {}//定义一个空对象
            //循环遍历数组，让数组的数据元素当对象的键名
            ary.forEach(function (v, i) {
                obj[v] = 'hello world'
            })
            // 定义一个空数组存放数据
            var resArr = []
            //现在键名已经不是重复的了，下一步就是取键名
            for (var k in obj) {
                // 因为此时的k是字符串，数组内应存数字，所以要把字符串转为数值类型
                resArr.push(k - 0)
            }
            return resArr;
        }
        var arr = [2, 2, 2, 4, 4, 4, 6, 6, 6, 8, 8, 8, 10, 10]
        console.log(noreapeat(arr))
        //[2,4,6,8,10]
    </script>

5、利用set去重

 <script>
        function noreapeat(ary) {
            var resArr;
            return resArr = [...new Set(ary)]
        }
        var arr = [2, 2, 2, 4, 4, 4, 5, 5]
        console.log(noreapeat(arr))//[2, 4, 5];
    </script>

6、利用filter去重如果indexOf找出来的该元素的下标值和此时该元素的index值相等就过滤出来；

 <script>
        function noreapeat(ary) {
            var resArr;
            return resArr = ary.filter(function (item, index) {
                return ary.indexOf(item) == index;
            })
        }
        var arr = [4, 4, 4, 6, 6, 6, 8, 8, 8, 10, 10]
        console.log(noreapeat(arr));
        //[4, 6, 8, 10]
    </script>

7、利用es6新增的map方法，map类似对象，可以存放键值对—属性名：属性值，再利用属性名唯一性去重

 <script>
        function noreapeat(ary) {
            var m = new Map();
            ary.forEach(function (item) {
                // 把数组元素当作属性名进行添加进新建的map
                m.set(item, 1)
            })
            var resArry;
            // 获取map里面的属性名转化成数据存进新数组里
            return resArry = [...m.keys()]
        }
        var arr = [20, 20, 20, 40, 40, 40, 60, 60]
        console.log(noreapeat(arr));
        //[20, 40, 60]
    </script>

8、借助于第三库lodash去重

//在头部引入链接
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
</head>

//在body内

<body>
    <script>
        var res = _.uniq([2, 1, 2]);
        console.log(res);
        // [2,1]
    </script>
</body>