I. Introduction

In our project development, when we get the data requested from the backend, we often need to process the array. Sometimes we need to de-duplicate the front-end data before sending it to the backend. The returned data needs to be deduplicated before use

2. Several methods for deduplication of arrays

1. Two for loops

Implementation idea: Through two loops, each time the outer loop takes a value, the inner loop starts to check whether the value is the same as the outer loop. If they are the same, it means that there is the same value. Use the splice() method to delete this array . One item, after the cycle is completed, the effect of deduplication of the array is achieved

      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() method

Implementation idea: Use the filter() method to loop through the array, and then use the indexOf method to judge whether the current value is the first occurrence , if it is the first occurrence, it is true; if it is not the first occurrence, it is false, and the filter method is exactly It is each item whose return result is true, which achieves the effect of deduplication in the array.

            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. Array includes() method

Implementation idea: Create a new array first, and then use a loop. Before pushing each item, use the includes () method to determine whether the value exists in the new array . If not, push the value into the array .

            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. Array indexOf() method

Implementation idea: In fact, this is similar to the indexOf method, both by creating a new array, but the method of judging whether the item exists in the new array is different. Here, by judging newArr.indexOf(arr[i]) === -1 , when the result is true, it means that the value does not exist in the new array, and then push it into the new array.

      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 deduplication method

      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]

3. Summary

The above are some of the more common methods for deduplication of arrays that I know. The set deduplication method is relatively simple and convenient.

You can discuss and learn together in the comment area

Several methods of JS array deduplication