12 façons de supprimer les doublons des tableaux JavaScript (résumé)

La déduplication de tableau est généralement rencontrée lors des entretiens et nécessite généralement l'écriture manuscrite du code de la méthode de déduplication de tableau. Si on vous le demande, quelles sont les méthodes de déduplication des baies ? Si vous pouvez répondre à 10 d’entre elles, l’intervieweur sera probablement impressionné par vous.

La déduplication de tableau rencontrée dans les projets réels est généralement traitée en arrière-plan, et le front-end est rarement utilisé pour traiter la déduplication de tableau. Bien que la probabilité de l'utiliser dans des projets quotidiens soit relativement faible, vous devez tout de même le connaître au cas où on vous poserait des questions à ce sujet lors de l'entretien.

Remarque : je l'ai écrit à la hâte, et j'ai été un peu occupé ces jours-ci, donc je ne l'ai pas vérifié très attentivement, mais il n'y a pas de problème avec l'idée. Il peut y avoir quelques petits détails. c'est faux.

Méthode de déduplication de tableau

1. Utilisez ES6 Set pour dédupliquer (le plus couramment utilisé dans ES6)

function unique (arr) {
 return Array.from(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',{},{}];
console.log(unique(arr))
 //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

Indépendamment de la compatibilité, cette méthode de déduplication a le moins de code. Cette méthode ne peut pas supprimer les objets vides "{}", et les méthodes d'ordre supérieur ultérieures ajouteront des méthodes pour supprimer les "{}" répétés.

2. Utilisez pour pour imbriquer, puis épisser pour supprimer les doublons (le plus couramment utilisé dans ES5)

function unique(arr){ 
 for(var i=0; i<arr.length; i++){
 for(var j=i+1; j<arr.length; j++){
 if(arr[i]==arr[j]){ //第一个等同于第二个，splice方法删除第二个
  arr.splice(j,1);
  j--;
 }
 }
 }
return arr;
}
var arr = [1,1,&#39;true&#39;,&#39;true&#39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&#39;NaN&#39;, 0, 0, &#39;a&#39;, &#39;a&#39;,{},{}];
 console.log(unique(arr))
 //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}] //NaN和{}没有去重，两个null直接消失了

Boucle double couche, élément de boucle externe, élément de boucle interne boucle Comparez les valeurs. Si les valeurs sont les mêmes, cette valeur sera supprimée.
Si vous souhaitez apprendre rapidement la syntaxe ES6 plus couramment utilisée, vous pouvez lire mon article précédent "Apprendre les notes ES6 - Syntaxe ES6 couramment utilisée au travail".

3. Utilisez indexOf pour supprimer les doublons

function unique(arr) {
 if (!Array.isArray(arr)) {
 console.log('type error!')
 return
 }
 var array = [];
 for (var i = 0; i < arr.length; i++) {
 if (array .indexOf(arr[i]) === -1) {
 array .push(arr[i])
 }
 }
 return array;
}
var arr = [1,1,&#39;true&#39;,&#39;true&#39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&#39;NaN&#39;, 0, 0, &#39;a&#39;, &#39;a&#39;,{},{}];
console.log(unique(arr))
 // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}] //NaN、{}没有去重

Créez un nouveau tableau de résultats vide, bouclez le tableau d'origine et déterminez si l'élément actuel existe dans le tableau de résultats. . S'il y a les mêmes valeurs. Si elles ne sont pas identiques, elles seront ignorées et poussées dans le tableau.

4. Utilisez sort()

function unique(arr) {
 if (!Array.isArray(arr)) {
 console.log('type error!')
 return;
 }
 arr = arr.sort()
 var arrry= [arr[0]];
 for (var i = 1; i < arr.length; i++) {
 if (arr[i] !== arr[i-1]) {
 arrry.push(arr[i]);
 }
 }
 return arrry;
}
 var arr = [1,1,&#39;true&#39;,&#39;true&#39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&#39;NaN&#39;, 0, 0, &#39;a&#39;, &#39;a&#39;,{},{}];
 console.log(unique(arr))
// [0, 1, 15, "NaN", NaN, NaN, {…}, {…}, "a", false, null, true, "true", undefined] //NaN、{}没有去重

Utilisez la méthode de tri sort(), puis parcourez et comparez les éléments adjacents en fonction des résultats triés.

5. Utilisez les propriétés des objets qui ne peuvent pas être les mêmes pour dédupliquer (Cette méthode de déduplication des tableaux pose des problèmes, n'est pas recommandée et doit être améliorée)

function unique(arr) {
 if (!Array.isArray(arr)) {
 console.log('type error!')
 return
 }
 var arrry= [];
 var obj = {};
 for (var i = 0; i < arr.length; i++) {
 if (!obj[arr[i]]) {
 arrry.push(arr[i])
 obj[arr[i]] = 1
 } else {
 obj[arr[i]]++
 }
 }
 return arrry;
}
 var arr = [1,1,&#39;true&#39;,&#39;true&#39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&#39;NaN&#39;, 0, 0, &#39;a&#39;, &#39;a&#39;,{},{}];
 console.log(unique(arr))
//[1, "true", 15, false, undefined, null, NaN, 0, "a", {…}] //两个true直接去掉了，NaN和{}去重

6. Utilisez include

function unique(arr) {
 if (!Array.isArray(arr)) {
 console.log('type error!')
 return
 }
 var array =[];
 for(var i = 0; i < arr.length; i++) {
 if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
  array.push(arr[i]);
 }
 }
 return array
}
var arr = [1,1,&#39;true&#39;,&#39;true&#39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&#39;NaN&#39;, 0, 0, &#39;a&#39;, &#39;a&#39;,{},{}];
 console.log(unique(arr))
 //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}] //{}没有去重

7. Utilisez hasOwnProperty

function unique(arr) {
 var obj = {};
 return arr.filter(function(item, index, arr){
 return obj.hasOwnProperty(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',{},{}];
 console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}] //所有的都去重了

Utilisez hasOwnProperty pour déterminer s'il existe des propriétés d'objet

8. Utilisez le filtre

function unique(arr) {
 return arr.filter(function(item, index, arr) {
 //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
 return arr.indexOf(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',{},{}];
 console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]

9. Utilisez la récursivité pour supprimer les doublons

function unique(arr) {
 var array= arr;
 var len = array.length;

 array.sort(function(a,b){ //排序后更加方便去重
 return a - b;
 })

 function loop(index){
 if(index >= 1){
 if(array[index] === array[index-1]){
 array.splice(index,1);
 }
 loop(index - 1); //递归loop，然后数组去重
 }
 }
 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',{},{}];
console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

10. Utilisez la structure de données de la carte pour supprimer les doublons

function arrayNonRepeatfy(arr) {
 let map = new Map();
 let array = new Array(); // 数组用于返回结果
 for (let i = 0; i < arr.length; i++) {
 if(map .has(arr[i])) { // 如果有该key值
 map .set(arr[i], true); 
 } else { 
 map .set(arr[i], false); // 如果没有该key值
 array .push(arr[i]);
 }
 } 
 return array ;
}
 var arr = [1,1,&#39;true&#39;,&#39;true&#39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&#39;NaN&#39;, 0, 0, &#39;a&#39;, &#39;a&#39;,{},{}];
 console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

Créez une structure de données Map vide, parcourez le tableau qui doit être dédupliqué et stockez chaque élément du tableau en tant que clé dans la carte. Étant donné que la même valeur de clé n'apparaîtra pas dans la carte, le résultat final est le résultat après déduplication.

11. Utiliser réduire+includes

function unique(arr){
 return arr.reduce((prev,cur) => prev.includes(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',{},{}];
console.log(unique(arr));
// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

12 [...new Set(arr)]

[...new Set(arr)]

//Le code est si petit----(En fait, à proprement parler, ce n'est pas un seul type, comparé au premier type In en termes de méthode, cela simplifie simplement le code)

function distinct(a, b) {
 return Array.from(new Set([...a, ...b]))
}

PS : Certains articles mentionnent la méthode de déduplication de tableau foreach+indexOf Personnellement, je pense qu'ils sont tous similaires, donc je ne les ai pas écrits.

Quel code utiliser est recommandé. Consultez cet article Déduplication de tableau JavaScript hautes performances.

Tutoriel recommandé : "Tutoriel JS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!