Avec le développement continu de la technologie front-end, les interfaces qui doivent être affichées dans le travail front-end deviennent de plus en plus complexes, il existe donc de plus en plus de scénarios de traitement de données. Par exemple : une arborescence doit souvent être affichée. dans le système de gestion d'arrière-plan, et les données frontales renvoyées par l'arrière-plan sont de structure horizontale, à ce stade, nous devons convertir les données en une structure arborescente ; lors de l'affichage de l'histogramme echart, les données renvoyées doivent être dédupliquées et fusionnées ; lors du filtrage, nous devons trier les données ; la plus courante est qu'il y a des ajouts, des suppressions, des modifications et des vérifications de Dom lorsque nous faisons des commentaires, etc. L'article d'aujourd'hui vous emmènera donc dans ces scénarios commerciaux et affronterez ces difficultés. nous n'avons plus peur des opérations de données JavaScript et laissons le travail de développement devenir simple et efficace.

1. Scénarios d'ajout, de suppression, de modification et de requête de données

: Il s'agit d'un système de gestion en arrière-plan - le module de gestion de dictionnaire, qui comprend quatre opérations d'ajout, de suppression, de modification et d'interrogation du dictionnaire de données. Alors, quelle est notre solution pour gérer ces 4 opérations, continuez à lire ?

1. Nouvel ajout au tableau

arr.push pousse un ou plusieurs éléments à l'arrière du tableau

var arr = [1,2,3];
// Retour : la longueur du tableau modifié arr.push(4,5,6);
console.log(arr)
//Résultat de sortie arr=[1,2,3,4,5,6]

arr.unshift ajoute un ou plusieurs éléments depuis le début du tableau

var arr = [1,2,3];
// Retour : la longueur du tableau modifié arr.unshift(4,5,6);
console.log(arr)
//Résultat de sortie arr=[4,5,6,1,2,3]

2. Suppression du tableau

arr.shift est utilisé pour supprimer le premier élément du tableau

// La méthode shift du tableau est utilisée pour supprimer le premier élément du tableau. Supprimer un élément var arr = [1,2,3];
// Renvoie l'élément supprimé ;
arr.shift();
//Résultat de sortie arr=[2,3]

arr.pop supprime le dernier élément du tableau ;

//La méthode pop du tableau est utilisée pour supprimer le dernier élément du tableau var arr = [1,2,3] ;
// Renvoie l'élément supprimé ;
arr.pop();
//Résultat de sortie arr = [1,2];

3. Modification du tableau

arr.splice : Il peut être ajouté, supprimé ou modifié à n'importe quelle position dans le tableau.

Il a trois fonctions : suppression, insertion et remplacement. renvoie un tableau (y compris les éléments supprimés d'origine dans le tableau (renvoie un tableau vide si aucun élément n'est supprimé))

Syntaxe

splice(index,howmany,item1,...itemx)

• - obligatoire, entier, spécifie la position à ajouter ; ou supprimer, utiliser des nombres négatifs, commencer par la fin du tableau Spécifiez l'emplacement.
• combien - obligatoire, la quantité à supprimer, si elle est 0, l'article ne sera pas supprimé.
• item1,…itemx – Facultatif, nouveaux éléments à ajouter au tableau.

1. Supprimer peut supprimer n'importe quel nombre d'éléments en spécifiant 2 paramètres : la position du premier élément à supprimer et le nombre d'éléments à supprimer.

soit arr=[1,2,3];
let arr1=arr.splice(1,2);//supprimera les 2ème et 3ème éléments du tableau (c'est-à-dire 2,3)
alerte(arr);//[1]
alerte(arr1);//[2,3]


