Les pièges des tableaux en JavaScript

JavaScript a ses mauvais cotés, et les tableaux ont quelquefois des comportements inattendus.

Ajouter deux tableaux

var t1 = [ "a", "b" ]
var t2 = [ "c", "d" ]
var t3 = t1 + t2
document.write("t3 = " , t3)

Résultat, t3 = ["a", "bc", "d"] ???

On doit utiliser concat plutôt:

var t3 = t1.concat(t2)
document.write("t3 = " , t3)

Initialiser un tableau

var a = new Array(1)
var b = new Array(1, 2)
document.write(a)
document.write(b)

Le premier tableau est vide alors que le second contient [5,10]. Ce qu'on a fait en donnant 5 comme argument est de réserver l'emplacement pour 5 éléments dans un tableau vide.

On peut cependant initialiser un tableau avec une seule valeur s'il s'agit d'une chaîne de caractères. 

a = new Array("5")
document.write(a)

Scanner le contenu

Tous les langages possèdent une boucle de type for .. in, même C++ depuis la version 11. Il en va de même pour JavaScript. Mais son fonctionnement est inattendu. 

var a2 = [ "un", "deux", "trois"]
for(var x in a2) {
  document.write(x)
}

Cela affiche des numéros parce que cela retourne les clés, les noms des attributs, et les indices dans le cas d'un tableau simple, et non les valeurs. Si l'on ne veut pas attendre l'implémentation de for .. of à venir, on écrira:

for(var x in a2) {
  document.write(a2[x])
}

Mais une boucle classique sera plus rapide, comme on le montre dans le chapitre Scanner un tableau.

Savoir si deux tableaux sont identiques

On créé un tableau a:

var a = [1, 2]

On le compare avec son contenu (on un autre tableau avec le même contenu):

document.write(a == [1, 2])

Résultat: faux. Il n'est pas identique à lui-même!

Pour obtenir un résultat juste, il faut le transformer en chaîne:

document.write(a.join() == [1,2].join())

Maintenant le résultat est: vrai.

Comparer deux tableaux, encore

Soit les deux tableaux ci-dessous...

var a1=[4,5,6]
var a2=[1,2,3]

Le premier est-il inférieur au second? console.log(a1 < a2)

Est-il supérieur? console.log(a1 > a2)

Comparons ces deux autres tableaux. Le premier est-il inférieur au second?

var a1=[0,500,6000,10000]
var a2=[1,2,3]
document.write(a1 < a2)

Apparemment, seul le premier élément compte... Et si le premier élément est le même dans les deux tableaux, seul le second compte, et ainsi de suite...

Tableau associatif: comment l'ordonner?

Il n'y a pas vraiment de tableau associatif en JavaScript. On utilise un objet pour remplir ce rôle, les noms des attributs tenant le rôle de clés. Comme on l'a vu, on peut afficher la liste des clés avec la boucle for .. in. Mais comment mettre les clés en ordre alphabétique?
La fonction suivante produit ce résultat...

function ksort(ob) {            
  var k = Object.keys(ob)
  var cl = {}
  for(var i in ob) {
    cl[i] = ob[i]
    delete ob[i]
  }
  k.sort()
  for(var i = 0;i < k.length; i++) {
    ob[ k[i] ] = cl[ k[i] ]; 
  }
} 

var ad = { "z" : 50, "c" : 30, "a": 5 }
ksort(ad)
for (var x in ad) {
  document.write(x)
}

Ce que l'on a fait est créer un nouveau tableau avec les attributs du précédent, classer ce tableau, sauver les valeurs, effacer le contenu du premier tableau, et lui assigner chaque clé du nouveau tableau avec la valeur initiale. On a alors les attributs dans l'ordre alphabétique!

Avec ces pièges des tableaux, nous avons vu la moitié des bizarreries de JavaScript. L'autre moitié tient surtout dans les opérations sur booléens. Restent ensuite les bonnes parts, plus nombreuses que ce que l'on croit.

© 2014 Xul.fr