ES6 Methods
ES6, który jest krótką formą ECMAScript 6, jest wersją JavaScript, która została wydana w czerwcu 2015 roku. Wygląda na to, że programiści, którzy utrzymują JavaScript, lubią mój miesiąc urodzenia, ponieważ właśnie wtedy wydano większość ich wersji.
Jeśli dopiero uczysz się JavaScript, ES6 znacznie ułatwi ci życie. Zapewnia nie tylko metody tablicowe, ale także takie rzeczy jak destrukturyzacja, funkcje strzałek, lepszy sposób pisania kodu zorientowanego obiektowo i modułowego, między innymi.
Większość z tych metod tablicowych ES6 przyjmuje funkcję wywołania zwrotnego, a w rezultacie są one nazywane metodami tablicowymi wyższego rzędu. Funkcje strzałek są bardzo powszechne w funkcjach wyższego rzędu, ponieważ upraszcza to nasz kod
Metoda map
Jeśli jest jakaś metoda tablicowa ES6, której będziesz używał prawie cały czas, to jest to ta metoda. Jest to moja najlepsza metoda tablicowa zarówno w JavaScript jak i Pythonie. Nawet jeśli niektórzy programiści JavaScript próbowali zaimplementować map
przed ES6, standardowa metoda map
została wprowadzona w JavaScript w ES6. W poniższym wycinku kodu zaimplementowałem map
na trzy sposoby:
- Używając zwykłych funkcji JavaScript: Tutaj przekazałem dwa argumenty do funkcji, pierwszy
item
, który jest elementem, na którym chcę coś zrobić, oraz opcjonalny argument,index
, który jest indeksem każdego elementu - Używanie funkcji strzałek: Również przekazałem dwa argumenty tak jak w pierwszym przykładzie, ale funkcja wywołania zwrotnego jest tutaj funkcją strzałki, co sprawia, że kod jest o wiele bardziej schludny.
- Użyłem również funkcji strzałki, ale przekazałem tylko jeden argument – element, na którym chcę iterować. Jest to przydatne, jeśli nie potrzebuję indeksu.
Metoda filtru
Metoda filter
jest kolejną metodą tablicową wyższego rzędu, z której powinieneś dziś korzystać. To co robi filter
jest proste. Biorąc pod uwagę tablicę elementów, chcemy zwrócić nową tablicę z początkowej tablicy, gdzie konkretny warunek jest true
. Funkcja wywołania zwrotnego musi zwrócić boolean, a element spełniający warunek jest tym, co znajdzie się w nowej tablicy.
Metoda reduce
To bardzo fajna metoda i chyba najtrudniejsza ze wszystkich, które do tej pory wymieniłem. To, co robi ta metoda, to użycie określonego wywołania zwrotnego do zmniejszenia tablicy. Na przykład, jeśli chcę znaleźć sumę wszystkich elementów w tablicy lub produkt wszystkich elementów w tablicy, ta metoda jest miłą metodą do użycia, zamiast pętli i inkrementacji początkowej sumy lub produktu.
Metoda forEach
Ta metoda jest podobna do metody map
, ale w tym przypadku nie zwraca nowej tablicy. Jest to bardziej zwykła pętla for
w JavaScript, ale w czystszy i bardziej zaawansowany sposób. Pobiera ona trzy parametry, jak mogłeś już wiedzieć. Pierwszy to element w tablicy, drugi to indeks elementu (który jest opcjonalny), a trzeci to obiekt tablicy, do którego należy bieżący element.
W poniższym fragmencie kodu użyłem forEach
do manipulowania obiektowym modelem dokumentu (DOM), co jest całkiem fajne. Mogę zaktualizować tablicę, a elementy listy renderowane na DOM zostaną automatycznie zmienione.
Metoda concat
Są przypadki, w których będziesz chciał połączyć lub scalić dwie lub więcej tablic razem. Wtedy ta funkcja będzie bardzo przydatna. Wywołanie concat
na dwóch tablicach daje nową tablicę, która składa się z dwóch połączonych tablic.
Metody every i some
Metody te są przydatne, jeśli chcesz wiedzieć, czy wszystkie elementy w tablicy spełniają warunek i czy niektóre elementy w tablicy spełniają warunek, odpowiednio.
Inne metody obejmują:
Metodę fill
Wypełnia każdy element tablicy wartością przekazaną jako parametr: .fill(1)
// .
Metoda entries
Sprawia, że tablica zachowuje się jak obiekt z parą klucz-wartość, gdzie klucz to indeks, a wartość to element.
Metoda find
Ta metoda zwraca pierwszy element w tablicy, który przejdzie test. Pobiera funkcję wywołania zwrotnego, która zwraca boolean.
Metoda splice
Metoda ta pobiera nieskończoną liczbę parametrów – pierwsze dwa to indeks, od którego chcesz zacząć wstawianie i usuwanie elementów oraz liczba elementów, które chcesz usunąć, odpowiednio – a pozostałe parametry to elementy, które chcesz dodać do tablicy. Zwraca tablicę usuniętych elementów i mutuje tablicę.
Metoda odwrotna
Metoda odwrotna odwraca tablicę. Zauważ, że mutuje ją, czyli zmienia tablicę zamiast tylko tworzyć jej kopię.
Metoda join
Ta metoda zamienia tablicę na ciąg znaków. Zauważ, że nie mutuje ona tablicy – po prostu tworzy jej kopię. Odwrotnością tej metody jest metoda split
, która zamienia łańcuch na tablicę. Przyjmuje ona łańcuch jako parametr, który będzie używany do łączenia każdego elementu tablicy.
Metoda płaska
Metoda flat
jest nową metodą, która została dodana w ES11 (ES11 zostało stworzone w czerwcu tego roku). Ta metoda spłaszcza tablicę.
Powiedzmy, że mamy tablicę, która zawiera tablicę i chcemy znaleźć sumę i produkt każdego elementu w tablicach wewnątrz tablicy. Chodzi mi o to, że jeśli mam tablicę, która jest zdefiniowana przez , ]
, suma powinna wynosić 10
, a produkt powinien wynosić 24
.
Jednym ze sposobów, aby to osiągnąć, jest zapętlenie przez początkową tablicę i zapętlenie każdego elementu i uzyskanie sumy i produktu.
Z ES6, mogę zapętlić się przez początkową tablicę i użyć metody reduce
, aby uzyskać sumę i produkt każdego elementu w głównej tablicy – używając tego, aby uzyskać całkowitą sumę i produkt. Ale z tablicą flat
mogę spłaszczyć główną tablicę, zwracając w ten sposób pojedynczą tablicę zawierającą tylko liczby, i mogę użyć na niej metody reduce
.
Metoda flatMap
Jest to połączenie flat
i map
. Mapuje ona każdy element tablicy do danej funkcji wywołania zwrotnego, a następnie spłaszcza wynikową tablicę.
Powiedzmy, że chcielibyśmy uzyskać kwadrat każdego elementu w niepłaskiej tablicy i chcielibyśmy ją spłaszczyć. Ta metoda ułatwi nam życie. W części gdzie użyłem metody flatMap
w poniższym snippecie kodu, pobiera ona element, który jest tablicą, a ja zwróciłem nową tablicę, która jest kwadratem elementów. I na koniec spłaszcza wynikową tablicę.
.