JavaScript Array.from()

Ten artykuł przybliży Ci działanie metody Array.from().

Do czedo służy Array.from()?

Metoda Array.from() pozwoli Ci stworzyć nowy obiekt tablicy z pewnego rodzaju obiektu lub sekwencji obiektów, które mogą być iterowane (np. obiektów z pętlami for...of lub Arguments obiekt).

W skrócie: Metoda Array.from() służy do tworzenia obiektów Array (tablic) z innych obiektów, które nie są tablicami. Dzięki temu nowy obiekt posiada wszystkie metody dostępne dla obiektów tablicowych.

Jaka jest składnia Array.from()?

Składnia metody Array.from() wygląda następująco:

Array.from(arrayLike[, mapFn[, thisArg]])

Gdzie:

• arrayLike: obiekt, który ma być przekonwertowany na tablicę
• mapFn (opcjonalne): funkcja, która jest wywoływana dla każdego elementu tablicy
• thisArg (opcjonalne): obiekt, który ma być użyty jako this w funkcji mapFn

Przykład użycia Array.from() w kodzie JS

Poświęć 10 minut na analizę poniższego kodu i postaraj się zrozumieć jego działanie. Dzięki częstej analizie kodu staniesz się lepszy w tym pasjonującym zajęciu jakim jest programowanie.

// Tworzenie tablicy z obiektu z pętlami for...of
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const arr = Array.from(arrayLike);
console.log(arr); // ['a', 'b', 'c']

// Tworzenie tablicy z obiektu Arguments
function foo() {
  const arr = Array.from(arguments);
  console.log(arr); // ['a', 'b', 'c']
}
foo('a', 'b', 'c');

// Tworzenie tablicy z obiektu HTMLCollection
const collection = document.getElementsByTagName('div');
const arr = Array.from(collection);
console.log(arr); // [div, div, ...]

// Zastosowanie mapFn do każdego elementu tablicy
const arr = Array.from([1, 2, 3], x => x + x);
console.log(arr); // [2, 4, 6]

// Użycie thisArg jako this w mapFn
const thisArg = {};
const arr = Array.from([1, 2, 3], function (x) {
  return this.test + x;
}, thisArg);
console.log(arr); // [1, 2, 3]

Podsumowanie

Metoda Array.from() jest przydatna, ponieważ pozwala na łatwe i wygodne tworzenie nowych tablic z różnych rodzajów obiektów, bez konieczności ręcznego iterowania przez każdy element i dodawania go do nowej tablicy.

Jest to szczególnie przydatne, gdy chcesz skonwertować obiekt z pętlami for...of lub Arguments obiekt na tablicę, ponieważ te obiekty nie dziedziczą bezpośrednio po konstruktorze Array, więc nie można ich używać jako tablicy „z klasy”.

Czym są arguments w JavaScript? (treść w języku angielskim)