[ Leksykon ] [ JavaScript ] [ Tablice ] [ Metody ] [ Właściwości ] [ Array() ]

Array.from()

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

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

 

Przykłady:

console.log(Array.from('strona internetowa'));
// Array ["s", "t", "r", "o", "n", "a", " ", "i", "n", "t", "e", "r", "n", "e", "t", "o", "w", "a"]

  

console.log(Array.from([2, 4, 6], (x) => x + x));
// Array [4, 8, 12]

 

const poryroku = new Set(["lato", "jesień", "zima", "zima", "wiosna"]);
console.log(Array.from(poryroku));
// Array ["lato", "jesień", "zima", "wiosna"]

 

const mapa = new Map([
 [1, 1],
 [2, 2],
 [4, 4],
]);
console.log(Array.from(mapa));
// Array [Array [1, 1], Array [2, 2], Array [4, 4]]

const m = new Map([
 ["A", "a"],
 ["B", "b"],
]);
console.log(Array.from(m.values()));
// Array ["a", "b"]

console.log(Array.from(m.keys()));
// Array ["A", "B"]

 

// Utwórz tablicę w oparciu o właściwość elementów DOM
const obrazy = document.querySelectorAll("img");
const adres = Array.from(obrazy, (foto) => foto.src);
const niepewneAdresy = adres.filter((link) => link.startsWith("http://"));

 

function f() {
 return Array.from(arguments);
}
console.log(f(5, 10, 15));
Array [5, 10, 15]

 

// Używanie funkcji strzałkowej jako funkcji mapującej
// manipuluj elementami
console.log(Array.from([5, 10, 15], (x) => x + x));
// Array [10, 20, 30]

 

// Wygeneruj ciąg liczb
// Ponieważ tablica jest inicjalizowana wartością `undefined` na każdej pozycji,
// wartość `a` poniżej będzie `undefined`
console.log(Array.from({ length: 7 }, (a, i) => i));
// Array [0, 1, 2, 3, 4, 5, 6]

 

const range = (start, stop, step) =>
 Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);

// Generuj liczby z zakresu 0...4
console.log(range(0, 4, 1));
// [0, 1, 2, 3, 4]

// Generuj liczby z zakresu 1...10 z krokiem 3
console.log(range(1, 10, 3));
// [1, 3, 5, 7, 9]

// Wygeneruj alfabet za pomocą Array.from, korzystając z jego uporządkowania jako sekwencji
console.log(range("A".charCodeAt(0), "Z".charCodeAt(0), 1).map((x) =>
 String.fromCharCode(x),
));
// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

 

// Jeśli this wartość nie jest konstruktorem, Array zwracany jest zwykły obiekt
console.log(Array.from.call({}, { length: 1, 0: "jeden" })); 
// Array ["jeden"]

 

function NieTablica(test) {
 console.log("NieTablica wywoływana z długością", test);
}
// "NieTablica wywoływana z długością" undefined

console.log(Array.from.call(NieTablica, new Set(["jeden", "dwa", "trzy"])));
// NieTablica wywołana z niezdefiniowaną długością
// [object Object] { '0': 'jeden', '1': 'dwa', '2': 'trzy', length: 3 }

console.log(Array.from.call(NieTablica, { length: 1, 0: "jeden" }));
// NieTablica wywołana z długością 1
// [object Object] { '0': 'jeden', length: 1 }

 

Opis:
Metoda Array.from(). statyczna tworzy nową, płytko skopiowaną Array instancję z obiektu iterowalnego lub podobnego do tablicy. Pierwszy parametr obiekt iterowalny lub podobny do tablicy, który ma zostać przekonwertowany na tablicę. Drugi parametr opcjonalny to funkcja wywołująca każdy element tablicy. Jeśli zostanie podany, każda wartość, która ma zostać dodana do tablicy, jest najpierw przekazywana przez tę funkcję, a drugi parametr zamiast tego do tablicy dodawana jest wartość zwracana przez funkcję. Funkcja wywoływana jest z następującymi argumentami: Pierwszy argument to bieżący element przetwarzany w tablicy. Drugi argument to indeks bieżącego elementu przetwarzanego w tablicy. Trzeci parametr opcjonalny wartość, która ma być używana this podczas wykonywania drugiego parametru. Wartość zwracana to nowa Array instancja. Array.from() pozwala tworzyć tablice z: obiekty iterowalne. Obiekty takie jak Map i Set, lub, jeśli obiektu nie można iterować, obiekty tablicowe (obiekty z length właściwością i elementami indeksowanymi). Aby przekonwertować zwykły obiekt, którego nie można iterować ani nie przypomina tablicy, na tablicę (poprzez wyliczenie jego kluczy właściwości, wartości lub obu), użyj Object.keys(), Object.values() lub Object.entries(). Aby przekonwertować asynchroniczną iterację na tablicę, użyj Array.fromAsync(). Array.from() nigdy nie tworzy rzadkiej tablicy. Jeśli w pierwszym parametrze obiekcie brakuje niektórych właściwości indeksu, znajdą się one undefined w nowej tablicy. Array.from() posiada opcjonalny parametr drugi, który pozwala na wykonanie funkcji na każdym elemencie tworzonej tablicy, podobnie jak Array.map(). Mówiąc dokładniej, Array.from(obj, mapFn, thisArg) ma taki sam wynik jak Array.from(obj).map(mapFn, thisArg), z tą różnicą, że nie tworzy tablicy pośredniej, a mapFn otrzymuje tylko dwa argumenty (element, index) bez całej tablicy, ponieważ tablica jest wciąż w budowie. Uwaga: to zachowanie jest ważniejsze w przypadku tablic z określonym typem, ponieważ tablica pośrednia z konieczności będzie miała wartości obcięte, aby dopasować je do odpowiedniego typu. Array.from()j est zaimplementowany tak, aby miał taki sam podpis jak TypedArray.from(). Metoda ta Array.from() jest ogólną metodą fabryczną. Na przykład, jeśli podklasa dziedziczy Array metodę from(), odziedziczona from() metoda zwróci nowe instancje podklasy zamiast Array instancji. W rzeczywistości this wartością może być dowolna funkcja konstruktora, która akceptuje pojedynczy argument reprezentujący długość nowej tablicy. Kiedy iterowalna wartość jest przekazywana jako pierwszy parametr, konstruktor wywoływany jest bez argumentów; po przekazaniu obiektu tablicowego wywoływany jest konstruktor ze znormalizowaną długością obiektu tablicowego. Wartość końcowa length zostanie ustawiona ponownie po zakończeniu iteracji. Jeśli this wartość nie jest funkcją konstruktora, Array zamiast niej używany jest zwykły konstruktor.

Linki:
Object.keys()
Object.values()
Object.entries()
Array.fromAsync()
Array.map() - 
TypedArray.from()