11 trików JavaScriptu, których nie znajdziesz w większości tutoriali

Kiedy zacząłem uczyć się JavaScriptu, stworzyłem listę wszystkich trików oszczędzających czas, które znalazłem w kodzie innych osób, na stronach z wyzwaniami programistycznymi i gdziekolwiek indziej poza tutorialami, z których korzystałem.

Od tego czasu uzupełniam ją i edytuję oraz wykorzystuję ją w pracy. W tym artykule podzielę się jedenastoma tipami, które uważam za szczególnie sprytne i przydatne. Na pewno najbardziej pomogą początkującym, ale mam nadzieję, że znajdzie się tu coś również dla niektórych midów.

Chociaż wiele z tych sztuczek jest przydatnych w dowolnym kontekście, to niektóre z nich mogą lepiej pasować do code golfa niż kodu produkcyjnego, gdzie jasność jest często ważniejsza niż zwięzłość. Osądź samodzielnie.

1. Filtruj unikalne wartości

TABLICE

Obiekt typu Set został wprowadzony w ES6 i razem z …, operatorem spread, możemy go użyć by stworzyć nową tablicę zawiarającą tylko 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]

Przed ES6 izolowanie unikalnych wartości wymagało znacznie więcej kodu!

Ta sztuczka działa w przypadku tablic zawierających typy podstawowe: undefined, null, boolean, string i number. (Jeśli masz tablicę zawierającą obiekty, funkcje lub dodatkowe tablice, potrzebujesz innego podejścia!).

2. Ewaluacja skrócona

WARUNKI

Operator warunkowy to szybki sposób na pisanie prostych (a czasem wcale nie tak prostych) instrukcji warunkowych, takich jak te:

x > 100 ? 'Above 100' : 'Below 100';
x > 100 ? (x > 200 ? 'Above 200' : 'Between 100-200') : 'Below 100';

Ale czasami nawet operator warunkowy jest bardziej skomplikowany niż to konieczne. Zamiast tego możemy użyć „i” && oraz „lub” || operatorów logicznych do oceny niektórych wyrażeń w jeszcze bardziej zwięzły sposób. Jest to często nazywane ewaluacją skróconą, ewaluacja short-circuit lub short-circuiting.

Jak to działa?

Powiedzmy, że chcemy zwrócić tylko jedną z dwóch lub więcej opcji.

Użycie && zwróci pierwszą wartość false, która jest nieprawdą (falsy). Jeśli każdy argument ma wartość true, zwracane jest ostatnio ocenione wyrażenie.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3

console.log(0 && null); // Result: 0

Użycie || zwróci pierwszą wartość true, która jest prawdziwa (truthy). Jeśli każdy argument ma wartość false, zwracane jest ostatnio ocenione wyrażenie.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1

console.log(0 || null); // Result: null

Przykład 1

Powiedzmy, że chcemy zwrócić długość zmiennej, ale nie znamy jej typu.

Możemy użyć instrukcji if / else, aby sprawdzić, czy foo jest akceptowalnym typem, ale może to być dość żmudne. Możemy to zastąpić ewaluacją short-circuit:

return (foo || []).length;

Jeśli zmienna foo jest prawdziwa, zostanie zwrócona. W przeciwnym razie zostanie zwrócona długość pustej tablicy: 0.

Przykład 2

Czy kiedykolwiek miałeś problemy z dostępem do właściwości zagnieżdżonego obiektu? Możesz nie wiedzieć, czy obiekt lub jedna z właściwości podrzędnych istnieje, co może powodować frustrujące błędy.

Załóżmy, że chcieliśmy uzyskać dostęp do właściwości o nazwie data w this.state, ale dane są niezdefiniowane, dopóki nasz program nie pobrał danych.

W zależności od tego, gdzie go używamy, wywołanie this.state.data może uniemożliwić uruchomienie naszej aplikacji. Aby obejść ten problem, możemy zawrzeć go w warunku:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

Ale to wydaje się dość powtarzalne. Operator „or” zapewnia bardziej zwięzłe rozwiązanie:

return (this.state.data || 'Fetching Data');

