Diviser un tableau en morceaux en JavaScript

1. Diviser un tableau à l’aide de la méthode slice() en JavaScript
2. Séparer chaque élément d’un tableau à l’aide de la méthode slice() et de la boucle forEach en JavaScript

En JavaScript, jouer avec des tableaux et effectuer diverses opérations sur les tableaux, que ce soit l’insertion, la suppression ou la manipulation de données à l’intérieur d’un tableau, sont des choses très courantes que tout programmeur devrait savoir.

Le langage JavaScript nous facilite la vie en nous fournissant diverses fonctions intégrées impressionnantes qui nous permettent de jouer et de modifier la structure de données du tableau. Une de ces méthodes que nous aborderons dans cet article est la fonction slice(). Avec cette méthode, nous pouvons facilement diviser ou diviser un tableau entier en plusieurs morceaux.

Diviser un tableau à l’aide de la méthode slice() en JavaScript

La méthode slice() est utilisée pour découper ou diviser un tableau en plus petits morceaux. Cette fonction prend en entrée deux paramètres, start et end. Le start représente l’index de départ à partir duquel vous souhaitez commencer à découper le tableau, et la end représente l’index auquel vous souhaitez arrêter de découper ou de diviser.

Dans ce processus, notez que le découpage s’arrêtera un index avant l’index end que vous avez spécifié. Par exemple, si vous avez défini end comme 5, la méthode arrêtera de découper un index avant, c’est-à-dire à l’index 4.

Une fois le découpage terminé, le tableau d’origine reste inchangé. Les navigateurs modernes prennent en charge cette méthode.

Dans l’exemple de code ci-dessous, nous avons un tableau appelé numbersArr, qui est du type entiers. On peut passer les paramètres start et end pour scinder ou diviser ce tableau. Ici, nous avons passé 2 et 5 comme paramètres start et end.

let numbersArr = [1, 2, 3, 4, 5, 6, 7, 8];

console.log(numbersArr.slice(2, 5));
console.log('Original Array: ', numbersArr);

Production:

[3, 4, 5]
Original Array: [1, 2, 3, 4, 5, 6, 7, 8]

Comme à l’index 2, nous avons le numéro d’élément 3 et un index avant l’index 5, nous avons un numéro d’élément 5. Ainsi, la méthode slice() divisera ce tableau et nous obtiendrons la sortie sous la forme [3, 4, 5]. Comme déjà discuté, le tableau d’origine reste inchangé, et donc si nous imprimons le tableau numbersArr, nous obtiendrons le tableau entier avec tous les éléments présents en sortie.

Les deux paramètres start et end sont facultatifs. Si vous ne spécifiez pas la position start, alors la méthode slice() prendra 0 comme valeur par défaut. Si vous ne spécifiez pas la position end, il ira au dernier élément du tableau à l’aide de la méthode array.length.

Séparer chaque élément d’un tableau à l’aide de la méthode slice() et de la boucle forEach en JavaScript

Pour diviser ou diviser tous les éléments du tableau, nous pouvons utiliser à la fois la méthode slice() et la boucle for. Vous pouvez également utiliser une boucle for ici - ce n’est pas un problème. De plus, nous avons également le même tableau numbersArr. Chaque fois que nous utilisons une boucle forEach sur un tableau, nous devons passer des fonctions de rappel, qui nous fourniront deux choses : la première est l’élément d’un tableau lui-même, et la seconde est son indice. À chaque itération, nous allons parcourir chaque élément d’un tableau et obtenir son index respectif.

let numbersArr = [1, 2, 3, 4, 5, 6, 7, 8];

numbersArr.forEach((value, index) => {
  console.log(numbersArr.slice(index, index + 1));
});

Production:

[ 1 ]
[ 2 ]
[ 3 ]
[ 4 ]
[ 5 ]
[ 6 ]
[ 7 ]
[ 8 ]

Nous passerons cette valeur index comme paramètre start et index+1 comme paramètre end à la méthode slice(). Ainsi, par exemple, si la valeur de l’index est 0, alors index+1 devient 0 + 1 = 1 . Et comme nous savons que la méthode slice() arrêtera un élément avant l’index de fin, nous voulons diviser ici chaque élément du tableau ; par conséquent, nous passerons d’abord split(0,1) afin que la méthode prenne un élément à la fois dans le tableau et l’affiche.

Dans la deuxième itération, ce sera split(1,2). La troisième itération sera split(2,3) et ainsi de suite jusqu’à ce qu’elle atteigne la fin du tableau.

De cette façon, nous pourrons diviser chaque élément d’un tableau en plusieurs morceaux. Si vous souhaitez accéder à ces éléments individuels plus tard dans votre code, vous pouvez également stocker ces éléments en créant des tableaux séparés pour chaque élément en fonction de vos besoins.