Maison > Article > interface Web > Comment tronquer un tableau en JavaScript ?

Comment tronquer un tableau en JavaScript ?

PHPzavant: 2023-08-30 12:41:02822parcourir

如何在 JavaScript 中截断数组？

Ce tutoriel vous montrera comment tronquer un tableau en JavaScript. Tronquer un tableau signifie supprimer certains éléments de la fin et attribuer les nouvelles valeurs du tableau tronqué au tableau réel.

Parfois, nous devons tronquer un tableau. Supposons que dans un cas, il existe un tableau dans lequel il y a des éléments triés (décroissants), nous avons maintenant juste besoin des k premiers éléments triés du tableau et supprimons la valeur else. Nous n'avons donc pas besoin de créer un tableau supplémentaire, de le modifier et de l'attribuer au tableau réel.

Il existe de nombreuses façons de tronquer un tableau, voyons-les toutes.

Grammaire

Voici la syntaxe pour tronquer un tableau :

arr.splice(index, howmany); // the splice() method.
arr.length=idx; // array length property.

Ici arr est le tableau original. idx est l'index/la position où nous voulons tronquer le tableau. Index est la position de l'élément à supprimer et quel est le nombre d'éléments à supprimer du tableau.

Algorithme

ÉTAPE 1 - Créez un tableau arr et ajoutez-y des éléments. Utilisez l'attribut innerHTML pour afficher l'arr.
ÉTAPE 2 - Appliquez la méthode splice() au tableau arr, en passant index et combien comme arguments. Alternativement, nous pouvons appliquer arr.length=idx.
Étape 3 - Affichez le tableau tronqué à l'aide de l'attribut innerHTML.

Exemple 1

Utilisez la méthode Array splice()

Dans l'exemple ci-dessous, nous utilisons la méthode array splice() pour tronquer le tableau. Nous définissons un tableau avec sept éléments. Nous tronquons les éléments en dehors de la position 3.

<html>
<head>
   <title>Example- Truncate an array in JavaScript</title>
</head>
<body>
   <h3>Truncate an Array using splice() Method-</h3>
   <p id="before">Array before truncate:<br></p>
   <p id="after">Array after truncate:<br></p>
   <script>
      let arr = ["kalyan", "ashis", "anand", "sonu", "tirupati", "nagar", "arjun"];
      document.getElementById('before').innerHTML+=arr
      arr.splice(4, arr.length);
      document.getElementById('after').innerHTML+=arr
   </script>
</body>
</html>

Exemple 2

Utiliser l'attribut de longueur du tableau

Dans cet exemple, nous tronquons le tableau en utilisant la propriété array length. Nous attribuons simplement la longueur requise au tableau et sa taille changera en fonction de la taille allouée.

<html>
<head>
   <title>Example- Truncate an array in JavaScript</title>
</head>
<body>
   <h3>Truncate an Array using Array length property-</h3>
   <p id="before">Array before truncate:<br></p>
   <p id="after">Array after truancate:<br></p>
   <script>
      let arr = ["kalyan", "ashis", "anand", "sonu", "tirupati", "nagar", "arjun"];
      document.getElementById('before').innerHTML+=JSON.stringify(arr)
      arr.length=4
      document.getElementById('after').innerHTML+=JSON.stringify(arr)
   </script>
</body>
</html>

Ici, nous utilisons arr.length=4 pour changer le tableau en taille 4. Il obtient les 4 premiers éléments, puis tous les éléments sont supprimés du tableau.

Cela a un inconvénient, on ne peut obtenir que des éléments de l'index de départ 0 à une taille donnée, contrairement à la concaténation, nous avons la possibilité de définir l'index de départ et l'index de fin.

Maintenant, vous avez peut-être une question en tête. Que se passe-t-il si la taille que nous allouons est supérieure à la longueur du tableau ? Ensuite, nous obtenons un élément de tableau non défini après la taille du tableau.

Exemple 3

Dans l'exemple ci-dessous, nous définissons un tableau de longueur 7 puis attribuons une taille supérieure à la longueur du tableau.

<html>
<body>
   <p id="result1"><p>
   <p id="result2"><p>
   <script>
      let arr = ["kalyan", "ashis", "anand", "sonu", "tirupati", "nagar", "arjun"];
      arr.length=15
      document.getElementById('result1').innerHTML=JSON.stringify(arr);
      document.getElementById('result2').innerHTML=arr[13];
   </script>
</body>
</html>

Ici, nous modifions la taille du tableau de 7 à 15 sans ajouter d'éléments dans le tableau. Notez que les éléments de l'index 7 à 14 sont vides.

Exemple 4

Utilisez la méthode Array slice()

Dans l'exemple ci-dessous, nous utilisons la méthode array slice() pour tronquer le tableau. tableau La méthode slice() ne modifie pas le tableau d'origine, elle renvoie uniquement les éléments D'après l'argumentation donnée. Nous devons donc stocker l'élément renvoyé dans une variable.

Nous définissons un tableau avec sept éléments. Nous tronquons les éléments en dehors de la position 3.

<html>
<head>
   <title>Example- Truncate an array in JavaScript</title>
</head>
<body>
   <h3>Truncate an Array using slice() Method</h3>
   <p id="before">Array before truncate:<br></p>
   <p id="after">Array after truncate:<br></p>
   <script>
      let arr = ["kalyan", "ashis", "anand", "sonu", "tirupati", "nagar", "arjun"];
      document.getElementById('before').innerHTML+=arr
      arr = arr.slice(0, 4);
      document.getElementById('after').innerHTML+=arr
   </script>
</body>
</html>

Ici arr = arr.slice(0, 4); 0 est l'index de début du tableau, 4 est l'index de fin, jusqu'à ce que nous voulions épisser le tableau, tous les éléments avant l'index de début donné et après l'index de fin seront be est évité et nous attribuons ensuite le tableau mis à jour au tableau réel.

If arr = arr.slice(2, 5); will be there then output will be
Anand, sonu, tirupati

Dans ce tutoriel, nous avons appris comment tronquer un tableau en JavaScript à l'aide des méthodes array splice() et slice() et de la propriété length.

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Rechargement à chaud dans ElectronJsArticle suivant：Rechargement à chaud dans ElectronJs

Articles Liés

Voir plus