🥇12 trikov s JavaScriptom, ktoré nenájdete v väčšine tutoriálov

Keď som začal študovať JavaScript, najprv som si vypracoval zoznam techník, ktoré mi pomohli šetriť čas. Prebral som ich od iných programátorov, na rôznych stránkach a v manuáloch.

V tomto článku ukážem 12 skvelých spôsobov, ako zlepšiť a zrýchliť svoj JavaScript kód. V drvivej väčšine prípadov sú univerzálne.

Pripomíname: pre všetkých čitateľov „Habr“ — zľava 10 000 rubľov pri zapísaní na akýkoľvek kurz Skillbox s promo kódom „Habr“.

Skillbox odporúča: Praktický kurz „Mobilný vývojár PRO“.

Filtrovanie unikátnych hodnôt

POLOŽKY

Typ objektu Set bol zavedený v ES6, spolu s …, spread operátorom, môžeme ho použiť na vytvorenie nového poľa, v ktorom sa nachádzajú iba unikátne hodnoty.

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

V obvyklej situácii by na vykonanie rovnakej operácie bolo potrebné oveľa viac kódu.

Táto technika funguje pre polia, ktoré obsahujú primitívne typy: undefined, null, boolean, string a number. Ak pracujete s poľom, ktoré obsahuje objekty, funkcie alebo ďalšie polia, potrebujete iný prístup.

Dĺžka cache poľa v cykloch

CYKLY

Keď sa učíte for pre cykly, dodržiavate štandardný postup:

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

Napriek tomu pri tejto syntaxi cyklus for znova kontroluje dĺžku poľa pri každej iterácii.

Niekedy to môže byť užitočné, ale vo väčšine prípadov je efektívnejšie uložiť dĺžku poľa do premennej, čo vyžaduje jedno volanie. Môžeme to dosiahnuť definovaním premennej length, kde nastavíme premennú i, napríklad takto:

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

V podstate takmer to isté ako vyššie, ale pri zvyšovaní veľkosti cyklu získame značnú úsporu času.

Hodnotenie krátkeho spojenia (hodnotenie McCarthyho)

PODMIENKOVÉ OPERÁTORY

Ternárny operátor je rýchly a efektívny spôsob, ako napísať jednoduché (a niekedy aj nie veľmi jednoduché) podmienkové výroky:

x > 100 ? 'viac ako 100' : 'menej ako 100';
x > 100 ? (x > 200 ? 'viac ako 200' : 'medzi 100-200') : 'menej ako 100';

Ale niekedy je dokonca aj ternárny operátor zložitý viac, než je potrebné. Namiesto toho môžeme použiť logické operátory 'and' && a 'or' || na vyhodnotenie niektorých výrazov ešte jednoduchším spôsobom. Často sa tomu hovorí 'krátke spojenie' alebo 'hodnotenie krátkeho spojenia'.

Ako to funguje

Povedzme, že chceme vrátiť iba jedno z dvoch alebo viacerých podmienok.

Použitie && vráti prvú hodnotu false. Ak každý operand hodnotí ako true, vráti sa posledný vypočítaný výraz.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Výsledok: 3
 
console.log(0 && null); // Výsledok: 0

Použitie || vráti prvú hodnotu true. Ak každý operand hodnotí ako false, vráti sa posledná vypočítaná hodnota.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Výsledok: 1
 
console.log(0 || null); // Výsledok: null

Príklad 1

Povedzme, že chceme vrátiť length premennej, ale nepoznáme jej typ.

V tomto prípade by sme mohli použiť if/else na kontrolu, či je foo vhodným typom, ale tento spôsob sa môže ukázať ako príliš zdĺhavý. Preto radšej použijeme našu „krátku logiku“.

return (foo || []).length;

Ak premenná foo má vhodnú length, tak sa vráti. V opačnom prípade dostaneme 0.

Príklad 2

Mali ste problémy s prístupom k vnorenému objektu? Môžete nevedieť, či objekt alebo niektorá z jeho podmíniek existuje, a to môže spôsobiť problémy.

Napríklad, chceli sme získať prístup k vlastnosti data v this.state, ale data nie je definované, pokiaľ naša aplikácia nevráti dopyt.

V závislosti od toho, kde ho používame, môže zavolanie this.state.data zabrániť spusteniu aplikácie. Aby sme problém vyriešili, mohli by sme to zabaliť do podmienkového výrazu:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Načítavanie dát';
}

Vhodnejšou variantou by bolo použiť operátor "or".

return (this.state.data || 'Načítavanie dát');

Nemôžeme zmeniť vyššie uvedený kód, aby používal &&. Operátor ‘Načítavanie dát’ && this.state.data vráti this.state.data bez ohľadu na to, či je undefined alebo nie.

Voliteľné reťazenie

Môžeme navrhnúť použiť voliteľné reťazenie pri pokuse o vrátenie vlastnosti hlboko v stromovej štruktúre. Takže znak otázky ? môže byť použitý na zavolanie vlastnosti, iba ak nie je null.

Napríklad, mohli by sme refaktorizovať vyššie uvedený príklad tak, že dostaneme this.state.data?.. (). To znamená, že data sa vráti iba v prípade, že hodnota nie je null.

Alebo, ak je dôležité, či je state definované alebo nie, mohli by sme vrátiť this.state?.data.

Prevod na Boolean

PREVOD TYPOV

Okrem bežných logických hodnôt true a false, JavaScript považuje aj všetky ostatné hodnoty za truthy alebo falsy.

Pokud není uvedeno jinak, všechny hodnoty v JavaScriptu jsou pravdivé, kromě 0, „“, null, undefined, NaN a samozřejmě false. Tyto poslední jsou nepravdivé.

Snadno můžeme přepínat mezi pravdivými a nepravdivými, pomocí operátoru !, který také převádí typ na logický.

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

Převod na řetězec

PREVOD TYPOV

Rychlý převod celého čísla na řetězec lze provést následujícím způsobem.

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

Převod na celé číslo

PREVOD TYPOV

Opačný převod provedeme takto.

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

Tento způsob může být použit i k převodu logického typu boolean na běžné číselné hodnoty, jak je ukázáno níže:

console.log(+true);  // Výsledek: 1
console.log(+false); // Výsledek: 0

Může nastat situace, kdy + bude interpretováno jako operátor spojení, nikoli jako sčítání. Aby se tomu předešlo, je lepší použít tilde: ~~. Tento operátor je ekvivalentní výrazu -n-1. Například, ~ 15 se rovná -16.

Použití dvou tild za sebou anulovuje operaci, protože — (- — n — 1) — 1 = n + 1 — 1 = n. Jinými slovy, ~ -16 se rovná 15.

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

<Quick Powers

OPERACE

Od ES7 lze použít operátor umocnění ** jako zkrácení pro exponenty. To je mnohem rychlejší než použití Math.pow(2, 3). Vypadá to jednoduše, ale tento bod je zahrnut do seznamu triku, protože není všude zmiňován.

console.log(2 ** 3); // Výsledek: 8

Nedomnívejte se, že je to symbol ^, který se obvykle používá pro umocnění. Ale v JavaScriptu je to operátor XOR.

Před ES7 bylo zkrácení ** možné aplikovat pouze pro exponenty s základem 2 pomocí operátoru bitového posunu vlevo <<:

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

Například, 2 << 3 = 16 je ekvivalentní výrazu 2 ** 4 = 16.

Float na celé číslo

OPERACE / PŘEVOD TYPŮ

Pokud je třeba převést float na celé číslo, můžeme použít Math.floor(), Math.ceil() nebo Math.round(). Ale existuje i rychlejší způsob, pro to použijeme |, tedy operátor OR.

console.log(23.9 | 0);  // Výsledek: 23
console.log(-23.9 | 0); // Výsledek: -23

Správanie | do značnej miery závisí od toho, či sa zaoberáte kladnými alebo zápornými číslami, preto je tento spôsob vhodný len vtedy, ak si ste istí tým, čo robíte.

n | 0 odstráni všetko, čo ide za desatinnou bodkou, zaokrúhľujúc desatinné číslo na celé číslo.

Tento istý efekt zaokrúhľovania môžete dosiahnuť pomocou ~~. Po nútenej konverzii na celé číslo zostáva hodnota nezmenená.

Odstránenie koncových čísiel

Operátor OR sa dá použiť na odstránenie akéhokoľvek počtu číslic z čísla. To znamená, že nemusíme konvertovať typy, ako tu:

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

Namiesto toho jednoducho napíšeme:

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

Automatické viazanie

TRIEDY

Arrow funkcie ES6 môžu byť použité v metódach triedy a predpokladá sa, že sú viazané. Vďaka tomu sa môžete rozlúčiť s opakovaním výrazov, ako je 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; {
    // Táto metóda je implicitne viazaná!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

Strihanie poľa

POLOŽKY

Ak potrebujete odstrániť hodnoty z poľa, existujú rýchlejšie metódy ako splice().

Napríklad, ak poznáte veľkosť pôvodného poľa, môžete predefinovať jeho vlastnosť length nasledovne:

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

Ale existuje aj ďalšia metóda, ktorá je rýchlejšia. Ak vám záleží na rýchlosti, tu je náš výber:

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

Výstup poslednej hodnoty (hodnôt) poľa

POLOŽKY
Tento trik vyžaduje použitie metódy slice().

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

Formátovanie JSON kódu

JSON

Možno ste už použili JSON.stringify. Viete, že vám pomáha formátovať váš JSON?

Metóda stringify () má dva voliteľné parametre: funkciu replacer, ktorú môžete použiť na filtrovanie zobrazeného JSON, a hodnotu space.

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

A to je všetko, dúfam, že všetky uvedené triky boli užitočné. Aké triky poznáte vy? Napíšte ich do komentárov.

Skillbox odporúča:

Dvojročný praktický kurz „Som webový vývojár PRO“.

Online kurz C# vývojár od základov.

Praktický ročný kurz „PHP vývojár od 0 do PRO“.

Zdroj: habr.com