JavaScript Array

Array (tableau) en JavaScript va vous permettre de regrouper un ensemble de valeurs comme dans la plupart des langages informatiques. Cependant, un array en JavaScript n’est pas commode. Vous ne vous en étiez jamais rendu compte ?

Comme vous le savez certainement déjà, le JavaScript est un langage de prototype. Quand vous instanciez votre objet, les méthodes et les propriétés ne sont pas copiées comme dans la programmation objet classique. C’est à dire qu’avec un prototype vous pouvez interagir sur chaque instance de vos objets à n’importe quel moment durant le cycle de vie de votre application. Autrement dit, s’il manque une méthode dans votre prototype, vous pouvez la rajouter à n’importe quel moment.

Vous voyez l’idée ? Bon maintenant, pourquoi je vous parle de prototype… Parce que le type de données Array en JavaScript n’existe pas !

Qu’est-ce que ça implique ? Beaucoup de choses. Vous êtes dépendant du prototype “natif” que propose le JavaScript. Vous serez contraint par des “logiques illogiques” #WTFJS mais nous devrons bien faire avec. La différence notable avec un type “array” natif dans un langage c’est comme s’il avait un “ADN” concernant le tableau alors que là… on peut en faire “ce que l’on veut”. C’est un prototype.

Supprimer un élément d’un array JavaScript

Vous avez déjà essayé ? C’est une partie de plaisir et on aime tenter le fameux mot-clé “delete”.

Ouai, ce n’est pas fou. Je vous invite a aller lire la documentation du mot-clé delete. La suppression d’un élément du tableau par ce mot-clé n’en modifie pas sa longueur. Alors comment fait-on ?

Comment supprimer un élement dans sur un array JavaScript

Plusieurs méthodologies s’offrent à nous et va dépendre de ce que vous souhaitez effectuer :

• Supprimer la fin d’un tableau : pop
• Supprimer depuis le début d’un tableau : shift
• Supprimer un index spécifique : splice
• Supprimer par “logique” / “condition” : filter

Array pop – Supprimer le dernier élément

Comme vous pouvez le voir, la fonction pop permet de supprimer le dernier élément d’un tableau. Sa valeur de retour est l’élément supprimé que vous pouvez récupérer. Il ne faut donc surtout pas tenter d’enregistrer la valeur de retour dans votre variable. Par ailleurs, la fonction met à jour le nombre d’éléments du tableau. Si vous faites un marvels.length dans l’exemple ci-dessus, vous obtiendrez 2.

Array shift – Supprimer le premier élément

Tout comme la fonction pop, la fonction shift va cette fois-ci, supprimer le premier élément de votre tableau. Elle met également à jour la longueur de votre array javascript.

Array splice – supprimer un index

Fonction généralement connue des développeurs Javascript mais peu utilisée. Elle semble complexe et “fait peur”. On peut retrouver cette fonction pour supprimer un élément mais aussi… en ajouter un! A sa lecture, elle demande donc plus d’attention que d’habitude.

Le premier paramètre permet de choisir l’index du tableau sur lequel vous souhaitez supprimer des éléments, le deuxième paramètre sera le “longueur” de ce qu’il faut supprimer, c’est à dire, le nombre d’éléments. Sur l’exemple ci-dessus, on souhaite mettre le curseur à l’index 1 ( soit Captain Marvel ) et supprimer 1 seul élément, c’est à dire, l’élément courant sur lequel on est positionné ( soit… Captain Marvel ). Vous remarquerez également que la valeur de retour de splice correspond à un tableau. Comme vous pouvez supprimer plusieurs éléments, il va renvoyer dans un tableau les différents éléments supprimés.

Array filter – suppression par filtre

La suppression par filtre correspond au fait de filtrer votre tableau pour en obtenir un nouveau correspondant aux résultats attendus. On n’est pas obligé de travailler sur les indexes et vous pouvez travailler sur des critères bien spécifiques, que cela soit des objets dans le tableau, des chaînes de caractères ou autres.

Par exemple, je souhaite récupérer le nom des Marvels qui ont des espaces… !

Pratique ? 🙂 Vous aurez remarqué une petite différence avec les autres fonctions. Filter ne modifie pas le tableau en lui-même, il renvoie un nouveau tableau filtré en fonction de vos souhaits.

Nous venons donc de voir 4 façons différentes de manipuler des array Javascript pour travailler sur la suppression ou “l’occultation” des données d’un tableau.