Ajouter une propriété à un tableau JavaScript

Question

Les tableaux ont une propriété "length" par défaut.

Puis-je leur ajouter des propriétés personnalisées ?

Sans avoir à en faire des objets.

Answer 1

var arr = [1,2,3,4,5];
arr.prop = 'valeur';

Les tableaux sont déjà des objets en JavaScript -- ils ont juste quelques fonctionnalités supplémentaires et une syntaxe littérale spéciale.

Answer 2

Comme le disent d'autres réponses, c'est parfaitement possible, car les tableaux en JavaScript ne sont que des objets. Cependant, il reste la question de savoir si c'est une bonne idée ou non.

C'est une question de "style de codage", donc c'est difficile à dire objectivement, mais Douglas Crockford n'y voit pas d'inconvénient (du moins dans certains cas). Dans JavaScript: The Good Parts, il utilise en fait l'exemple d'ajouter une méthode "total" à un tableau.

Parce qu'un tableau est vraiment un objet, nous pouvons ajouter des méthodes directement à un tableau individuel :

// Donner à l'array de données une fonction total

data.total = function () {
    return this.reduce(add, 0);
};

total = data.total();    // le total est de 108

Comme la chaîne 'total' n'est pas un entier, ajouter une propriété total à un tableau ne change pas sa longueur.

(p62, "JavaScript The Good Parts" de Crockford, trouvé sur Google Books)

Cependant, il convient de mentionner que ces propriétés supplémentaires ne sont pas incluses dans la sérialisation JSON, et seraient jetées si vous faites quelque chose comme arr = arr.slice(1);.

Answer 3

Si vous vouliez le cacher dans un tableau, etc. (c'est du moins ce que je cherchais) :

Object.defineProperty(targ, "myVal", { enumerable: false, writable: true } );

Ensuite, le tableau ne l'ajoute pas à sa longueur, donc c'est une propriété, pas une valeur je suppose.

Si vous souhaitez voir les clés dans un objet par exemple, Object.keys ne le verra pas, mais _Reflect.ownKeys()_ le fera.

La version Reflect de defineProperty renverra succès ou échec, tandis que celle de Object renvoie l'objet passé.

N'oubliez pas que _Reflect.preventExtensions()_ empêchera (comme son nom l'indique) de les étendre.

Answer 4

Les tableaux sont des objets et vous pouvez donc ajouter vos propres propriétés:

var arr = [1, 2, 3];
arr.foo = 'bar';

En prolongeant les autres réponses, voici les différentes façons d'itérer sur le tableau, en excluant les propriétés personnalisées.

1. Utilisation d'une boucle for standard

   for (let i = 0; i < arr_length; i++)
       console.log(arr[i]);

   ou si vous n'utilisez pas ES6:

   for (var i = 0; i < arr.length; i++)
       console.log(arr[i]);

2. Utilisation de la boucle for ...of (ES6+)

   for (let el of arr)
       console.log(el)

3. Utilisation de Array.prototype.forEach (ES6+)

   arr.forEach(el => console.log(el));

   ou

   arr.forEach(function(el) {
       console.log(el);
   });

Itérer sur le tableau, incluant toutes les propriétés (par exemple, les propriétés personnalisées, length):

for (let prop in arr)
    console.log(prop);

Ou si vous n'utilisez pas ES6:

for (var prop in arr)
    console.log(prop);

Answer 5

Oui. Vous pouvez les ajouter à l'objet en les déclarant simplement et vous pouvez également étendre Array en utilisant Array.prototype

var j = new Array();
j.yourprop = "foo";