Ściąga z metod tablic w JavaScript (uruchom każdą na żywo) | We.Inc
Wpisz własną listę i zobacz, jak działają na niej map, filter, reduce, find, sort, splice i 30 innych metod tablic, z wyraźnym oznaczeniem każdej metody, która zmienia oryginalną tablicę.
Metody tablic dzielą się na dwa obozy. Jedne zmieniają tablicę, na której je wywołujesz, na przykład push, pop, splice, sort i reverse. Inne zwracają nową tablicę lub wartość i nie ruszają oryginału, na przykład map, filter, slice, toSorted i reduce. Edytuj poniższą listę, a każda metoda uruchomi się ponownie na Twoich wartościach.
Codzienne zadania na tablicach i metoda do każdego
Zadanie
Metoda
Zmienia oryginał?
Przekształć każdy element
arr.map(fn)
Nie
Zostaw elementy, które przechodzą test
arr.filter(fn)
Nie
Połącz w jedną wartość
arr.reduce(fn, start)
Nie
Pierwszy pasujący element
arr.find(fn)
Nie
Dodaj na koniec
arr.push(x)
Tak
Posortowana kopia
arr.toSorted(fn)
Nie
Policz elementy
Odczyt nie; ustawienie tak
Większość ściąg wymienia nazwy metod z jednym gotowym przykładem. Tutaj przykłady działają na liście, którą sam kontrolujesz, więc widzisz, co dzieje się przy duplikatach, pustej liście lub jednym elemencie. Każdy wiersz jest oznaczony, abyś od razu wiedział, czy metoda nadpisuje Twoje dane, co jest źródłem wielu błędów stanu w React i podobnych bibliotekach.
Wpisz w polu listę rozdzieloną przecinkami. Spacje wokół każdego elementu są usuwane.
Każdy wiersz przelicza się ponownie. Metody zmieniające tablicę działają za każdym razem na świeżej kopii, a wiersz pokazuje zarówno zwracaną wartość, jak i tablicę po operacji.
Filtruj po nazwie lub wybierz grupę, na przykład Wyszukiwanie lub Przekształcanie, aby zawęzić ściągę.
Przewiń w dół, aby zobaczyć przykłady łączenia metod, właściwość length i tabelę zamienników kopiujących.
W stanie React wybieraj toSorted, toReversed, toSpliced i with zamiast ich odpowiedników działających w miejscu, bo zmiana starej tablicy oznacza, że React może nie zauważyć aktualizacji.
Podawaj reduce wartość początkową. Bez niej pusta tablica rzuca TypeError.
forEach zawsze zwraca undefined i nie da się go zatrzymać przez break. Gdy musisz przerwać wcześniej, użyj for...of, some lub find.
map, filter i slice kopiują tylko jeden poziom w głąb. Obiekty w nowej tablicy to te same obiekty co wcześniej.
Najczęściej zadawane pytania
Jak sprawdzić długość tablicy w JavaScript?
Odczytaj arr.length. To właściwość, a nie metoda, więc nie ma nawiasów. Jest o jeden większa niż najwyższy indeks, co w zwykłych tablicach równa się liczbie elementów. Ustawienie arr.length = 0 opróżnia tablicę, a ustawienie mniejszej liczby obcina elementy z końca.
Czym różni się map od forEach?
map buduje nową tablicę z tego, co Twoja funkcja zwraca dla każdego elementu, więc możesz ją przypisać lub dołączyć kolejne metody. forEach tylko wywołuje Twoją funkcję i zwraca undefined. Używaj map, gdy chcesz wyniku, a forEach tylko do efektów ubocznych, takich jak logowanie.
Które metody tablic zmieniają oryginalną tablicę?
push, pop, shift, unshift, splice, sort, reverse, fill i copyWithin zmieniają tablicę w miejscu. Bezpośrednie ustawienie length lub indeksu również. Wszystkie pozostałe metody z tej ściągi zostawiają ją nietkniętą.
Jak usunąć element z tablicy bez jej zmieniania?
Użyj filter, aby usunąć po wartości, na przykład arr.filter((x) => x !== 'kiwi'), albo toSpliced(index, 1), aby usunąć po pozycji. Obie zwracają nową tablicę i zostawiają oryginał bez zmian.
Dlaczego map zwraca wartości undefined?
Twój callback niczego nie zwrócił. Funkcja strzałkowa z nawiasami klamrowymi wymaga jawnego return; napisz (x) => x * 2 lub (x) => { return x * 2; }. Brak return daje undefined w tym miejscu.
Czytanie łańcucha od lewej do prawej
Ponieważ metody kopiujące zwracają tablice, możesz wywołać kolejną metodę od razu na wyniku. Łańcuch taki jak orders.filter(isPaid).map(toTotal).reduce(add, 0) czyta się jak zdanie: zostaw opłacone zamówienia, zamień każde na liczbę, zsumuj je.
Długie łańcuchy łatwo się czyta, ale przechodzą przez listę raz na każdy krok. Przy kilku tysiącach elementów nie ma to znaczenia; przy bardzo dużych danych pojedyncza pętla for...of wykonująca wszystkie trzy zadania jest szybsza.
Metody wyszukiwania zwracają różne rzeczy
includes odpowiada tak lub nie. indexOf i findIndex podają pozycję, a -1 oznacza brak wyniku. find i findLast zwracają sam element albo undefined. some i every odpowiadają tak lub nie na pytanie o funkcję testującą.
includes i indexOf porównują ścisłą równością, więc nie znajdą obiektu po jego zawartości. Do tego użyj find lub some z funkcją testującą.
Metody zmieniające tablicę i ich kopiujące odpowiedniki
Gdy nie wolno Ci ruszać oryginału, na przykład stanu React lub argumentu funkcji, zamień lewą kolumnę na prawą.
W miejscu kontra kopia
Zmienia tablicę
Zamiast tego zwraca nową tablicę
arr.sort(fn)
arr.toSorted(fn)
arr.reverse()
arr.toReversed()
arr.splice(i, n, ...items)
arr.toSpliced(i, n, ...items)
arr[i] = value
arr.with(i, value)
arr.push(a, b)
[...arr, a, b] lub arr.concat([a, b])
arr.unshift(a)
[a, ...arr]
arr.pop()
arr.slice(0, -1)
arr.shift()
arr.slice(1)
Łączenie map, filter i reduce
Suma opłaconych zamówień w jednym łańcuchu
Każdy krok zwraca świeżą tablicę, więc następna metoda działa na niej. Oryginalna lista zamówień nigdy się nie zmienia.
Odczyt i ustawianie length
length to zwykła właściwość. Jej zmniejszenie usuwa elementy z końca, dlatego liczy się jako zmiana tablicy.
Aktualizacja stanu React bez mutacji
Metody kopiujące dają React nową tablicę, więc komponent renderuje się ponownie. Wywołanie sort lub push na tablicy stanu by tego nie zrobiło.
Ile jest elementów
Pierwszy element
Ostatni element, licząc od końca
true, jeśli wartość występuje
Pierwsza pozycja wartości lub -1
Ostatnia pozycja wartości lub -1
Pierwszy element, który przechodzi test
Pozycja pierwszego elementu, który przechodzi test
Ostatni element, który przechodzi test
true, jeśli przechodzi dowolny element
true, jeśli przechodzą wszystkie elementy
Nowa tablica z wynikami callbacku
Nowa tablica z elementami, które przeszły test
Zwija listę do jednej wartości
map, potem spłaszczenie o jeden poziom
Kopia pozycji 1 i 2
Nowa tablica z dodatkowymi elementami na końcu
Jeden string z separatorem
Posortowana kopia (kolejność tekstowa)
Odwrócona kopia
Kopia bez pozycji 1
Kopia z zastąpioną pozycją 0
Sortuje w miejscu i zwraca tę samą tablicę
Odwraca w miejscu
Dodaje na koniec, zwraca nową długość
Usuwa ostatni element i go zwraca
Dodaje na początek, zwraca nową długość
Usuwa pierwszy element i go zwraca
Usuwa od pozycji 1, zwraca usunięte elementy
Nadpisuje od pozycji 1 do końca
Kopiuje część tablicy na inną jej część
Iterator pozycji (tu rozwinięty, aby go pokazać)
Iterator par [pozycja, element]
Wszystkie
Odczyt
Wyszukiwanie
Przekształcanie
Kolejność
Dodawanie i usuwanie
Iteracja
Ściąga z metod tablic na żywo
Wpisz listę rozdzieloną przecinkami, a każda metoda poniżej uruchomi się na niej w trakcie edycji.