Nie możemy zmienić powyższego kodu, aby użyć &&. Instrukcja „Fetching Data” && this.state.data zwróci this.state.data, czy jest niezdefiniowana, czy nie. Wynika to z faktu, że „Pobieranie danych” ewaluuje się do prawdy, dlatego też && zawsze będą je wykonwywać, o ile ta instrukcja zostanie wymieniona jako pierwsza.

Nowa proponowana funkcja: opcjonalne łańcuchowanie

Obecnie istnieje propozycja dopuszczenia opcjonalnego łańcuchowania przy próbie zwrócenia właściwości zaszytej głęboko w strukturach, przypominających drzewo.. Zgodnie z propozycją symbolu ? można użyć do wyodrębnienia właściwości tylko wtedy, gdy nie jest ona pusta (null).

Na przykład moglibyśmy zmienić nasz powyższy przykład na this.state.data?.(), W ten sposób zwracając dane tylko wtedy, gdy nie są one puste.

Jeśli martwiliśmy się głównie o to, czy stan został zdefiniowany, czy nie, moglibyśmy zwrócić this.state?.data.

Propozycja jest obecnie na etapie 1, jako funkcja eksperymentalna. Możesz przeczytać o tym tutaj i możesz teraz używać w swoim JavaScript przy użyciu Babel, dodając @babel/plugin-proposal-optional-chaining do pliku .babelrc.

3. Konwertowanie do boolean

KONWERSJA TYPU

Poza zwykłymi wartościami boolean true i false, JavaScript traktuje również wszystkie inne wartości jako „truthy” lub „falsy”.

O ile nie zdefiniowano inaczej, wszystkie wartości w JavaScript są „truthy”, z wyjątkiem 0, “”, null, undefined, NaN i oczywiście false, które są „falsy”.

Możemy łatwo przełączać się między prawdą a fałszem za pomocą operatora negacji !, który również skonwertuje typ na boolean.

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;

console.log(isTrue); // Result: true
console.log(typeof true); // Result: "boolean"

Tego rodzaju konwersja typów może być przydatna w instrukcjach warunkowych, chociaż jedynym powodem, dla którego zdecydujesz się zdefiniować false jako !1 jest to, że grasz w code golfa!

4. Konwertowanie do String

KONWERSJA TYPU

Aby szybko przekonwertować liczbę na ciąg, możemy użyć operatora konkatenacji +, a następnie pustego zestawu znaków cudzysłowu “”.

const val = 1 + "";

console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

5. Konwertowanie do Number

KONWERSJA TYPU

Przeciwieństwo można szybko osiągnąć za pomocą operatora dodawania +.

let int = "15";
int = +int;

console.log(int); // Result: 15
console.log(typeof int); Result: "number"

Może to być również wykorzystane do konwersji wartości logicznych na liczby, jak poniżej:

console.log(+true);  // Return: 1
console.log(+false); // Return: 0

Mogą istnieć konteksty, w których znak + będzie interpretowany jako operator konkatenacji, a nie operator dodawania. Kiedy tak się dzieje (i chcesz zwrócić liczbę całkowitą, a nie liczbę zmiennoprzecinkową), możesz zamiast tego użyć dwóch tyld: ~~.

Tylda znana jako „bitowy operator NOT”, jest operatorem równoważnym -n - 1. Na przykład ~15 jest równe -16.

Użycie dwóch tyld z rzędu skutecznie 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"

Chociaż nie mogę wymyślić wielu przypadków użycia, bitowego operatora NOT można również używać na wartościach logicznych: ~true = -2 i ~false = -1.

6. Szybkie potęgowanie

OPERACJE

Od wersji ES7 możliwe jest stosowanie operatora potęgowania ** jako skrótu dla potęg, co jest szybsze niż pisanie Math.pow(2, 3). To proste, ale znalazło się na liście, ponieważ niewiele tutoriali zostało zaktualizowanych, aby uwzględnić ten operator!

console.log(2 ** 3); // Result: 8

Nie należy tego mylić z symbolem ^, zwykle używanym do reprezentowania wykładników, który w JavaScript jest bitowym operatorem XOR.

