preface
In front-end development, data processing is a very important part, especially to process data according to the actual business needs, which has strong compatibility requirements. Moreover, sometimes the data provided by the back-end deviates from the actual business demand data, so the front-end needs to "secondary process" the data after getting the data returned by the back-end to meet the business demand. In this article, let's share an important way to process data: the de duplication operation after merging arrays in JavaScript. This is a common operation. It can be shared and used for reference.
Array de duplication in JavaScript
There are several ways to de duplicate arrays in JavaScript, and they are also common operation methods. After combing, we can summarize the following methods to de duplicate arrays. If there are imperfections, we welcome correction and criticism.
1, The duplicate is removed by using a double for loop combined with the splice method
It is a common method to realize array de duplication by using the double for loop combined with the slice method of array, especially before the emergence of ES6. The specific examples are as follows:
Sample array:
var array = [1, 2, 3, 4, 5, 5, 4, 3, 2,1];
Treatment method:
function repeat(array) {
for (var i = 0, leng = array.length; i < leng; i++) {
for (var j = i + 1, leng = array.length; j < leng; j++) {
if (array[I] === array[j]) {
array.splice(j, 1);
j--; // Every time a number is deleted, the value of j is subtracted by 1
leng—; // When the j value is reduced, len should also be reduced by 1 (the purpose is to reduce the number of cycles and save program performance)
}
}
}
return array;
}
console.log(repeat(array)); // Array output result: [1, 2, 3, 4, 5]2, Remove the duplicate by using the Set method in ES6
This method is applicable to ES6, because there is only Set method in ES6. The array de duplication problem can be solved by using Set method, and Set can allow the storage of unique values of any type (initial original value or referenced value). Specific examples are as follows:
Sample array:
let array = [1, 2, 3, 4, 5, 5, 4, 3, 2,1];
Treatment method:
function repeat(array) {
return Array.from(new Set(array));
}
console.log(repeat(array)); //Array output result: [1, 2, 3, 4, 5]3, Remove the duplicate by using the Map method in ES6
ES6 uses the Map method to remove duplicates, which is applicable to array de duplication in ES6. It is mainly by creating an empty Map data structure, then traversing the array to be de duplicated, and finally saving each element of the array as a key in the Map. Since the same key will not appear in the Map, the final result is all the elements of the array after de duplication.
Sample array:
let array = [1, 2, 3, 4, 5, 5, 4, 3, 2,1];
Treatment method:
function repeat(array) {
let map = new Map();
let array1 = []; // Arrays are used to return results
for (let i = 0, leng = array.length; i < leng; i++) {
if (map.has(array[i])) { // Determine whether there is a key
map.set(array[i], true);
}
else {
map.set(array[i], false);
array1.push(array[i]);
}
}
return array1;
}
console.log(repeat(array)); // Array output result: [1, 2, 3, 4, 5]4, Remove duplicates through the indexOf method of the array in JavaScript
In JavaScript, the indexOf method of array can be used for de reprocessing, and the function is array indexOf (item, Statt) returns the position of a specified element in the array. If not, it returns - 1. Specific examples are as follows:
Sample array:
var array = [1, 2, 3, 4, 5, 5, 4, 3, 2,1];
Treatment method:
function repeat(array){
var array1 = []; // Create a new array to store the value of array
for(var i=0,leng=array.length;i<leng;i++){
if(array1.indexOf(array[i]) === -1){
array1.push(array[i]);
}
}
return array1;
}
console.log(unique(array)); // Array output result: [1, 2, 3, 4, 5]5, Remove duplicates through the sort method of arrays in JavaScript
Use the sort method of array in JavaScript to remove duplicates. The operation principle is to remove duplicates according to the comparison method of adjacent elements. The function array The parameter of sort (function) must be a function. It is optional. It is ascending by default. Specific examples are as follows:
Sample array:
var array = [1, 2, 3, 4, 5, 5, 4, 3, 2,1];
Treatment method:
function repeat( array ){
array = array.sort();
console.log(array);
var array1 = [array[0]];
for(var i=1,leng=array.length;i<leng;i++){
if(array[i] !== array[i-1]){
array1.push(array[i]);
}
}
return array1;
}
console.log(repeat(array)); // Array output result: [1, 2, 3, 4, 5]6, The attributes of objects in JavaScript cannot be duplicated by the same characteristics
In JavaScript, the attributes of objects cannot be the same. By using array items as the attributes of an object, the same values will be automatically removed to achieve the effect of array de duplication. However, this method has defects and is not recommended. Just understand. Specific examples are as follows:
Sample array:
var array = [1, 2, 3, 4, 5, 5, 4, 3, 2,1];
Treatment method:
function repeat(array){
var array1 = [];
var obj = {};
for(var i =0,leng=array.length;i<leng;i++){
if(!obj[array[i]]){
array1.push(array[i]);
obj[array[i]] = 1;
}
else{
obj[array[i]]++;
}
}
return array1;
}
console.log(repeat(array)); // Array output result: [1, 2, 3, 4, 5]7, Remove duplicates through the include of the array in JavaScript
Remove duplicates through the includes of the array in JavaScript, and the function array Includes (specify the element (required), specify the index value (optional, the default value is 0)), return true if there is a value, and false if there is no value. Specific examples are as follows:
Sample array:
var array = [1, 2, 3, 4, 5, 5, 4, 3, 2,1];
Treatment method:
function repeat( array ){
var array1 = [];
for(var i=0,leng=array.length;i<leng;i++){
if( !array1.includes( array[i] ) ){ // Retrieves whether array1 contains the value in array
array1.push(array[i]);
}
}
return array1;
}
console.log(repeat(array)); // Array output result: [1, 2, 3, 4, 5]8, Remove duplicates through the filter method of the array in JavaScript
Remove duplicates through the filter method of the array in JavaScript, and create a new array with the filter() method. The elements in the new array are checked by checking all qualified elements in the specified array, and the function array Filter (function (currentValue, index, ARR), thisValue), where currentValue: the value of the current element (required parameter), index: the index value of the current element (optional), arr: the array object to which the current element belongs (optional), thisValue: the object is used as the callback and passed to the function as the value of "this". The default is undefined (optional). (the above content is extracted from the official explanation of rookie tutorial)
Sample array:
var array = [1, 2, 3, 4, 5, 5, 4, 3, 2,1];
Operating principle
Original array: [1, 2, 3, 4, 5, 5, 4, 3, 2,1];
Index values: 0,1,2,3,4,5,6,7,8,9,
Pseudo new array: [1, 2, 3, 4, 5, 5, 4, 3, 2,1];
Use the indexOf method to find the index value of the element in the array for the first time in the element.
Index values: 0,1,2,3,4,5,6,7,8,9,
Finally, return the elements with the same index values before and after: new array: [1, 2, 3, 4, 5].
Treatment method:
function repeat( array ){
// If the index value of the current element of the new array = = the first index of the element in the original array, the current element is returned
return array.filter(function(item,index){
return array.indexOf(item,0) === index;
});
}
console.log(repeat(array)); // Array output result: [1, 2, 3, 4, 5]9, Remove duplication through function recursion in JavaScript
The duplicate removal operation is carried out through the recursive function return in JavaScript. Using the idea of recursion, sort first, and then compare from the end. In case of the same, delete it. In this way, the array duplicate removal operation can also be realized. Specific examples are as follows:
Sample array:
var array = [1, 2, 3, 4, 5, 5, 4, 3, 2,1];
Treatment method:
function repeat( array ){
var array1 = array;
var leng = array1.length;
arr1.sort((a,b)=>{
return a-b;
});
function loop(index){
if(index >= 1){
if(array1[index] === array1[index-1] ){
array1.splice(index,1);
}
loop(index - 1); // Use recursive loop, and then perform array de duplication
}
}
loop(leng-1);
return array1;
}
console.log(repeat(array)); // Array output result: [1, 2, 3, 4, 5]Attachment: practical cases
In the actual development scenario, first merge two arrays, and then de duplicate the merged array. The specific examples are as follows:
last
Through the summary on the use of array de duplication in JavaScript described above, in Vue JS is easy to use in development, which is also a necessary function in the development process. Especially for junior developers, they should master the use of these situations, which will not be repeated here.