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 相关文章推荐
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 Javascript
js实现复制粘贴的两种方法
Dec 04 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
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
php正则表达式学习笔记
2015/11/13 PHP
Dom 结点创建 基础知识
2011/10/01 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
python处理csv中的空值方法
2018/06/22 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
信电学院毕业生自荐书
2014/05/24 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
男方婚前保证书
2015/02/28 职场文书
工资证明格式模板
2015/06/12 职场文书
消防安全主题班会
2015/08/12 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android