JS 数组去重的几种方法

[~black-]

 一、前言

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

二、数组去重的几种方法

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去重方法还是比较简单方便。

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

[我叫北辰]

互关呀