10 najlepszych skrótów JavaScript dla początkujących
Skróty JavaScript nie tylko przyspieszają proces kodowania, ale także skracają skrypty, dlatego prowadzą do szybsze ładowanie strony. Kody skrócone są tak samo ważne jak ich wersje długich; oni zasadniczo to samo-tylko w bardziej kompaktowym formacie. Są jedną z najprostszych technik optymalizacji kodu.
Istnieje jednak kilka skrótów JavaScript nie mam oficjalnego przewodnika referencyjnego. Niektóre z nich są naprawdę proste, podczas gdy inne są dość zastraszające nawet dla doświadczonych programistów. W tym artykule możesz znaleźć 10 skrótów JavaScript dla początkujących z którym możesz zacząć od optymalizacji kodu i napisać bardziej zwięzły kod.
1. Liczby dziesiętne
Jeśli regularnie pracować z dużymi miejscami po przecinku ten skrót może być wybawieniem, ponieważ nie trzeba już wpisywać wszystkich zer, wystarczy zastąpić je zerami mi notacja. Na przykład, 1e8 oznacza dodanie ośmiu zer po 1 cyfra równa się 100000000.
Numer po literze mi wskazuje liczbę zer które następują po cyfrach przed mi. Również, 16e4 jest skrótem dla 160000, itp.
/ * Skrócony * / var myVar = 1e8; / * Longhand * / var myVar = 100000000;
2. Zwiększ, zmniejsz
The przyrostowy skrót składa się z dwóch + oznacza to, że wartość zmiennej ma być zwiększane o jeden. Podobnie dekrementacja skrótu składa się z dwóch - znaki, a to oznacza, że zmienna ma być zmniejszona o jeden.
Te dwa skróty mogą być użyte tylko na numerycznych typach danych. Mają niezastąpioną rolę w pętlach, a ich najczęstszym przypadkiem jest dla pętla.
/ * Shorthand * / i ++; jot--; / * Longhand * / i = i + 1; j = j-1;
3. Dodaj, odwróć uwagę, pomnóż, podziel
Dla każdego z nich istnieje skrót cztery podstawowe operacje matematyczne: dodawanie, rozproszenie, mnożenie i dzielenie. Działają podobnie jak operatory przyrostu i dekrementacji, tutaj możesz zmienić wartość zmiennej według dowolnej liczby (nie tylko jeden).
W poniższym przykładzie ja zmienna jest zwiększana o 5, jot jest zmniejszona o 3, k jest mnożone przez 10, i l jest podzielony przez 2.
/ * Stenografia * / i + = 5; j- = 3; k * = 10; l / = 2; / * Longhand * / i = i + 5; j = j-3; k = k * 10; l = l / 2;
4. Określ pozycję znaku
The charAt () metoda jest jedną z najczęściej używanych metod łańcuchowych, zwraca wartość postać w określonej pozycji (na przykład 5th znak sznurka). Istnieje prosty skrót, którego możesz użyć: dodajesz pozycja znaku ujęta w nawiasy kwadratowe po sznurku.
Zwróć uwagę, że charAt () metoda jest oparte na zero. W związku z tym, myString [4] zwróci 5th znak w łańcuchu („y” w przykładzie).
var myString = "Wszystkiego najlepszego"; / * Shorthand * / myString [4]; / * Longhand * / myString.charAt (4);
5. Zadeklaruj zmienne zbiorczo
Jeśli chcesz utworzyć więcej niż jedna zmienna jednocześnie nie musisz ich wpisywać pojedynczo. Wystarczy użyć var (lub pozwolić) słowo kluczowe tylko raz, wtedy możesz po prostu wymienić zmienne, które chcesz utworzyć, oddzielone przecinkiem.
Z tym skrótem możesz zadeklarować oba niezdefiniowane zmienne i zmienne o wartości.
/ * Stenografia * / var i, j = 5, k = „dzień dobry”, l, m = false; / * Longhand * / var i; var j = 5; var k = „Dzień dobry”; var l; var m = false;
6. Zadeklaruj tablicę asocjacyjną
Deklarowanie tablicy w JavaScript jest stosunkowo prostym zadaniem, przy użyciu var myArray = ["apple", "pear", "orange"] składnia. jednak, deklarowanie tablicy asocjacyjnej jest nieco bardziej skomplikowany, ponieważ tutaj nie tylko musisz zdefiniować wartości, ale także klucze (w przypadku regularnych tablic klucze są 0, 1, 2, 3 itd.).
Tablica asocjacyjna to a zbiór par klucz-wartość. Długim sposobem jest zadeklarowanie tablicy, a następnie dodanie każdego elementu jeden po drugim. Jednak ze skrótem poniżej możesz również zadeklaruj tablicę asocjacyjną plus wszystkie jego elementy w tym samym czasie.
W poniższym przykładzie myArray tablica asocjacyjna przypisuje swoje miejsce urodzenia (wartości) do znanych osób (kluczy).
/ * Shorthand * / var myArray = "Grace Kelly": "Philadelphia", "Clint Eastwood": "San Francisco", "Humphrey Bogart": "New York City", "Sophia Loren": "Rome", "Ingrid Bergman ”:„ Stockholm ” / * Longhand * / var myArray = new Array (); myArray ["Grace Kelly"] = "Philadelphia"; myArray ["Clint Eastwood"] = "San Francisco"; myArray ["Humphrey Bogart"] = "Nowy Jork"; myArray ["Sophia Loren"] = "Rzym"; myArray ["Ingrid Bergman"] = "Sztokholm";
7. Zadeklaruj obiekt
Skrót dla deklaracja obiektu działa podobnie do tablicy asocjacyjnej. Jednak tutaj nie ma par klucz-wartość, ale pary własność-wartość że musisz umieścić między szelkami .
Jedyną różnicą w skróconej składni jest to właściwości obiektu nie są ujęte w cudzysłów (imię, miejsce urodzenia, wiek, wasJamesBond w poniższym przykładzie).
/ * Stenografia * / var myObj = nazwa: "Sean Connery", placeOfBirth: "Edinburgh", wiek: 86, wasJamesBond: true; / * Longhand * / var myObj = new Object (); myObj.name = "Sean Connery"; myObj.placeOfBirth = "Edinburgh"; myObj.age = 86; myObj.wasJamesBond = true;
8. Użyj operatora warunkowego
The operator warunkowy (trójskładnikowy) jest często używany jako skrót do Jeśli inaczej komunikat. Składa się ona z trzy części:
- stan
- co się stanie, jeśli warunek jest prawdziwy (
Jeśli) - co się stanie, jeśli warunek jest fałszywy (
jeszcze)
W poniższym przykładzie wysyłamy prostą wiadomość (wewnątrz wiadomość zmienna) dla osób, które chcą wejść do klubu. Używając skróconej formy, jest to tylko jedna linia kodu do uruchomić ocenę.
var wiek = 17; / * Skrócona * / var wiadomość = wiek> = 18? „Dozwolone”: „Odmowa”; / * Longhand * / if (wiek> = 18) var message = "Allowed"; else var message = "Denied";
Jeśli chcesz to przetestować skopiuj kod do konsoli internetowej (F12 w większości przeglądarek) i zmodyfikuj wartość wiek zmienna kilka razy.
9. Sprawdź obecność
Często zdarza się, że trzeba sprawdzić, czy zmienna jest obecny lub nie. The “jeśli obecność” stenografia pomaga to zrobić za pomocą znacznie mniejszej ilości kodu.
Uważaj, że większość artykułów o skrótach JavaScript nie daje odpowiedniej formy długiej, jak if (myVar) notacja nie sprawdza po prostu, czy zmienna nie jest fałszywa, ale także garść innych rzeczy. Mianowicie zmienna nie może być niezdefiniowany, pusty, zerowy i fałszywy.
var myVar = 99; / * Skrót * / if (myVar) console.log ("Zmienna myVar jest zdefiniowana ORAZ nie jest pusta I nie jest pusta ORAZ nie jest fałszywa."); / * Longhand * / if (typeof myVar! == "undefined" && myVar! == "" && myVar! == null && myVar! == 0 && myVar! == false) console.log ("MyVar zmienna jest zdefiniowana ORAZ nie jest pusta ORAZ nie jest pusta ORAZ nie jest fałszywa. ”); Możesz sprawdzić, jak “jeśli obecność” skrót działa poprzez wstawienie następującego fragmentu kodu do konsoli internetowej i zmiana wartości myVar kilka razy.
Aby zrozumieć, jak działa ten skrót, warto przetestować go z wartościami „” (pusta struna), fałszywy, 0, prawdziwe, niepusty łańcuch (np. "Cześć"), numer (np. 99), i kiedy zmienna jest niezdefiniowana (po prostu var myVar;).
10. Sprawdź nieobecność
The “jeśli obecność” można używać skrótów sprawdź brak zmiennej przez umieszczenie przed nim wykrzyknik. Znak wykrzyknika to logiczny nie operator w JavaScript (iw większości języków programowania).
Dlatego z if (! myVar) notacja, możesz sprawdzić, czy myVar zmienna nie jest niezdefiniowany, pusty, zerowy lub fałszywy.
var myVar; / * Skrócony * / if (! MyVar) console.warn ("Zmienna myVar jest niezdefiniowana (OR) pusta (OR) null (OR) false."); / * Longhand * / if (typeof myVar === "undefined" || myVar === "" || myVar === null || myVar === 0 || myVar === false) console.warn ("Zmienna myVar jest niezdefiniowana (OR) pusta (OR) null (OR) false.");