2. Insert peut insérer n'importe quel nombre d'éléments dans la position spécifiée en fournissant seulement 3 paramètres : position de départ, 0 (nombre d'éléments à supprimer) et éléments à insérer.
soit arr=[1,2,3];
let arr1=arr.splice(1,0,4,5);//insèrera 4,5 à partir de la position 1 du tableau
alerte(arr);//[1,4,5,2,3]
alerte(arr1);//[]

3. Le remplacement peut insérer n'importe quel nombre d'éléments dans la position spécifiée et supprimer n'importe quel nombre d'éléments en même temps. Il vous suffit de spécifier 3 paramètres : la position de départ, le nombre d'éléments à supprimer et n'importe quel nombre d'éléments à supprimer. être inséré (le nombre d'insertions ne doit pas nécessairement être égal au nombre supprimé)
soit arr = [1,2,3];
let arr1=arr.splice(1,1,"red","green");//supprimera 2, puis insérera les chaînes "red" et "green" de la position 2
alerte(arr);//[1,"rouge","vert",3]
alert(arr1);//[2]

4. Recherche dans le tableau

arr.indexOf : Recherchez l'index en fonction de l'élément. Si l'élément est dans le tableau, renvoyez l'index, sinon renvoyez -1. tableau

var arr = [10,20,30]
console.log(arr.indexOf(30)); // 2
console.log(arr.indexOf(40)); // -1

arr.findIndex : utilisé pour trouver l'index du premier élément qui remplit la condition, sinon, renvoie -1

var arr = [10, 20, 30] ;
var res1 = arr.findIndex (fonction (élément) {
  renvoyer l'article >= 20 ;
});
//Renvoie l'index du premier élément qui répond à la condition console.log(res1);

5. La jointure de conversion de tableau et de chaîne

est utilisée pour connecter plusieurs éléments du tableau en une chaîne avec le séparateur spécifié

var arr = [ 'User1' ,'Utilisateur2','Utilisateur3'];
var str = arr.join('|'); 
console.log(str);  
Utilisateur 1 | Utilisateur 2 | Utilisateur 3

Méthode de division de chaîne : convertir des nombres suivis de caractères séparés

// Cette méthode est utilisée pour diviser une chaîne en un tableau avec le symbole spécifié var str = 'Utilisateur 1 | Utilisateur 2';
var arr = str.split('|');
console.log(arr);
['Utilisateur 1', 'Utilisateur 2', 'Utilisateur 3']

2. Tri des données

Il faut dire qu'avec l'avancée de la technologie et le développement du matériel, les performances informatiques des navigateurs se sont également améliorées. La deuxième situation est l'opération de tri des données, ce qui signifie que nous devons implémenter divers tris sur le front-end, alors quelles sont nos solutions ?

1. La fonction intégrée de js arr.sort()

var arr = [23,34,3,4,23,44,333,444];
        arr.sort(fonction(a,b){
            retourner ab;
        })
    console.log(arr);

Nous introduisons également ici plusieurs algorithmes de tri couramment utilisés :

2. Tri par insertion

var arr = [23,34,3,4,23,44,333,444];

var arrShow = (function insertionSort(array){
if(Object.prototype.toString.call(array).slice(8,-1) ==='Array'){

    pour (var i = 1; i < array.length; i++) {
        var clé = tableau[i];
        var j = je - 1;
        while (j >= 0 && tableau[j] > clé) {
        tableau[j + 1] = tableau[j];
        j--;
        }
      tableau[j + 1] = clé ;
    }
    tableau de retour ;
}autre{

    return 'le tableau n'est pas un tableau !';
}
})(arr);

console.log(arrShow);//[3, 4, 23, 23, 34, 44, 333, 444]

3. Fonction de tri par insertion binaire

binaireInsertionSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
pour (var i = 1; i < array.length; i++) {
    var clé = tableau[i], gauche = 0, droite = i - 1 ;
    tandis que (gauche <= droite) {
    var middle = parseInt((gauche + droite) / 2);
    if (clé < tableau[milieu]) {
    droite = milieu - 1 ;
} autre {
    gauche = milieu + 1 ;
}
}
pour (var j = i - 1; j >= gauche; j--) {
    tableau[j + 1] = tableau[j];
}
tableau[gauche] = clé ;
}
tableau de retour ;
} autre {
    return 'le tableau n'est pas un tableau !';
}
}

4.

Fonction de tri de sélection selectionSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
    var len = array.length, temp;
    pour (var je = 0; je < len - 1; je++) {
    var min = tableau[i];
    pour (var j = i + 1; j < len; j++) {
        si (tableau[j] < min) {
        température = min ;
        min = tableau[j];
        tableau[j] = temp;
    }
  }
    tableau[i] = min;
}
 tableau de retour ;
} autre {
    return 'le tableau n'est pas un tableau !';
}
}

