Discussion :

[pierrot10]

Bonjour,
Je vous prie de m'excuser si ma question est bête et null et même si je connais la réponse, mais dans le doute je la pose.

Je construis une array doit voici ce que m'affiche
console.log()

sensor: Object [ <3 empty slots>, […] ]

Est-ce que c'est une signer d'erreur ou de warning.

La raison est que mon array ne commence pas par zero mais par 3

sensor: […]
3: […]
5: 6.746
6: 11.56
7: 12.21

https://www.w3schools.com/js/js_arrays.asp

Adding elements with high indexes can create undefined "holes" in an array:

A mon avis, ce n'est interdit, mais si je fais une loop sur cette array, j'aurai " des trous". Mais ca me met dans le doute, si javascript ... le permets

Cordialement

[psychadelic]

le prmier indice des tableau commence bien à zéro (toujours)

Mais ce n'est pas autant qu'il "doit" être toujours "intégralement" rempli...

un exemple plutôt que milles mots :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
var tbl = [];
tbl[1] = "Doe";
tbl[2] = "zim"; 
tbl[45] = "quatre cinq"; 
 
console.log( 'taille tableau = ' + tbl.length );
 
for (var item in tbl ) {
  console.log( item + '--> ' + tbl[item]);
}

donne comme retour :

taille tableau = 46
1--> Doe
2--> zim
45--> quatre cinq

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

console.log(' 15--> ' + tbl[15]);

donne

15--> undefined

[Beginner.]

Salut,

Je construis une array doit voici ce que m'affiche
console.log()



Est-ce que c'est une signer d'erreur ou de warning.

La raison est que mon array ne commence pas par zero mais par 3

Es-tu sûr que c'est une array ? Il semblerait que ce soit un objet qui est appelé par certains "tableau associatif" puisque tu as le message : sensor: Object [ <3 empty slots>, […] ] a moins que tu utilises un navigateur spécial car moi quand j'ai une array il me met sur Chrome "Array(X)" et non "Objet"...

EDIT : sur FF il met : […]

EDIT2 : FF met ça ([…]) même pour un objet !!! Pour faire la différence il faut regarder : __proto__

-----> +1 pour Chrome !!!

[Invité]

Saperlipopette !

Je viens seulement de capter que array.length ne renvoie pas le nombre d'éléments d'un array !!

Pour ça, je n'ai pas trouvé de fonction native (comme count en PHP). (??)

Du coup, il faut en écrire une :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function arrCount( tbl )
{
  var count = 0;
  if( tbl.length )
  {
      for (var ii in tbl ) {
         count++;
      }
   }
   return count;
}

Ici, tbl.length sert juste à vérifier qu'il existe (pas 0)

N.B.

le prmier indice des tableau commence bien à zéro (toujours)...

Ben non, un array ne commence pas forcément à l'indice 0 : ton exemple le prouve.

[danielhagnoul]

Saperlipopette !

Je viens seulement de capter que array.length ne renvoie pas le nombre d'éléments d'un array !!

Faux, le nombre d'éléments d'un Array est bien donné par length ! Mais chaque élément peut être vide ou contenir une donnée (texte, nombre, Array, Object).

Ta fonction est erronée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// constructon d'un Array avec 51 éléments dont 3 remplis !	
let arT = Array.from( new Array ( 51 ), ( item, i ) => {
	if ( i % 25 === 0 ){
		return i;
	}
});
 
klog( arT ); // voir ci-dessous
klog( arT.length ); // 51
 
{ // @jreaux, erreur count === length !
	function arCount( tbl ){
		let
			count = 0;
 
		if ( tbl.length ){
			for ( let ii in tbl ){
				 count++;
			}
	 }
 
	 return count;
	}
 
	klog( arCount( arT ) ); // 51 !
}
 
{ // count correct et newAr
	function arCount( tbl ){
		let
			count = 0,
			newAr = [];
 
		for ( const item of tbl ){
			if ( item || item === 0 ){
				count++;
				newAr.push( item );
			}
		}
 
	 return [ count, newAr ];
	}
 
	klog( arCount( arT )[0] ); // 3 
	klog( arCount( arT )[1] ); // 0, 25, 50
}
 
/*
 * 0,,,,,,,,,,,,,,,,,,,,,,,,,25,,,,,,,,,,,,,,,,,,,,,,,,,50
 * 51
 * 51
 * 3
 * 0,25,50
 */

