Maison >interface Web >js tutoriel >Comment convertir un nombre en tableau en JavaScript ?

Comment convertir un nombre en tableau en JavaScript ?

王林avant: 2023-08-29 13:25:091301parcourir

如何在 JavaScript 中将数字转换为数组？

En JavaScript, il existe de nombreuses méthodes intégrées pour convertir des nombres en tableaux. La plus simple est la méthode split(). Nous pouvons également utiliser les méthodes map(), réduire() ou form() pour effectuer des tâches. Cet article traite de certaines des méthodes les plus populaires de conversion de nombres en tableaux et fournit des exemples du moment et de la manière d'appliquer chaque technique.

Maintenant, la question est : pourquoi avez-vous besoin de convertir le nombre en tableau ? Eh bien, la raison pourrait être de diviser un numéro de téléphone en nombres distincts ou une date en ses composants (analyse d'une date), ou cela pourrait être utile lors de l'exécution d'opérations mathématiques sur des nombres distincts.

Méthode 1 : Grâce à la méthode split()

Maintenant, jetons un œil à la méthode split(). C'est un outil utile pour diviser des chaînes en sous-chaînes plus petites et les convertir en nombres. Il peut alors même convertir le nombre en tableau en le convertissant en chaîne et en le divisant en nombres individuels. Voyons cela en implémentant la fonction split() comme indiqué dans l'exemple.

Exemple

Dans cet exemple, nous utilisons la fonction toString() pour convertir un entier en chaîne. Utilisez ensuite la fonction split() pour diviser la chaîne en un tableau de caractères individuels. Le résultat final sera un tableau de chaînes, chaque chaîne représentant un chiffre du nombre d'origine.

<html>
<body>
   <p id="print"></p>
   <script>
      let number = 12345;
      let numberArray = number.toString().split("");
      document.getElementById("print").innerHTML = numberArray;
   </script>
</body>
</html>

Méthode 2 : Utiliser la méthode map()

En utilisant la méthode map(), vous pouvez créer un nouveau tableau contenant le résultat de l'exécution d'une fonction donnée sur chaque élément du tableau appelant. Il peut également être utilisé pour convertir des nombres en tableaux en créant un tableau de nombres à l'aide de la méthode map(). Voici les instructions pour convertir un entier en tableau à l'aide de la méthode map() -

Exemple

Dans cet exemple, nous convertissons d'abord l'entier en chaîne à l'aide de la fonction toString() { [code natif] }( ) méthode. Cette chaîne est ensuite convertie en tableau à l'aide de la fonction Array.from(). Enfin, nous utilisons la méthode map() pour convertir le tableau de chaînes en un tableau d'entiers

<html>
<body>
   <p id="print"></p>
   <script>
      let number = 12345;
      let numberArray = Array.from(number.toString(), Number).map(Number);
      document.getElementById("print").innerHTML =numberArray;
   </script>
</body>
</html>

Méthode 3 : Utiliser la boucle For

Cette méthode est la plus simple, elle utilise une boucle for pour parcourir les nombres et les convertir en un tableau de nombres.

Exemple

Dans cet exemple, nous convertissons d'abord un nombre en chaîne à l'aide de la méthode toString(). Nous utilisons ensuite une boucle for pour parcourir les nombres et utilisons la méthode parseInt pour convertir les nombres individuels et les placer dans un tableau.

<html>
<body>
   <p id="print"></p>
   <script>
      let number = 12345;
      let numberArray = [];
      for (let i = 0; i < number.toString().length; i++) {
         numberArray.push(parseInt(number.toString()[i]));
      }
      document.getElementById("print").innerHTML = numberArray;
   </script>
</body>
</html>

Méthode 4 : Utilisez la méthode réduire()

La méthode

reduce() est une méthode matricielle qui peut être utilisée pour réduire un tableau à une seule valeur. Dans cet exemple, nous utiliserons la méthode réduire() pour convertir un nombre en un tableau de nombres

Exemple

Dans cet exemple, nous utilisons d'abord la méthode `toString()`. Nous utilisons ensuite la méthode split() pour diviser la chaîne en un tableau de caractères individuels. Enfin, nous parcourons le tableau de caractères en utilisant la méthode "reduce()", en analysant chaque caractère en un entier et en l'ajoutant au tableau final, qui est l'accumulateur dans ce cas.

<html>
<body>
   <p id="print"></p>
   <script>
      let number = 12345;
      let numberArray = number.toString().split('').reduce((acc, curr) => {
         return [...acc, parseInt(curr)];
      }, []);
      document.getElementById("print").innerHTML=numberArray ;
   </script>
</body>
</html>

Méthode 5 : utilisez la méthode Array.from()

Maintenant, nous allons apprendre une autre façon de convertir ou de changer un nombre en tableau. Donc, ici, nous utiliserons la méthode Array.from(). Array.from génère un nouveau tableau à partir d'un objet itérable ou de type tableau. Dans ce cas, nous pouvons utiliser la méthode Array.from() pour convertir la représentation sous forme de chaîne d'un nombre en un tableau de nombres simples.

Exemple

Maintenant, regardons le code de la méthode ci-dessus.

<html>
<body>
   <p>Original number: 12345</p>
   <p id="result"></p> 
   <script>
      const num = 12345;
      const arr = Array.from(num.toString(), Number);
      document.getElementById("result").innerHTML = arr.join(", ");
   </script>
</body>
</html>

Conclusion

En JavaScript, il existe plusieurs façons de convertir un nombre en tableau, chacune présentant des avantages et des inconvénients. La méthode Split()' est la plus simple, tandis que les méthodes map()', 'for' et réduire()' sont plus puissantes et adaptables, mais nécessitent plus d'expertise. Vous pouvez choisir la méthode qui répond le mieux à vos besoins en fonction des exigences spécifiques de votre projet.

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：Analyse approfondie : Intégration PayPal, partie 2 : API REST PayPalArticle suivant：Analyse approfondie : Intégration PayPal, partie 2 : API REST PayPal

Articles Liés

Voir plus