JavaScript实现数组去重的十种方法分享

目录
  • 方法1
  • 方法2
  • 方法3
  • 方法4
  • 方法5
  • 方法6
  • 方法7
  • 方法8
  • 方法9
  • 方法10

方法1

利用 ES6的set 方法和解构赋值——最常用、最简单。

这个方法是es6之后加入的,是最简单的一种方法。

Set是一种结构,是一种不重复值的集合,如:{1,2,3}。它的特性之一就是里面的每一个值都是不重复的;

[...new Set(arr)] 意思是将Set结构解构赋值为数组。

        function Unrepeated1(arr) {
           return [...new Set(arr)]
        }
        console.log(Unrepeated1([1,1,2,2,3,3]));
        // 结果是[1, 2, 3]

方法2

利用数组原型对象上的 lastIndexOf 方法——以前常用,逐渐被include代替

思路: 定义一个空数组,遍历这个原数组,如果空数组没有这个数就往空数组里加入,有的话就不操作。

lastIndeOf():返回指定字符串值最后出现的位置,从后向前搜索,找不到返回-1

        function Unrepeated2(arr) {
            var res = [];
            for (var i = 0; i < arr.length; i++) {
                res.lastIndexOf(arr[i]) !== -1 ? '' : res.push(arr[i]);
            }
            return res;
        }
        console.log(Unrepeated2([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 5, 6, 7, 4]

方法3

利用数组原型对象上的 splice 方法。

思路是:双层遍历数组,举例:如果第一项是数字1,那么第二层遍历从第二项开始,如果后面也找到1,就把1删除。

splice():用于删除数组元素,splice(j,1)j代表数组索引是j,1代表删除1个

        function Unrepeated3(arr) {
            var i,j,len = arr.length;
            for (i = 0; i < len; i++) {
                for (j = i + 1; j < len; j++) {
                    if (arr[i] == arr[j]) {
                        arr.splice(j, 1);
                        len--;
                        j--;
                    }
                }
            }
            return arr;
        }
        console.log(Unrepeated3([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));

方法4

利用数组原型对象上的 forEach 和 includes方法——includes很强大

思路:定义一个空数组,遍历原数组,再遍历空数组,如果空数组里面含有原数组的项就添加进空数组,如果空数组已经有了,就不再操作。

includes:表示是否含有,返回布尔值,说的也是它以后会替代indexof。是es6新增的很强大的一个api,不止数组可以用,对象,字符串都可以用。

          function Unrepeated4(arr) {
            let newArr = [];
            arr.forEach(item => {
                return newArr.includes(item) ? '' : newArr.push(item);
            });
            return newArr;
        }
        console.log(Unrepeated4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 4, 5, 6, 7]

方法5

利用数组原型对象上的 filter 和 includes方法。

和方法4类似的思路,只不过foreach+includes换成了filter+includes

        function Unrepeated5(arr) {
            var newArr = []
            newArr = arr.filter(function (item) {
                return newArr.includes(item) ? '' : newArr.push(item)
            })
            return newArr
        }
        console.log(Unrepeated5([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 5, 6, 7, 4]

方法6

利用数组原型对象上的includes方法。

这个方法可以作为一般性解法,代码可以进一步简化。

        function Unrepeated6(arr) {
            var newArr = []
            for (var i = 0; i < arr.length; i++) {
                if (!newArr.includes(arr[i])) {
                    newArr.push(arr[i])
                }
            }
            return newArr
        }
        console.log(Unrepeated6([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 5, 6, 7, 4]

方法7

利用数组的indexOf下标属性来查询。

思路和上面的类似

        function Unrepeated7(arr) {
            var newArr = []
            for (var i = 0; i < arr.length; i++) {
                if (newArr.indexOf(arr[i])===-1) {
                    newArr.push(arr[i])
                }
            }
            return newArr
        }
        console.log(Unrepeated7([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 5, 6, 7, 4]

方法8

利用对象属性存在的特性,如果没有该属性则存入新数组。

这个方法兼容性比较好。思路是用一个空对象来标记,通过遍历,动态的设置对象的属性,以此来区分是否重复。

        function Unrepeated8(arr) {
            var obj={}
            var newArr=[]
            for (let i = 0; i < arr.length; i++) {
                if (!obj[arr[i]]) {
                    obj[arr[i]] = 1
                    newArr.push(arr[i])
                }
            }
            return newArr
        }
        console.log(Unrepeated8([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 5, 6, 7, 4]

方法9

思路:先将原数组排序,在与相邻的进行比较,如果不同则存入新数组。

        function Unrepeated9(arr) {
            var formArr = arr.sort()
            var newArr=[formArr[0]]
            for (let i = 1; i < formArr.length; i++) {
                if (formArr[i]!==formArr[i-1]) {
                    newArr.push(formArr[i])
                }
            }
            return newArr
        }
        console.log(Unrepeated9([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3,  4,5, 6, 7]

方法10

思路:定义一个新数组,并存放原数组的第一个元素,然后将元素组一一和新数组的元素对比,若不同则存放在新数组中。

        function Unrepeated10(arr) {
            let newArr = [arr[0]];
            for (let i = 1; i < arr.length; i++) {
                let repeat = false;
                for (let j = 0; j < newArr.length; j++) {
                    if (arr[i] === newArr[j]) {
                        repeat = true;
                        break;
                    }else{

                    }
                }
                if (!repeat) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }

        console.log(Unrepeated10([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));
        // 结果是[1, 2, 3, 5, 6, 7, 4]

到此这篇关于JavaScript实现数组去重的十种方法分享的文章就介绍到这了,更多相关JavaScript数组去重内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • js对象合并的4种方式与数组合并的4种方式

    目录 一.对象合并 1.拓展运算符(...) 2.Object.assign() 3.递归赋值 4.jquery中的extend() 二.数组合并 1.扩展操作符 2.使用array.concat()方法进行合并 3.关于Apply 4.array.push()方法进行合并 一.对象合并 1.拓展运算符(...) ES6入门中是这样说的: 对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中. let obj1 = {     name: '陈伟停',     gend

  • JavaScript数组filter方法

    目录 1.定义 2.语法 3.参数说明 4.用法 5.注意事项 6.使用实例 1.定义 filter()创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素. 2.语法 array.filter(function(currentValue,index,arr), thisValue); 3.参数说明 返回 4.用法 filter() 方法用于把Array中的某些元素过滤掉,然后返回剩下的未被过滤掉的元素. 5.注意事项 1.filter() 不会对空数组进行检测: 2.filt

  • js如何找出两个数组中不同的元素

    目录 js找出两个数组中不同的元素 js找出两个数组中不同元素和相同元素的几种方法 找出不同元素 找出相同的元素 总结 js找出两个数组中不同的元素 function getNewArr(a,b){ const arr = [...a,...b]; const newArr = arr.filter(item => { return !(a.includes(item) && b.includes(item)); }); return newArr; } console.log(ge

  • JavaScript中数组随机排序的实现详解

    目录 一.原地算法 二.Array.property.sort() 1.方法一(不推荐) 2.方法一改良 三.洗牌算法实现随机排序 1.换牌 2.抽牌 一.原地算法 在谈sort之前,我们先了解一下原地算法,什么事原地算法呢?所谓原地算法就是说基于原有的数据结构进行一定的操作修改,而不借助额外的空间.使用原地算法时,其内存干净,空间复杂度是O(1),可以减少没必要的内存,避免造成内存浪费和冗余.当然,减小内存损耗会带来算法复杂度和时间消耗的增加,所以是一个Tradeoff.Tradeoff 是一

  • JavaScript数组合并的8种常见方法小结

    目录 1.ES6 解构 2.遍历添加 3.concat 4.join & split 5.解构添加 6.splice解构 7.apply 8.call 补充:两个数组的交叉合并 总结 1.ES6 解构 [...arr, ...array] 不改原数组值,生成新的数组. 2.遍历添加 array.forEach(item => { arr.push(item) }) 遍历方法:forEach.map.filter.every.for.for in.for of等. 添加方法:push(后追加)

  • js深度合并两个数组对象的实现

    目录 js深度合并两个数组对象 关于数组对象的深浅合并 js深度合并两个数组对象 js合并两个数组对象, 如果a中含有b,则b的值覆盖a的值 如果a中不含有b 则b的值新增到a MergeRecursive(obj1, obj2) { // 合并两个数组 for (var p in obj2) { if (obj1[p] === undefined) { // 如果obj1没有p 直接把obj2的p加入 obj1[p] = obj2[p] } try { if (obj2[p].construc

  • Java 从json提取数组并转换为list的操作方法

    目录 Java 从json提取数组并转换为list Java单个对象和List对象转换成Json,Json转List (一)使用单个对象转换JSON对象 (二)多个对象存到List,再转换成JSON (三)json的list对象转List对象 Java 从json提取数组并转换为list 这里ret表示json字符串原文 // 解析为JSONObject JSONObject jsonObject = JSONObject.parseObject(ret); // 提取出JSONArray JS

  • JavaScript高阶API数组reduce函数使用示例

    目录 正文 1.求数组中所有对象的年龄和 2.按照年龄分组 3.将数组对象转化为对象 4.参数打印 总结 正文 前面我们讲了数组的一些基本方法,今天给大家讲一下数组的reduce(),它是数组里面非常重要也是比较难的函数,那么这篇文章就好好给大家介绍下reduce函数. 还是老样子,我们直接在应用中学习,直接上例子.让我们先定义一个包含几个对象的数组,注意观察下这个数组,可以看到里面有两个对象的age都是30.(下面会用到) // 一个包含几个人物对象的数组. const people = [

  • 27个JavaScript数组常见方法汇总与实例说明

    1. push() 概括:数组末位增加 参数:需要增加的数据 返回值:数组更新后的长度 let arr = [1,2,3] arr.push(1) // 返回新增后的数组长度 4 arr.push() // 不传参数默认不新增 4 arr.push(1,2,3) // 新增多条数据时,返回新增完成后的数组长度 7 2. pop() 概括:数组末位删除 参数:无 返回值:删除的数据 let arr = [3] arr.pop() // 返回已删除的数据 3 arr.pop() // 当数组数据为空

  • JS数组操作大全对象数组根据某个相同的字段分组

    目录 先说点废话 目标对象数组 准换后的对象数组 编写函数的思路 方法一 方法二 拓展————ES6的新方法Object.keys 先说点废话 最近在实际业务中,需要编写一个方法根据数组中每一个对象的一个相同字段,来将该字段值相等的对象重新编入一个数组,返回一个嵌套的数组对象,特地来做个总结.当然需要注意的是,在开发过程这种数组的处理函数,应当被编写到项目的公共工具函数库中全局调用 目标对象数组 let dataArr = [{ id: 1, anyId: 1023, anyVal: 'fx67

随机推荐