Dans ce tutoriel, nous apprendrons à fusionner les tableaux donnés en utilisant JavaScript et JQuery. Dans le développement Web, il existe souvent des situations dans lesquelles des tableaux doivent être fusionnés. Par exemple, nous recevons une liste de balises et devons les fusionner dans une chaîne à insérer dans la page Web. Une autre situation dans laquelle vous devrez peut-être fusionner des tableaux concerne l’écriture de requêtes SQL.
Ici, nous allons apprendre 4 façons de concaténer des éléments d'un tableau donné.
array.join() nous permet de joindre des éléments d'un tableau dans une chaîne en spécifiant le délimiteur.
Les utilisateurs peuvent utiliser la méthode JavaScript join() pour fusionner des tableaux selon la syntaxe suivante.
Array.join(delimiter)
Dans la syntaxe ci-dessus, 'Array' est le tableau de références à fusionner et le délimiteur est le caractère que nous devons utiliser pour concaténer les éléments du tableau.
Nous avons créé un tableau « arr » contenant les noms des fruits dans l'exemple ci-dessous. Après cela, nous utilisons la méthode array.join() pour concaténer tous les noms de fruits et les stocker dans la chaîne « fruits ».
Dans la sortie, nous pouvons observer la chaîne 'fruits' contenant les noms de tous les fruits du tableau.
<html>
<body>
<h3> Using the <i> array.join() </i> method to implode the array in JavaScript </h3>
<div id="output"> </div>
<script>
let output = document.getElementById('output');
// Array of fruit names
let arr = ["Banana", "Orange", "Apple", "Mango"];
// Join the array elements
let fruits = arr.join();
output.innerHTML = "The original array is: " + arr + "<br><br>";
output.innerHTML += "The joined array is: " + fruits;
</script>
</body>
</html>
Nous avons créé un tableau contenant les noms de couleurs dans l'exemple ci-dessous. Après cela, nous avons utilisé la méthode join() et avons passé le caractère « | » comme paramètre de la méthode join() pour séparer chaque élément du tableau par un délimiteur.
Dans la sortie, l'utilisateur peut observer les éléments du tableau d'origine et le résultat du tableau fusionné.
<html>
<body>
<h3> Using the <i> array.join() </i> method to implode the array in JavaScript </h3>
<div id="output"> </div>
<script>
let output = document.getElementById('output');
let colors = ["Red", "Green", "White", "Black"];
// Join the array elements
let colorStr = colors.join(' | ');
output.innerHTML = "The original array is: " + colors + "<br><br>";
output.innerHTML += "The joined array is: " + colorStr;
</script>
</body>
</html>
Nous pouvons parcourir le tableau en utilisant la boucle for ou la boucle while. Lors de l'itération sur les éléments du tableau, nous pouvons les joindre à l'aide de l'opérateur « + » ou « += ». De plus, nous pouvons utiliser des délimiteurs lors de la concaténation des éléments du tableau.
Les utilisateurs peuvent utiliser la boucle for et l'opérateur « + » pour combiner des tableaux selon la syntaxe suivante.
for ( ) {
result += array[i];
}
Dans la syntaxe ci-dessus, nous ajoutons arry[i] à la chaîne « résultat ».
Dans l'exemple ci-dessous, nous avons créé un tableau contenant des nombres par ordre croissant. Nous créons une variable appelée « numberStr » pour stocker le résultat du tableau concaténé.
Nous utilisons une boucle for pour parcourir le tableau et ajouter number[i] à 'numberStr' à chaque itération. De plus, nous ajoutons le délimiteur « < » après avoir ajouté chaque élément à la chaîne « numberStr ».
Dans le résultat, nous pouvons observer que nous avons préparé la chaîne contenant '<' en concaténant les éléments du tableau.
<html>
<body>
<h3>Using the <i> for loop and + operator </i> to implode the array in JavaScript</h3>
<div id="output"> </div>
<script>
let output = document.getElementById('output');
let number = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
let numberStr = "";
// Using the for loop
for (let i = 0; i < number.length; i++) {
numberStr += number[i];
if (i < number.length - 1) {
numberStr += " < ";
}
}
output.innerHTML = "The original array is: " + number + "<br><br>";
output.innerHTML += "The joined array is: " + numberStr;
</script>
</body>
</html>
array.reduce() fonctionne en fusionnant les listes de tableaux en un seul élément. Ici, nous allons exécuter la méthode array.reduce() en prenant le tableau comme référence et en passant la fonction de rappel comme paramètre pour concaténer les éléments du tableau.
Les utilisateurs peuvent utiliser la méthode array.reduce() pour fusionner des tableaux selon la syntaxe suivante.
message.reduce((a, b) => a + " " + b);
Dans la syntaxe ci-dessus, nous avons transmis la fonction de rappel à la méthode join pour joindre les éléments du tableau.
Dans l'exemple ci-dessous, nous créons un tableau contenant des chaînes de message. Après cela, nous prenons le tableau 'message' comme référence et exécutons la méthode réduire() pour fusionner les tableaux.
De plus, nous transmettons les paramètres a et b à la fonction de rappel de la méthode réduire(). Après chaque itération, « a » stocke le résultat fusionné du tableau, tandis que « b » représente l'élément actuel du tableau. Le corps de la fonction ajoute « b » à « a » en les séparant par des espaces.
Using the array.reduce() method to implode the array in JavaScript
<script> let output = document.getElementById('output'); let message = ["Hello", "Programmer", "Welcome", "to", "JavaScript", "Tutorial"]; // Using the array.reduce() method let messageStr = message.reduce((a, b) => a + " " + b); output.innerHTML = "The original array is: " + message + "<br><br>"; output.innerHTML += "The joined array is: " + messageStr; </script>
Chaque méthode jQuery () est utilisée pour parcourir les éléments du tableau. Nous pouvons parcourir les éléments du tableau et concaténer chaque élément un par un.
Les utilisateurs peuvent utiliser la méthode each() de JQuery pour fusionner des tableaux selon la syntaxe suivante.
$.each(array, function (index, value) {
treeStr += value + " ";
});
Dans la syntaxe ci-dessus, la méthode each() implose le tableau comme premier paramètre et concatène le tableau avec la fonction de rappel comme deuxième paramètre.
Dans l'exemple ci-dessous, nous avons créé un tableau contenant les noms d'arbres. Après cela, nous parcourons le tableau en utilisant la méthode each() de jQuery. Nous obtenons l’index actuel et la valeur de l’élément dans la fonction de rappel de la méthode each(). Nous ajoutons donc la valeur de l'élément dans 'treeStr'.
Enfin, nous pouvons observer la valeur de « treeStr » dans la sortie.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<h3>Using the <i> each() method </i> to implode the array in jQuery</h3>
<div id="output"> </div>
<script>
let output = document.getElementById('output');
let tree = ["oak", "pine", "ash", "maple", "walnut", "birch"];
let treeStr = "";
// Using the each() method
$.each(tree, function (index, value) {
treeStr += value + " ";
});
output.innerHTML = "The original array is: " + tree + "<br><br>";
output.innerHTML += "The joined array is: " + treeStr;
</script>
</body>
</html>
array.join() est l'un des meilleurs moyens de combiner des tableaux en JavaScript. Cependant, si les programmeurs ont besoin de plus d'options personnalisées pour fusionner des tableaux, ils peuvent également utiliser les boucles for et l'opérateur « + ». Dans JQuery, les programmeurs peuvent utiliser la méthode each() ou les méthodes makeArray() et join(), qui fonctionnent de manière similaire à la méthode join() de 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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
