🥇12 trików w JavaScript, których brakuje w większości samouczków

Kiedy zaczynałem uczyć się JavaScript, najpierw sporządziłem listę technik, które pomagały mi oszczędzać czas. Oprócz tego podpatrzyłem je u innych programistów, na różnych stronach internetowych i w podręcznikach.

W tym artykule pokażę 12 doskonałych sposobów na poprawę i przyspieszenie swojego kodu JavaScript. W większości przypadków są one uniwersalne.

Przypominamy: dla wszystkich czytelników „Habra” — zniżka 10 000 rubli przy zapisie na dowolny kurs Skillbox z kodem promocyjnym „Habra”.

Skillbox poleca: Praktyczny kurs „Mobilny programista PRO”.

Filtrowanie unikalnych wartości

TABLICE

Typ obiektu Set został wprowadzony w ES6, a za pomocą …, operatora spread, możemy go użyć do stworzenia nowej tablicy, która zawiera tylko unikalne wartości.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
 
console.log(uniqueArray); // Wynik: [1, 2, 3, 5]

W normalnej sytuacji, aby wykonać tę operację, potrzeba znacznie więcej kodu.

Ta technika działa dla tablic zawierających typy pierwotne: undefined, null, boolean, string i number. Jeśli pracujesz z tablicą zawierającą obiekty, funkcje lub dodatkowe tablice, będziesz musiał zastosować inne podejście.

Długość tablicy w pętlach

PĘTLE

Kiedy uczysz się pętli for, postępujesz zgodnie z standardową procedurą:

for (let i = 0; i < array.length; i++) {
  console.log(i);
}

Jednak przy takim składni pętla for ponownie sprawdza długość tablicy przy każdej iteracji.

Czasami może to być przydatne, ale w większości przypadków bardziej efektywne jest przechowywanie długości tablicy, co wymaga jednego dostępu do niej. Możemy to zrobić, definiując zmienną długości, gdzie ustalamy zmienną i, na przykład, tak:

for (let i = 0, length = array.length; i < length; i++) {
  console.log(i);
}

Zasadniczo to prawie to samo, co powyżej, ale przy zwiększaniu rozmiaru pętli osiągniemy znaczną oszczędność czasu.

Ocena krótkiego zasięgu (ocena McCarthy'ego)

OPERATORZY WARUNKOWI

Operator trójskładnikowy to szybki i efektywny sposób na zapisanie prostych (a czasami i bardziej złożonych) warunkowych wypowiedzi:

x > 100 ? 'więcej niż 100' : 'mniej niż 100';
x > 100 ? (x > 200 ? 'więcej niż 200' : 'między 100-200') : 'mniej niż 100';

Ale czasami nawet operator trójskładnikowy jest bardziej skomplikowany, niż to konieczne. Zamiast niego możemy użyć operatorów logicznych 'and' && oraz 'or' || do oceny niektórych wyrażeń w jeszcze bardziej zwięzły sposób. Często nazywa się to 'krótkim zasięgiem' lub 'oceną krótkiego zasięgu'.

Jak to działa

Powiedzmy, że chcemy zwrócić tylko jedno z dwóch lub więcej warunków.

Użycie && zwraca pierwszą wartość false. Jeśli każdy operand jest oceniany jako true, zwrócone zostanie ostatnie obliczone wyrażenie.

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

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

Użycie || pozwala na zwrócenie pierwszej wartości true. Jeśli każdy operand oceniany jest jako false, zwrócone zostanie ostatnie obliczone wartość.

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

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

Przykład 1

Załóżmy, że chcemy zwrócić length zmiennej, ale nie znamy jej typu.

W takim przypadku można użyć if/else do sprawdzenia, czy foo jest odpowiedniego typu, ale ten sposób może okazać się zbyt czasochłonny. Dlatego lepiej skorzystać z naszego «krótkiego złączenia».

return (foo || []).length;

Jeśli zmienna foo ma odpowiednią length, to 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 jedno z jego podwłaściwości 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 data nie jest zdefiniowana, dopóki nasz program nie zwróci zapytania o wybór.

W zależności od tego, gdzie go używamy, wywołanie this.state.data może uniemożliwić uruchomienie aplikacji. Aby rozwiązać problem, moglibyśmy owinąć to w wyrażenie warunkowe:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Pobieranie danych';
}

Bardziej odpowiednią opcją będzie użycie operatora 'or'.

return (this.state.data || 'Pobieranie danych');

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 undefined, czy nie.

Opcjonalne łańcuchowanie

Można zasugerować użycie opcjonalnego łańcuchowania, próbując zwrócić właściwość głęboko w drzewiastej strukturze. Tak, znak zapytania ? może być użyty do wyodrębnienia właściwości tylko wtedy, gdy nie jest równa null.

Na przykład moglibyśmy zrefaktoryzować powyższy przykład, otrzymując this.state.data?..(). To znaczy data zwracana jest tylko wtedy, gdy wartość nie jest null.

Lub jeśli istotne jest, czy stan jest zdefiniowany, czy nie, moglibyśmy zwrócić this.state?.data.

Konwersja na Boolean

KONWERSJA TYPOW

Oprócz zwykłych wartości logicznych true i false, JavaScript traktuje wszystkie inne wartości jako truthy lub falsy.

