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

Les deux extraits de code différents 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 tous les deux de la même manière, et aussi typeof(myArray) == typeof(myObjects)(tous deux donnent «objet»).

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

Pratiquement tout en javascript est un objet, vous pouvez donc "abuser" d'un objet Array en définissant des propriétés arbitraires dessus. Cela devrait cependant être considéré comme nocif . Les tableaux sont destinés aux données indexées numériquement - pour les clés non numériques, utilisez un objet.

Voici un exemple plus concret de la raison pour laquelle les touches non numériques ne «correspondent» pas à un tableau:

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

alert(myArray.length);

Cela n'affichera pas «2», mais «0» - effectivement, aucun élément n'a été ajouté au tableau, juste quelques nouvelles propriétés ajoutées à l'objet tableau.

Dans les tableaux JS se trouvent des objets, juste 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 

Je pense, moi trop métaphorique et cryptique avec la réponse précédente. Une clarification suit.

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

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

affiche

0
indéfini

Intrinsèquement, l'interpréteur FF Gecko fait également la distinction entre les tableaux et les objets génériques avec des différences distinctes évaluant les 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() forgot me! \n\n"+
    ra.length     +"\t and my length! \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);

affichage

un deux trois

[objet Objet]

["un deux trois"]

4 .toSource () m'a oublié! 

3 et ma longueur! 

({0: "un", 1: "deux", 2: "trois", a: 4})

et 0 1 2 aet 0 1 2 a.

Concernant l'affirmation selon laquelle 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ù objest un type autre que Function, donc un objet arbitraire INSTANCE n'est pas a Function. Cependant, étant donné un objet objet son type comme Array, Boolean, Date, ..., comment est-il objarrivé à être en tant que 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 functiondéfinition, d'où l'affirmation que tous les objets sont des fonctions! (La ironie est que j'ai intentionnellement obscurci et brouillé la distinction d'une instance d'objet avec celle de son type! Pourtant, cela montre "vous ne pouvez pas avoir l'un sans l'autre", Objet et fonction! La capitalisation met l'accent sur le type comme opposé à l'instance.)

Un paradigme fonctionnel et un paradigme d'objet semblent être fondamentaux pour la programmation et la mise en œuvre des primitives intégrées de bas niveau de l'interpréteur JS, telles que Mathet JSONet true.

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

affiche

[object Math]

[object JSON]

(new Boolean(true))

Au moment du développement de Javascript, un style de programmation orienté objet (POO - Object Oriented Programming style - le "s" est mon propre jeu de mots!) Était en vogue et l'interpréteur a été baptisé de la même manière avec Java pour lui donner une plus grande crédibilité . Les techniques de programmation fonctionnelle ont été reléguées à des examens plus abstraits et ésotériques étudiant les théories des automates, des fonctions récursives, des langages formels, etc. et, en tant que telles, ne sont pas acceptables. Cependant, les points forts de ces considérations formelles sont clairement manifestes dans Javascript, en particulier tel qu'implémenté dans le moteur Gecko de FF (ie. .toSource()).

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

function Function() { [native code] }
et comme une fonction est un objet, le même sentiment vaut
function Object() { [native code] }.

La plupart des autres définitions sont suspendues à une valeur terminale statique. Cependant, eval()est une primitive particulièrement puissante et donc une chaîne peut également intégrer des fonctionnalités arbitraires.

Notez encore une fois, le vernaculaire utilisé ci-dessus obscurcit le type d'objet et la distinction d'instance.

Tout en JavaScript est un objet en plus des types primitifs.

Le code

var myArray = Array();

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

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

crée une instance de l'objet Object.

Essayez le code suivant

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

Vous verrez donc que la différence réside dans le type de constructeur d'objet.

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

La différence entre les tableaux et les autres objets en JavaScript. Alors que les tableaux ont une propriété de longueur mise à jour comme par magie, pour les objets autres que les tableaux, il n'y a aucun moyen d'implémenter une telle propriété.

var arrName = [];
arrName[5] = "test";
arrName.length; // <- 6

Les tableaux sont utilisés pour stocker des éléments avec un index ordinal - utilisez-le comme un tableau, une pile ou une file d'attente traditionnel. Un objet est un hachage - utilisez-le pour les données qui ont une clé distincte.

Vous pouvez ajouter des propriétés nommées à presque tout en javascript, mais cela ne signifie pas que vous devriez le faire. Arrayen javascript doit être utilisé comme une liste, si vous souhaitez utiliser un tableau associatif à la Objectplace.

Sachez que si vous voulez vraiment utiliser un Arrayavec des propriétés nommées au lieu de Objectces propriétés ne sera pas accessible dans une for...ofboucle et que vous pourriez également obtenir des résultats inattendus lorsque JSON l'encodage pour le transmettre. Voir l'exemple ci-dessous où tous les index non numériques sont ignorés:

let arr = [];
let obj = {};

arr['name'] = 'John';
obj['name'] = 'John';

console.log(arr);    // will output [name: "John"]
console.log(obj);    // will output {name: "John"}

JSON.stringify(arr); // will return [] <- not what you expected
JSON.stringify(obj); // will return {"name":"John"}

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

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

var Func = new Function("<params>", "<code>");