Maison > Article > interface Web > Comment afficher un tableau de structures en JavaScript ?
Comment afficher un tableau de structures en JavaScript ?
- WBOYavant
- 2023-08-30 14:37:05714parcourir
Le moyen le plus simple de déboguer du code JavaScript est d'utiliser console.log() que de nombreux développeurs utilisent. Parfois, nous avons besoin de comprendre la structure d'un tableau et les valeurs stockées pour le débogage. Dans ce didacticiel, nous apprendrons à visualiser un ensemble de structures.
Diverses méthodes JavaScript nous permettent d'inspecter la structure d'un tableau. Par exemple, nous pouvons savoir si un tableau contient des objets, des tableaux imbriqués, des chaînes, des nombres ou des valeurs booléennes.
Utilisez la méthode JSON.stringify()
La méthode JSON.stringify() nous permet de convertir un objet JSON en chaîne. Un tableau est également un objet en JavaScript, nous pouvons donc utiliser la méthode JSON.stringify() pour convertir un tableau en chaîne. Si le tableau contient des objets, "[objet objet]" est affiché dans la chaîne de résultat.
Grammaire
Les utilisateurs peuvent utiliser la méthode JSON.stringify() selon la syntaxe suivante pour afficher la structure du tableau.
JSON.stringify(array);
Dans la syntaxe ci-dessus, nous passons un tableau en paramètre de la méthode JSON.stringify().
Exemple
Dans l'exemple ci-dessous, nous avons créé un tableau contenant diverses valeurs telles que des chaînes, des booléens et des nombres. Après cela, nous utilisons la méthode JSON.stringify() pour voir la structure du tableau.
<html>
<body>
<h3>Using the <i> JSON.stringify() </i> method to view the array structure</h3>
<div id = "content"> </div>
<script>
let content = document.getElementById('content');
function viewArray() {
let test_array = ["Hello", "String 1", true, 30, false, 40];
content.innerHTML = "The array structure is " + JSON.stringify(test_array);
}
viewArray();
</script>
</body>
</html>
Dans la sortie, l'utilisateur peut observer la structure de test_array.
Utilisez la méthode array.join()
La méthodearray.join() convertit tous les éléments en chaînes et les joint par le délimiteur passé en argument.
Grammaire
Les utilisateurs peuvent utiliser la méthode array.join() selon la syntaxe suivante pour afficher la structure du tableau.
test_array.join(delimiter)
Dans la syntaxe ci-dessus, nous devons passer un délimiteur pour séparer les éléments du tableau avec un délimiteur.
Exemple
Dans l'exemple ci-dessous, test_array contient des chaînes, des booléens, des nombres et des objets. Nous concaténons les éléments du tableau à l'aide du délimiteur "," et affichons la chaîne résultante sur la page Web.
<html>
<body>
<h2>Using the <i> array.join() </i> method to view the array structure.</h2>
<div id = "content"></div>
<script>
let content = document.getElementById('content');
function viewArray() {
let test_array = ["value1", false, 3211, true, "value2", { name: "Shubham", age: 22, city: "Rajkot" }];
content.innerHTML = "The array structure is " + test_array.join(', ');
}
viewArray();
</script>
</body>
</html>
Utilisez la méthode array.toString()
La méthode toString() de JavaScript est utilisée pour convertir la valeur de tout objet ou autre type de données autre qu'une chaîne en chaîne. Nous pouvons utiliser la méthode toString() du tableau pour convertir le tableau en chaîne et voir la structure du tableau.
Grammaire
Les utilisateurs peuvent utiliser la méthode toString() sur le tableau selon la syntaxe suivante pour afficher la structure du tableau en convertissant le tableau en chaîne.
test_array.toString()
Exemple
Dans l'exemple ci-dessous, nous prenons comme référence un test_array contenant diverses valeurs et exécutons la méthode toString(). Dans la sortie, l'utilisateur peut observer la représentation sous forme de chaîne du tableau. test_array contient des tableaux imbriqués, qui sont également convertis en chaînes par la méthode toString().
<html>
<body>
<h2>Using the <i> array.toString() </i> method to view the array structure.</h2>
<div id = "content"></div>
<script>
let content = document.getElementById('content');
function arrayStructure() {
let test_array = [50, 60, false, true, "TypeScript", "JavaScript", [10, 20, 30]];
content.innerHTML = "The array structure is " + test_array.toString();
}
arrayStructure();
</script>
</body>
</html>
Les utilisateurs ont appris trois façons différentes d'afficher la structure d'un tableau dans ce didacticiel. Dans la méthode, l'utilisateur doit écrire une ligne de code. Par conséquent, les utilisateurs peuvent utiliser l’une de ces trois méthodes en fonction de leur compréhension et de leur niveau de confort.
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!