skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

samedi 16 juillet 2011

Pertinent à savoir sur les arrays JavaScript

Publié par Infinite Loop, à 10 h 20 4 commentaires

En JavaScript, il existe deux notations pour déclarer un array (new Array() et []). Elles peuvent sembler équivalentes mais il y a une différence importante à considérer. Pour comprendre, le mieux est de suivre l'exécution du code dans la démonstration suivante :

var a1 = new Array();
console.log(a1.length); // 0
console.log(a1[0]); // undefined

var a2 = new Array(1,2,3);
console.log(a2.length); // 3
console.log(a2[0]); // 1

// optionnellement
var a3 = new Array(3);
console.log(a3.length); // 3
console.log(a3[0]); // undefined
Jusqu'à maintenant, peu de surprises si ce n'est que de déclarer un tableau vide de trois éléments à la dernière étape.

Poursuivons avec l'équivalent en utilisant la deuxième notation [] :
var b1 = [];
console.log(b1.length); // 0
console.log(b1[0]); // undefined

var b2 = [1,2,3];
console.log(b2.length); // 3
console.log(b2[0]); // 1
Ajoutons-y un degré de difficulté.
var b3 = [3];
console.log(b3.length);
Contrairement à la déclaration avec new Array(), la longueur de b3 sera de 1 car c'est la valeur 3 qui fait partie de l'array et non pas la réservation de 3 "espaces libres" comme dans a3.
// ajoutons une valeur
b3[3] = 2;
À ce stade-ci, quelle est la grandeur de l'array ?
console.log(b3.length); // 4
console.log(b3); // [3, undefined, undefined, 2]
Mais d'où viennent ces 2 espaces vides ? Comme nous avons placé la valeur 2 au 3ème indice de l'array b3, la taille du tableau est automatiquement élargie à 4.

Maintenant, ajoutons à ce même tableau une valeur à une clé. Quelle sera la grandeur du tableau ? Est-ce que la longueur deviendra 5 ?
b3['x'] = 'y';
console.log(b3.length); // 4
console.log(b3); // [3, undefined, undefined, 2]
console.log(b3.x); // y
Eh non, la longueur demeure 4 mais une propriété x a été créée pour stocker la valeur de y. Donc on sait qu'on peut aussi stocker des propriétés si la clé est textuelle. Essayons autre chose.
b3['10'] = 1; // associatif car la clé est textuelle et non numérique ?
console.log(b3.length); // 11
Vous y comprenez quelque chose ? Le secret ici est que JavaScript tentera toujours de convertir la clé en numérique pour stocker la valeur au bon indice. S'il échoue, il utilisera une propriété associative qui pourra ensuite être appelée des deux façons (b3['x'] ou b.x).

Ce qu'il faut se rappeler, c'est que selon la manière de déclarer l'array, on ne peut pas s'attendre au même comportement pour éviter des mauvaises surprises.
console.log(Array(5).length); // 5
console.log([5].length); // 1
Douglas Crockford, auteur du livre JavaScript, the Good Parts (et impliqué dans le développement du JavaScript par l'apport du fameux JSON), recommande l'utilisation de l'array littéral plutôt que sa forme objet. D'ailleurs, si vous regardez le code source de jQuery, vous noterez qu'en aucun temps la notation new Array() n'est utilisée. Ça devrait vous donner un indice sur la méthode préférée des développeurs les plus expérimentés. Dorénavant, j'essaierai de changer mes habitudes, juste pour pouvoir me faire passer pour un expert ;-)


Tags: JavaScript

4 réponses à "Pertinent à savoir sur les arrays JavaScript"

  1. Nesk a dit...
    16 juillet 2011 à 10 h 35

    L'utilisation des types primitifs (i.e : [], {}, etc...) a toujours été la façon de faire la plus conseillée, l'instanciation de types par le biais d'un objet n'apporte que des problèmes : une syntaxe plus longue, l'opérateur typeof qui ne renvoie que object, etc...

    C'est quelque chose que je me m'efforce de faire comprendre aux débutants : il ne faut pas s'en servir sous prétexte que c'est plus beau, non, c'est juste une chose à oublier à moins de vraiment savoir s'en servir (notamment pour exploiter le prototype de l'objet).

    Anonyme a dit...
    16 juillet 2011 à 13 h 33

    J'ai rarement lu article aussi peu clair sur ce sujet.
    Si c'est juste pour dire qu'écrire "a = [5]" n'équivaut pas à "a = new Array(5"), il y avait plus simple pour l'expliquer...
    Pour le reste, les exemples ne diffèrent pas dans leur comportement que l'objet soit créé via la fonction Array ou via la notation litérale.

    PS : Douglas Crockford n'a pas été impliqué dans le développement de JavaScript. Il n'a fait que "découvrir" le format JSON qui existait déjà et qui était alors déjà utilisé par les developpeurs (il le dit lui même dans une présentation récente).

    Infinite Loop a dit...
    16 juillet 2011 à 13 h 51

    On dirait que tu as lu l'article en diagonale. Le billet se veut être une démonstration par l'exemple. C'est facile de chialer et de penser faire mieux quand on écrit en gardant l'anonymat.

    Quand je parle du développement de JavaScript, je n'ai jamais dit qu'il avait créé le langage. Il l'a fait évoluer en inventant et en popularisant JSON à partir de caractéristiques existantes dans le langage JavaScript (sources: livre Coders at Work et Wikipedia.

    Infinite Loop a dit...
    31 juillet 2011 à 12 h 41

    Au troll anonyme de Rennes en France, voici ma réponse à ton dernier commentaire que je n'ai pas publié et qui n'aurait pas su mieux résumer ma pensée : Avant de commenter ici.


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (56)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ▼  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ▼  juillet 2011 (17)
        • Soustraction sans emprunt par le complément de 9
        • Citation no. 129 sur le gel
        • Les archéologues retrouveront un jour la momie de ...
        • La gaffe à 150000$
        • La mort d'Angry Bird
        • The Walking Dead, DVD et papier
        • Petit délire sur le plus vieux métier du monde
        • Tasse-grenade : prenez un numéro
        • Truc express pour proposer un fichier en télécharg...
        • Citation no. 128 sur les ennuis
        • Pertinent à savoir sur les arrays JavaScript
        • Ceci est votre cerveau sur la musique
        • L'énigme de Stanford
        • Citation no. 127 sur l'efficience
        • Quelques solutions à des problèmes communs sur 000...
        • Théorie des 10 000 heures
        • Le livre sans titre
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ►  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ►  2009 (430)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (37)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft