Korzystając z różnych wskazówek JavaScript i skrótów składniowych, funkcje te pomogą rozwiązać wiele typowych problemów.

JavaScript jest de facto językiem do budowy nowoczesnych aplikacji webowych i mobilnych. Obsługuje szeroką gamę projektów, od prostych stron internetowych po dynamiczne, interaktywne aplikacje.

Aby tworzyć produkty, które użytkownicy pokochają i docenią, konieczne jest napisanie kodu, który jest nie tylko funkcjonalny, ale także wydajny i łatwy w utrzymaniu. Czysty kod JavaScript ma kluczowe znaczenie dla sukcesu każdej aplikacji internetowej lub mobilnej, niezależnie od tego, czy jest to hobbystyczny projekt poboczny, czy złożona aplikacja komercyjna.

Co jest takiego dobrego w funkcjach JavaScript?

Funkcja jest niezbędnym komponentem do pisania kodu dowolnej aplikacji. Definiuje fragment kodu wielokrotnego użytku, który można wywołać w celu wykonania określonego zadania.

Oprócz możliwości ponownego użycia, funkcje są bardzo wszechstronne. W dłuższej perspektywie upraszczają proces skalowania i utrzymywania bazy kodu. Przez

instagram viewer
tworzenie i używanie funkcji JavaScript, możesz zaoszczędzić dużo czasu na programowanie.

Oto kilka pomocnych funkcji JavaScript, które mogą znacznie poprawić jakość kodu Twojego projektu.

1. raz

Ta funkcja jednorazowa wyższego rzędu otacza inną funkcję, aby zapewnić, że można ją wywołać tylko raz. Powinien po cichu ignorować kolejne próby wywołania wynikowej funkcji.

Rozważmy sytuację, w której chcesz wysyłać żądania HTTP API w celu pobrania danych z bazy danych. Możesz dołączyć tzw raz działać jako wywołanie zwrotne dla funkcja detektora zdarzeń, aby uruchamiał się raz i nie więcej.

Oto jak można zdefiniować taką funkcję:

konst raz = (funkcja) => {
pozwalać wynik;
pozwalać funcCalled = FAŁSZ;
powrót(... argumenty) => {
Jeśli (!FuncCalled) {
 wynik = func(...argumenty);
 funcCalled = PRAWDA;
 }
powrót wynik;
 };
};

Funkcja Once przyjmuje funkcję jako argument i zwraca nową funkcję, którą można wywołać tylko raz. Kiedy wywołujesz nową funkcję po raz pierwszy, uruchamia ona pierwotną funkcję z podanymi argumentami i zapisuje wynik.

Każde kolejne wywołanie nowej funkcji zwraca zapisany wynik bez ponownego uruchamiania oryginalnej funkcji. Spójrz na implementację poniżej:

// Zdefiniuj funkcję do pobierania danych z bazy danych
funkcjonowaćpobierzDaneUżytkownika() {
// ...
}
// pobierz wersję funkcji getUserData, która może zostać uruchomiona tylko raz
konst makeHTTPRequestOnlyOnce = raz (getUserData);
konst userDataBtn = dokument.querySelector("#btn");
userDataBtn.addEventListener("Kliknij", makeHTTPRequestOnlyOnce);

Korzystając z funkcji Once możesz zagwarantować, że kod wyśle ​​tylko jedno żądanie, nawet jeśli użytkownik kliknie przycisk kilka razy. Pozwala to uniknąć problemów z wydajnością i błędów, które mogą wynikać z nadmiarowych żądań.

2. rura

Ta funkcja potoku umożliwia łączenie wielu funkcji w sekwencję. Funkcje w sekwencji przyjmą wynik poprzedniej funkcji jako dane wejściowe, a ostatnia funkcja w sekwencji obliczy wynik końcowy.

Oto przykład w kodzie:

// Zdefiniuj funkcję potoku
konst rura = (...funkcje) => {
powrót(arg) => {
 funcs.forEach(funkcjonować(funkcja) {
 arg = funkcja (arg);
 });
powrót argument;
 }
}


// Zdefiniuj kilka funkcji
konst dodajJeden = (A) => + 1;
konst podwójne = (X) => X * 2;
konst kwadrat = (X) => x * x;


// Utwórz potok z funkcjami
konst moja rura = rura (addOne, double, square);
// Przetestuj potok z wartością wejściową
konsola.log (mójPipe(2)); // Dane wyjściowe: 36

Funkcje potoku mogą poprawić czytelność i modułowość kodu, umożliwiając zwięzłe pisanie złożonej logiki przetwarzania. Może to sprawić, że Twój kod będzie bardziej zrozumiały i łatwiejszy w utrzymaniu.

3. mapa

Funkcja map jest metodą wbudowanej klasy JavaScript Array. Tworzy nową tablicę, stosując funkcję wywołania zwrotnego do każdego elementu oryginalnej tablicy.

