Si vous voulez devenir un programmeur compétent, vous devrez maîtriser l’utilisation de la matrice. Presque tous les projets Javascript nécessiteront l’utilisation et la manipulation de tableaux avec différents types d’éléments. Une opération que vous devrez peut-être effectuer consiste à récupérer une plage d’éléments d’un tableau. Voici comment obtenir des éléments entre deux index dans un tableau Javascript.
Comment obtenir des éléments entre les index dans un tableau Javascript
Récupérer des éléments entre deux index dans un tableau est une opération simple. Ce processus peut également être appelé obtenir une “gamme” d’articles. Nous utiliserons le prototype de tranche comme notre solution ici.
Solution : Prototype de tranche
var YourArray = ['a','b','c','d','e','f','g','h','i','j'];
var ArrayRange = YourArray.slice(0, 3);
//Output: ["a", "b", "c"]Notre solution utilise un prototype de tableau intégré appelé tranche. Slice peut prendre deux index et renverra un tableau d’éléments entre ces valeurs d’index. Dans notre exemple, nous lui donnons une valeur de départ de indice 0, c’est là que nous allons commencer à inclure des éléments. Notre valeur finale de indice 3 C’est là que nous allons commencer à exclure les valeurs. Notez qu’il compte jusqu’à l’index de fin et non compris, donc vos index de retour seront 0,1,2 dans notre exemple de sortie A, B et C.
Si nous voulions récupérer D, E et F, notre code ressemblerait à ceci :
var YourArray = ['a','b','c','d','e','f','g','h','i','j'];
var ArrayRange = YourArray.slice(3, 6);
//Output: ["d", "e", "f"]La méthode slice peut également prendre une seule valeur de départ ou des valeurs négatives. Jetons un coup d’œil à quelques exemples.
var YourArray = ['a','b','c','d','e','f','g','h','i','j'];
var ArrayRange = YourArray.slice(6);
//Output: ["g", "h", "i", "j"]Une seule valeur positive définira un index de départ et affichera tout à partir de là jusqu’à la fin du tableau.
var YourArray = ['a','b','c','d','e','f','g','h','i','j'];
var ArrayRange = YourArray.slice(-2);
//Output: ["i", "j"]Une seule valeur négative décalera le tableau et les valeurs de sortie à partir de la fin.
var YourArray = ['a','b','c','d','e','f','g','h','i','j'];
var ArrayRange = YourArray.slice(0, -2);
//Output: ["a", "b", "c", "d", "e", "f", "g", "h"]Si nous avons utilisé une valeur négative pour l’index de fin, nous décalerons la fin et inclurons tout sauf les deux dernières valeurs.
Mises en garde : le problème de référence
Un point qu’il est important de comprendre est que l’opération slice ne modifie pas le tableau d’origine. Il fera une “copie superficielle” des références d’éléments dans un nouveau tableau. Tout fonctionne comme prévu si vous travaillez avec des chaînes, des nombres ou des valeurs booléennes dans votre tableau d’origine. Cependant, si vous travaillez avec un tableau d’objets, les deux tableaux partageront les mêmes références. Si un élément change sur le tableau d’origine, ces changements seront reflétés dans votre tableau en tranches.
Prenons un exemple :
var YourArray = [{id: 'a'},{id: 'b'},{id: 'c'}]
var ArrayRange = YourArray.slice(0, 2);
console.log(ArrayRange)
YourArray[1].id = 'what?'
console.log(ArrayRange)
//Output [{id: "a"},{id: "b"}]
//Output [{id: "a"},{id: "what?"}]Notez que même ceux dont nous avons modifié la valeur id dans notre tableau d’origine, notre nouveau tableau a également changé. Cela peut être un comportement contre-intuitif. Si vous savez que votre tableau d’origine ne changera pas, ce n’est peut-être pas un problème, mais ce problème de référence peut entraîner un débogage difficile si votre tableau d’origine est susceptible de changer.
Voici comment nous pouvons éviter ce problème :
var YourArray = [{id: 'a'},{id: 'b'},{id: 'c'}]
var ArrayRange = JSON.parse(JSON.stringify(YourArray.slice(0, 2)));
console.log(ArrayRange)
YourArray[1].id = 'what?'
console.log(ArrayRange)
//Output [{id: "a"},{id: "b"}]
//Output [{id: "a"},{id: "b"}]Pour éviter le problème de référence, nous créons simplement un clone du tableau à l’aide des méthodes JSON stringify et parse. Cela nous donnera un nouveau tableau qui ne contient aucune référence à l’original. Il existe plusieurs manières différentes de réaliser cette opération de clonage.
Nous espérons que vous avez trouvé ce guide utile. Si vous avez besoin de plus d’aide, veuillez consulter notre section de codage Javascript. Bon codage !