JavaScript: Jak wypełnić tablicę danymi?

Inicjacja tablicy

Potrzebujesz stworzyć tablicę wypełnioną danymi? Można to zrobić na kilka sposobów:

Sposób 1: Metoda fill

Klasa Array udostępnia nam metodę fill:

const n = 5;
const array = Array(n).fill(0);
console.log(array); // [0, 0, 0, 0, 0]

Możemy też stworzyć tablicę obiektów:

const n = 3;
const array = Array(n).fill({ value: 0 });
console.log(array); // [{ value: 0 }, { value: 0 }, { value: 0 }]

Tylko tutaj mamy mały problem:

array[1].value = 7;
console.log(array); // [{ value: 7 }, { value: 7 }, { value: 7 }]

Została zmieniona wartość drugiego elementu, ale jak widać druga linijka, pokazuje nam, że zmieniła się wartość dla wszystkich elementów tablicy!

Dlaczego tak się dzieje? Metoda fill tworzy jedną instancję obiektu i wypełnia nią tablicę n-razy.

Sposób 2: Metoda from

Powyższy problem możemy rozwiązać za pomocą metody from również z klasy Array:

const n = 3;
const array = Array.from(Array(n), () => ({ value: 0 }));
console.log(array); // [{ value: 0 }, { value: 0 }, { value: 0 }]

array[1].value = 7;

console.log(array); // [{ value: 0 }, { value: 7 }, { value: 0 }]

Sposób 3: Metoda map

Ale nie tak:

const n = 3;
const array = Array(n).map(() => ({ value: 0 }));
console.log(array); // [3 empty slots]

Hmm nie to chcieliśmy osiągnąć. Pusta tablica?!

Zapis:

Array(n)

Tworzy pustą tablicę. Druga rzecz to metoda map nie iteruje po pustej tablicy.

Ten problem możemy rozwiązać za pomocą operatora spread:

[...Array(3)] // [undefined, undefined, undefined]

Taki zapis stworzy tablicę wypełnioną n-razy za pomocą undefined

Ostateczny przykład:

const n = 3;
const array = [...Array(n)].map(() => ({ value: 0 }));
console.log(array); // [{ value: 0 }, { value: 0 }, { value: 0 }]

array[1].value = 7;

console.log(array); // [{ value: 0 }, { value: 7 }, { value: 0 }]