Przechodzi przez każdy element w tablicy wejściowej, przekazuje go jako dane wejściowe do funkcji wywołania zwrotnego i wstawia każdy wynik do nowej tablicy.

Należy zauważyć, że oryginalna tablica nie jest w żaden sposób modyfikowana w trakcie tego procesu.

Oto przykład użycia mapa:

konst liczby = [1, 2, 3, 4, 5];
konst doubledLiczby = liczby. mapa (funkcjonować(numer) {
powrót liczba * 2;
});
konsola.log (podwójne liczby);
// Wyjście: [2, 4, 6, 8, 10]

W tym przykładzie funkcja map wykonuje iterację po każdym elemencie w tablicy liczb. Mnoży każdy element przez 2 i zwraca wyniki w nowej tablicy.

Ogólnie rzecz biorąc, funkcje mapy eliminują potrzebę za pomocą pętli w JavaScript, zwłaszcza nieskończone — nieskończone pętle mogą powodować znaczne obciążenie obliczeniowe, prowadząc do problemów z wydajnością aplikacji. Dzięki temu baza kodu jest bardziej zwięzła i mniej podatna na błędy.

4. wybierać

Ta funkcja wyboru umożliwia selektywne wyodrębnianie określonych właściwości z istniejącego obiektu i generowanie nowego obiektu z tymi właściwościami w wyniku obliczeń.

Weźmy na przykład funkcję raportów w aplikacji, korzystając z funkcji pick, którą możesz bez wysiłku dostosować różne raporty na podstawie żądanych informacji o użytkowniku, wyraźnie określając właściwości, które chcesz uwzględnić w różnych raporty.

Oto przykład w kodzie:

konst wybierz = (obiekt, ...klucze) => {
powrót klucze.redukuj((wynik, klucz) => {
Jeśli (object.hasOwnProperty (klucz)) {
 wynik[klucz] = obiekt[klucz];
 }
powrót wynik;
 }, {});
};

Funkcja pick przyjmuje obiekt i dowolną liczbę kluczy jako argumenty. Klucze reprezentują właściwości, które chcesz wybrać. Następnie zwraca nowy obiekt, który zawiera tylko właściwości oryginalnego obiektu z pasującymi kluczami.

konst użytkownik = {
 nazwa: 'Jaskółka oknówka',
 wiek: 30,
 e-mail: „[email protected]”,
};
konsola.log (wybierz (użytkownik, 'nazwa', 'wiek'));
// Dane wyjściowe: { imię i nazwisko: „Martin”, wiek: 30 }

Zasadniczo funkcja pick może ująć złożoną logikę filtrowania w jedną funkcję, ułatwiając zrozumienie i debugowanie kodu.

Może również promować ponowne użycie kodu, ponieważ możesz ponownie użyć funkcji pick w całej bazie kodu, zmniejszając powielanie kodu.

5. zamek błyskawiczny

Ta funkcja zip łączy tablice w pojedynczą tablicę krotek, dopasowując odpowiednie elementy z każdej tablicy wejściowej.

Oto przykładowa implementacja funkcji zip:

funkcjonowaćzamek błyskawiczny(...tablice) {
konst maksymalna długość = Matematyka.min(...tablice.map(szyk => tablica.długość));
powrótSzyk.z(
 { długość: maksymalna długość },
 (_, indeks) => tablice.map(szyk => tablica[indeks])
 );
};


konst za = [1, 2, 3];
konst b = ['A', 'B', 'C'];
konst c = [PRAWDA, FAŁSZ, PRAWDA];
konsola.log (zip (a, b, c));
// Dane wyjściowe: [[1, 'a', prawda], [2, 'b', fałsz], [3, 'c', prawda]]

Funkcja zip akceptuje tablice wejściowe i oblicza ich najdłuższą długość. Następnie tworzy i zwraca pojedynczą tablicę przy użyciu metody Array.from JavaScript. Ta nowa tablica zawiera elementy z każdej tablicy wejściowej.

Jest to szczególnie przydatne, jeśli musisz natychmiast połączyć dane z wielu źródeł, eliminując potrzebę pisania zbędnego kodu, który w przeciwnym razie zaśmiecałby bazę kodu.

Praca z funkcjami JavaScript w kodzie

Funkcje JavaScript znacznie poprawiają jakość twojego kodu, zapewniając uproszczony i zwarty sposób obsługi wielu logiki programowania zarówno dla małych, jak i dużych baz kodu. Dzięki zrozumieniu i użyciu tych funkcji można pisać bardziej wydajne, czytelne i łatwe w utrzymaniu aplikacje.

Pisanie dobrego kodu umożliwia budowanie produktów, które nie tylko rozwiązują konkretny problem użytkowników końcowych, ale robią to w sposób łatwy do modyfikacji.