## Preface π

Array deduplication should be a very common problem, since it is common, then we should learn more!

Lest oneself won’t, embarrassed ah ~ hey hey

## Start research π±π

### The original π§Ά

If the data appears for the first time, it will be pushed into the new array. If the data is repeated, it will break. The value of j is equal to the length of res to determine that the data is unique, and finally return the new array.

``````var arr = [1.1.2.3.4.5.6.7.4.3.'1'.8.'3'.'1'.'3'.'66']

function unique(arr){
var res = []
for(var i = 0; i < arr.length; i++){
for(var j = 0; j < res.length; j ++){
if(arr[i] === res[j]){
break}}// The value of j should be equal to the length of res after executing the above for statement
if(j === res.length){
res.push(arr[i])
}
}
return res;
}

console.log(unique(arr));
Copy the code``````

### Use indexOf to optimize the original method β

Let’s take a quick look at indexOf:

The indexOf(item,start) method returns the location of a specified element in an array.

This method retrieves the array from beginning to end to see if it contains the corresponding element. Start the search at the start of the array or at the beginning of the array (when no start argument is specified). If an item is found, the first occurrence of the item is returned. The index of the starting position is 0.

Returns -1 if the specified element is not found in the array.

You can see what we’re using here, yes, the bold statement: return -1 if the specified element is not found in the array.

``````var arr = [1.1.2.3.4.5.6.7.4.3.'1'.8.'3'.'1'.'3'.'66']

function unique(arr){
var res = []
for(var i = 0; i < arr.length; i++){
if(res.indexOf(arr[i]) === -1){
res.push(arr[i])
}
}
return res;
}

console.log(unique(arr));
Copy the code``````

### Optimize again, filter method π

The filter method creates a new array by checking all the elements in the specified array that meet the criteria.

Use filter instead of a layer of loop with indexOf to achieve filtering effect, directly return the reweighted array.

``````var arr = [1.1.2.3.4.5.6.7.4.3.'1'.8.'3'.'1'.'3'.'66']

function unique(arr){
var res = arr.filter(function(item,index,arr){
return arr.indexOf(item) === index
})
return res;
}
console.log(unique(arr));
Copy the code``````

### Another way to think about it? Become an ordered array β¨

I don’t know if you have this feeling after brushing a few days. When you see an array in the topic, your eyes immediately take a glance forward to see whether it is an ordered array or an unordered array

Going back to the problem, we make the array to be resorted, the duplicate data must all be next to each other, use a variable to store the value of the last element, loop through to determine if the current value is the same as the value of the last element, and if not, add it to the RES.

``````var arr = [1.1.2.3.4.5.6.7.4.3.'1'.8.'3'.'1'.'3'.'66']

function unique(arr){
var res = []
var pre
arr = arr.sort()
for(var i = 0; i < arr.length; i++){
if(! i || pre ! == arr[i]){ res.push(arr[i]) } pre = arr[i] }return res;
}

console.log(unique(arr));
Copy the code``````

### Optimize again, filterπ§¨

Filter, filter, filter, filter, filter, filter, filter, filter

``````var arr = [1.1.2.3.4.5.6.7.4.3.'1'.8.'3'.'1'.'3'.'66']

function unique(arr){
var res = arr.sort().filter(function(item,index,arr){
return! index || item ! == arr[index -1]})return res;
}

console.log(unique(arr));
Copy the code``````

### ES6, Set attack π§Έ

ES6 brings us a lot of benefits, among which map and SET are particularly excellent.

Map objects hold key-value pairs. Any value (object or raw value) can be a key or a value.

The Set object allows you to store a unique value of any type, either a primitive value or an object reference.

So we can use this property of Set to de-process.

``````var arr = [1.1.2.3.4.5.6.7.4.3.'1'.8.'3'.'1'.'3'.'66']

function unique(arr){
return Array.from(new Set(arr))
}

console.log(unique(arr));
Copy the code``````

Note: A Set is an object, so it is returned as an array.

#### For those of you who know how to deconstruct assignment, you can simplify it a bit more π§΅

``````var arr = [1.1.2.3.4.5.6.7.4.3.'1'.8.'3'.'1'.'3'.'66']

function unique(arr){
return [...new Set(arr)]
}

console.log(unique(arr));
Copy the code``````

Want to know about deconstruction assignment can also first kangkang this: deconstruction operator understanding and use

Previous study, notes recorded π¨

#### Keep it up (arrow function) π

``````var arr = [1.1.2.3.4.5.6.7.4.3.'1'.8.'3'.'1'.'3'.'66']
var unique = (arr) = > [...new Set(arr)]
console.log(unique(arr));
Copy the code``````

## The last π

From the first few lines of code, to the end with the arrow function, you can write one line of code, and you can see that you have to learn to write more elegant and concise code.

Then we, as developers, should study hard to better use this language π

There is no end to learning.

Point a favor, we study progress together. β₯