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的树控件实现代码(asp.net+json)
Jul 11 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
Node.js文件操作详解
Aug 16 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
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实现网站文件批量压缩下载功能
2015/10/28 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
javaScript复制功能调用实现方案
2012/12/13 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
PyQt5每天必学之布局管理
2018/04/19 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
python批量创建指定名称的文件夹
2019/03/21 Python
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
自动化专业本科毕业生求职信
2013/10/20 职场文书
创业者是否需要商业计划书?
2014/02/07 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
2014年教师节活动总结
2014/08/29 职场文书
上党课的心得体会
2014/09/02 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书