Home-theater-designers
Twórcy stron internetowych na wszystkich poziomach umiejętności, od początkujących programistów po ekspertów od kodowania, dostrzegają znaczenie JavaScript w tworzeniu nowoczesnych stron internetowych. JavaScript jest tak dominujący, że jest to niezbędna umiejętność, aby wiedzieć, czy zamierzasz tworzyć aplikacje internetowe.
Jednym z najpotężniejszych bloków konstrukcyjnych wbudowanych w język JavaScript są tablice. Tablice są powszechnie spotykane w wielu językach programowania i są przydatne do przechowywania danych.
JavaScript zawiera również przydatne funkcje znane jako metody tablicowe. Oto piętnaście, którym powinieneś się przyjrzeć, aby rozwijać swoje umiejętności jako programista.
Jakie są metody macierzowe?
Metody tablicowe są funkcjami wbudowanymi w JavaScript, które można zastosować do swoich tablic. Każda metoda ma unikalną funkcję, która wykonuje zmiany lub obliczenia na tablicy, oszczędzając Ci konieczności kodowania typowych funkcji od podstaw.
Metody tablicowe w JavaScript są uruchamiane przy użyciu notacji kropkowej dołączonej do zmiennej tablicowej. Ponieważ są to tylko funkcje JavaScript, zawsze kończą się nawiasem, który może zawierać opcjonalne argumenty. Oto metoda dołączona do prostej tablicy o nazwie moja tablica .
let myArray = [1,2,3]; myArray.pop();Ten kod zastosuje metodę o nazwie Muzyka pop do tablicy.
Przykładowa tablica
Dla każdego przykładu użyj przykładowej tablicy, którą wywołamy moja tablica , aby wykonać metody. Zapraszam do podciągnięcia konsoli i kodu.
let myArray = [2,4,5,7,9,12,14];Te przykłady zakładają, że znasz podstawy czym jest i jak działa JavaScript . Jeśli nie, to w porządku, wszyscy jesteśmy tutaj, aby się uczyć i rozwijać.
Poznaj te piętnaście potężnych metod tablicowych!
1. Tablica.push()
Co to robi: naciskać() pobiera twoją tablicę i dodaje jeden lub więcej elementów na końcu tablicy, a następnie zwraca nową długość tablicy. Ta metoda zmodyfikuje twoją istniejącą tablicę.
Dodaj liczbę 20 do tablicy, uruchamiając naciskać() , używając 20 jako argumentu.
let myArray = [2,4,5,7,9,12,14];
myArray.push(20);Sprawdź, czy zadziałało:
console.log(myArray); [2,4,5,7,9,12,14,20]Prowadzenie naciskać() Metoda na myArray dodała do tablicy wartość podaną w argumencie. W tym przypadku 20. Gdy zaznaczysz myArray w konsoli, zobaczysz, że wartość jest teraz dodawana na końcu tablicy.
2. Tablica.concat()
Co to robi: concat() może scalić dwie lub więcej tablic w nową tablicę. Nie modyfikuje istniejących tablic, ale tworzy nową.
Brać moja tablica i scal tablicę o nazwie nowa tablica w tym.
let myArray = [2,4,5,7,9,12,14];
let newArray = [1,2,3];
let result = myArray.concat(newArray); console.log(result); [2,4,5,7,9,12,14,1,2,3]Ta metoda działa cuda, gdy mamy do czynienia z wieloma tablicami lub wartościami, które trzeba połączyć, a wszystko to w jednym dość prostym kroku przy użyciu zmiennych.
3. Tablica.join()
Co to robi: Przystąp() pobiera tablicę i łączy zawartość tablicy, oddzieloną przecinkiem. Wynik jest umieszczany w ciągu. Możesz określić separator, jeśli chcesz użyć alternatywy dla przecinka.
Zobacz, jak to działa za pomocą myArray. Najpierw użyj domyślnej metody bez argumentu separatora, która użyje przecinka.
let myArray = [2,4,5,7,9,12,14];
myArray.join(); '2,4,5,7,9,12,14'JavaScript wypisze ciąg znaków, z każdą wartością w tablicy oddzieloną przecinkiem. Możesz użyć argumentu w funkcji, aby zmienić separator. Obserwuj to z dwoma argumentami: pojedynczą spacją i łańcuchem.
myArray.join(' ');
'2 4 5 7 9 12 14' myArray.join(' and ');
'2 and 4 and 5 and 7 and 9 and 12 and 14'Pierwszym przykładem jest spacja, tworząca łańcuch, który można łatwo odczytać.
Drugi przykład używa (' oraz ') i są tu dwie rzeczy, o których warto wiedzieć.
Po pierwsze, używamy słowa „i” do oddzielenia wartości. Po drugie, po obu stronach słowa „i” jest spacja. Jest to ważna rzecz, o której należy pamiętać podczas używania Przystąp() . JavaScript czyta argumenty dosłownie; więc jeśli to miejsce zostanie pominięte, wszystko zostanie zgniecione razem (np. '2i4and5...' itd.) Niezbyt czytelne wyjście!
4. Tablica.forEach()
Co to robi: dla każdego() (z uwzględnieniem wielkości liter!) wykonuje funkcję na każdym elemencie w tablicy. Ta funkcja to dowolna funkcja, którą tworzysz, podobnie jak użycie pętli „for” do zastosowania funkcji do tablicy, ale przy znacznie mniejszym nakładzie pracy nad kodem.
Jest trochę więcej do dla każdego() ; spójrz na składnię, a następnie wykonaj prostą funkcję do zademonstrowania.
myArray.forEach(function(item){
//code
});
używamy moja tablica , dla każdego() jest stosowany z notacją kropkową. Umieszczasz funkcję, której chcesz użyć, wewnątrz nawiasu argumentu, czyli funkcja (pozycja) w przykładzie.
Spojrzeć na funkcja (pozycja) . Jest to funkcja wykonywana wewnątrz funkcji forEach() i ma swój własny argument. Nazywamy kłótnię przedmiot . Na temat tego argumentu należy wiedzieć dwie rzeczy:
- Gdy forEach() zapętla się nad twoją tablicą, stosuje kod do tego argumentu. Pomyśl o tym jako o tymczasowej zmiennej, która przechowuje bieżący element.
- Ty wybierasz nazwę argumentu, może on mieć dowolną nazwę. Zazwyczaj jest to nazwane czymś, co ułatwia zrozumienie, na przykład „przedmiot” lub „element”.
Mając na uwadze te dwie rzeczy, sprawdź ten prosty przykład. Dodaj 15 do każdej wartości, a konsola pokaże wynik.
myArray.forEach(function(item){
console.log(item + 15);
});
używamy przedmiot w tym przykładzie jako zmienna, więc funkcja jest napisana, aby dodać 15 do każdej wartości poprzez przedmiot . Konsola następnie drukuje wyniki. Oto jak to wygląda w konsoli Google Chrome.
Wynikiem jest każda liczba w tablicy, ale z dodanymi 15!
5. Tablica.map ()
Co to robi: mapa() wykonuje funkcję na każdym elemencie w tablicy i umieszcza wynik w nowej tablicy.
Uruchomienie funkcji na każdym elemencie brzmi jak forEach(). Różnica polega na tym, że mapa() po uruchomieniu tworzy nową tablicę. forEach() nie tworzy nowej tablicy automatycznie, w tym celu musiałbyś zakodować określoną funkcję.
Użyj map(), aby podwoić wartość każdego elementu w myArray i umieścić je w nowej tablicy. Zobaczysz to samo funkcja (pozycja) składnia dla trochę więcej praktyki.
let myArray = [2,4,5,7,9,12,14]; let doubleArray = myArray.map(function(item){
return item * 2;
});Sprawdź wyniki w konsoli.
console.log(doubleArray); [4,8,10,14,18,24,28]moja tablica pozostaje bez zmian:
console.log(myArray); [2,4,5,7,9,12,14]6. Tablica.unshift()
Do czego służy: podobnie jak działa metoda push(), unshift() Metoda pobiera twoją tablicę i dodaje jeden lub więcej elementów na początku tablicy zamiast na końcu i zwraca nową długość tablicy. Ta metoda zmodyfikuje twoją istniejącą tablicę.
let myArray = [2,4,5,7,9,12,14];
myArray.unshift(0);Po zalogowaniu tablicy do konsoli na początku tablicy powinna pojawić się liczba 0.
console.log(myArray); [0, 2,4,5,7,9,12,14]7. Tablica.sort()
Do czego służy: sortowanie jest jedną z najczęstszych operacji wykonywanych na tablicy i jest bardzo przydatne. JavaScript sortować() Metoda tablicowa może być używana do sortowania tablicy liczb lub nawet ciągów za pomocą tylko jednego wiersza kodu. Ta operacja jest na miejscu i zwraca posortowaną tablicę, modyfikując tablicę początkową. Weź inny zestaw liczb dla moja tablica tym razem.
let myArray = [12, 55, 34, 65, 10];
myArray.sort((a,b) => a - b);Ponieważ sortowanie odbywa się na miejscu, nie musisz deklarować oddzielnej zmiennej dla posortowanej tablicy.
console.log(myArray); [10, 12, 34, 55, 65]Domyślnie tablica jest sortowana w porządku rosnącym, ale możesz opcjonalnie przekazać funkcję niestandardową do sortować() metody, aby posortować tablicę w żądany sposób. W tym przypadku zdałem zwyczaj funkcja strzałki aby posortować tablicę numerycznie w kolejności rosnącej.
8. Tablica.reverse()
Co robi: Jak sama nazwa wskazuje, odwrócić() Metoda służy do odwrócenia kolejności elementów w tablicy. Zauważ, że nie odwraca to zawartości tablicy, a jedynie samą kolejność. Oto przykład, aby lepiej zrozumieć tę metodę:
let myArray = [2,4,5,7,9,12,14];
myArray.reverse()Zaloguj dane wyjściowe do konsoli, aby zweryfikować operację.
console.log(myArray); [14, 12, 9, 7, 5, 4, 2]Jak widać kolejność elementów została odwrócona. Wcześniej element pod ostatnim indeksem (element 14 pod indeksem 6) jest teraz elementem pod zerowym indeksem i tak dalej.
9. Tablica.wycinek()
Co to robi: plasterek() służy do pobierania płytkiej kopii części tablicy. Mówiąc prościej, ta metoda pozwala wybrać określone elementy z tablicy według ich indeksu. Możesz przekazać początkowy indeks elementu, z którego chcesz pobrać i elementy, a opcjonalnie również indeks końcowy.
Jeśli nie podasz indeksu końcowego, zostaną pobrane wszystkie elementy od indeksu początkowego do końca tablicy. Ta metoda zwraca nową tablicę i nie modyfikuje istniejącej.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(2);W powyższym kodzie wszystkie elementy od drugiego indeksu do ostatniego indeksu są pobierane, ponieważ parametr end index nie jest przekazywany. Zaloguj obie tablice do konsoli.
console.log(myArray);
console.log(slicedArray); [2, 4, 5, 7, 9, 12, 14]
[5, 7, 9, 12, 14]
Najwyraźniej początkowa tablica nie jest modyfikowana przez metodę slice() i zamiast tego zwraca nową tablicę, która jest przechowywana w pokrojona tablica zmienny. Oto przykład, w którym parametr end index jest również przekazywany do plasterek() metoda.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(1, 3);
console.log(slicedArray); [4, 5]10. Tablica.splice()
Co to robi: splatać() to pomocna metoda tablicowa używana do usuwania lub zastępowania elementów w tablicy. Określając indeks i liczbę elementów do usunięcia, modyfikuje tablicę.
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3);
console.log(myArray);W powyższym przykładzie moja tablica tablica jest łączona z indeksu 2 i 3 elementy są z niej usuwane. Tablica składa się teraz z:
[2, 4, 12, 14]Aby zastąpić elementy, a nie tylko je usuwać, możesz przekazać dowolną liczbę opcjonalnych parametrów z elementami, którymi chcesz zastąpić, na przykład:
zaloguj się do sieci playstation ps4
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3, 1, 2, 3);
console.log(myArray); [2, 4, 1, 2, 3, 12, 14]11. Tablica.filtr()
Co robi: filtr() Metoda jest użyteczną metodą tablicową, która pobiera funkcję zawierającą test i zwraca nową tablicę ze wszystkimi elementami, które przeszły ten test. Zgodnie ze swoją nazwą ta metoda służy do filtrowania potrzebnych elementów z innych elementów. Filtracja odbywa się za pomocą funkcji, która zwraca wartość logiczną.
Oto przykład filtr() metoda używana do pobierania tylko tych elementów z tablicy, które są podzielne przez 2.
let myArray = [2,4,5,7,9,12,14];
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);
console.log(divisibleByTwo);W powyższym przykładzie funkcja strzałkowa jest przekazywana jako parametr, który pobiera każdą liczbę z oryginalnej tablicy i sprawdza, czy jest podzielna przez 2 za pomocą modulo ( % ) oraz równość ( === ) operatora. Oto jak wygląda wynik:
[2, 4, 12, 14]12. Tablica.redukcja()
Co to robi: zmniejszyć() jest metodą tablicową, która pobiera funkcję reduktora i wykonuje ją na każdym elemencie tablicy, aby podczas zwracania wyprowadzić pojedynczą wartość. Jako wymagane parametry przyjmuje funkcję reduktora ze zmienną akumulatora i zmienną elementu prądu. Wartość akumulatora jest zapamiętywana we wszystkich iteracjach i jest ostatecznie zwracana po ostatniej iteracji.
Popularnym przypadkiem użycia tej metody jest obliczenie sumy wszystkich elementów tablicy. Realizacja tej funkcjonalności wygląda następująco:
let myArray = [2,4,5,7,9,12,14];
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);0 jest przekazywane jako drugi parametr w powyższym przykładzie, który jest używany jako początkowa wartość zmiennej akumulatora. ten sumOfNums zmienna będzie zawierać wartość zwracaną przez zmniejszyć() metoda, która ma być sumą wszystkich elementów tablicy.
console.log(sumOfNums); 5313. Tablica.zawiera()
Do czego służy: wyszukiwanie elementu w tablicy w celu sprawdzenia, czy jest on obecny, jest operacją, która jest używana dość często, a zatem JavaScript ma wbudowaną metodę do tego w postaci zawiera () metoda tablicowa. Oto jak możesz z niego korzystać:
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.includes(4));
console.log(myArray.includes(2, 1));
console.log(myArray.includes(12, 2));
console.log(myArray.includes(18));Ta metoda pobiera wymagany parametr, element do wyszukania i opcjonalny parametr, indeks tablicy, od którego ma się rozpocząć wyszukiwanie. W zależności od tego, czy ten element jest obecny, czy nie, zwróci prawda lub fałszywe odpowiednio. Wynik będzie zatem następujący:
true
false
true
false14. Tablica.indexOf()
Co to robi: indeks() Metoda służy do znalezienia indeksu, pod którym w tablicy występuje pierwsze wystąpienie określonego elementu. Chociaż jest podobna do metody include(), ta metoda zwraca indeks liczbowy lub -1, jeśli element nie występuje w tablicy.
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.indexOf(4));
console.log(myArray.indexOf('4'));
console.log(myArray.indexOf(9, 2));indeks() Metoda używa ścisłej równości do sprawdzenia, czy element jest obecny, co oznacza, że wartość i typ danych powinny być takie same. Opcjonalny drugi parametr pobiera indeks, od którego rozpocznie się wyszukiwanie. Na podstawie tych kryteriów wynik będzie wyglądał następująco:
1
-1
415. Tablica.wypełnij()
Do czego służy: Często może być konieczne ustawienie wszystkich wartości w tablicy na wartość statyczną, taką jak 0. Zamiast używać pętli, możesz wypróbować napełnić() metoda do tego samego celu. Możesz wywołać tę metodę na tablicy z 1 wymaganym parametrem: wartością do wypełnienia tablicy i 2 opcjonalnymi parametrami: indeksem początkowym i końcowym do wypełnienia. Ta metoda modyfikuje wyjściową tablicę.
let myArray = [2,4,5,7,9,12,14];
let array1 = myArray.fill(0);
myArray = [2,4,5,7,9,12,14];
let array2 = myArray.fill(0, 2);
myArray = [2,4,5,7,9,12,14];
let array3 = myArray.fill(0, 1, 3);Po zalogowaniu danych wyjściowych do konsoli zobaczysz:
console.log(array1);
console.log(array2);
console.log(array3); [0, 0, 0, 0, 0, 0, 0]
[2, 4, 0, 0, 0, 0, 0]
[2, 0, 0, 7, 9, 12, 14]Kolejne kroki w Twojej podróży JavaScript
Tablice są potężną częścią języka JavaScript, dlatego jest tak wiele wbudowanych metod, które ułatwiają życie programistom. Najlepszym sposobem na opanowanie tych piętnastu metod jest praktyka.
Kontynuując naukę języka JavaScript, MDN to świetne źródło informacji szczegółowej dokumentacji. Rozsiądź się wygodnie w konsoli, a następnie podnieś swoje umiejętności dzięki najlepszym edytorom JavaScript dla programistów. Gotowy do zbudowania swojej witryny z JavaScript? Przyjrzyj się niektórym frameworkom, które możesz rozważyć.
Udział Udział Ćwierkać E-mail 6 frameworków JavaScript, których warto się nauczyćIstnieje wiele frameworków JavaScript, które pomagają w rozwoju. Oto kilka, które powinieneś wiedzieć.
Czytaj dalej Powiązane tematy- Programowanie
- JavaScript
- Wskazówki dotyczące kodowania
Nitin jest zapalonym programistą i studentem inżynierii komputerowej tworzącym aplikacje internetowe przy użyciu technologii JavaScript. Pracuje jako niezależny programista stron internetowych, aw wolnym czasie lubi pisać dla Linuksa i programowania.
Więcej od Nitina RanganathaZapisz się do naszego newslettera
Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!
Kliknij tutaj, aby zasubskrybować