Maison >interface Web >js tutoriel >Quelles sont les 5 façons de dédupliquer des tableaux en JavaScript ?

Quelles sont les 5 façons de dédupliquer des tableaux en JavaScript ?

青灯夜游
青灯夜游original
2021-06-29 15:05:2811790parcourir

5 façons de supprimer la duplication des tableaux : 1. Utilisez l'instruction "[...new Set(arr)]" pour supprimer la duplication ; 2. Utilisez l'instruction "Array.from(new Set(arr)) ; " Instruction pour supprimer la duplication ; 3. Utilisez indexOf() pour supprimer la duplication ; 4. Utilisez include() pour supprimer la duplication ; 5. Utilisez filter() pour supprimer la duplication.

Quelles sont les 5 façons de dédupliquer des tableaux en JavaScript ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Méthode de déduplication de tableau

1 [...new Set(arr)]

const arr = [1, 2, 3, 2, 3];
[...new Set(arr)]; // [1, 2, 3]
.

Voici l'objet Set converti en tableau via la syntaxe d'expansion ES6

2 Array.from(new Set(arr))

const arr = [1, 2, 3, 2, 3];
Array.from(new Set(arr)); // [1, 2, 3]

En raison de. Les éléments de Set sont uniques, qu'il s'agisse de valeurs primitives ou de références d'objet, la déduplication peut donc être réalisée en convertissant le tableau en un objet Set

La méthode Array.from peut convertir l'objet Set en un tableau

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,'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, "NaN", 0, "a", {…}, {…}]  //NaN、{}没有去重

Créez un nouveau tableau de résultats vide, pour boucler le tableau d'origine, déterminez si l'élément actuel existe dans le tableau de résultats, et ignorez s'il y a les mêmes valeurs, sinon les mêmes, poussez dans le tableau.

4. L'utilisation inclut

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,'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", {…}, {…}]     //{}没有去重

5. Utiliser 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", {…}, {…}]

[Recommandations associées : Tutoriel d'apprentissage Javascript

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn