Každý v komunitě JavaScriptu miluje nová rozhraní API, aktualizace syntaxe a funkce – poskytují lepší, chytřejší a efektivnější způsoby plnění důležitých úkolů. ES6 přináší obrovskou vlnu nových vychytávek a dodavatelé prohlížečů v uplynulém roce tvrdě pracovali na tom, aby tyto jazykové aktualizace dostali do svého prohlížeče. I když existují velké aktualizace, některé z menších jazykových aktualizací mi vykouzlily obrovský úsměv na tváři; níže je šest mých oblíbených nových přírůstků v jazyce JavaScript!
1. Syntaxe nastavení objektu [key]
Jednou z nepříjemností, s nimiž se vývojáři JavaScriptu po věky setkávali, je nemožnost nastavit hodnotu klíče proměnné v deklaraci doslovného objektu – klíč/hodnotu jste museli přidat za původní deklaraci:
// *Very* reduced example
let myKey = 'key3';
let obj = {
key1: 'One',
key2: 'Two'
};
obj[myKey] = 'Three';
Tento vzor je v nejlepším případě nepohodlný a v nejhorším je matoucí a ošklivý. ES6 poskytuje vývojářům cestu z tohoto nepořádku:
let myKey = 'variableKey';
let obj = {
key1: 'One',
key2: 'Two',
[myKey]: 'Three' /* yay! */
};
Zabalení klíče proměnné do [] umožňuje vývojářům provést vše v rámci jednoho příkazu!
2. Funkce šipek
Nemusíte držet krok s každou změnou ES6, abyste věděli o funkcích šipek – byly zdrojem mnoha řečí a určitého zmatku (alespoň zpočátku) pro vývojáře JavaScriptu. I když bych mohl napsat několik blogových příspěvků, abych vysvětlil každý aspekt funkce šipky, chtěl bych poukázat na to, jak funkce šipek poskytují metodu zhuštěného kódu pro jednoduché funkce:
// Adds a 10% tax to total
let calculateTotal = total => total * 1.1;
calculateTotal(10) // 11
// Cancel an event -- another tiny task
let brickEvent = e => e.preventDefault();
document.querySelector('div').addEventListener('click', brickEvent);
Ne function nebo return klíčová slova, někdy dokonce není potřeba přidat () -- funkce šipek jsou skvělou kódovací zkratkou pro jednoduché funkce.
3. najít/najítIndex
JavaScript poskytuje vývojářům Array.prototype.indexOf získat index dané položky v poli, ale indexOf neposkytuje metodu pro výpočet požadovaného stavu položky; musíte také hledat přesnou známou hodnotu. Zadejte find a findIndex -- dvě metody pro vyhledávání v poli pro první shodu vypočítané hodnoty:
let ages = [12, 19, 6, 4]; let firstAdult = ages.find(age => age >= 18); // 19 let firstAdultIndex = ages.findIndex(age => age >= 18); // 1
find a findIndex , tím, že umožňuje vyhledávání vypočítaných hodnot, také zabrání zbytečným vedlejším efektům a procházení možností hodnoty!
4. Operátor šíření:...
Operátor spread signalizuje, že obsah pole nebo iterovatelného objektu by měl být v rámci volání rozdělen do samostatných argumentů. Několik příkladů:
// Pass to function that expects separate multiple arguments
// Much like Function.prototype.apply() does
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
// Convert NodeList to Array
let divsArray = [...document.querySelectorAll('div')];
// Convert Arguments to Array
let argsArray = [...arguments];
Úžasným bonusem je možnost převádět iterovatelné objekty (NodeList , arguments , atd.) na true array -- něco, co jsme použili Array.from nebo jiné hacky, které můžete dělat po dlouhou dobu.
5. Literály šablony
Víceřádkové řetězce v JavaScriptu byly původně vytvořeny buď zřetězením, nebo zakončením řádku \ charakteru, přičemž obojí může být obtížné udržet. Mnoho vývojářů a dokonce i některé frameworky začaly <script> zneužívat tagy k zapouzdření víceřádkových šablon, jiní ve skutečnosti vytvořili prvky pomocí DOM a použili outerHTML získat prvek HTML jako řetězec.
ES6 nám poskytuje šablonové literály, pomocí kterých můžete snadno vytvářet víceřádkové řetězce pomocí znaků backticks:
// Multiline String
let myString = `Hello
I'm a new line`; // No error!
// Basic interpolation
let obj = { x: 1, y: 2 };
console.log(`Your total is: ${obj.x + obj.y}`); // Your total is: 3
Šablonové literály vám samozřejmě umožňují vytvářet více než víceřádkové řetězce, jako je jednoduchá až pokročilá interpolace, ale už jen možnost vytvářet víceřádkové řetězce mi elegantně vykouzlí úsměv na tváři.
6. Výchozí hodnoty argumentů
Poskytování výchozích hodnot argumentů v podpisech funkcí je schopnost poskytovaná mnoha jazyky na straně serveru, jako je python a PHP, a nyní tuto možnost máme v JavaScriptu:
// Basic usage
function greet(name = 'Anon') {
console.log(`Hello ${name}!`);
}
greet(); // Hello Anon!
// You can have a function too!
function greet(name = 'Anon', callback = function(){}) {
console.log(`Hello ${name}!`);
// No more "callback && callback()" (no conditional)
callback();
}
// Only set a default for one parameter
function greet(name, callback = function(){}) {}
Jiné jazyky mohou zobrazit varování, pokud nebudou poskytnuty argumenty bez výchozí hodnoty, ale JavaScript bude tyto hodnoty argumentů nadále nastavovat na undefined .
Těchto šest funkcí, které jsem zde uvedl, je jen kapkou toho, co ES6 poskytuje vývojářům, ale jsou to funkce, které budeme často používat, aniž bychom o tom přemýšleli. Právě tyto drobné doplňky často nepřitahují pozornost, ale stávají se jádrem našeho kódování.
Vynechal jsem něco? Dejte mi vědět, jaké malé doplňky JavaScriptu máte rádi!