Tablice to bardzo potężna, wysoce elastyczna struktura danych, której bez wątpienia używasz w swoim kodzie JavaScript. Ale czy wykorzystujesz je efektywnie?

Istnieje kilka metod optymalizacji tablic JavaScript w celu uzyskania lepszej wydajności i wydajności. Jedną z najczęściej używanych struktur danych w JavaScript jest tablica. Jest popularnym wyborem dla wielu programistów, ponieważ jest tak elastyczny i łatwy w użyciu.

Jednak tablice mogą szybko stać się wąskim gardłem wydajności, jeśli nie używasz ich poprawnie. Oto pięć sposobów optymalizacji tablic JavaScript i zwiększenia ogólnej wydajności kodu.

1. Użyj operatora spreadu

Możesz utworzyć nową tablicę zawierającą elementy z innej za pomocą operatora spread, czyli trzech kropek (...).

Operator spread może łączyć dwie tablice, na przykład:

konst tablica1 = [1, 2, 3];
konst tablica2 = [4, 5, 6];
konst połączona tablica = [...tablica1, ...tablica2];
konsola.log (połączona tablica); // Wyjście: [1, 2, 3, 4, 5, 6]

W tym przypadku operator spread łączy dwie tablice — tablica1 i tablica2 — w nową tablicę o nazwie

instagram viewer
połączona tablica. Wynikowa tablica zawiera wszystkie elementy tablicy1, po których następują wszystkie elementy tablicy2.

Operator spread może również utworzyć nową tablicę z większą liczbą elementów. Na przykład:

konst oryginalna tablica = [1, 2, 3];
konst nowaTablica = [...pierwotnaTablica, 4, 5];
konsola.log (nowatablica); // Wyjście: [1, 2, 3, 4, 5]

Tworzysz nową tablicę o nazwie nowa tablica poprzez zastosowanie operatora spreadu. Zawiera wszystkie elementy oryginalnej tablicy, po których następują elementy 4 i 5. W przypadku dużych tablic operator spread może być bardziej skuteczny niż metody takie jak konkat() Lub naciskać(). Dodatkowo sprawia, że ​​kod jest bardziej czytelny i zwięzły.

Możesz wydajniej używać tablic JavaScript z operatorem spread, co również ułatwia tworzenie nowej tablicy z większą liczbą elementów.

2. Unikaj używania operatora usuwania

Możesz usunąć właściwość obiektu za pomocą operatora delete. Chociaż możesz użyć funkcji delete, aby usunąć element tablicy, nie jest to zalecane, ponieważ może pozostawić puste miejsca w tablicy. Może to wpłynąć na wydajność tablicy podczas jej iteracji lub próby uzyskania dostępu do określonych elementów.

Zamiast korzystać z usuwać operatora, rozważ użycie splatać metoda. Ta metoda może usunąć elementy tablicy i zwróci nową tablicę bez pustych spacji.

Możesz użyć splatać sposób w następujący sposób:

konst oryginalna tablica = [1, 2, 3, 4, 5];
// Usuń element o indeksie 2
konst nowaTablica = oryginalnaTablica.splice(2, 1);

Ten przykład usuwa element o indeksie 2 z pliku oryginalna tablica przy użyciu metody splotów. Nowo utworzona tablica (nowatablica) zawiera element, który został usunięty. Element o indeksie 2 nie występuje już w pliku oryginalna tablica, a tablica nie zawiera pustych miejsc.

3. Użyj typowanych tablic

W języku JavaScript można pracować z danymi binarnymi przy użyciu tablic o określonym typie. Tablice te umożliwiają bezpośrednie manipulowanie bazową pamięcią i wykorzystują elementy o stałej długości; są bardziej wydajne niż standardowe tablice.

Oto przykład tworzenia tablicy z określonym typem:

konst mojaTablica = nowyInt16Array(4);
konsola.log (moja tablica); // Wyjście: Int16Array [0, 0, 0, 0]

Ten przykład tworzy zupełnie nowy Int16Array z czterema elementami ustawionymi na zero.

Int8Array, Int16Array, Int32Array, Uint8Array, Uint16Array, Uint32Array, Float32Array, I Float64Array to wszystkie przykłady typów tablic wpisanych. Każda klasyfikacja odnosi się do określonego rodzaju sparowanych informacji i ma odpowiedni rozmiar bajtu.

Oto przykład użycia a Float32Array.

