🥇12 triků pro práci s JavaScript, které většina tutoriálů nemá

Když jsem začal studovat JavaScript, nejprve jsem si sestavil seznam technik, které mi pomohly šetřit čas. Ukradl jsem je od jiných programátorů, na různých webech a v příručkách.

V tomto článku ukážu 12 skvělých způsobů, jak zlepšit a urychlit svůj JavaScriptový kód. Většinou jsou univerzální.

Připomínáme: pro všechny čtenáře "Habra" – sleva 10 000 korun při registraci na jakýkoli kurz Skillbox s promokódem "Habr".

Skillbox doporučuje: Praktický kurz "Mobilní vývojář PRO".

Filtrace unikátních hodnot

ARRAYE

Typ objektu Set byl zaveden v ES6, spolu s …, pomocí spread operátoru jej můžeme použít k vytvoření nového pole, které obsahuje pouze unikátní hodnoty.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];

console.log(uniqueArray); // Výsledek: [1, 2, 3, 5]

Obvykle by pro provedení té samé operace bylo 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 cachovaného pole v cyklech

CYKLY

Když se učíte for pro cykly, následujete standardní proceduru:

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

Nicméně s tímto syntaxem cyklus for znovu 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ší cachovat délku pole, což vyžaduje jedno přístup k němu. Můžeme to udělat definováním proměnné délky, kde nastavíme proměnnou i, například takto:

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

V zásadě skoro to samé jako výše, ale s rostoucím počtem iterací cyklu získáme značnou úsporu času.

Hodnocení krátkého zamykání (hodnocení McCarthyho)

POVINNÉ OPERÁTORY

Ternární operátor je rychlý a efektivní způsob, jak napsat jednoduché (a někdy i složitější) podmínkové výroky:

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";

Ale někdy je i ternární operátor složitější, než je potřeba. Místo toho můžeme použít logické operátory 'and' && a 'or' || k hodnocení některých výrazů ještě stručnějším způsobem. Tento způsob se často nazývá "krátké zamykání" nebo "hodnocení krátkého zamykání."

Jak to funguje

Řekněme, že chceme vrátit pouze jedno z dvou nebo více podmínek.

Použití && vrátí první nepravdivou hodnotu. Pokud je každý operand vyhodnocen jako pravdivý, vrátí se poslední vyhodnocený výraz.

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

Použití || umožní vrátit první pravdivou hodnotu. Pokud je každý operand vyhodnocen jako nepravdivý, vrátí se poslední vyhodnocená hodnota.

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

Příklad 1

Řekněme, že chceme vrátit length proměnné, ale neznáme její typ.

V takovém případě můžeme použít if/else pro kontrolu, zda je foo správný typ, ale tento způsob může být příliš zdlouhavý. Proto raději použijeme naše "krátké zkrácení".

return (foo || []).length;

Pokud má proměnná foo správnou length, bude tato hodnota 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 jeden z jeho podřízených vlastností existuje, a to může způsobit problémy.

Například jsme chtěli přistupovat k vlastnosti data v this.state, ale data není definována, dokud naše aplikace nevrátí dotaz na načtení.

V závislosti na tom, kde ho 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ínkového výrazu:

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

Vhodnějším řešením by bylo použít operátor „nebo“.

return (this.state.data || 'Načítání dat');

Nemůžeme změnit výše uvedený kód tak, aby používal &&. Operátor ‘Načítání dat’ && this.state.data vrátí this.state.data bez ohledu na to, zda je nedefinována nebo ne.

Volitelný řetězec

Můžeme navrhnout použití volitelného řetězce při pokusu o vrácení vlastnosti hluboko ve stromové struktuře. Takže znak otazníku ? může být použit k extrakci vlastnosti, pouze pokud není rovna nule (null).

Například bychom mohli refaktorovat výše uvedený příklad tak, že získáme this.state.data?.. (). To znamená, že data se vrací pouze v případě, že hodnota není null.