O ile nie wskazano inaczej, wszystkie wartości w JavaScript są wartościami prawdziwymi, z wyjątkiem 0, „”, null, undefined, NaN i, oczywiście, false. Te ostatnie są wartościami fałszywymi.

Możemy łatwo przełączać się między nimi, używając operatora !, który także przekształca typ na logiczny.

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // Wynik: true
console.log(typeof true); // Wynik: "boolean"

Przekształcanie na string

KONWERSJA TYPOW

Szybkie przekształcenie liczby całkowitej na string można wykonać w następujący sposób.

const val = 1 + "";
 
console.log(val); // Wynik: "1"
console.log(typeof val); // Wynik: "string"

Przekształcanie na liczbę całkowitą

KONWERSJA TYPOW

Odwracamy przekształcenie w ten sposób.

let int = "15";
int = +int;
 
console.log(int); // Wynik: 15
console.log(typeof int); // Wynik: "number"

Ten sposób można również wykorzystać do przekształcania logicznego typu danych boolean na zwykłe wartości liczbowe, jak pokazano poniżej:

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

Mogą być sytuacje, gdy + jest interpretowane jako operator konkatenacji, a nie dodawania. Aby tego uniknąć, warto użyć tildy: ~~. Ten operator jest równoważny wyrażeniu -n-1. Na przykład, ~ 15 równa się -16.

Użycie dwóch tyld jednocześnie anuluje operację, ponieważ — (- — n — 1) — 1 = n + 1 — 1 = n. Innymi słowy, ~ -16 równa się 15.

const int = ~~"15"
console.log(int); // Wynik: 15
console.log(typeof int); // Wynik: "number"

<Quick Powers

OPERACJE

Od ES7 możemy używać operatora potęgowania ** jako skrótu dla potęg. Jest to znacznie szybsze niż używanie Math.pow (2, 3). Wydaje się to proste, ale ten moment został uwzględniony w liście sztuczek, ponieważ nie wszędzie jest to wspomniane.

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

Nie należy mylić go z symbolem ^, który zwykle używany jest do potęgowania. Jednak w JavaScript jest to operator XOR.

Do ES7 skrót ** można było stosować tylko dla potęg z podstawą 2, używając operatora bitowego przesunięcia w lewo <<:

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

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

Float na liczbę całkowitą

OPERACJE / PRZEKONWERSJA TYPOW

W razie potrzeby przekształcenie float na liczbę całkowitą można wykonać, korzystając z Math.floor(), Math.ceil() lub Math.round(). Istnieje jednak szybsza metoda, używając |, czyli operatora OR.

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

Zachowanie | w dużej mierze zależy od tego, czy masz do czynienia z liczbami dodatnimi, czy ujemnymi, dlatego ta metoda nadaje się tylko wtedy, gdy jesteś pewien tego, co robisz.

n | 0 usuwa wszystko, co idzie po przecinku, skracając liczbę zmiennoprzecinkową do liczby całkowitej.

Możesz uzyskać ten sam efekt zaokrąglania, używając ~. Po wymuszeniu konwersji na liczbę całkowitą, wartość pozostaje niezmieniona.

Usuwamy końcowe cyfry

Operator OR można wykorzystać do usunięcia dowolnej liczby cyfr z liczby. Oznacza to, że nie trzeba zmieniać typów, jak tutaj:

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

Zamiast tego po prostu zapisujemy:

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

Automatyczne wiązanie

KLASY

Strzałkowe funkcje ES6 można używać w metodach klasy, co implikuje wiązanie. Dzięki temu można pożegnać się z powtarzającymi się wyrażeniami, jak this.myMethod = this.myMethod.bind(this)!

import React, { Component } from React;
 
export default class App extends Component {
  constructor(props) {
  super(props);
  this.state = {};
  }
 
myMethod = () =&gt; {
    // Ta metoda jest wiązana niejawnie!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

Przycinanie tablicy

TABLICE

Jeśli musisz usunąć wartości z tablicy, istnieją szybsze metody niż splice().

Na przykład, jeśli znasz rozmiar oryginalnej tablicy, możesz przedefiniować jej właściwość length w ten sposób:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
 
console.log(array); // Wynik: [0, 1, 2, 3]

Ale jest też inna metoda, a co więcej, szybsza. Jeśli szybkość ma dla Ciebie znaczenie, oto nasz wybór:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
 
console.log(array); // Wynik: [0, 1, 2, 3]

Wyświetlenie ostatniej wartości (wartości) tablicy

TABLICE
Ta technika wymaga użycia metody slice().

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
console.log(array.slice(-1)); // Wynik: [9]
console.log(array.slice(-2)); // Wynik: [8, 9]
console.log(array.slice(-3)); // Wynik: [7, 8, 9]

Formatowanie kodu JSON

YANG

Może już używałeś JSON.stringify. Czy wiesz, że pomaga on formatować Twój JSON?

Metoda stringify() przyjmuje dwa opcjonalne parametry: funkcję replacer, którą można wykorzystać do filtrowania wyświetlanego JSON i wartość space.

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

To wszystko, mam nadzieję, że wszystkie wymienione techniki były przydatne. Jakie triki znasz? Napisz je w komentarzach.

Skillbox poleca:

Dwuletni praktyczny kurs «Jestem programistą webowym PRO».

Kurs online „Programista C# od podstaw”.

Praktyczny roczny kurs «PHP programista od 0 do PRO».

Źródło: habr.com