Comment convertir un tableau en liste en javascript

Avec le développement continu de la technologie front-end, JavaScript est devenu une partie importante du monde du développement front-end. Dans le développement front-end, le traitement des opérations de données est une tâche très importante.

En JavaScript, l'un des moyens de stocker des données est un tableau. Parfois, nous devons convertir le tableau en forme de liste (Liste). Par exemple, lors du rendu des données, nous devons afficher les données dans une liste ordonnée.

Cet article expliquera comment utiliser JavaScript pour convertir un tableau en liste et fournira un exemple de code pour plusieurs manières différentes.

Méthode 1 : utiliser la boucle for

Utilisez la boucle for pour parcourir chaque élément du tableau et les insérer dans la liste à l'aide de innerHTML. Voici l'exemple de code :

var arr = ["苹果", "香蕉", "橘子", "西瓜", "葡萄"];

var list = document.createElement("ul");

for(var i = 0; i < arr.length; i++){
    var item = document.createElement("li");
    item.innerHTML = arr[i];
    list.appendChild(item);
}

document.body.appendChild(list);

Méthode 2 : utilisez la fonction map

Les tableaux en JavaScript ont une fonction map, qui peut transmettre chaque élément du tableau et leurs indices en tant que paramètres à une fonction et traiter les résultats. nouveau tableau.

Nous pouvons utiliser la fonction map pour convertir le tableau en un nouveau tableau contenant des éléments de liste et les insérer dans la liste. Voici un exemple de code :

var arr = ["苹果", "香蕉", "橘子", "西瓜", "葡萄"];

var list = document.createElement("ul");

var listItems = arr.map(function(item){
    return "<li>" + item + "</li>";
});

list.innerHTML = listItems.join("");

document.body.appendChild(list);

Méthode 3 : utilisez la fonction de jointure

La fonction de jointure en JavaScript peut concaténer tous les éléments du tableau en une chaîne, et nous pouvons les fusionner en un caractère contenant des éléments de liste au format HTML chaînes et insérez-les dans la liste.

Voici un exemple de code :

var arr = ["苹果", "香蕉", "橘子", "西瓜", "葡萄"];

var list = document.createElement("ul");

var listStr = "<li>" + arr.join("</li><li>") + "</li>";

list.innerHTML = listStr;

document.body.appendChild(list);

Les trois méthodes ci-dessus permettent de convertir un tableau en liste. Dans les applications pratiques, nous pouvons choisir différentes méthodes en fonction de besoins spécifiques.

Lorsque vous utilisez le code ci-dessus, n'oubliez pas de l'encapsuler dans une fonction et de transmettre le tableau en paramètre. De cette façon, le code sera plus réutilisable.

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!