Przed ES7 skrócona wersja istniała tylko dla potęg z bazą 2, przy użyciu bitowego operatora przesunięcia w lewo <<:

// The following expressions are equivalent:

Math.pow(2, n);
2 << (n - 1);
2**n;

Na przykład 2 << 3 = 16 jest równoważne 2 ** 4 = 16.

7. Szybkie przekonwertowanie Float na Integer

OPERACJE / KONWERSJA TYPU

Jeśli chcesz przekonwertować liczbę zmiennoprzecinkową na liczbę całkowitą, możesz użyć Math.floor(), Math.ceil() lub Math.round(). Ale jest też szybszy sposób na zmianę liczby zmiennoprzecinkowej na liczbę całkowitą za pomocą | bitowego operatora OR.

console.log(23.9 | 0);  // Result: 23
console.log(-23.9 | 0); // Result: -23

Zachowanie | różni się w zależności od tego, czy masz do czynienia z liczbami dodatnimi, czy ujemnymi, więc najlepiej jest używać tego skrótu, jeśli masz pewność, z czym masz do czynienia.

Jeśli n jest dodatnie, n | 0 zaokrągla w dół. Jeśli n jest ujemne, to zaokrągla w górę. Mówiąc dokładniej, ta operacja usuwa wszystko, co występuje po przecinku, skracając liczbę zmiennoprzecinkową do liczby całkowitej.

Możesz uzyskać ten sam efekt zaokrąglenia, używając ~~, jak powyżej, a w rzeczywistości operator w inny sposób skróciłby liczbę zmiennoprzecinkową do liczby całkowitej. Powodem, dla którego te konkretne operacje działają, jest to, że - po wymuszeniu na liczbę całkowitą - wartość pozostaje niezmieniona.

Usunięcie ostatnich cyfr

Bitowego operatora OR można również użyć do usunięcia dowolnej liczby cyfr z końca liczby całkowitej. Oznacza to, że nie musimy używać takiego kodu do konwersji między typami:

let str = "1553"; 
Number(str.substring(0, str.length - 1));

Zamiast tego bitowy operator OR pozwala nam pisać:

console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.log(1553 / 1000 | 0)  // Result: 1

8. Automatyczny binding w klasach

KLASY

Możemy używać notacji strzałek ES6 w metodach klasy, a tym samym tworzone jest wiązanie (binding). To często oszczędzi kilka wierszy kodu w naszym konstruktorze, a my możemy z radością 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>
      </>
    )
  }
};

9. Skracanie tablicy

TABLICE

Jeśli chcesz usunąć wartości z końca tablicy destrukcyjnie, istnieją szybsze alternatywy niż użycie splice().

Na przykład, jeśli znasz rozmiar oryginalnej tablicy, możesz ponownie zdefiniować jej właściwość length:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;

console.log(array); // Result: [0, 1, 2, 3]

To szczególnie zwięzłe rozwiązanie. Odkryłem jednak, że czas wykonywania metody slice() jest jeszcze krótszy. Jeśli Twoim głównym celem jest szybkość, rozważ użycie czegoś takiego:

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]

10. Pobranie ostatnich elementów z tablicy

TABLICE

Metoda slice() może przyjmować ujemne liczby całkowite, a jeśli jest podana, pobierze wartości z końca tablicy, a nie z początku.

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]

11. Formatowanie kodu w JSON-ie

JSON

Mogłeś już używać JSON.stringify wcześniej, ale czy zdajesz sobie sprawę, że może to również pomóc w sformatowaniu Twojego JSON-a?

Metoda stringify() przyjmuje dwa opcjonalne parametry: funkcję replacer, której można użyć do filtrowania wyświetlanego JSON-a, oraz wartość `space`.

Wartość spacji przyjmuje liczbę całkowitą dla żądanej liczby spacji lub łańcucha (takiego jak \ t, aby wstawić tabulatory) i może znacznie ułatwić odczytanie pobranych danych JSON-a.

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));
// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'

Mam nadzieję, że te wskazówki okażą się dla Ciebie tak przydatne, jak dla mnie, gdy je odkrywałem.


Oryginał tekstu w języku angielskim przeczytasz tutaj.