konst mojaTablica = nowyFloat32Array([1.0, 2.0, 3.0, 4.0]);
konsola.log (moja tablica); // Dane wyjściowe: Float32Array [1, 2, 3, 4]

Ten przykład tworzy nowy Float32Array z czterema elementami ustawionymi na 1.0, 2.0, 3.0 i 4.0.

Typowane tablice są szczególnie przydatne podczas pracy z dużymi zbiorami danych lub wykonywania obliczeń matematycznych. Mogą być znacznie szybsze niż standardowe tablice, ponieważ pozwalają bezpośrednio manipulować pamięcią.

Ułatwiając pracę z danymi binarnymi i wykonywanie obliczeń matematycznych, tablice z określonym typem mogą pomóc zoptymalizować kod JavaScript.

4. Zminimalizuj iteracje

To powszechne użyj pętli JavaScript iterować po tablicy. W każdym razie iteracja na dużych tablicach może być wąskim gardłem wydajności. Zmniejsz liczbę iteracji po tablicach JavaScript, aby je zoptymalizować.

Jednym ze sposobów osiągnięcia tego jest użycie filtr, mapa, I zmniejszyć zamiast tradycyjnych pętli. Strategie te usprawniają wykonywanie kodu i często są szybsze niż ręczne iterowanie po tablicy.

Możesz użyć metody mapy w następujący sposób:

konst oryginalna tablica = [1, 2, 3, 4, 5];
// Pomnóż każdy element przez 2
konst nowaTablica = oryginalnaTablica.map((element) => element * 2)

W tym przypadku kod tworzy nową tablicę o nazwie nowa tablica przy użyciu metody mapy. Metoda map stosuje funkcję do każdego składnika oryginalna tablica i zwraca wyniki w nowej tablicy.

5. Użyj składni destrukturyzującej

Funkcja destrukcji JavaScriptu to potężna funkcja języka JavaScript, która umożliwia wyodrębnianie wartości z tablic i obiektów. Ta metoda zwiększa wydajność kodu, wykonując mniej przypisań zmiennych i mniej dostępów do tablicy. Zalety korzystania z destrukturyzacji obejmują czytelność i mniejsze nakłady na pisanie.

Ilustracja sposobu wyodrębniania wartości z tablicy za pomocą destrukturyzacji jest następująca:

konst mojaTablica = [1, 2, 3, 4, 5];
// Zniszcz pierwszy i trzeci element
konst [pierwszy,, trzeci] = mojaTablica;
konsola.log (pierwszy); // Dane wyjściowe: 1
konsola.log (trzeci); // Dane wyjściowe: 3

W tym przykładzie zastosowano destrukturyzację w celu wyodrębnienia pierwszego i trzeciego elementu mojatablica. Przypisuje wartość pierwszego elementu tablicy do Pierwszy zmiennej, a wartość trzeciego elementu do trzeci zmienny. Pozostawiając puste miejsce we wzorcu destrukturyzującym, pomija drugi element.

Możesz także użyć destrukturyzacji z argumentami funkcji, aby wyodrębnić wartości z tablic:

funkcjonowaćmojaFunkcja([pierwsza sekunda]) {
konsola.log (pierwszy);
konsola.log (drugi);
}
konst mojaTablica = [1, 2, 3, 4, 5];
mojaFunkcja(mojaTablica); // Dane wyjściowe: 1\n2

Ten przykład definiuje funkcję o nazwie mojaFunkcja który przyjmuje tablicę jako parametr. Następnie wykorzystuje destrukturyzację do zarejestrowania pierwszego i drugiego elementu tablicy w konsoli.

Zoptymalizuj tablice JavaScript pod kątem szybszych aplikacji

Usprawnienie tablic JavaScript jest niezbędne do poprawy wydajności kodu. W ten sposób możesz znacznie zwiększyć responsywność i szybkość swoich aplikacji.

Aby jak najlepiej wykorzystać tablice, pamiętaj o używaniu operatora spread, unikaniu operatora delete, używaniu tablic z określonym typem, zmniejszeniu liczby iteracji i stosowaniu destrukturyzacji. Spróbuj także ocenić wydajność swojego kodu i wprowadzić podstawowe ulepszenia, aby zagwarantować płynne działanie aplikacji.

Optymalizując macierze, możesz tworzyć aplikacje, które są szybsze, bardziej niezawodne i zapewniają lepszą obsługę.