General methods are not listed here, but there are many, such as double-layer loop to determine whether the element is equal or create a new array to compare and push, etc. It should be noted that when using the splice method to remove elements, it may cause the collapse of the array, which needs to be dealt with.

Multiple arrays is described in this paper to weight method, using more advanced methods and API, and give corresponding interpretation and syntax, and a variety of other combination invocation style, the principle of logic is actually about the same, the for loop can be mutual conversion and the forEach method, therefore, here no longer list, if there is a better algorithm, can leave a message to me, Humbly consult!!

Given an array [1,2,2,4, null, null, ‘3’, ‘ABC’ 3,5,4,1,2,2,4, null, null, ‘3’, ‘ABC’ 3,5,4] to remove duplicates.

Let arr = [1,2,2,4, null, null, '3', 'ABC' 3,5,4,1,2,2,4, null, null, '3', 'ABC' 3,5,4]Copy the code

1. Use the unique key of the object

As we all know, the key of an object cannot be repeated, otherwise the latter will overwrite the former. Using this feature, the realization of array to duplicate, traversing the number group, the array of each item as the key value of the object.

let obj = {}; for (let i = 0; i < arr.length; i++) { let item = arr[i] if (obj[item] ! == undefined) { arr.splice(i, 1); i--; Continue; } obj[item] = item } // arr: [1, 2, 4, null, "3", "abc", 3, 5]Copy the code

Swap element positions instead of calling the splice method

The above method has some performance problems, that is, the deletion performance based on Splice is not good. After the current item is deleted, the index of each subsequent item must be moved one bit forward. When the data volume is large, the performance will be affected. If the current element is the same, swap the position with the last element of the array. At the same time, operate the length of the array to delete the last element of the array. In this way, other elements in the array will not be affected.

let obj = {}; for (let i = 0; i < arr.length; i++) { let item = arr[i] if (obj[item] ! == undefined) { arr[i] = arr[arr.length-1] arr.length--; i--; continue; } obj[item] = item } // arr: [1, 2, 4, null, "3", "abc", 3, 5]Copy the code

3, array.filter + array.indexof

The filter() method creates a new array whose elements are all the elements in the specified array that meet certain criteria. An empty array is returned if no element matches the criteria. Grammar: array. The filter (function (item, index, arr))

Filter () does not detect an empty array.

Filter () does not change the original array.

Principle: Returns the element whose position of the first occurrence of item is equal to the current index

let newArr = arr.filter((item, index) => arr.indexOf(item) === index);  
// [1, 2, 4, null, "3", "abc", 3, 5]
Copy the code

4, array.filter + object.hasownProperty

let obj = {}

arr.filter(item => obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true))
Copy the code

5, array.reduce + array.includes

Reduce () method: Receives a function as an accumulator, and each value in the array is evaluated from left to right, eventually to a value. Grammar:

arr.reduce(function(total, currValue, currIndex, arr), initValue)

Reduce () does not perform callbacks on empty arrays.

Total: required. The initial value, or the return value at the end of the calculation

CurrValue: Required. The current element

CurrIndex: Optional. The index of the current element

Arr: Optional. The current array object.

InitValue: Optional. Initial value of the accumulator

An empty array calling reduce() with no initial value is an error. An empty array that calls the reduce() method and provides an initial value is returned without calling the callback function. A non-empty array call to reduce() provides the initial value, so total will be equal to the initial value and currValue starts from the first element; If no initial value is provided, total is equal to the value of the first element, and currValue starts with the second element.

let newArr = arr.reduce((accu, cur) => { return accu.includes(cur) ? accu : accu.concat(cur); // return accu.includes(cur)? accu : [...accu, cur]; }, []); // [1, 2, 4, null, "3", "abc", 3, 5]Copy the code

6, Array. IndexOf

IndexOf () : Returns the position of a specified element in an array. This method iterates through the array looking for a corresponding element and returns the index of the element’s first occurrence, or -1 if the specified element is not found.

let newArr = [] for (var i = 0; i < arr.length; If (newarr.indexof (arr[I]) === -1) newarr.push (arr[I])} newArr.indexOf(item) === -1 ? newArr.push(item) : '') console.log(newArr) // [1, 2, 4, null, "3", "abc", 3, 5]Copy the code

7, Array. Includes

Includes () method: determines whether an array contains a specified value. Returns true if so, false otherwise.

let newArr = [] for (var i = 0; i < arr.length; i++) { if (! Newarr.includes (arr[I])) newarr.push (arr[I])} // newArr.includes(item) ? newArr.push(item) : '') console.log(newArr) // [1, 2, 4, null, "3", "abc", 3, 5]Copy the code

8, the new Set + extended operator | | Array. The from

ES6 provides a new data structure, Set. Similar to an array, but with unique values and no duplicate values. Set itself is a constructor that can take an iterable interface data structure as an argument (such as a Set of numbers, a string) for initialization.

let newArr = [...new Set(arr)];      // [1, 2, 4, null, "3", "abc", 3, 5]\

let newArr = Array.from(new Set(arr));      // [1, 2, 4, null, "3", "abc", 3, 5]

let newStr = [...new Set('ababbc')].join('')  //  'abc'
Copy the code

9, the new Map

ES6 provides new data structure maps. Like objects, it is also a collection of key-value pairs, but the range of “keys” is not limited to strings. Values of all types (including objects) can be used as keys. The set method sets the key corresponding to the key name key to value and returns the entire Map structure. If the key already has a value, the key value is updated, otherwise the key is generated. The get method reads the corresponding key, and returns undefined if the key is not found. The HAS method returns a Boolean value indicating whether a key is in the current Map object.

let map = new Map(); let newStr = []; for (let i = 0; i < arr.length; i++) { if (! map.has(arr[i])) { map.set(arr[i], true); newStr.push(arr[i]); } } console.log(newArr) // [1, 2, 4, null, "3", "abc", 3, 5]Copy the code

Thank you