[Invité]

@danielhagnoul
Ce que tu dis est de la poudre de perlimpinpin !

Et sans vouloir te vexer...
Tes exemples de code sont toujours inutilement compliqués et difficiles à lire / comprendre.... (sauf pour les initiés, dont je ne fais pas partie)
Et klog ? (une fonction à toi ? console.log est trop long à écrire ?)...


Si je reprends l'exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var tbl = [];
tbl[1] = "Doe";
tbl[2] = "zim"; 
tbl[45] = "quatre cinq"; 
 
console.log( 'taille tableau = ' + tbl.length );
console.log( 'nombre d\'éléments = ' + arrCount( tbl ) );
 
function arrCount( tbl )
{
  var count = 0;
  if( tbl.length )
  {
      for (var ii in tbl ) {
         count++;
      }
   }
   return count;
}

donne comme retour :

taille tableau = 46
nombre d'éléments = 3

Or on n'a que 3 éléments définis.
Pas 46.

• array.length

On peut lire :

...Vous pouvez modifier la propriété length d'un tableau à loisir ...
...
...De ce fait, la propriété length d'un tableau ne renseigne en rien sur le nombre de valeurs définies dans le tableau...

• length, propriété (Array) (JavaScript)

Obtient ou définit la longueur du tableau. Il s'agit d'un nombre avec une unité de plus que l'élément le plus élevé défini dans un tableau.
...
Remarques
En JavaScript, les tableaux sont fragmentés et les éléments d'un tableau ne doivent pas être* contigus. La propriété length n'est pas nécessairement le nombre d'éléments du tableau.

* "ne sont pas obligés d'être" ("do not have to be" en version originale)

[Invité]