Nebo, pokud je důležité, zda je state definováno, nebo ne, mohli bychom vrátit this.state?.data.

Převod na Boolean

PŘEVOD TYPŮ

Kromě běžných logických funkcí true a false JavaScript také považuje všechny ostatní hodnoty za truthy nebo falsy.

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

Mezi těmito hodnotami můžeme snadno přepínat 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

PŘEVOD TYPŮ

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

PŘEVOD TYPŮ

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 lze použít také k převodu logického typu dat boolean na běžné číselné hodnoty, jak ukazuje následující příklad:

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 součtu. Abychom se tomu vyhnuli, je dobré použít vlnovky: ~~. Tato operace je ekvivalentní výrazu -n-1. Například, ~ 15 se rovná -16.

Použití dvou vlnovek za sebou neguje 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 zkratku pro mocniny. Je to mnohem rychlejší než použití Math.pow (2, 3). I když se to zdá jednoduché, je tento aspekt zahrnut do seznamu triků, neboť není vždy zmíněn.

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

Nesmí se zaměňovat se symbolem ^, který se obvykle používá pro umocnění. Ale v JavaScriptu je to operátor XOR.

Před ES7 mohla být zkratka ** použita pouze pro mocniny se základem 2 pomocí operátoru bitového posunu vlevo <<:

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

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

Float na celé číslo

OPERACE / PŘEVOD TYPŮ

Pokud je potřeba převést float na celé číslo, lze použít Math.floor(), Math.ceil() nebo Math.round(). Existuje však i rychlejší metoda, a to použití |, tedy operátoru OR.

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

Chování | do značné míry závisí na tom, zda se jedná o kladná nebo záporná čísla, a proto je tento způsob vhodný pouze v případě, že víte, co děláte.

n | 0 odstraní vše, co následuje za desetinným oddělovačem, ořezávající číslo s pohyblivou řádovou hodnotou na celé číslo.

Stejného efektu zaokrouhlení můžete dosáhnout použitím ~~. Po nucené konverzi na celé číslo zůstává hodnota nezměněná.

Odstranění závěrečný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)  // Výsledek: 155
console.log(1553 / 100  | 0)  // Výsledek: 15
console.log(1553 / 1000 | 0)  // Výsledek: 1

Automatické vazby

TŘÍDY

Šipková označení ES6 lze použít v metodách třídy, a je tím implicitně zajištěna vazba. Díky tomu se můžeme rozloučit s opakujícími se výrazy, jako 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; {
    // Tato metoda je implicitně připojena!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

Oříznutí pole

ARRAYE

Pokud potřebujete odstranit hodnoty z pole, existují rychlejší metody než splice().

Například, pokud znáte velikost původního pole, můžete přepsat jeho vlastnost length následujícím způsobem:

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

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

Ale existuje také další metoda, a to rychlejší. Pokud na vás záleží na rychlosti, tady je náš výběr:

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

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

Výstup poslední hodnoty (hodnot) pole

ARRAYE
Tento trik vyžaduje použití metody slice().

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

console.log(array.slice(-1)); // Výsledek: [9]
console.log(array.slice(-2)); // Výsledek: [8, 9]
console.log(array.slice(-3)); // Výsledek: [7, 8, 9]

Formátování JSON kódu

JSON

Možná jste již použili JSON.stringify. Víte, že vám pomůže formátovat váš JSON?

Metoda stringify() přijímá dva nepovinné parametry: funkci replacer, kterou můžete použít k filtrování zobrazeného JSON, a hodnotu space.

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

// Výsledek:
// '{
//     "alpha": A,
//     "beta": B
// }'

A to je vše, doufám, že všechny zmíněné triky byly užitečné. Jaké triky znáte vy? Napište je do komentářů.

Skillbox doporučuje:

Dvouroční praktický kurz „Jsem webový vývojář PRO“.

Online kurz „C# vývojář od nuly“.

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

Zdroj: habr.com