This example summarizes the JavaScript array deduplication method. Share it for your reference, as follows:
Array deduplication is usually encountered during interviews, and generally requires handwritten code to the array deduplication method. If asked, what are the methods to deduplicate arrays? If you can answer 10 of them, the interviewer is likely to look at you with admiration.
The array deduplication encountered in real projects is usually processed by the background, and the front-end rarely handles the array deduplication. Although the probability of daily projects is relatively low, it is still necessary to understand it in case you may be asked back during the interview.
Note: I wrote in a hurry, and I have been a little busy these days, so I haven’t checked it very carefully, but the idea is that there is no problem, and some small details may be wrong.
Methods for deduplication of arrays
1. Use ES6 Set to deduplicate (most commonly used in ES6)
function unique (arr) {
return (new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]
This method of deduplication has the least code for the code without considering compatibility. This method cannot remove the "{}" empty object. The subsequent higher-order method will add the method of removing the repeated "{}".
2. Use for nesting for, and then splice to deduplicate (most commonly used in ES5)
function unique(arr){
for(var i=0; i<; i++){
for(var j=i+1; j<; j++){
if(arr[i]==arr[j]){ //The first one is equivalent to the second one, the splice method deletes the second one (j,1);
j--;
}
}
}
return arr;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
(unique(arr))
//[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}] //NaN and {} have no deduplication, the two nulls disappear directly
Double-layer loop, outer-layer loop elements, inner-layer loop values comparison. When the values are the same, delete this value.
If you want to quickly learn more commonly used ES6 grammars, you can read my previous article "Learn ES6 notes - ES6 syntax commonly used in work》。
3. Use indexOf to deduplicate
function unique(arr) {
if (!(arr)) {
('type error!')
return
}
var array = [];
for (var i = 0; i < ; i++) {
if (array .indexOf(arr[i]) === -1) {
array .push(arr[i])
}
}
return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
(unique(arr))
// [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}] //NaN, {} has not been deduplicated
Create a new empty result array, for looping through the original array, and determine whether the result array has the current element. If there is the same value, skip it. If it is different, push it into the array.
4. Use sort()
function unique(arr) {
if (!(arr)) {
('type error!')
return;
}
arr = ()
var arrry= [arr[0]];
for (var i = 1; i < ; i++) {
if (arr[i] !== arr[i-1]) {
(arr[i]);
}
}
return arrry;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
(unique(arr))
// [0, 1, 15, "NaN", NaN, NaN, {…}, {…}, "a", false, null, true, "true", undefined] //NaN, {} has not been deduplicated
usesort()Sort method, and then traverse and compare adjacent elements according to the sorted results.
5. Deduplication is used to exploit the characteristics that the properties of the object cannot be the same (there is a problem with this kind of array deduplication method, and it is not recommended to use it, and it needs to be improved)
function unique(arr) {
if (!(arr)) {
('type error!')
return
}
var arrry= [];
var obj = {};
for (var i = 0; i < ; i++) {
if (!obj[arr[i]]) {
(arr[i])
obj[arr[i]] = 1
} else {
obj[arr[i]]++
}
}
return arrry;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
(unique(arr))
//[1, "true", 15, false, undefined, null, NaN, 0, "a", {…}] //The two true are removed directly, NaN and {} are removed
6. Use include
function unique(arr) {
if (!(arr)) {
('type error!')
return
}
var array =[];
for(var i = 0; i < ; i++) {
if( !( arr[i]) ) {//includes Detection of whether there is a certain value in the array (arr[i]);
}
}
return array
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}] //{}No re-deductive
7. Use hasOwnProperty
function unique(arr) {
var obj = {};
return (function(item, index, arr){
return (typeof item + item) ? false : (obj[typeof item + item] = true)
})
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}] //All have been deduplicated
usehasOwnPropertyDetermine whether there are object properties
8. Use filter
function unique(arr) {
return (function(item, index, arr) {
//The current element, the first index in the original array == the current index value, otherwise the current element will be returned return (item, 0) === index;
});
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]
9. Use recursion to deduplicate
function unique(arr) {
var array= arr;
var len = ;
(function(a,b){ //It is more convenient to remove the repetition after sorting return a - b;
})
function loop(index){
if(index >= 1){
if(array[index] === array[index-1]){
(index,1);
}
loop(index - 1); //Recursive loop, then array re-repeat }
}
loop(len-1);
return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]
10. Use Map data structure to deduplicate
function arrayNonRepeatfy(arr) {
let map = new Map();
let array = new Array(); // Array is used to return results for (let i = 0; i < ; i++) {
if(map .has(arr[i])) { // If there is the key value map .set(arr[i], true);
} else {
map .set(arr[i], false); // If there is no key value array .push(arr[i]);
}
}
return array ;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]
Create an empty Map data structure, traverse the array that needs to be deduplicated, and store each element of the array as a key into the map. Since the same key value will not appear in the map, the final result is the deduplication.
11. Use reduce+including
function unique(arr){
return ((prev,cur) => (cur) ? prev : [...prev,cur],[]);
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
(unique(arr));
// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]
12. [...new Set(arr)]
[...new Set(arr)] //There is so little code-----(In fact, it is not strictly considered a type, compared to the first method, it just simplifies the code)
PS: Some articles mentioned the method of deduplication of foreach+indexOf arrays. I personally think it is similar, so I didn't write it on it.
Interested friends can use itOnline HTML/CSS/JavaScript code running tool：http://tools./code/HtmlJsRunTest the above code running effect.
PS: Here are a few related tools for your reference:
Online Removal Tool:
http://tools./code/quchong
Online text repetition tool:
http://tools./aideddesign/txt_quchong
For more information about JavaScript, you can also view the topic of this site: "Summary of JavaScript array operation skills》、《Summary of JavaScript characters and string operation techniques》、《JavaScript traversal algorithm and skills summary》、《Summary of JavaScript search algorithm skills》、《Summary of JavaScript mathematical operations usage》、《Summary of JavaScript data structure and algorithm techniques"and"Summary of JavaScript Errors and Debugging Skills》
I hope this article will be helpful to everyone's JavaScript programming.