En continuant les tests... (c'est là ou je DETESTE JavaScript)

Quand les index ne sont pas (tous) numériques :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var tbl = [];
tbl['a'] = "Doe";
tbl[36] = "zim"; 
tbl['z'] = "quatre cinq";

taille tableau = 37
nombre d'éléments = 3

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var tbl = [];
tbl['a'] = "Doe";
tbl['c'] = "zim"; 
tbl['z'] = "quatre cinq";

taille tableau = 0
nombre d'éléments = 0

C'est QUOI ce binzz !?!?!

Là, c'est vraiment inique...

[NoSmoking]

Bonjour,

Faux, le nombre d'éléments d'un Array est bien donné par length ! Mais chaque élément peut être vide ou contenir une donnée (texte, nombre, Array, Object).

Ecoutez la voix de la sagesse

Il semblerait que ce soit un objet qui est appelé par certains "tableau associatif" ...

les tableaux associatifs sont une vue de l'esprit et n'existe pas en javascript comme c'est le cas en PHP.

La raison de ce binzz est sans doute historique : à la naissance de JavaScript il ne devait exister que de "vrais tableaux", mais par la suite [j'imagine] avec la logique de l'implémentation du prototypage d'objets dans JavaScript, il y avait un peu double emploi entre les vrai et faux tableaux et ils ont en quelque sorte fusionné pour simplifier le travail sur les interpréteurs...

Non c'est n'importe quoi, en javascript tout est objet donc on a des « Array Objects » et des « Object Objects » et ce depuis le début comme le montre cette édition de Standard ECMA-262 de June 1997.

Souvent l'ambiguïté vient de l'écriture qui pour un « Object Objects » peut être obj.propriete ou obj[propriete].

La propriété length n'existe pas pour les « Object Objects » contrairement au « Array Objects ».

Avec « Array Objects » :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var tab = [ 'zero', 'un', 'deux'];
// pour y accéder il faut une écriture du type
alert(tab[0]) // >> zero
// dans ce cas la propriété length existe
alert(tab.length) // >> 3

avec « Object Objects » :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var obj = { 0: 'zero', 1: 'un', 2: 'deux'};
// pour y accéder on peut utiliser une écriture du type, entre autres
alert(obj[0]) // >> zero
// dans ce cas la propriété length, n'existe pas.
alert(obj.length) // >> undefined

Il existe quand même des choses surprenantes lorsque l'on fait du mixage (fortement déconseillé)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var arr = [  'zero', 'un', 'deux'];
alert(arr.length) // >> 3
// ajout d'un élément
arr['trois'] = 'trois';
alert(arr['trois']) // >> trois
alert(arr.length) // >> 3 et non 4
alert(JSON.stringify(arr)); // >> surprise

[psychadelic]

Saperlipopette !

le premier indice des tableaux commence bien à zéro (toujours)

N.B.
Ben non, un array ne commence pas forcément à l'indice 0 : ton exemple le prouve.

Heu, comment le dire autrement...
, Tableau_X.length ==> renvoi le nombre d'indices possibles sur "Tableau_X" ; le premier indice utilisable est égal à zéro, (pas à -15 [par exemple] )

mais cela ne signifie pas pour autant qu'il soit utilisé

Mais ce n'est pas autant qu'il "doit" être toujours "intégralement" rempli...

[Invité]

Heu, comment le dire autrement... Ben encore "non"...
Les différents exemples montrent que les indices peuvent aussi être autre chose que des numériques... et à fortiori pas forcément d'indice "zéro" en vue...

J'ai donné des liens. Il suffit de lire les définitions...

Si on continue les tests :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
var tbl = [];
tbl['a'] = "Doe";
tbl[23] = "zim"; 
tbl['b52'] = "boum"; 
tbl[14] = "carbone"; 
tbl['zzz'] = "badaboum"; 
 
 
for (var item in tbl ) {
  console.log( item + '--> ' + tbl[item]);
}

On obtient :

• 14--> carbone
• 23--> zim
• a--> Doe
• b52--> boum
• zzz--> badaboum

On constate que les indices numériques s'affiche AVANT les indices alphanumériques !
Intéressant...., non ?

(et toujours PAS d'indice "zéro" en vue...)

[psychadelic]

Heu, comment le dire autrement... Ben encore "non"...
Les différents exemples montrent que les indices peuvent aussi être autre chose que des numériques... et à fortiori pas forcément d'indice "zéro" en vue...
(et toujours PAS d'indice "zéro" en vue...)

relis moi mieux stp :

, Tableau_X.length ==> renvoi le nombre d'indices possibles sur "Tableau_X" ; le premier indice utilisable est égal à zéro, (pas à -15 [par exemple] )

[Beginner.]

Je n'ai pas encore tout lu mais je réagis par rapport au dernier message :

Les différents exemples montrent que les indices peuvent aussi être autre chose que des numériques... et à fortiori pas forcément d'indice "zéro" en vue...

Oui les indices peuvent être autres choses que des nombres et dans ce cas certains parlent de tableaux associatifs et d'autres n'aiment pas ce terme et disent que ce sont des objets. Je trouve que la frontière entre tableau et objet n'est pas toujours clair en JS (oui oui je sais on va me dire qu'un tableau c'est un objet mais bon vous voyez ce que je veux dire...).

Après pour moi un vrai tableau ses indices doivent être tous numériques après si ce n'est plus le cas ou si il a des "trous" je crois que son usage devient plus lent (j'ai un doute mais dans ce cas je crois qu'il n'est plus vraiment considéré comme un tableau du point de vue de son traitement d'où la perte de vitesse...).

[Watilin]

Pour votre bon plaisir, j’ai épluché la spec
Dans la version 2017, c’est à la section 9.4.2 :

Every Array object has a length property whose value is always a nonnegative integer less than 2³². The value of the length property is numerically greater than the name of every own property whose name is an array index; whenever an own property of an Array object is created or changed, other properties are adjusted as necessary to maintain this invariant. Specifically, whenever an own property is added whose name is an array index, the value of the length property is changed, if necessary, to be one more than the numeric value of that array index; and whenever the value of the length property is changed, every own property whose name is an array index whose value is not smaller than the new length is deleted.

Ça dit de manière plus détaillée ce qui est dit dans le lien MDN que jreaux62 a donné.

Tout objet Array a une propriété length dont la valeur est toujours un entier non négatif inférieur à 2³². La valeur de la propriété length est numériquement plus grande que le nom de toute propriété propre dont le nom est un index de tableau ; quand une propriété propre d’un objet Array est crée ou changée, les autres propriétés sont ajustées si nécessaire pour maintenir cet invariant. En particulier, quand une propriété propre est ajoutée dont le nom est un index de tableau, la valeur de la propriété length est changée, si nécessaire, pour être un de plus que la valeur numérique de cet index de tableau ; et quand la valeur de la propriété length est changée, chaque propriété propre dont le nom est un index de tableau dont la valeur n’est pas inférieur à la nouvelle longueur est supprimée.

Concrètement, ça veut dire en gros deux choses.
Primo, on peut avoir un tableau contenant un seul élément à l’index 9000, la longueur du tableau sera 9001.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var tableau = [];
tableau[9000] = "bidule";
console.log(tableau.length); // 9001

Secundo, s’il nous vient l’idée saugrenue de modifiier la propriété length (perso j’ai longtemps cru qu’elle était en lecture seule), ça tronque le tableau, ce qui peut être source de calvitie précoce si on n’est pas prévenu.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var tableau = [ "a", "b", "c", "d", "e", "f" ];
tableau.length = 3;
console.log(tableau); // [ "a", "b", "c" ]

On voit aussi ressortir l’idée que les propriétés qui ne sont pas des index ne sont pas prises en compte. C’est précisé dans le paragraphe qui vient juste après dans la spec :

Array exotic objects provide an alternative definition for the [[DefineOwnProperty]] internal method.
Except for that internal method, Array exotic objects provide all of the other essential internal methods as specified in 9.1.

Les objets exotiques Array fournissent une définition alternative pour la méthode interne [[DefineOwnProperty]].
À l’exception de cette méthode interne, les objets exotiques Array fournissent toutes les autres méthodes internes essentielles comme spécifié en 9.1.

(La notion d’« index » est définie à la section 6.1.7, c’est une chaîne numérique dont la valeur doit être comprise entre 0 et 2³² - 1.)

Plus clairement, ça veut dire que si on utilise autre chose qu’un nombre (ou une chaîne à valeur numérique) comme index, le tableau va avoir le même comportement qu’un objet de base, et temporairement « oublier » qu’il est un tableau.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var objetDeBase = {};
objetDeBase[9000] = "bidule";
objetDeBase["reponse"] = 42;
console.log(objetDeBase); // Object { 9000: "bidule", reponse: 42 }

En fait, si on peut affecter des clés non numériques à un tableau en JavaScript, c’est seulement dû au fait qu’il hérite de Object, c’est purement accidentel. C’est trompeur par rapport à l’autre langage de script du Web historiquement célèbre, PHP, qui gère des tableaux dits associatifs. En JS, on se fait avoir car on s’attend à ce qu’il y ait de la magie là où il n’y en a pas.

Ce comportement d’objet de base explique aussi ce qui se passe avec les index négatifs. Comme expliqué dans la doc de Array, la notation crochet n’est pas inhérente aux tableaux, c’est une façon d’accéder à une propriété d’objet qui ne collerait pas avec la syntaxe de JS autrement. En réalité, l’expression entre les crochets est d’abord convertie en chaîne.

C’est d’ailleurs ce que dit la spec quand elle parle de nom de propriété. Ça veut dire qu’en fait, on passe un nombre, qui est d’abord converti en chaîne, puis re-converti en nombre… Encore une fois, un bidouillage de conception qui fait que JS ressemble à C mais que c’est seulement une apparence.

Bref, tout ça pour dire que si on passe l’index -5, il est en réalité traité comme la chaîne "-5", et comme il ne répond pas au critère « entier non négatif », il n’est pas géré de façon spéciale par le tableau.

---

À propos des emplacements vides, je n’ai pas réussi à trouver où ça parle de ça dans la spec, mais je peux parler de ma propre expérience. Pour des raisons de performance, les implémentations peuvent choisir de représenter un tableau de manière « creuse » s’il a une grande taille mais contient en réalité peu d’éléments. Ça évite de faire de grosses allocations de mémoire. Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var tableau = [];
tableau[1] = "bidule";
tableau[9000] = "machin";
console.log(tableau.length); // 9001
console.log(tableau); // Array [ <1 empty slot>, "bidule", <8 empty slots>, … ]

Comme tu l’as vu, pierrot10, la console affiche des « empty slots » qui indiquent les éléments non initialisés. C’est différent de undefined, et je trouve que cette différence est souvent mal documentée, peut-être parce qu’avant ECMAScript 5 et les nouvelles méthodes de parcours de tableaux (map, forEach, etc.), elle n’avait aucun impact sur le comportement des scripts.

Si on itère sur un tableau « creux » de manière traditionnelle avec une bonne vieille boucle for :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
for (let i = 0; i < tableau.length; i++) {
  console.log(tableau[i]);
}

Évidemment, tous les index seront parcourus car c’est nous qui gérons la variable i.

La douteuse for..in itère sur les propriétés énumérables d’un objet — et j’insiste sur objet, elle n’est pas censée être utilisée pour parcourir un tableau. Mais par chance, les valeurs qu’on attribue à un tableau, quand on le fait de façon habituelle, sont énumérables ; et les emplacements vides ne le sont pas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
for (let prop in tableau) {
  console.log(prop, tableau[prop]);
}
// "1" "bidule"
// "9000" "machin"

Notez que les index, cette fois, sont restés sous forme de chaînes.

On le sait, for..in n’est pas fiable car elle prend aussi en compte les propriétés rajoutées dans la chaîne de prototypes. Si un script tiers étend le prototype de Array ou Object sans y prendre garde, on va se retrouver avec des propriétés parasites un peu partout et ça peut, encore une fois, faire prospérer le commerce des lotions capillaires. C’est pour cette raison que Protoype.js est mort et que jQuery vit toujours

Doksuri a mentionné la méthode Object.keys, c’est une alternative fiable à for..in : elle renvoie une liste des propriétés propres, c’est-à-dire les propriétés que l’objet possède lui-même et qui ne viennent pas du prototype. Cette liste est de type Array, elle a donc une propriété length, qui donne le nombre réel de propriétés de l’objet.

La plus récente boucle for..of, pour une raison que je n’ai pas précisément comprise (peut-être parce qu’elle est faite pour les objets itérables de manière générale, et pas seulement les tableaux), parcourt les emplacements vides. Donc attention si le tableau a une grande longueur, ça peut geler le script.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
for (let item of tableau) {
  console.log(item);
}
// undefined
// "bidule"
// undefined
// ...
// ...
// ...
// Error: Script terminated by timeout

C’est là qu’on voit que les emplacements vides sont en quelques sortes « convertis » en undefined quand ils sont pris en compte, ce qui est, quand on y pense, parfaitement logique.

Et enfin il y a les méthodes ES5 qui ne tiennent pas compte des emplacements vides, ce qui permet une plus grande efficacité avec les tableaux creux :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
tableau.forEach(function (item, index) {
  console.log(index, item);
});
// 1 "bidule"
// 9000 "machin"

Pour le cas de Array.from, j’ai l’intuition que c’est un peu la même chose que for..of : c’est fait pour tous les objets itérables, pas seulement les tableaux, donc ça tient compte des emplacements vides. C’est une technique pratique pour « gonfler » un tableau creux, mais du coup, attention à la taille du tableau.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
Array.from(tableau).forEach(function (item, index) {
  console.log(index, item);
});
// 0 undefined
// 1 "bidule"
// 2 undefined
// ...
// ...
// ...
// Error: Script terminated by timeout

Pour l’anecdote, j’ai testé tableau.join("-") et ça m’a renvoyé une chaîne de longueur supérieure à 9000 (over nine thousands, je suis sûr que vous l’attendiez tous ) sans broncher plus que ça. Donc j’imagine que les chaînes coûtent moins cher en performances que les tableaux, même si je ne sais pas ce qui se passe sous le capot pendant la conversion.

---

Encore une petite remarque à propos des emplacements vides : on peut en créer facilement lorsqu’on initialise un tableau avec ses éléments en une seule instruction, en ajoutant des virgules.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var fruits = [ , "pomme", "coing", , "rhubarbe" ];
console.log(fruits);

Ça permet entre autres de sauter l’indice zéro et d’avoir un tableau qui « fait semblant » de commencer à 1.
Attention cependant, il y a un piège : la dernière virgule n’est pas prise en compte, pour des raisons de permissivité de la syntaxe. Cette permissivité est bienvenue quand on déclare de grands tableaux sur plusieurs lignes, typiquement des tableaux d’options dans des fichiers de configuration. Malheureusement la syntaxe de JSON, qui se veut plus stricte, ne permet pas ça (ça s’applique aussi aux objets littéraux), ce qui mène à des erreurs fréquentes lorsqu’on veut insérer ou réordonner des lignes. C’était mon petit coup de gueule

Au final, pierrot10, je n’ai pas de réponse exacte à ta question. Les tableaux commencent à zéro en JS, on ne peut pas y faire grand chose, mais tu es libre d’utiliser les index que tu veux tant que tu sais ce que tu fais