La création de tableaux en JavaScript est une tâche fondamentale, mais il existe plusieurs nuances et pièges que même les développeurs expérimentés pourraient ignorer. Plongeons dans les bases et explorons quelques aspects intéressants de la création et de la manipulation de tableaux qui pourraient vous éclairer.

Création de tableaux de base

La façon la plus simple de créer un tableau consiste à utiliser des littéraux de tableau :

let arr = [];

Vous pouvez ensuite remplir ce tableau à l'aide d'une boucle :

for (let i = 0; i 



Cela crée un tableau avec des éléments [0, 1, 2, 3, 4]. Cependant, si vous créez un tableau vide sans le remplir, vous obtiendrez un tableau sans éléments ni emplacements vides.


  
  
  Utilisation du constructeur de tableau


Une autre façon de créer des tableaux consiste à utiliser le constructeur Array :



let arr = Array(5);




Lorsqu'un seul argument numérique est passé, il crée un tableau clairsemé avec la longueur spécifiée mais aucun élément réel :



console.log(arr.length); // 5
console.log(arr); // [empty × 5]





  
  
  Tableaux clairsemés


Les tableaux clairsemés ont des « emplacements vides », ce qui peut entraîner un comportement inattendu lors de l'utilisation de méthodes telles que map, filter ou forEach. Ces méthodes ignorent les emplacements vides :



let arr = Array(5);
arr = arr.map((x, i) => i); // Still [empty × 5]




Pour remplir un tel tableau, vous devez définir manuellement les valeurs :



arr[0] = 2;
arr[4] = 3;
console.log(arr); // [2, empty × 3, 3]





  
  
  Gestion des tableaux clairsemés


Pour gérer efficacement les tableaux clairsemés, vous pouvez utiliser des méthodes telles que fill pour initialiser les valeurs :



let arr = Array(5).fill(1);
console.log(arr); // [1, 1, 1, 1, 1]




Mais soyez prudent lorsque vous remplissez des objets ou des tableaux :



let arr = Array(5).fill({});
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}]




Chaque élément fait référence au même objet. Pour éviter cela, utilisez map :



let arr = Array(5).fill(0).map(() => ({}));
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {}, {}, {}, {}]





  
  
  Méthode Array.from


Array.from fournit un moyen polyvalent de créer des tableaux à partir d'objets de type tableau ou itérables :



let arr = Array.from({ length: 5 }, (_, i) => i);
console.log(arr); // [0, 1, 2, 3, 4]




Cette méthode peut également être utile lors de la création de tableaux bidimensionnels :



let arr2D = Array.from({ length: 5 }, () => Array(5).fill(0));
arr2D[0][0] = 1;
console.log(arr2D); // [[1, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0]]





  
  
  Itérer sur des tableaux


JavaScript propose plusieurs méthodes pour parcourir les tableaux, chacune traitant différemment les tableaux clairsemés :

• boucle for : traite chaque index, en traitant les emplacements vides comme indéfinis.
• for...in : parcourt les indices du tableau, en ignorant les emplacements vides.
• for...of : itère sur les valeurs, traitant les emplacements vides comme indéfinis.

Conclusion

Comprendre les subtilités de la création et de la manipulation de tableaux en JavaScript peut vous aider à éviter les pièges courants et à écrire un code plus efficace. Que vous utilisiez des littéraux de tableau, le constructeur Array ou des méthodes comme Array.from et fill, connaître le fonctionnement de ces outils vous permettra de gérer efficacement les tableaux dans vos projets.

Si vous avez trouvé ce guide utile, faites-le-moi savoir. Je suis toujours désireux de créer davantage de contenu qui approfondit les rouages ​​de JavaScript. Merci d'avoir lu et bon codage !