JS实现数组去重的11种方法总结


Posted in Javascript onApril 04, 2022

1.ES5常用:利用for嵌套for,然后splice去重

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]) { //第一个等同于第二个,splice方法删除第二个
                    arr.splice(j, 1);
                    j--;
                }
            }
        }
        return arr;
    }
    var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
        'NaN', 0, 0, 'a', 'a', {}, {}
    ];
    console.log(unique(arr))

JS实现数组去重的11种方法总结

解析:两个null消失,NaN和{}没有去重

2.ES6常用:Set去重

function unique(arr) {
        return Array.from(new Set(arr))
    }
    var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
        'NaN', 0, 0, 'a', 'a', {}, {}
    ];
    console.log(unique(arr))

JS实现数组去重的11种方法总结

解析:去重代码少。但是无法去除{}空对象。

3.indexOf去重

function unique(arr) {
        if (!Array.isArray(arr)) {
            console.log('type error!')
            return
        }
        var array = [];//新建空数组,for循环原数组,判断数组是否存在当前元素,如果相同的值跳过,不同push进数组
        for (var i = 0; i < arr.length; i++) {
            if (array.indexOf(arr[i]) === -1) {
                array.push(arr[i])
            }
        }
        return array;
    }
    var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
        'NaN', 0, 0, 'a', 'a', {}, {}
    ];
    console.log(unique(arr))

JS实现数组去重的11种方法总结

解析:NaN、{}没有去重

4.sort()排序

//排序后的结果,遍历对比
    function unique(arr) {
        if (!Array.isArray(arr)) {
            console.log('type error!')
            return
        }
        arr = arr.sort()
        var arrray = [arr[0]];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] !== arr[i - 1]) {
                arrray.push(arr[i]);
            }
        }
        return arrray
    }
    var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
        'NaN', 0, 0, 'a', 'a', {}, {}
    ];
    console.log(unique(arr))

JS实现数组去重的11种方法总结

解析:NaN、{}没有去重

5.对象属性不能相同(不建议)

function unique(arr) {
        if (!Array.isArray(arr)) {
            console.log('type error!')
            return
        }
        var array = [];
        var obj = {};
        for (var i = 0; i < arr.length; i++) {
            if (!obj[arr[i]]) {
                array.push(arr[i])
                obj[arr[i]] = 1
            } else {
                obj[arr[i]]++
            }
        }
        return array;
    }
    var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
        'NaN', 0, 0, 'a', 'a', {}, {}
    ];
    console.log(unique(arr))

JS实现数组去重的11种方法总结

解析:两个true去掉,NaN和{}没有去重

6.includes()

function unique(arr) {
        if (!Array.isArray(arr)) {
            console.log('type error!')
            return
        }
        var array = [];
        for (var i = 0; i < arr.length; i++) {
            if (!array.includes(arr[i])) { //includes 检测数组是否有某个值
                array.push(arr[i]);
            }
        }
        return array
    }
    var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
        'NaN', 0, 0, 'a', 'a', {}, {}
    ];
    console.log(unique(arr))

JS实现数组去重的11种方法总结

解析:{}没有去重

7.hasOwnProperty

function unique(arr) {
    var obj = {};
    return arr.filter(function(item, index, arr){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}

JS实现数组去重的11种方法总结

解析:所有都去重

8.filter

function unique(arr) {
        return arr.filter(function (item, index, arr) {
            //当前元素,在原始数组中的第一个索引==当前索引值,否则返回当前元素
            return arr.indexOf(item, 0) === index;
        });
    }
    var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null,     NaN, NaN,
        'NaN', 0, 0, 'a', 'a', {}, {}
    ];
    console.log(unique(arr))

JS实现数组去重的11种方法总结

解析:{}没有去重、NaN两个都没有了

9.利用递归去重

 function unique(arr) {
        var array = arr;
        var len = array.length;

        array.sort(function (a, b) { //排序后更加方便去重
            return a - b;
        })

        function loop(index) {
            if (index >= 1) {
                if (array[index] === array[index - 1]) {
                    array.splice(index, 1);
                }
                loop(index - 1); //递归loop,然后数组去重
            }
        }
        loop(len - 1);
        return array;
    }
    var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
        'NaN', 0, 0, 'a', 'a', {}, {}
    ];
    console.log(unique(arr))

JS实现数组去重的11种方法总结

解析:NaN和{}没有去重

10.Map去重

function arrayNonRepeatfy(arr) {
        let map = new Map();
        let array = new Array(); // 数组用于返回结果
        for (let i = 0; i < arr.length; i++) {
            if (map.has(arr[i])) { // 如果有该key值
                map.set(arr[i], true);
            } else {
                map.set(arr[i], false); // 如果没有该key值
                array.push(arr[i]);
            }
        }
        return array;
    }
    var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
        'NaN', 0, 0, 'a', 'a', {}, {}
    ];
    console.log(arrayNonRepeatfy(arr))

JS实现数组去重的11种方法总结

解析:创建一个空Map数据结构,遍历需要去重的数组,把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值,所以最终得到的就是去重后的结果。{}空对象无法去重。

11.reduce+includes

function unique(arr) {
        return arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []);
    }
    var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN,
        'NaN', 0, 0, 'a', 'a', {}, {}
    ];
    console.log(unique(arr));

JS实现数组去重的11种方法总结

解析:{}无法去重

以上就是JS实现数组去重的11种方法总结的详细内容,更多关于JS数组去重的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
javascript实现Table排序的方法
May 15 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
JavaScript 闭包的使用场景
Sep 17 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 #Vue.js
JavaScript模拟实现网易云轮播效果
Javascript中Microtask和Macrotask鲜为人知的知识点
vue中div禁止点击事件的实现
Apr 02 #Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 #Vue.js
Vue+TypeScript中处理computed方式
Apr 02 #Vue.js
Vue+Flask实现图片传输功能
Apr 01 #Vue.js
You might like
强烈推荐:php.ini中文版(1)
2006/10/09 PHP
在PHP中使用模板的方法
2008/05/24 PHP
延长phpmyadmin登录时间的方法
2011/02/06 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
python爬虫请求头的使用
2020/12/01 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
数控技术应届生求职信
2013/11/13 职场文书
学生励志演讲稿
2014/01/06 职场文书
2014年元旦感言
2014/03/06 职场文书
法人代表授权委托书
2014/04/08 职场文书
后勤工作个人总结
2015/02/28 职场文书
胡桃夹子观后感
2015/06/11 职场文书
入党自传范文2015
2015/06/26 职场文书
javascript函数式编程基础
2021/09/15 Javascript