Šest dalších malých, ale úžasných funkcí ES6

ES6 přinesl vývojářům JavaScriptu obrovskou novou sadu funkcí a aktualizací syntaxe, ze kterých mohou být nadšení. Některé z těchto jazykových aktualizací jsou poměrně velké, ale některé z nich jsou malé aktualizace, které byste přehlédli, kdybyste nebyli opatrní – proto jsem psal o Six Tiny But Awesome ES6 Features, seznamu maličkostí, které mohou mít velký rozdíl když kódujete pro dnešní prohlížeče. Chtěl jsem se s vámi podělit o šest dalších skvostů, které můžete začít používat ke snížení kódu a maximalizaci efektivity.

1. Objektový těsnopis

Nová zkrácená syntaxe vytváření objektů umožňuje vývojářům vytvářet objekty klíč => hodnota bez definování klíče:název proměnné se stane klíčem a hodnota proměnné se stane hodnotou nového objektu:

var x = 12;
var y = 'Yes!';
var z = { one: '1', two: '2' };

// The old way:
var obj = {
    x: x,
    y: y,
    z: z
};

var obj = { x, y, z };
/*
    {
        x: 12,
        y: "Yes!",
        z: { one: '1', two: '2' }
    }
*/

Nemohu vám říci, kolikrát jsem ručně kódoval vlastnosti klíče => hodnoty přesně stejným způsobem – nyní máme pouze kratší způsob dokončení tohoto úkolu.

2. Vlastnosti metody

Pokud jde o tyto tipy ES6, zdá se, že jsem posedlý tím, abych se vyhnul přidání function klíčové slovo...a myslím, že tento tip se neliší. V každém případě můžeme zkrátit deklarace funkcí objektu a la:

// Format: { myFn(param1) { ... } }
var davidwalsh = {
    makeItHappen(param) {
        /* do stuff */
    }
}

Musíte uznat, že vynechání všech function Klíčové slovo šílenství přináší čistší kód a méně údržby.

3. Bloky vs. okamžitě provedené funkce

Vzor pro vytváření okamžitě vykonávaných funkcí je trochu ošklivý:

(function() {

   /* do stuff */

})();

S ES6 můžeme vytvořit blok s pouhými {} a s let , můžeme okamžitě provést chování podobné funkcím bez všech závorek:

{ 
    let j = 12; 
    let divs = document.querySelectorAll('div');

    /* do more stuff */
}

j;  // ReferenceError: j is not defined...

Pokud deklarujete funkci v rámci bloku, dojde k jejímu úniku, ale pokud dodržíte let , v podstatě jste vytvořili IEF bez závorek.

4. for smyčky a let

Kvůli zvedání proměnných v JavaScriptu jsme často buď deklarovali „neužitečné“ proměnné iterátoru v horní části bloků, kód for(var x =... , nebo nejhorší ze všeho zapomenout udělat jedno z toho, a tak uniknout globální...jen proto, abyste prošli zatraceně iterovatelným. ES6 tuto nepříjemnost opravuje a umožňuje nám používat let jako lék:

for(let x = 0; x <= elements.length; x++) {
  console.log(x); // x increments
}

x; // ReferenceError: x is not defined

V blízké budoucnosti uvidíme let používá se tolik, ne-li více než var .

5. get a set pro třídy

Jako člen týmu MooTools jsem byl velkým fanouškem tříd v JavaScriptu, než se třídy JavaScript staly skutečnou záležitostí. Teď je z nich věc:

class Cart {
  constructor(total) {
      this._total = total;
  }
  get total() { return this._total; }
  set total(v) { this._total = Number(v); }

  get totalWithTax() { return parseInt(this._total * 1.1, 10); } /* 10% tax */
}

var cart = new Cart(100);

cart.totalWithTax === 110;

Nejlepší na tom je nová schopnost vytvářet getry a settery pro vlastnosti! Není třeba vytvářet speciální nastavení pomocí funkcí – tyto se automaticky spustí, když jsou nastaveny pomocí základního obj.prop = {value} .

6. startsWith , endsWith a includes

Příliš dlouho jsme kódovali naše vlastní základní funkce String – pamatuji si, že jsme to dělali na začátku MooTools. startsWith , endsWith a includes Řetězcové funkce jsou příklady takových funkcí:

"MooTools".startsWith("Moo"); // true;
"MooTools".startsWith("moo"); // false;

"MooTools".endsWith("Tools"); // true;

"MooTools".includes("oo"); // true;

Vidět, jak se funkce zdravého rozumu dostávají do jazyka, je neuvěřitelně uspokojující;

ES6 byl pro JavaScript neuvěřitelný skok vpřed. Tipy, na které jsem poukázal v tomto příspěvku a v předchozím příspěvku, ukazují, že i ty nejmenší aktualizace ES6 mohou mít velký vliv na údržbu. Nemůžu se dočkat, až uvidím, co nám přinese další kolo aktualizací JavaScriptu!