How to use es6 to implement deduplication (code example)

The content of this article is about how to use es6 to achieve deduplication (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The following are three methods to remove duplicates from an array and return unique values. My favorite way is to use Set because it's the shortest and simplest.

const array = [5, 2, 4, 5, 3];
console.log([...new Set(array)])
console.log(array.filter((item, index) => array.indexOf(item) === index))
console.log(array.reduce((unique, item) => unique.includes(item) ? unique: [...unique, item], []))
// result:  [5, 2, 4, 3]

Using Set

Let me start explaining what Set is:

Set is a new data object introduced by es6. Since Set only allows you to store unique values, so when passed in an array, it will remove any duplicate values.

Okay, let’s go back to our code and see what happened. In fact, he performed the following operations:

1. First, we created a new Set and passed the array as an input parameter. Since Set only allows unique values, all duplicates The value will be removed.

2. Now that the duplicate value is gone, we will use... to convert it back into an array.

const array = [5, 2, 4, 5, 3];
const set = new Set(array)
const newArr = [...set]
console.log(newArr)
// result:  [5, 2, 4, 3]

Use the Array.from() function to convert Set to an array

In addition, you can also use Array.from() to convert Set to an array .

const array = [5, 2, 4, 5, 3];
const set = new Set(array)
const newArr = Array.from(set)
console.log(newArr)
// result:  [5, 2, 4, 3]

Using filter

To understand this option, let’s look at what these two methods do: indexOf and filter

indexOf()

indexOf() returns the index of the first element we find in the array.

const array = [5, 2, 4, 5, 3];
console.log(array.indexOf(5))  // 0
console.log(array.indexOf(2))  // 1
console.log(array.indexOf(8))  // -1

filter

The filter() function will create a new array based on the conditions we provide. In other words, if an element passes and returns true, it will be included in the filtered array. If an element fails and returns false, it will not be included in the filtered array.

Let’s take a step-by-step look at what happens each time we loop through the array.

const array = [5, 2, 4, 5, 3];
array.filter((item, index) => {
  console.log(item, index, array.indexOf(item), array.indexOf(item) === index)
  return array.indexOf(item) === index
})
//输出
// 5 0 0 true
// 2 1 1 true
// 4 2 2 true
// 5 3 0 false
// 3 4 4 true

See the comments for the code output above. Duplicate elements no longer match indexOf, so in these cases, its result will be false and will not be included in the filtered value.

Retrieve duplicate values

We can also use the filter() function in the array to retrieve duplicate values. We just need to simply adjust the code like this:

const array = [5, 2, 4, 5, 3];
array.filter((item, index) => {
  console.log(item, index, array.indexOf(item), array.indexOf(item) !== index)
  return array.indexOf(item) !== index
})
//输出
// 5 0 0 false
// 2 1 1 false
// 4 2 2 false
// 5 3 0 true
// 3 4 4 false

Use the reduce() function

The reduce() function is used to reduce the elements of the array and put them according to the reducer function you passed. Finally merged into a final array,

In this case, our reducer() function determines whether our final array contains this element. If not, put it into the final array. , otherwise skip this element, and finally return our final element.

The reduce() function is always a little difficult to understand, so let’s take a look at how it runs now.

const array = [5, 2, 4, 5, 3];
array.reduce((unique, item) => {
  console.log(item, unique, unique.includes(item), unique.includes(item) ? unique: [...unique, item])
  return unique.includes(item) ? unique: [...unique, item]
}, [])
//输出
// 5 []          false   [5]
// 2 [5]         false   [5, 2]
// 4 [5, 2]      false   [5, 2, 4]
// 5 [5, 2, 4]   true    [5, 2, 4]
// 3 [5, 2, 4]   false   [5, 2, 4, 3]

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