5.

Fonction de tri à bulles bubbleSort(array) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
var len = array.length, temp;
pour (var je = 0; je < len - 1; je++) {
    pour (var j = len - 1; j >= i; j--) {
        si (tableau[j] < tableau[j - 1]) {
        temp = tableau[j];
        tableau[j] = tableau[j - 1];
        tableau[j - 1] = temp;
}
}
}
    tableau de retour ;
} autre {
    return 'le tableau n'est pas un tableau !';
}
}

6. Tri rapide

//Méthode 1, fonction quickSort(array, left, right) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array' && typeof left === 'number' && typeof right === 'number') {
si (gauche < droite) {
var x = tableau[droite], i = gauche - 1, temp;
pour (var j = gauche; j <= droite; j++) {
    si (tableau[j] <= x) {
    je++;
    temp = tableau[i];
    tableau[i] = tableau[j];
    tableau[j] = temp;
}
}
quickSort(tableau, gauche, i - 1);
quickSort(tableau, i + 1, à droite);
} ;
} autre {
return 'le tableau n'est pas un tableau ou la gauche ou la droite n'est pas un nombre !';
}
}
var aaa = [3, 5, 2, 9, 1];
quickSort(aaa, 0, aaa.longueur - 1);
console.log(aaa);


//Méthode 2 var quickSort = function(arr) {
if (arr.length <= 1) { return arr }
var pivotIndex = Math.floor(arr.length / 2);
var pivot = arr.splice(pivotIndex, 1)[0];
var gauche = [];
var droite = [];
pour (var i = 0; i < arr.length; i++){
si (arr[i] < pivot) {
gauche.push(arr[i]);
} autre {
right.push(arr[i]);
}
}
return quickSort(left).concat([pivot], quickSort(right));
};

7. Tri par tas

/*Description de la méthode : Tri par tas @param array Tableau à trier*/
fonction tasSort (tableau) {
if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') {
//Construire un tas var heapSize = array.length, temp;
pour (var i = Math.floor(heapSize / 2); i >= 0; i--) {
heapify(tableau, je, tasTaille);
}

//Tri par tas pour (var j = heapSize - 1; j >= 1; j--) {
    temp = tableau[0];
    tableau[0] = tableau[j];
    tableau[j] = temp;
    heapify(array, 0, --heapSize);
}
} autre {
return 'le tableau n'est pas un tableau !';
}
}
/*Description de la méthode : Conserver les propriétés du tas @param arr array @param x array subscript @param len heap size*/
fonction heapify(arr, x, len) {
if (Object.prototype.toString.call(arr).slice(8, -1) === 'Array' && typeof x === 'number') {
var l = 2 * x, r = 2 * x + 1, le plus grand = x, temp;
if (l < len && arr[l] > arr[le plus grand]) {
le plus grand = l ;
}
if (r < len && arr[r] > arr[le plus grand]) {
le plus grand = r ;
}
si (le plus grand != x) {
    temp = arr[x];
    arr[x] = arr[le plus grand];
    arr[le plus grand] = temp;
    heapify(arr, plus grand, len);
}
} autre {
    return 'arr n'est pas un tableau ou x n'est pas un nombre !';
}
}

3. Déduplication des données

D'accord, après avoir résolu le problème de tri, nous sommes maintenant confrontés au problème de la déduplication des données. N'ayez pas peur, il existe encore de nombreuses solutions. Veuillez continuer à lire lentement :

Au travail Lors du traitement des données json, par exemple, lors du tri des tailles de certains produits, il est normal que différents produits aient la même taille. Si nous voulons les convertir en tableau pour les afficher, alors ces tailles ne doivent pas être dupliquées. Ici, j'écrirai. Voici quelques méthodes pour supprimer la duplication des tableaux pour votre référence :

1. Méthode simple pour supprimer la duplication des

