Keď som sa začal učiť JavaScript, prvá vec, ktorú som urobil, bol zoznam trikov, ktoré mi pomohli ušetriť čas. Všimol som si ich od iných programátorov, na rôznych stránkach a v manuáloch.
V tomto článku vám ukážem 12 skvelých spôsobov, ako zlepšiť a zrýchliť váš JavaScript kód. Vo väčšine prípadov sú univerzálne.
Pripomíname vám: pre všetkých čitateľov „Habr“ - zľava 10 000 rubľov pri registrácii do akéhokoľvek kurzu Skillbox pomocou propagačného kódu „Habr“.
Skillbox odporúča: Praktický kurz .
Filtrovanie jedinečných hodnôt
POLIA
Typ objektu Set bol zavedený v ES6 spolu s operátorom..., spread, môžeme ho použiť na vytvorenie nového poľa, ktoré obsahuje iba jedinečné hodnoty.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]V normálnej situácii je na vykonanie rovnakej operácie potrebných oveľa viac kódu.
Táto technika funguje pre polia obsahujúce primitívne typy: undefined, null, boolean, string a number. Ak pracujete s poľom obsahujúcim objekty, funkcie alebo ďalšie polia, budete potrebovať iný prístup.
Dĺžka poľa vyrovnávacej pamäte v cykloch
CYKLY
Keď sa naučíte pre slučky, budete postupovať podľa štandardného postupu:
for (let i = 0; i < array.length; i++){
console.log(i);
}S touto syntaxou však cyklus for opakovane 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 vyrovnávacej pamäte, čo si bude vyžadovať jeden prístup k nemu. Môžeme to urobiť definovaním premennej dĺžky, kde definujeme premennú i, takto:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}V zásade takmer to isté ako vyššie, ale zväčšením veľkosti slučky získame výraznú úsporu času.
Hodnotenie skratu (McCarthy hodnotenie)
PODMIENENÉ OPERÁTORY
Ternárny operátor je rýchly a efektívny spôsob, ako písať jednoduché (a niekedy nie také jednoduché) podmienené príkazy:
x> 100? „viac ako 100“: „menej ako 100“;
x> 100? (x>200? "viac ako 200": "medzi 100-200"): "menej ako 100";
Ale niekedy je aj ternárny operátor komplikovanejší, ako sa vyžaduje. Namiesto toho môžeme použiť 'and' && a 'alebo' || Booleovské operátory na vyhodnotenie určitých výrazov ešte stručnejším spôsobom. Často sa nazýva „skrat“ alebo „hodnota skratu“.
Ako to funguje
Povedzme, že chceme vrátiť iba jednu z dvoch alebo viacerých podmienok.
Použitie && vráti prvú falošnú hodnotu. Ak sa každý operand vyhodnotí ako true, vráti sa posledný vyhodnotený výraz.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Pomocou || vráti prvú skutočnú hodnotu. Ak sa každý operand vyhodnotí ako nepravda, vráti sa posledná vyhodnotená hodnota.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullPríklad 1
Povedzme, že chceme vrátiť dĺžku premennej, ale nepoznáme jej typ.
V tomto prípade môžete použiť if/else na kontrolu, či je foo správny typ, ale táto metóda môže byť príliš dlhá. Preto je lepšie ísť po našom „skrate“.
return (foo || []).length;Ak má premenná foo vhodnú dĺžku, vráti sa. V opačnom prípade dostaneme 0.
Príklad 2
Mali ste problémy s prístupom k vnoreným objektom? Možno neviete, či objekt alebo niektorá z jeho podvlastností existuje, čo môže viesť k problémom.
Napríklad sme chceli pristupovať k vlastnosti dát v this.state, ale dáta nie sú definované, kým náš program nevráti požiadavku na načítanie.
V závislosti od toho, kde ho používame, môže volanie this.state.data zabrániť spusteniu aplikácie. Na vyriešenie problému by sme to mohli zabaliť do podmieneného výrazu:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Lepšou možnosťou by bolo použiť operátor „alebo“.
return (this.state.data || 'Fetching Data');Vyššie uvedený kód nemôžeme zmeniť na &&. Operátor 'Fetching Data' && this.state.data vráti tento.state.data bez ohľadu na to, či je nedefinovaný alebo nie.
Voliteľná reťaz
Niekto by mohol navrhnúť použitie voliteľného reťazenia, keď sa pokúšate vrátiť vlastnosť hlboko do stromovej štruktúry. Takže symbol otáznika? možno použiť na načítanie vlastnosti, iba ak nie je nulová.
Napríklad by sme mohli refaktorovať vyššie uvedený príklad, aby sme získali this.state.data?...(). To znamená, že údaje sa vrátia iba vtedy, ak hodnota nie je nulová.
Alebo, ak záleží na tom, či je stav definovaný alebo nie, môžeme vrátiť tento.stav?.dáta.
Konvertovať na booleovskú
KONVERZIA TYPU
Okrem normálnych boolovských funkcií true a false, JavaScript tiež považuje všetky ostatné hodnoty za pravdivé alebo nepravdivé.
Pokiaľ nie je uvedené inak, všetky hodnoty v JavaScripte sú pravdivé okrem 0, "", null, undefined, NaN a samozrejme false. Tie posledné sú falošné.
Medzi nimi môžeme jednoducho prepínať pomocou operátora !, ktorý tiež prevedie typ na booleovský.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Previesť na reťazec
KONVERZIA TYPU
Rýchly prevod z celého čísla na reťazec možno vykonať nasledovne.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Previesť na celé číslo
KONVERZIA TYPU
Spätnú transformáciu vykonáme takto.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Túto metódu možno použiť aj na konverziu typu booleovských údajov na bežné číselné hodnoty, ako je uvedené nižšie:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Môžu nastať situácie, keď sa + bude interpretovať ako operátor zreťazenia a nie ako operátor sčítania. Aby ste tomu zabránili, mali by ste použiť vlnovky: ~~. Tento operátor je ekvivalentom -n-1. Napríklad ~15 sa rovná -16.
Použitie dvoch vlnoviek v rade neguje operáciu, pretože - (- - n - 1) - 1 = n + 1 - 1 = n. Inými slovami, ~-16 sa rovná 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
PREVÁDZKY
Počnúc ES7 môžete použiť operátor umocňovania ** ako skratku pre mocniny. Je to oveľa rýchlejšie ako použitie Math.pow(2, 3). Zdá sa to jednoduché, ale tento bod je zahrnutý v zozname techník, pretože nie je všade spomenutý.
console.log(2 ** 3); // Result: 8Nemal by sa zamieňať so symbolom ^, ktorý sa bežne používa na umocňovanie. Ale v JavaScripte je to operátor XOR.
Pred ES7 sa skratka ** dala použiť iba pre mocniny základu 2 pomocou bitového operátora posunu doľava <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Napríklad 2 << 3 = 16 je ekvivalentné 2 ** 4 = 16.
Pohybovať sa na celé číslo
OPERÁCIE / KONVERZIA TYPU
Ak potrebujete previesť float na celé číslo, môžete použiť Math.floor(), Math.ceil() alebo Math.round(). Existuje však rýchlejší spôsob, na ktorý používame |, teda operátor OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Správanie | do značnej miery závisí od toho, či máte do činenia s kladnými alebo zápornými číslami, takže táto metóda je vhodná len vtedy, ak ste si istí tým, čo robíte.
n | 0 odstráni všetko za oddeľovačom desatinných miest a skráti pohyblivú hodnotu na celé číslo.
Rovnaký efekt zaoblenia môžete získať pomocou ~~. Po vynútenom prevode na celé číslo zostane hodnota nezmenená.
Odstránenie koncových čísel
Operátor OR možno použiť na odstránenie ľubovoľného počtu číslic z čísla. To znamená, že nemusíme prevádzať typy ako tu:
let str = "1553";
Number(str.substring(0, str.length - 1));Namiesto toho jednoducho napíšeme:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Automatické prepojenie
TRIEDY
V metódach triedy je možné použiť šípkové notácie ES6 a predpokladá sa väzba. To znamená, že sa môžete rozlúčiť s opakujúcimi sa výrazmi, ako napríklad 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>
</>
)
}
};Orezanie poľa
POLIA
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 prepísať jeho vlastnosť length takto:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]Existuje však aj iná metóda, rýchlejšia. Ak je pre vás rýchlosť dôležitá, tu sú naše tipy:
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]Tlač posledných hodnôt poľa
POLIA
Táto technika vyžaduje použitie metódy slice().
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]Formátovanie kódu JSON
JSON
Možno ste už použili JSON.stringify. Vedeli ste, že pomáha formátovať váš JSON?
Metóda stringify() má dva voliteľné parametre: náhradnú funkciu, ktorú možno použiť na filtrovanie zobrazeného JSON, a hodnotu medzery.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'To je všetko, dúfam, že všetky tieto techniky boli užitočné. Aké triky poznáte? Napíšte ich do komentárov.
Skillbox odporúča:
- Dvojročný praktický kurz .
- Online kurz .
- Praktický ročníkový kurz .
Zdroj: hab.com