Kiedy zaczynałem uczyć się JavaScriptu, pierwszą rzeczą, którą zrobiłem, było sporządzenie listy trików, które pomogły mi zaoszczędzić czas. Zauważyłem je u innych programistów, na różnych stronach i w instrukcjach.
W tym artykule pokażę Ci 12 świetnych sposobów na ulepszenie i przyspieszenie kodu JavaScript. W większości przypadków są one uniwersalne.
Przypomnienie: dla wszystkich czytelników „Habr” - rabat w wysokości 10 000 rubli przy zapisywaniu się na dowolny kurs Skillbox przy użyciu kodu promocyjnego „Habr”.
Skillbox poleca: Kurs praktyczny .
Filtrowanie unikalnych wartości
TABLICE
Typ obiektu Set został wprowadzony w ES6 wraz z operatorem..., spread, dzięki któremu możemy utworzyć nową tablicę zawierającą wyłącznie unikalne wartości.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]W normalnej sytuacji do wykonania tej samej operacji potrzeba znacznie więcej kodu.
Ta technika działa w przypadku tablic zawierających typy pierwotne: niezdefiniowane, null, boolean, string i number. Jeśli pracujesz z tablicą zawierającą obiekty, funkcje lub dodatkowe tablice, będziesz potrzebować innego podejścia.
Długość tablicy pamięci podręcznej w cyklach
CYKLE
Ucząc się pętli for, postępujesz zgodnie ze standardową procedurą:
for (let i = 0; i < array.length; i++){
console.log(i);
}Jednakże przy tej składni pętla for wielokrotnie sprawdza długość tablicy w każdej iteracji.
Czasami może to być przydatne, ale w większości przypadków bardziej efektywne jest buforowanie całej długości tablicy, co będzie wymagało jednego dostępu do niej. Możemy to zrobić, definiując zmienną długości, w której definiujemy zmienną i, w następujący sposób:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}W zasadzie prawie tak samo jak powyżej, jednak zwiększając rozmiar pętli uzyskamy znaczną oszczędność czasu.
Wartość znamionowa zwarcia (ocena McCarthy'ego)
OPERATORY WARUNKOWE
Operator trójskładnikowy to szybki i skuteczny sposób pisania prostych (a czasem nie tak prostych) instrukcji warunkowych:
x> 100? „więcej niż 100”: „mniej niż 100”;
x> 100? (x>200? „więcej niż 200”: „od 100 do 200”): „mniej niż 100”;
Ale czasami nawet operator trójskładnikowy jest bardziej skomplikowany, niż jest to wymagane. Zamiast tego możemy użyć „and” && i „lub” || Operatory logiczne umożliwiające ocenę niektórych wyrażeń w jeszcze bardziej zwięzły sposób. Często nazywa się to „zwarciem” lub „wytrzymałością na zwarcie”.
Jak to działa
Załóżmy, że chcemy zwrócić tylko jeden z dwóch lub więcej warunków.
Użycie && zwróci pierwszą fałszywą wartość. Jeśli każdy operand ma wartość true, zwrócone zostanie ostatnie ocenione wyrażenie.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Używając || zwróci pierwszą prawdziwą wartość. Jeśli każdy operand ma wartość false, zwrócona zostanie ostatnia obliczona wartość.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullPrzykład 1
Załóżmy, że chcemy zwrócić długość zmiennej, ale nie znamy jej typu.
W takim przypadku możesz użyć if/else, aby sprawdzić, czy foo jest właściwym typem, ale ta metoda może być zbyt długa. Dlatego lepiej jest przyjąć nasze „zwarcie”.
return (foo || []).length;Jeśli zmienna foo ma odpowiednią długość, zostanie ona zwrócona. W przeciwnym razie otrzymamy 0.
Przykład 2
Czy miałeś problemy z dostępem do zagnieżdżonego obiektu? Możesz nie wiedzieć, czy obiekt lub jedna z jego właściwości podrzędnych istnieje, co może prowadzić do problemów.
Na przykład chcieliśmy uzyskać dostęp do właściwości data w this.state, ale dane nie zostały zdefiniowane, dopóki nasz program nie zwróci żądania pobrania.
W zależności od tego gdzie go użyjemy, wywołanie this.state.data może uniemożliwić uruchomienie aplikacji. Aby rozwiązać problem, możemy owinąć to w wyrażenie warunkowe:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Lepszą opcją byłoby użycie operatora „lub”.
return (this.state.data || 'Fetching Data');Nie możemy zmienić powyższego kodu, aby używać &&. Operator „Pobieranie danych” && this.state.data zwróci this.state.data niezależnie od tego, czy jest on niezdefiniowany, czy nie.
Opcjonalny łańcuch
Można zasugerować użycie opcjonalnego łączenia łańcuchowego podczas próby zwrócenia właściwości głęboko w strukturę drzewa. A więc symbol znaku zapytania? można użyć do pobrania właściwości tylko wtedy, gdy nie ma ona wartości null.
Na przykład moglibyśmy zrefaktoryzować powyższy przykład, aby uzyskać this.state.data?..(). Oznacza to, że dane są zwracane tylko wtedy, gdy wartość nie jest równa null.
Lub, jeśli ma znaczenie, czy stan jest zdefiniowany, czy nie, możemy zwrócić this.state?.data.
Konwertuj na wartość logiczną
KONWERSJA TYPU
Oprócz normalnych funkcji boolowskich prawda i fałsz, JavaScript traktuje także wszystkie inne wartości jako prawdziwe lub fałszywe.
O ile nie zaznaczono inaczej, wszystkie wartości w JavaScript są prawdziwe, z wyjątkiem 0, „”, null, niezdefiniowanego, NaN i oczywiście fałszywego. Te ostatnie są fałszywe.
Możemy łatwo przełączać się między nimi za pomocą operatora !, który również konwertuje typ na logiczny.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Konwertuj na ciąg
KONWERSJA TYPU
Szybka konwersja liczby całkowitej na ciąg znaków może zostać przeprowadzona w następujący sposób.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Zamień na liczbę całkowitą
KONWERSJA TYPU
W ten sposób wykonujemy transformację odwrotną.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Tej metody można również użyć do konwersji typu danych boolowskich na zwykłe wartości liczbowe, jak pokazano poniżej:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Mogą zaistnieć sytuacje, w których + będzie interpretowane jako operator łączenia, a nie operator dodawania. Aby tego uniknąć, powinieneś używać tyld: ~~. Ten operator jest odpowiednikiem -n-1. Na przykład ~15 równa się -16.
Użycie dwóch tyld z rzędu neguje operację, ponieważ - (- - n - 1) - 1 = n + 1 - 1 = n. Innymi słowy, ~-16 równa się 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
OPERACJE
Począwszy od wersji ES7, można używać operatora potęgowania ** jako skrótu potęg. Jest to znacznie szybsze niż użycie Math.pow(2, 3). Wydaje się to proste, ale ten punkt jest uwzględniony na liście technik, ponieważ nie wszędzie jest o nim mowa.
console.log(2 ** 3); // Result: 8Nie należy go mylić z symbolem ^, który jest powszechnie używany do potęgowania. Ale w JavaScript jest to operator XOR.
Przed wersją ES7 skrótu ** można było używać tylko w przypadku potęg o podstawie 2 przy użyciu operatora przesunięcia bitowego w lewo <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Na przykład 2 << 3 = 16 jest równoważne 2 ** 4 = 16.
Przenieś do liczby całkowitej
OPERACJE / KONWERSJA TYPU
Jeśli chcesz przekonwertować liczbę zmiennoprzecinkową na liczbę całkowitą, możesz użyć funkcji Math.floor(), Math.ceil() lub Math.round(). Ale jest szybszy sposób, w tym celu używamy |, czyli operatora OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Zachowanie | zależy w dużej mierze od tego, czy masz do czynienia z liczbami dodatnimi, czy ujemnymi, więc ta metoda jest odpowiednia tylko wtedy, gdy jesteś pewien tego, co robisz.
n | 0 usuwa wszystko po separatorze dziesiętnym, obcinając liczbę zmiennoprzecinkową do liczby całkowitej.
Ten sam efekt zaokrąglenia można uzyskać za pomocą ~~. Po wymuszonej konwersji na liczbę całkowitą wartość pozostaje niezmieniona.
Usuwanie końcowych liczb
Operator OR może zostać użyty do usunięcia dowolnej liczby cyfr z liczby. Oznacza to, że nie musimy konwertować typów jak tutaj:
let str = "1553";
Number(str.substring(0, str.length - 1));Zamiast tego po prostu piszemy:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Automatyczne łączenie
ZAJĘCIA
Notacje strzałkowe ES6 mogą być używane w metodach klas i sugeruje się wiązanie. Oznacza to, że możesz pożegnać się z powtarzającymi się wyrażeniami, takimi jak this.myMethod = this.myMethod.bind(this)!
import React, { Component } from React;
export default class App extends Compononent {
constructor(props) {
super(props);
this.state = {};
}
myMethod = () => {
// This method is bound implicitly!
}
render() {
return (
<>
<div>
{this.myMethod()}
</div>
</>
)
}
};Przycinanie szyku
TABLICE
Jeśli chcesz usunąć wartości z tablicy, istnieją szybsze metody niż splice().
Na przykład, jeśli znasz rozmiar oryginalnej tablicy, możesz zastąpić jej właściwość długości w następujący sposób:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Ale jest inna metoda, i szybsza. Jeśli liczy się dla Ciebie szybkość, oto nasze typy:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
console.log(array); // Result: [0, 1, 2, 3]Drukowanie ostatnich wartości tablicy
TABLICE
Technika ta wymaga użycia metody plasterek().
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]Formatowanie kodu JSON
JSON
Być może korzystałeś już z JSON.stringify. Czy wiesz, że pomaga sformatować JSON?
Metoda stringify() przyjmuje dwa opcjonalne parametry: funkcję zastępującą, której można użyć do filtrowania wyświetlanego formatu JSON, oraz wartość spacji.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'To wszystko, mam nadzieję, że wszystkie te techniki były przydatne. Jakie sztuczki znasz? Napisz je w komentarzach.
Skillbox poleca:
- Dwuletni kurs praktyczny .
- Kurs online .
- Praktyczny roczny kurs .
Źródło: www.habr.com