Maison > interface Web > Questions et réponses frontales > Convertir le tableau jquery en paire clé-valeur

Convertir le tableau jquery en paire clé-valeur

WBOY
Libérer: 2023-05-28 12:54:37
original
824 Les gens l'ont consulté

Dans le développement front-end, le traitement des tableaux et des objets est souvent impliqué. Lorsque nous devons convertir un tableau en paires clé-valeur, nous pouvons utiliser les méthodes $.map() et $.each() dans jQuery. Ce qui suit est une introduction détaillée à l’utilisation de ces deux méthodes.

1. Méthode $.map()

La méthode $.map() peut convertir un tableau en un autre tableau, et pendant ce processus de conversion, nous pouvons opérer sur chaque élément puis renvoyer une nouvelle valeur. Sa syntaxe de base est la suivante :

jQuery.map( array, callback [, thisArg ] )
Copier après la connexion

Parmi eux, array représente le tableau à traiter, callback représente une fonction de rappel pour faire fonctionner chaque élément et renvoyer une nouvelle valeur, et thisArg représente l'objet contextuel facultatif.

Pour le scénario de conversion en paires clé-valeur, nous pouvons utiliser la méthode $.map() pour traiter le tableau d'origine et convertir chaque élément qu'il contient en un objet paire clé-valeur.

Par exemple, nous avons un tableau arr, qui contient des éléments de chaîne. Nous voulons maintenant le convertir en une paire clé-valeur, où tous les éléments sont des clés et leurs valeurs sont vraies, nous pouvons alors l'écrire comme ceci. :

var arr = ["apple", "pear", "banana", "orange"];
var kvObj = $.map(arr, function(item, index) {
    var obj = {};
    obj[item] = true;
    return obj;
});
console.log(kvObj); // [{ apple: true }, { pear: true }, { banana: true }, { orange: true }]
Copier après la connexion

Dans le code ci-dessus, nous définissons une fonction de rappel qui reçoit deux paramètres item et index. Cette fonction convertit chaque élément en un objet où l'élément est la clé et la valeur est vraie, et renvoie l'objet. Le résultat final renvoyé est un tableau d'objets, chaque objet est une paire clé-valeur.

2. La méthode $.each()

est différente de la méthode $.map() peut parcourir le tableau ou l'objet et exécuter une fonction de rappel sur chaque élément. Les paramètres de la fonction de rappel incluent la clé et la valeur de l'élément.

Sa syntaxe de base est la suivante :

jQuery.each( collection, callback(indexInArray, valueOfElement) )
Copier après la connexion

Parmi eux, collection représente l'objet ou le tableau à parcourir, et callback représente la fonction de rappel qui traite chaque élément.

Nous pouvons convertir un tableau en paires clé-valeur, ce qui peut également être réalisé via la méthode $.each().

Par exemple, nous avons un tableau arr, qui contient des éléments de chaîne. Nous voulons maintenant le convertir en une paire clé-valeur, où tous les éléments sont des clés et leurs valeurs sont les positions d'index des éléments correspondants dans le. array. , alors vous pouvez l'écrire comme ceci :

var arr = ["apple", "pear", "banana", "orange"];
var kvObj = {};
$.each(arr, function(index, item) {
    kvObj[item] = index;
});
console.log(kvObj); // { apple: 0, pear: 1, banana: 2, orange: 3 }
Copier après la connexion

Dans le code ci-dessus, nous définissons une fonction de rappel qui reçoit deux paramètres, index et item. Chaque fois qu'un élément est parcouru, l'élément est utilisé comme clé et sa position d'index est utilisée comme valeur, stockée dans un objet. Le résultat final renvoyé est un objet paire clé-valeur.

Résumé :

Ci-dessus sont les deux méthodes de conversion des tableaux jQuery en paires clé-valeur. Adapté à différents scénarios, vous pouvez choisir librement la méthode à utiliser. Lorsqu'il s'agit de tableaux et d'objets, nous pouvons raisonnablement utiliser les méthodes $.map() et $.each() en fonction des besoins réels pour améliorer l'efficacité et la lisibilité du code.

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!

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal