ES6 je novější standardizace/verze Javascript , který byl vydán v roce 2015. Je důležité se naučit ES6, protože má mnoho nových funkcí, které pomáhají vývojářům snadněji psát a pochopit JavaScript. Moderní rámce jako Angular a React jsou vyvíjeny s ES6. Jeho syntaxe se také liší od klasického JavaScriptu.
Co je tedy nového v ES6? Pojďme se podívat.
1. let &const klíčová slova
ES6 přináší dvě nová klíčová slova pro deklarace proměnných:let a const .
Dříve jsme měli pouze var klíčové slovo v JavaScriptu pro deklaraci proměnných:
var name = 'Cem';
V ES6 používáme let místo toho klíčové slovo.
Proč ‚let‘ místo ‚var‘?
Protože použití var příčiny rozsah problémy. Definujme například řetězec pomocí var globálně a lokálně:
var word = 'I am global';
if(true) {
var word = 'I am local';
}
console.log(word); // What do you expect here as result?
console.log by měl vytisknout globální řetězec:'I am global' . Protože druhá deklarace var word = 'I am local' je místní řetězec a console.log je mimo blok if :
Neočekávaně lokální proměnná, kterou jsme definovali pomocí var ignoroval blok if a vytiskne se na konzoli. Abychom tomuto problému předešli, ES6 nám přináší nové klíčové slovo:let.
Zkusme to znovu s let :
let word = 'I am global';
if(true) {
let word = 'I am local';
}
console.log(word); // This time what do you expect?
Tentokrát globální řetězec se vytiskl podle očekávání, let vyřešil problém s rozsahem.
Další vydání prohlášení „var“
Oba můžeme znovu přiřadit proměnné pomocí var a let . Ale let nám nedovoluje znovu deklarovat stejné proměnné:
var number = 1;
var number = 2;
console.log(number); // No errors here, 2 gets printedZkusme to znovu pomocí let :
let number = 1;
let number = 2;
console.log(number); // let doesn't allow redeclaration
Stále můžete používat var v ES6, ale nedoporučuje se to.
Klíčové slovo const
Pokračujme s const klíčové slovo. const znamená konstantní .
Když deklarujeme konstantní proměnnou, nemůžeme ji později změnit. Například datum narození je konstanta.
const birthYear = 1990;
birthYear = 2000; // You cannot re-assign a constant variablePokud se pokusíte změnit nebo znovu deklarovat konst proměnnou, zobrazí chybu:
Pomocí const zlepšuje kvalitu vašeho kódu. Použijte jej pouze tehdy, když jste si jisti, že se vaše proměnná později nezmění.
2. Literály šablony
Šablonové literály jsou jednou z nových syntaxí ES6, pro vytváření řetězců a tisk dynamických proměnných.
- Chcete-li vytvořit řetězec, použijte zpětné tiky ( `` ) místo jednoduchých nebo dvojitých uvozovek:
let oldWay = 'A word'; // JS Way
let newWay = `A word`; // ES6 Way- Použijte interpolační syntaxi:${ výraz } pro zjednodušení zřetězení řetězců a pro vytváření dynamických proměnných
Pojďme definovat některé proměnné a použít staré a nové metody k jejich tisku:
let name = 'Cem';
let age = 28;
let profession = 'Software Developer';Předchozí způsob JavaScriptu:
console.log("Hello, my name is " + name + ", I'm " + age + " years old and I'm a " + profession);
Způsob ES6:
console.log(`Hello, my name is ${name}, I'm ${age} years old and I'm a ${profession}.`);
Se šablonovými literály dokážeme mnohem více a další podrobnosti naleznete zde.
3. Funkce šipek
Funkce šipek používá tlustou šipku => spíše než function klíčové slovo při definování funkce:
Funkce JavaScript:
var sum = function addition (firstNum, secondNum) {
return firstNum + secondNum;
}Funkce ES6:
let sum = (firstNum, secondNum) => { return firstNum + secondNum };
Můžeme také vynechat return klíčové slovo, pokud naše funkce nevrátí blok kódu.
Vzhledem k tomu, že tento článek je o přehledu ES6, nejdu mnohem hlouběji do funkcí šipek. Více informací o funkcích šipek můžete získat zde.
4. Operátoři Spread and Rest
Už jste někdy viděli tři tečky ... v programování? Toto se nazývá rozšířená syntaxe .
Operátor Spread – použití pro pole
Máme pole čísel:let numberArray = [1, 19, 21, 85, 42]
Můžeme použít operátor spread:
- jak získat hodnoty (čísla) z pole:
console.log(...numberArray);
Použití operátoru spread nemá vliv na samotné pole.
- pro spojení pole s jiným polem:
let charArray = ['a','b','c'];
charArray.push(...numberArray);
console.log(charArray);
V opačném případě numberArray by byl přidán jako čtvrtý prvek, přímo do charArray :
Operátor zbytku — Použití pro funkce
Další použití tří teček ... jsou pro parametry funkcí.
Parametr zadané po třech tečkách se změní na pole který bude obsahovat zbytek parametrů nazývaných operátor zbytku.
function count (...counter) { // parameter becomes an array
console.log(counter.length);
}
count(); // 0
count(10); // 1
count(1, 10, 24, 99, 3); // 5
Od ...counter je nyní pole, můžeme získat jeho délku. Všechny parametry, které jsou zadány do count() funkce jsou nyní hodnoty počítadla pole:
5. Import &Export
Další novou funkcí ES6 je, že nám umožňuje importovat a exportovat naše třídy, funkce a dokonce i proměnné do jiných částí (souborů) našeho kódu. Tento přístup nám programátorům velmi pomáhá, když chceme kód rozdělit na menší kousky. Zvyšuje čitelnost a údržbu kódu projektu v budoucnu.
Podívejme se, jak to funguje:
Nejprve vytvoříme funkci ES6 a exportujeme pomocí export klíčové slovo.
export let myFunction = () => { console.log('I am exported!'); }
Poté importujte myFunction do jiného souboru, musíme definovat jeho cestu ke složce, název souboru a import klíčové slovo.
import { myFunction } from './yourFolderPath/fileName';Nakonec zavolejte funkci v importovaném souboru a použijte ji.
myFunction();Takto můžeme náš kód rozdělit na menší kousky pomocí exportu a importu. Můžeme také importovat další moduly a služby jako HttpService, Router, Axios, a Bootstrap po instalaci do našich node_modules je můžete použít také v našem kódu .
V tomto článku jsem vysvětlil některé nové funkce ES6. Existuje mnoho dalších funkcí a více podrobností, které byste měli zkontrolovat. Pokud považujete tento článek za užitečný, sdílejte jej, aby si jej mohlo přečíst více lidí.
Děkujeme za přečtení a za vaši podporu! :)