JS 数组去重的几种方法

简介: JS 数组去重的几种方法

一、前言

   在我们项目开发,我们拿到从后端请求回来的数据时,往往需要对数组进行处理,有时候我们需要将前端的数据进行去重后再发送给后端,也有可能我们拿到后端传回来的数据,需要我们去重以后再使用


二、数组去重的几种方法

1.两次for循环

实现思路:通过两次循环,外层循环每取一次值,内层循环就开始 查找是否和 外层循环的取值相同,若相同,说明有相同的值,利用 splice() 方法删除数组的这一项,循环完毕,就达到了数组去重的效果

      var arr = [1, 2, 3, 4, 1, 3]
      // 两次循环
      function unique(arr) {
        let len = arr.length
        for (let i = 0; i < len; i++) {
          for (let j = i + 1; j < len; j++) {
            if (arr[i] == arr[j]) {
              arr.splice(j, 1)
              j-- //没删除一个 少了一项
              len--
            }
          }
        }
        return arr
      }
      console.log(unique(arr))  // [1,2,3,4]

2.filter() 方法

实现思路:利用filter() 方法循环数组,然后再利用 indexOf 方法判断当前值是否是第一次出现,若第一次出现时,为true; 若不是第一次出现,为false, 而 filter 方法正好是返回结果为true的每一项,就达到了数组去重的效果。

            let arr = [1, 2, 3, 4, 5, 1, 2];
            function unique(arr) {
                return arr.filter(function (item, index) {
                    return arr.indexOf(item) === index;
                });
            }
            console.log(unique(arr)); // [1,2,3,4,5]

3.数组includes()方法

实现思路:  先创建一个新数组,然后利用循环,每一项在push之前都要先利用 includes() 方法判断该值是否在新数组中存在,若不存在,则将该值push进该数组。

            let arr = [1, 2, 3, 4, 3, 2, 1];
            function unique(arr) {
                let newArr = [];
                for (let i = 0; i < arr.length; i++) {
                    if (!newArr.includes(arr[i])) {
                        newArr.push(arr[i]);
                    }
                }
                return newArr;
            }
            console.log(unique(arr)); // [1,2,3,4]

4.数组indexOf()方法

实现思路:其实这个和 indexOf方法类似,都是通过创建新数组,只是判断新数组中是否存在该项的方法不一样。这里通过判断 newArr.indexOf(arr[i]) ===  -1 当结果为true,表示新数组中不存在该值,然后push进新数组中。

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

5.set去重方法

      var arr = [1, 3, 4, 5, 1, 23, 4, 5]
      // 去重
      function unique(arr) {
        // return [...new Set(arr)]
        return Array.from(new Set(arr))
      }
      console.log(unique(arr)) // [1,3,4,5,1,23]

三、总结

以上便是我知道的数组去重的几种比较常见的方法,set去重方法还是比较简单方便。

大家可以在评论区进行讨论,一起学习

目录
相关文章
|
13天前
|
前端开发 JavaScript
前端 js 经典:数组常用方法总结
前端 js 经典:数组常用方法总结
25 0
|
3天前
|
JavaScript 前端开发
js中改变this指向、动态指定函数 this 值的方法
js中改变this指向、动态指定函数 this 值的方法
|
3天前
|
JavaScript 前端开发 开发者
JavaScript 中程序异常处理的方法,提升代码运行的健壮性
JavaScript 中程序异常处理的方法,提升代码运行的健壮性
|
3天前
|
JavaScript
分享经典面试题:JS数组去重的多种方法
分享经典面试题:JS数组去重的多种方法
|
3天前
|
JavaScript
JS判断变量是不是数组?方法大全!
JS判断变量是不是数组?方法大全!
|
12天前
|
移动开发 JavaScript iOS开发
WKWebView和js互调方法的实现
WKWebView和js互调方法的实现
16 0
|
12天前
|
JavaScript 前端开发
Symbol在JavaScript中还有哪些内置的Symbol可以用于定义特定的方法或属性
Symbol在JavaScript中还有哪些内置的Symbol可以用于定义特定的方法或属性
|
13天前
|
前端开发 JavaScript
前端 JS 经典:数组去重万能方法
前端 JS 经典:数组去重万能方法
18 0
|
13天前
|
前端开发 JavaScript 流计算
前端 js 经典:字符串超全方法总结
前端 js 经典:字符串超全方法总结
23 0
|
JavaScript 前端开发 数据安全/隐私保护