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同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 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部分常见问题总结
2006/10/09 PHP
自己动手做一个SQL解释器
2006/10/09 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
php中fsockopen用法实例
2015/01/05 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
php创建类并调用的实例方法
2019/09/25 PHP
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
Python实现手绘图效果实例分享
2020/07/22 Python
详解python内置模块urllib
2020/09/09 Python
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
创建省级文明单位实施方案
2014/02/27 职场文书
新闻发布会策划方案
2014/06/12 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
欠条范文
2015/07/03 职场文书
卫生主题班会
2015/08/14 职场文书
检讨书怎么写?
2019/06/21 职场文书