Pourquoi puis-je ajouter des propriétés nommées à un tableau comme s'il s'agissait d'un objet?

Question

Les deux extraits de code suivants me semblent équivalents :

var myArray = Array();
myArray['A'] = "Athens";
myArray['B'] = "Berlin";

et

var myObject = {'A': 'Athens', 'B':'Berlin'};

parce qu'ils se comportent de la même manière, et aussi typeof(myArray) == typeof(myObjects) (les deux renvoient 'object').

Y a-t-il une différence entre ces variantes ?

Answer 1

Presque tout en javascript est un objet, donc vous pouvez "abuser" d'un objet Array en définissant des propriétés arbitraires dessus. Cela doit être considéré comme dangereux. Les tableaux sont destinés aux données indexées de manière numérique - pour les clés non numériques, utilisez un objet.

Voici un exemple plus concret de pourquoi les clés non numériques ne "conviennent pas" à un Array:

var monTableau = Array();
monTableau['A'] = "Athènes";
monTableau['B'] = "Berlin";

alert(monTableau.length);

Cela n'affichera pas '2', mais '0' - en effet, aucun élément n'a été ajouté au tableau, seulement de nouvelles propriétés ont été ajoutées à l'objet tableau.

Answer 2

En JS, les tableaux sont des objets, simplement légèrement modifiés (avec quelques fonctions supplémentaires).

Fonctions comme :

concat
every
filer
forEach
join
indexOf
lastIndexOf
map
pop
push
reverse
shift
slice
some
sort
splice
toSource
toString
unshift
valueOf

Answer 3

Je pense que ma réponse précédente était trop métaphorique et cryptique. Voici des clarifications.

Une instance d'Array, Boolean, Date, Function, Number, RegExp, String est un Object mais améliorée avec des méthodes et propriétés spécifiques à chaque type. Par exemple, un tableau a une propriété prédéfinie length alors que les objets génériques n'en ont pas.

javascript:alert([].length+'\n'+{}.length)

affiche

0
undefined

De manière intrinsèque, l'interpréteur FF Gecko fait également la distinction entre les Arrays et les objets génériques avec des différences distinctes lors de l'évaluation des constructions de langage.

javascript:
  ra=[  "one",   "two",   "three"]; ra.a=4;
  ob={0:"one", 1:"two", 2:"three"}; ob.a=4;
  alert(
    ra            +"\n\n"+
    ob            +"\n\n"+
    ra.toSource() +"\n\n"+
    ra.a          +"\t .toSource() m'a oublié ! \n\n"+
    ra.length     +"\t et ma longueur ! \n\n"+
    ob.toSource());
  ps=""; for(i in ra)ps+=i+" "; alert(ps);  /* NB .length is missing! */
  ps=""; for(i in ob)ps+=i+" "; alert(ps);

affiche

one,two,three

\[object Object\]

\["one", "two", "three"\]

4    .toSource() m'a oublié ! 

3    et ma longueur ! 

({0:"one", 1:"two", 2:"three", a:4})

ainsi que 0 1 2 a et 0 1 2 a.

Concernant l'affirmation que tous les objets sont des fonctions :

Il n'est ni syntaxiquement ni sémantiquement correct d'utiliser une instance d'objet arbitraire comme une fonction comme 123() ou "abc"() ou []() ou {}() ou obj() où obj est de type autre que Function, donc une instance d'objet arbitraire n'est pas une Function. Cependant, étant donné un objet obj et son type comme Array, Boolean, Date, ..., comment obj est-il devenu un Array, Boolean, Date, ...? Qu'est-ce qu'un Array, Boolean, Date, ... ?

javascript:
    alert([Array, Boolean, Date, Function, 
              Number, Object, RegExp, String] . join('\n\n') );

affiche

function Array() {
    [native code]
}

function Boolean() {
    [native code]
}

function Date() {
    [native code]
}

function Function() {
    [native code]
}

function Number() {
    [native code]
}

function Object() {
    [native code]
}

function RegExp() {
    [native code]
}

function String() {
    [native code]
}

Dans tous les cas, sans équivoque, le type d'objet se manifeste comme une définition de function, d'où l'affirmation que tous les objets sont des fonctions ! (L'ironie est que j'ai intentionnellement obscurci et brouillé la distinction d'une instance d'objet avec celle de son type! Cela montre néanmoins que "on ne peut pas avoir l'un sans l'autre", Objet et Fonction! La capitalisation souligne le type par opposition à l'instance.)

Un paradigme à la fois fonctionnel et orienté objet semble être fondamental pour la programmation et la mise en œuvre des primitives intégrées de bas niveau de l'interpréteur JS, telles que Math et JSON et true.

 javascript:alert([Math, JSON, true.toSource()].join("\n\n"));

affiche

[object Math]

[object JSON]

(new Boolean(true))

---

À l'époque du développement de Javascript, un style de programmation centré sur les objets (OOP's - style de programmation orienté objet - le "'s" est mon propre jeu de mots !) était à la mode et l'interpréteur a été également baptisé Java pour lui donner plus de crédibilité. Les techniques de programmation fonctionnelle étaient reléguées à des examens plus abstraits et ésotériques étudiant les théories des automates, des fonctions récursives, des langues formelles, etc. et en tant que telles, elles n'étaient pas aussi palatables. Cependant, les forces de ces considérations formelles sont clairement manifestes dans Javascript, particulièrement tel qu'implémenté dans le moteur Gecko de FF (c'est-à-dire .toSource()).

---

La définition d'objet pour Function est particulièrement satisfaisante car elle est définie comme une relation de récurrence ! définie en utilisant sa propre définition !

function Function() { [code natif] }
et comme une fonction est un Objet, le même sentiment s'applique à
function Object() { [code natif] }.

La plupart des autres définitions se terminent par une valeur terminale statique. Cependant, eval() est une primitive particulièrement puissante et donc une String peut également incorporer une fonctionnalité arbitraire.

Remarquez encore une fois que le langage utilisé ci-dessus obscurcit la distinction entre le type d'objet et l'instance.

Answer 4

Tout en JavaScript est un objet, en dehors des types primitifs.

Le code

var myArray = Array();

crée une instance de l'objet Array tandis que

var myObject = {'A': 'Athènes', 'B':'Berlin'};

crée une instance de l'objet Object.

Essayez le code suivant

alert(myArray.constructor)
alert(myObject.constructor)

Vous verrez donc la différence dans le type du constructeur d'objet.

L'instance de l'objet Array contiendra toutes les propriétés et méthodes du prototype Array.

Answer 5

La notation {} n'est qu'un sucre syntaxique pour rendre le code plus agréable ;-)

JavaScript a de nombreuses constructions similaires comme la construction de fonctions, où function() est juste un synonyme de

var Func = new Function("", "");