Když jsem se začal učit JavaScript, první věc, kterou jsem udělal, byl seznam triků, které mi pomohly ušetřit čas. Viděl jsem je od jiných programátorů, na různých stránkách a v manuálech.
V tomto článku vám ukážu 12 skvělých způsobů, jak zlepšit a zrychlit kód JavaScript. Ve většině případů jsou univerzální.
Připomínáme: pro všechny čtenáře "Habr" - sleva 10 000 rublů při zápisu do jakéhokoli kurzu Skillbox pomocí propagačního kódu "Habr".
Skillbox doporučuje: Praktický kurz .
Filtrování jedinečných hodnot
POLE
Typ objektu Set byl zaveden v ES6 spolu s operátorem..., spread, můžeme jej použít k vytvoření nového pole, které obsahuje pouze 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ální situaci je k provedení stejné operace potřeba mnohem více kódu.
Tato technika funguje pro pole obsahující primitivní typy: undefined, null, boolean, string a number. Pokud pracujete s polem obsahujícím objekty, funkce nebo další pole, budete potřebovat jiný přístup.
Délka pole mezipaměti v cyklech
CYKLY
Když se naučíte smyčky for, budete postupovat podle standardního postupu:
for (let i = 0; i < array.length; i++){
console.log(i);
}S touto syntaxí však smyčka for opakovaně kontroluje délku pole při každé iteraci.
Někdy to může být užitečné, ale ve většině případů je efektivnější uložit do mezipaměti délku pole, což bude vyžadovat jeden přístup k němu. Můžeme to udělat definováním proměnné délky, kde definujeme proměnnou i, takto:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}V zásadě téměř totéž jako výše, ale zvětšením velikosti smyčky získáme výraznou úsporu času.
Jmenovitý zkrat (McCarthy rating)
PODMÍNĚNÉ OPERÁTORY
Ternární operátor je rychlý a efektivní způsob, jak psát jednoduché (a někdy ne tak jednoduché) podmíněné příkazy:
x> 100? „více než 100“: „méně než 100“;
x> 100? (x>200? "více než 200": "mezi 100-200"): "méně než 100";
Někdy je ale i ternární operátor složitější, než je požadováno. Místo toho můžeme použít 'and' && a 'nebo' || Booleovské operátory pro vyhodnocení určitých výrazů ještě stručnějším způsobem. Často se nazývá "zkrat" nebo "jmenovitost zkratu".
Jak to funguje
Řekněme, že chceme vrátit pouze jednu ze dvou nebo více podmínek.
Použití && vrátí první falešnou hodnotu. Pokud je každý operand vyhodnocen jako true, bude vrácen poslední vyhodnocený výraz.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0Pomocí || vrátí první skutečnou hodnotu. Pokud je každý operand vyhodnocen jako nepravda, bude vrácena poslední vyhodnocená hodnota.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: nullPříklad 1
Řekněme, že chceme vrátit délku proměnné, ale neznáme její typ.
V tomto případě můžete pomocí if/else zkontrolovat, zda je foo správný typ, ale tato metoda může být příliš dlouhá. Proto je lepší jet náš „zkrat“.
return (foo || []).length;Pokud má proměnná foo vhodnou délku, bude vrácena. Jinak dostaneme 0.
Příklad 2
Měli jste problémy s přístupem k vnořenému objektu? Možná nevíte, zda objekt nebo jedna z jeho podvlastností existuje, a to může vést k problémům.
Například jsme chtěli přistupovat k vlastnosti data v this.state, ale data nejsou definována, dokud náš program nevrátí požadavek na načtení.
V závislosti na tom, kde jej používáme, může volání this.state.data zabránit spuštění aplikace. Abychom problém vyřešili, mohli bychom to zabalit do podmíněného výrazu:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}Lepší možností by bylo použít operátor „nebo“.
return (this.state.data || 'Fetching Data');Výše uvedený kód nemůžeme změnit na &&. Operátor 'Fetching Data' && this.state.data vrátí this.state.data bez ohledu na to, zda je nedefinovaný nebo ne.
Volitelný řetěz
Někdo by mohl navrhnout použití volitelného řetězení, když se pokoušíte vrátit vlastnost hluboko do stromové struktury. Takže symbol otazníku? lze použít k načtení vlastnosti, pouze pokud není null.
Například bychom mohli refaktorovat výše uvedený příklad, abychom získali this.state.data?...(). To znamená, že data jsou vrácena pouze v případě, že hodnota není null.
Nebo, pokud záleží na tom, zda je stav definován nebo ne, můžeme vrátit data this.state?.
Převést na Boolean
TYPOVÁ KONVERZE
Kromě normálních booleovských funkcí true a false, JavaScript také považuje všechny ostatní hodnoty za pravdivé nebo nepravdivé.
Dokud není uvedeno jinak, všechny hodnoty v JavaScriptu jsou pravdivé, kromě 0, "", null, undefined, NaN a samozřejmě false. Ty druhé jsou falešné.
Mezi těmito dvěma můžeme snadno přepínat pomocí operátoru !, který také převede typ na booleovský.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"Převést na řetězec
TYPOVÁ KONVERZE
Rychlý převod z celého čísla na řetězec lze provést následovně.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"Převést na celé číslo
TYPOVÁ KONVERZE
Reverzní transformaci provedeme takto.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"Tuto metodu lze také použít k převodu booleovského datového typu na běžné číselné hodnoty, jak je uvedeno níže:
console.log(+true); // Return: 1
console.log(+false); // Return: 0Mohou nastat situace, kdy + bude interpretováno jako operátor zřetězení spíše než operátor sčítání. Abyste tomu zabránili, měli byste použít vlnovky: ~~. Tento operátor je ekvivalentní -n-1. Například ~15 se rovná -16.
Použití dvou vlnovek v řadě neguje operaci, protože - (- - n - 1) - 1 = n + 1 - 1 = n. Jinými slovy, ~-16 se rovná 15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"<Quick Powers
OPERACE
Počínaje ES7 můžete použít operátor umocňování ** jako zkratku pro mocniny. To je mnohem rychlejší než použití Math.pow(2, 3). Zdá se to jednoduché, ale tento bod je uveden v seznamu technik, protože není všude zmíněn.
console.log(2 ** 3); // Result: 8Neměl by být zaměňován se symbolem ^, který se běžně používá pro umocňování. Ale v JavaScriptu je to operátor XOR.
Před ES7 mohla být zkratka ** použita pouze pro mocniny základu 2 pomocí bitového operátoru posunu vlevo <<:
Math.pow(2, n);
2 << (n - 1);
2**n;Například 2 << 3 = 16 je ekvivalentní 2 ** 4 = 16.
Plovoucí na celé číslo
OPERACE / TYPOVÁ KONVERZE
Pokud potřebujete převést float na celé číslo, můžete použít Math.floor(), Math.ceil() nebo Math.round(). Existuje ale rychlejší způsob, k tomu použijeme |, tedy operátor OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23Chování | závisí do značné míry na tom, zda máte co do činění s kladnými nebo zápornými čísly, takže tato metoda je vhodná pouze tehdy, pokud jste si jisti tím, co děláte.
n | 0 odstraní vše za oddělovačem desetinných míst a zkrátí plovoucí hodnotu na celé číslo.
Stejný efekt zaoblení můžete získat pomocí ~~. Po vynuceném převodu na celé číslo zůstane hodnota nezměněna.
Odstranění koncových čísel
Operátor OR lze použít k odstranění libovolného počtu číslic z čísla. To znamená, že nemusíme převádět typy jako zde:
let str = "1553";
Number(str.substring(0, str.length - 1));Místo toho jednoduše napíšeme:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1Automatické propojení
TŘÍDY
Šipkové notace ES6 lze použít v metodách tříd a předpokládá se vazba. To znamená, že se můžete rozloučit s opakujícími se výrazy jako 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>
</>
)
}
};Ořezávání pole
POLE
Pokud potřebujete odstranit hodnoty z pole, existují rychlejší metody než splice().
Pokud například znáte velikost původního pole, můžete přepsat jeho vlastnost length následovně:
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 i jiný způsob, a to rychlejší. Pokud je pro vás rychlost důležitá, zde jsou 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]Tisk poslední hodnoty (hodnot) pole
POLE
Tato technika vyžaduje použití metody 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átování kódu JSON
JSON
Možná jste již použili JSON.stringify. Věděli jste, že pomáhá formátovat váš JSON?
Metoda stringify() má dva volitelné parametry: náhradní funkci, kterou lze použít k filtrování zobrazeného JSON, a hodnotu mezery.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'To je vše, doufám, že všechny tyto techniky byly užitečné. Jaké triky znáte? Napište je do komentářů.
Skillbox doporučuje:
- Dvouletý praktický kurz .
- Online kurz .
- Praktický roční kurz .
Zdroj: www.habr.com