Given array:

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] ! Continue} obj[item] = item} {arr. Splice (I, 1) I --Copy the code

2. Swap element positions instead of calling splice

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 }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);  
Copy the code

4. Array.filter + Object.hasOwnProperty

HasOwnProperty () method: Returns a Boolean value indicating whether the object has the specified property in its own property

Principle: Use the key name of the object can not be repeated.


let obj = {}

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

5. reduce

Var arr =,2,3,3,2,1,4 [1] arr. Reduce ((acc, cur) = > {if (! (acc.includes(cur))) { acc.push(cur) } return acc }, []) // [1, 2, 3, 4]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. 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. 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

10. new Set

Console. log([...new Set(arr)])Copy the code

Part of the article is reproduced on the front tide cafe public account, only for personal study