Pourquoi « Array.fill() » de JavaScript crée-t-il des références partagées au lieu de copies, et comment « Array.from() » peut-il résoudre ce problème ?

Array.fill() crée une copie cachée par références, pas par valeur

Lors de l'utilisation d'Array.fill en JavaScript, on peut rencontrer une situation où plusieurs tableaux internes dans une matrice faisant référence au même objet tableau sous-jacent. Cela peut entraîner un comportement inattendu lors de la tentative de modification d'éléments individuels.

Le problème

Par exemple, considérons l'extrait de code suivant :

let m = Array(6).fill(Array(12).fill(0));

Ce code vise à créer une matrice 6x12, où chaque élément est initialisé à 0. Cependant, il y a un problème subtil :

m[0][0] = 1;
console.log(m[1][0]); // Outputs 1 instead of 0

Après avoir défini m[0][0] à 1, nous nous attendons à ce que m[1][0] reste 0. Cependant, la console affiche 1. Cela est dû au fait que tous les tableaux internes font en fait référence au même objet tableau sous-jacent.

La solution : Array.from() à la rescousse

Pour résoudre ce problème et obtenir une véritable copie par valeur, on peut utiliser Array.from() :

let m = Array.from({length: 6}, e => Array(12).fill(0));

Cette approche crée un nouveau tableau pour chaque élément du tableau externe, garantissant que tous les tableaux internes sont des objets distincts. De ce fait, la modification d'un élément n'affectera pas les autres :

m[0][0] = 1;
console.log(m[0][0]); // Expecting 1
console.log(m[0][1]); // Expecting 0
console.log(m[1][0]); // Expecting 0

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!