How to implement arr (array) deduplication in es6

3 implementation methods: 1. Set data structure and "Array.from()" deduplication, syntax "Array.from(new Set(arr))"; 2. Set data structure and extension operator "..." to remove duplicates, the syntax is "[...new Set(arr)]"; 3. filter() and indexOf() filtering, the syntax is "arr.filter((it,in)=>{return arr .indexOf(it,0)===in;});".

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

5 ways to remove duplicates from ES6 arrays

1. Set data structure and Array.from() Repeat

• #Set is a new data structure provided by ES6, which is similar to an array, but has no duplicate values. Using this feature, we can convert the array to a Set type for deduplication, and then use the Array.from method to convert it to an array again.

• The Array.from method is used to convert two types of objects into real arrays: array-like objects and iterable objects (including ES6 new Additional data structures Set and Map).

Implementation idea:

• After converting the array into a set collection to remove duplication, use the Array.from method to convert the set into an array

Syntax:

Array.from(new Set(arr))

Example:

let arr=[1,2,3,3,2,"1",0,undefined,undefined];
let newArr=Array.from(new Set(arr));
console.log(newArr);

2. Set data structure and extended operations The operator "..." is used to remove duplicates

• The expansion operator… is introduced in ES6 and expands the iterable object into its separate elements. , the so-called iterable object is any object that can be traversed using a for of loop, such as: array, string, Map, Set, DOM node, etc.

Implementation idea:

• After converting the array into a set collection to remove duplication, use the spread operator... to expand the set into an array, and Convert a collection to an array

Syntax:

[...new Set(arr)]

Example:

let arr=[1,2,3,3,2,"1",0,1,2];
let newArr=[...new Set(arr)];
console.log(newArr);

3. Use arrays The filter indexOf method removes duplicates

The filter() method creates a new array, and the elements in the new array are checked by checking all elements in the specified array that meet the conditions.

The indexOf method returns the first index (index) of the specified element in the array, if not, returns -1

Example:

var arr=[1, 2, 3, 2, 3];
var newArr = arr.filter((item,index)=> {
  return arr.indexOf(item,0) === index;
});
console.log(newArr);

So the index values ​​returned by each element in the arr array here through the indexOf() method are 0 1 2 1 2

arr.forEach(item => console.log(arr.indexOf(item))); // 0 1 2 1 2

You can use indexOf to achieve deduplication, such as in arr The fourth element 2 returns an index of 1 through indexOf, but its current index subscript is 3, which is not equal, indicating that the current 2 element has appeared before, so it should be filtered out.

【Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of How to implement arr (array) deduplication in es6. For more information, please follow other related articles on the PHP Chinese website!