web-dev-qa-db-fra.com

Déclaration de tableau Javascript: new Array (), new Array (3), ['a', 'b', 'c'] créent des tableaux qui se comportent différemment

Considérons cet exemple de code Javascript:

a = new Array();
a['a1']='foo';
a['a2']='bar';

b = new Array(2);
b['b1']='foo';
b['b2']='bar';

c=['c1','c2','c3'];

console.log(a);
console.log(b);
console.log(c);

Les résultats dans la console Firebug sont les suivants:

Pour un (le '[]' a dû être développé en cliquant sur le bouton '+'):

[]      
a1  "foo"   
a2  "bar"

Pour b:

[undefined, undefined]

Pour c:

["c1", "c2", "c3"]

Mes questions sont:

  1. Est-ce que j'utilise correctement la syntaxe array ['key'] = 'value'?
  2. Pourquoi le tableau b ne fonctionne-t-il pas comme prévu?
  3. Pourquoi les tableaux a et c sont-ils affichés différemment dans la console? Il semble également que jQuery ne puisse pas parcourir le tableau a avec sa méthode .each ().
  4. Pourriez-vous recommander de bons tutoriels sur le comportement des tableaux Javascript?

NOTE: Le Firebug de Google Chrome n'affiche que [] pour le tableau 'a', sans possibilité de le développer.

EDIT: Très bien, il semblerait que les tableaux en Javascript ne comportent que des clés numériques. L'ajout d'une chaîne en tant que nom de clé transforme alors un objet en tableau. Mais pourquoi jQuery ne travaille-t-il pas avec?

$.each(a, function ()
    {
    alert ('derp');
    })

Ce code, ajouté au script, ne génère aucune alerte.

javascriptarrayssyntax
46
sbichenko

Les tableaux ont des index numériques. Alors,

a = new Array();
a['a1']='foo';
a['a2']='bar';

and

b = new Array(2);
b['b1']='foo';
b['b2']='bar';

n’ajoutons pas d’éléments au tableau, mais ajoutons .a1 et .a2 propriétés de l’objet a (les tableaux sont également des objets). Comme preuve supplémentaire, si vous avez fait ceci:

a = new Array();
a['a1']='foo';
a['a2']='bar';
console.log(a.length);   // outputs zero because there are no items in the array

Votre troisième option:

c=['c1','c2','c3'];

assigne à la variable c un tableau avec trois éléments. Ces trois éléments sont accessibles comme suit: c[0], c[1] et c[2]. En d'autres termes, c[0] === 'c1' et c.length === 3.

Javascript n'utilise pas sa fonctionnalité de tableau pour ce que les autres langages appellent des tableaux associatifs dans lesquels vous pouvez utiliser n'importe quel type de clé du tableau. Vous pouvez implémenter la plupart des fonctionnalités d'un tableau associatif en utilisant simplement un objet en javascript, chaque élément n'étant qu'une propriété comme celle-ci.

a = {};
a['a1']='foo';
a['a2']='bar';

C'est généralement une erreur d'utiliser un tableau à cette fin, car cela déroute les lecteurs de votre code et conduit à de fausses hypothèses sur le fonctionnement du code.

59
jfriend00

Les tableaux dans JS ont deux types de propriétés:

Eléments normaux et propriétés associatives (qui ne sont que des objets)

Lorsque vous définissez a = new Array(), vous définissez un tableau vide. Notez qu'il n'y a pas encore d'objets associatifs

Lorsque vous définissez b = new Array(2), vous définissez un tableau avec deux emplacements non définis.

Dans les deux exemples de "a" et de "b", vous ajoutez des propriétés associatives, c'est-à-dire des objets à ces tableaux.

console.log (a) ou console.log(b) imprime les éléments du tableau, à savoir [] et [undefined, undefined] respectivement. Mais puisque a1/a2 Et b1/b2 Sont des objets associatifs dans leurs tableaux, ils ne peuvent être consignés que par console.log(a.a1, a.a2) type de syntaxe

4
Navin Israni