//La méthode la plus simple pour supprimer la duplication des tableaux/*
* Créez un nouveau tableau, parcourez le tableau entrant et insérez la valeur dans le nouveau tableau si elle ne se trouve pas dans le nouveau tableau * IE8 et versions antérieures ne prennent pas en charge la méthode indexOf du tableau* */
fonction uniq(tableau){
    var temp = []; //Un nouveau tableau temporaire pour(var i = 0; i < array.length; i++){
        if(temp.indexOf(array[i]) == -1){
            temp.push(array[i]);
        }
    }
    température de retour ;
}

var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(uniq(aa));

2. Méthode clé-valeur d'objet pour supprimer les doublons

/*
* Le plus rapide et prend le plus de place (l'espace est échangé contre du temps)
*
* Cette méthode s'exécute plus rapidement que toute autre méthode, mais elle prend plus de mémoire.
* Idée actuelle : créez un nouvel objet js et un nouveau tableau lors du parcours du tableau entrant, déterminez si la valeur est la clé de l'objet js.
* Sinon, ajoutez la clé à l'objet et placez-le dans un nouveau tableau.
* Remarque : lors de la détermination s'il s'agit d'une clé d'objet js, "toString()" sera automatiquement exécuté sur la clé entrante.
* Différentes clés peuvent être confondues avec les mêmes, comme n[val]--n[1], n["1"] ;
* Pour résoudre le problème ci-dessus, vous devez toujours appeler "indexOf". */
fonction uniq(tableau){
    var temp = {}, r = [], len = array.length, val, type ;
    pour (var je = 0; je < len; je++) {
        val = tableau[i];
        type = type de val ;
        si (!temp[val]) {
            temp[val] = [type];
            r.push(val);
        } sinon if (temp[val].indexOf(type) < 0) {
            temp[val].push(type);
            r.push(val);
        }
    }
    retourner r ;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));

3. Méthode de suppression adjacente après tri

/*
* Triez le tableau entrant afin que les mêmes valeurs soient adjacentes après le tri.
* Ensuite, lors du parcours, seules les valeurs qui ne sont pas des doublons de la valeur précédente sont ajoutées au nouveau tableau.
* Perturbera l'ordre du tableau d'origine* */
fonction uniq(tableau){
    array.sort();
    var temp=[array[0]];
    pour(var i = 1; i < array.length; i++){
        if(array[i] !== temp[temp.length-1]){
            temp.push(array[i]);
        }
    }
    température de retour ;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));

4. Méthode d'abonnement

au tableau /*
*
* Vous devez toujours appeler "indexOf" et les performances sont similaires à la méthode 1.
* Idée d'implémentation : si le i-ème élément du tableau actuel apparaît pour la première fois dans une position autre que i,
* Cela signifie ensuite que le ième élément est répété et ignoré. Sinon, stockez le tableau de résultats.
* */
fonction uniq(tableau){
    var temp = [];
    for(var i = 0; i < array.length; i++) {
        //Si le i-ème élément du tableau actuel apparaît pour la première fois en i dans le tableau actuel, il sera stocké dans le tableau sinon, cela signifie un doublon if(array.indexOf(array[i]) == i) {
            temp.push (tableau[i])
        }
    }
    température de retour ;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));

5. Optimiser la méthode de parcours du tableau

// Idée : obtenir la valeur la plus à droite sans répétition et la placer dans un nouveau tableau /*
*Méthode recommandée*
* Le code d'implémentation de la méthode est plutôt sympa.
* Idée d'implémentation : obtenez la valeur la plus à droite sans duplication et placez-la dans un nouveau tableau.
* (Lorsque des valeurs en double sont détectées, terminez la boucle en cours et entrez dans le prochain tour de jugement de la boucle de niveau supérieur) */
fonction uniq(tableau){
    var temp = [];
    varindex = [];
    var l = tableau.longueur;
    pour(var je = 0; je < l; je++) {
        pour(var j = i + 1; j < l; j++){
            si (tableau[i] === tableau[j]){
                je++;
                j = je;
            }
        }
        temp.push(array[i]);
        index.push(i);
    }
    console.log(index);
    température de retour ;
}

var aa = [1,2,2,3,5,3,6,5];
console.log(uniq(aa));

4. La liste horizontale devient une structure arborescente

.Lors de la sélection d'un département, voyez-vous souvent ce type de menu arborescent Les données renvoyées par l'arrière-plan sont généralement horizontales. nous générons généralement ce genre de menu ? Veuillez voir ~~

1. La méthode est spécialement présentée ici :

const dataTree = [
        {id : 1, nom : 'Siège social', parentId : 0},
        {id : 2, nom : 'succursale de Shenzhen', parentId : 1},
        {id : 3, nom : 'Branche de Pékin', parentId : 1},
       {id : 4, nom : 'Département R&D', parentId : 2},
        {id : 5, nom : 'Département marketing', parentId : 2},
        {id : 6, nom : 'Département de tests', parentId : 2},
        {id : 7, nom : 'Département financier', parentId : 2},
        {id : 8, nom : 'Département d'exploitation et de maintenance', parentId : 2},
        {id : 9, nom : 'Département marketing', parentId : 3},
        {id : 10, nom : 'Département financier', parentId : 3},
       
    ]
    fonction changeData (données, parentId = 0) {
        let tree = [];//Créer un tableau vide//Parcourir chaque élément de données data.map((item) => {
            //Le parentId dans chaque élément de données est le même que celui transmis if (item.parentId == parentId) {
                //Recherchez simplement un sous-ensemble de cet élément pour trouver parentId==item.id dans l'élément. De cette façon, de manière récursive item.children = changeData(data, item.id);
                arbre.push(élément);
            }
        })
        arbre de retour
    }
    console.log(changeData(dataTree, 0));

5. Fusionner les mêmes éléments d'objets de tableau

Nous rencontrons souvent un traitement de données lors de l'affichage de graphiques, et nous rencontrons également souvent des fusions de tableaux. Voici une façon de fusionner les mêmes éléments de tableaux :

• Tout d'abord, les données d'arr du tableau d'origine sont utilisées,
• puis un objet de carte vide et un tableau de résultats vide sont créés. En jugeant si la carte contient un certain élément, le résultat du tableau est jugé s'il faut ajouter des données,
• puis le même élément est. comparé et fusionné avec le contenu du tableau de résultats existant

1. Le blogueur a spécialement dédié le code ancestral chéri depuis de nombreuses années à tous les patrons ici :

var arr = [
{"id": "1", "name": "Chelizi", "num": "245"},
{"id": "1", "name": "Chelizi", "num": "360"},
{"id": "2", "nom": "Pomme", "num": "120"},
{"id": "2", "name": "Apple", "num": "360"},
{"id": "2", "nom": "Pomme", "num": "180"},
{"id": "3", "name": "banane", "num": "160"},
{"id": "4", "name": "Ananas", "num": "180"},
{"id": "4", "name": "Ananas", "num": "240"}
];
var map = {}, résultat = [];
pour(var i = 0; i < arr.length; i++){
varele = arr[i];
si(!map[ele.id]){
résultat.push({
identifiant:ele.id,
nom : ele.name,
valeur : ele.value
});
map[ele.id] = ele;
}autre{
pour(var j = 0; j < résultat.longueur; j++){
var dj = résultat[j];
si(dj.id == ele.id){
dj.value=(parseFloat(dj.value) + parseFloat(ele.value)).toString();
casser;
}
}
}
} ;
console.log(result);

Voyant cela, plusieurs problèmes courants de traitement des données sur le front-end ont été presque résolus. Bien sûr, en réalité, il y a encore de nombreux problèmes qui n'ont pas été inclus, et ils se succéderont. Je vais le mettre à jour et l'inclure lentement. En même temps, j'espère également que les amis qui ont des difficultés à traiter les données JavaScript pourront communiquer avec le blogueur et que ceux qui ont de bonnes idées pour résoudre les problèmes pourront également donner leur avis au blogueur.

Cet article présente cinq problèmes courants de traitement des données dans le processus de développement JavaScript et fournit les solutions correspondantes. Il couvre essentiellement les besoins d'utilisation dans le processus de développement quotidien. La lecture de cet article peut considérablement améliorer vos compétences de base en JavaScript et répondre rapidement aux besoins de développement. apporter des solutions.