Javascript ES6
ECMAScript 2015 byla druhá hlavní revize JavaScriptu.
ECMAScript 2015 je také známý jako ES6 a ECMAScript 6.
Tato kapitola popisuje nejdůležitější funkce ES6.
Nové funkce v ES6
- Klíčové slovo let
- Klíčové slovo const
- Funkce šipek
- Pro/z
- Mapové objekty
- Nastavit objekty
- Třídy
- Sliby
- Symbol
- Výchozí parametry
- Parametr zbytku funkce
- String.includes()
- String.startsWith()
- String.endsWith()
- Array.from()
- Klíče pole()
- Pole najít()
- Pole findIndex()
- Nové matematické metody
- Vlastnosti nového čísla
- Nové číselné metody
- Nové globální metody
- Iterables Object.entries
- Moduly JavaScriptu
Podpora prohlížeče pro ES6 (2015)
Safari 10 a Edge 14 byly první prohlížeče, které plně podporovaly ES6:
| Chrome 58 | Edge 14 | Firefox 54 | Safari 10 | Opera 55 |
| Jan 2017 | Aug 2016 | Mar 2017 | Jul 2016 | Aug 2018 |
JavaScript nechat
Klíčové letslovo vám umožňuje deklarovat proměnnou s rozsahem bloku.
Příklad
var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
Přečtěte si více o letv kapitole: JavaScript Let .
JavaScript konst
Klíčové constslovo umožňuje deklarovat konstantu (proměnnou JavaScriptu s konstantní hodnotou).
Konstanty jsou podobné letovým proměnným s tím rozdílem, že hodnotu nelze změnit.
Příklad
var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
Přečtěte si více o constv kapitole: JavaScript Const .
Funkce šipek
Šipkové funkce umožňují krátkou syntaxi pro zápis funkčních výrazů.
Nepotřebujete functionklíčové slovo, returnklíčové slovo a
složené závorky .
Příklad
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
Funkce šipek nemají vlastní this. Nejsou příliš vhodné pro definování objektových metod .
Funkce šipek nejsou zvednuté. Musí být definovány před jejich použitím.
Použití const
je bezpečnější než použití var, protože výraz funkce má vždy konstantní hodnotu.
Klíčové slovo a složené závorky můžete vynechat pouze v returnpřípadě, že je funkce jedním příkazem. Z tohoto důvodu může být dobrým zvykem je vždy uchovávat:
Příklad
const x = (x, y) => { return x * y };
Více o funkcích šipek se dozvíte v kapitole: Funkce šipky JavaScriptu .
Smyčka For/Of
Příkaz JavaScript for/ofprochází hodnotami iterovatelných objektů.
for/ofumožňuje opakovat datové struktury, které jsou iterovatelné, jako jsou pole, řetězce, mapy, seznamy uzlů a další.
Cyklus for/ofmá následující syntaxi:
for (variable of iterable) {
// code block to be executed
}
proměnná - Pro každou iteraci je proměnné přiřazena hodnota další vlastnosti. Proměnnou lze deklarovat pomocí
const, let, nebo var.
iterable – Objekt, který má vlastnosti iterovatelné.
Smyčka přes pole
Příklad
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x + " ";
}
Smyčka přes řetězec
Příklad
let language = "JavaScript";
let text = "";
for (let x of language) {
text += x + " ";
}
Více se dozvíte v kapitole: JavaScript Loop For/In/Of .
Mapové objekty JavaScriptu
Schopnost používat objekt jako klíč je důležitou funkcí mapy.
Příklad
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Create a new Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
Další informace o mapových objektech naleznete v kapitole: JavaScript Map() .
Objekty sady JavaScript
Příklad
// Create a Set
const letters = new Set();
// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
Další informace o objektech Set v kapitole: JavaScript Set() .
Třídy JavaScriptu
Třídy JavaScriptu jsou šablony pro objekty JavaScriptu.
Pomocí klíčového slova classvytvořte třídu.
Vždy přidejte metodu s názvem constructor():
Syntax
class ClassName {
constructor() { ... }
}
Příklad
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
Výše uvedený příklad vytvoří třídu s názvem "Auto".
Třída má dvě počáteční vlastnosti: "name" a "year".
Třída JavaScriptu není objekt.
Je to šablona pro objekty JavaScriptu.
Použití třídy
Když máte třídu, můžete ji použít k vytváření objektů:
Příklad
const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);
Více o třídách se dozvíte v kapitole: Třídy JavaScriptu .
JavaScript sliby
Promise je objekt JavaScriptu, který spojuje „Produkce kódu“ a „Konzumace kódu“.
"Producing Code" může nějakou dobu trvat a "Consuming Code" musí počkat na výsledek.
Syntaxe slibu
const myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)
myResolve(); // when successful
myReject(); // when error
});
// "Consuming Code" (Must wait for a fulfilled Promise).
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Příklad použití slibu
const myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
Více o slibech se dozvíte v kapitole: JavaScriptové sliby .
Typ symbolu
JavaScript Symbol je primitivní datový typ stejně jako Number, String nebo Boolean.
Představuje jedinečný „skrytý“ identifikátor, ke kterému nemá náhodně přístup žádný jiný kód.
Pokud například různí kodéři chtějí přidat vlastnost person.id k objektu person patřícímu kódu třetí strany, mohou si vzájemně smíchat hodnoty.
Použití Symbol() k vytvoření jedinečných identifikátorů řeší tento problém:
Příklad
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
let id = Symbol('id');
person[id] = 140353;
// Now person[id] = 140353
// but person.id is still undefined
Symboly jsou vždy jedinečné.
Pokud vytvoříte dva symboly se stejným popisem, budou mít různé hodnoty.
Symbol("id") == Symbol("id") // false
Výchozí hodnoty parametrů
ES6 umožňuje, aby parametry funkcí měly výchozí hodnoty.
Příklad
function myFunction(x, y = 10) {
// y is 10 if not passed or undefined
return x + y;
}
myFunction(5); // will return 15
Parametr zbytku funkce
Parametr rest (...) umožňuje funkci zacházet s neurčitým počtem argumentů jako s polem:
Příklad
function sum(...args) {
let sum = 0;
for (let arg of args) sum += arg;
return sum;
}
let x = sum(4, 9, 16, 25, 29, 100, 66, 77);
String.includes()
Metoda includes()se vrátí true, pokud řetězec obsahuje zadanou hodnotu, jinak false:
Příklad
let text = "Hello world, welcome to the universe.";
text.includes("world") // Returns true
String.startsWith()
Metoda startsWith()se vrátí true
, pokud řetězec začíná zadanou hodnotou, jinak false:
Příklad
let text = "Hello world, welcome to the universe.";
text.startsWith("Hello") // Returns true
String.endsWith()
Metoda endsWith()se vrátí true
, pokud řetězec končí zadanou hodnotou, jinak false:
Příklad
var text = "John Doe";
text.endsWith("Doe") // Returns true
Array.from()
The Array.from() method returns an Array object from any object with a length
property or any iterable object.
Example
Create an Array from a String:
Array.from("ABCDEFG") // Returns [A,B,C,D,E,F,G]
Array keys()
The keys() method returns an Array Iterator object with the keys of an array.
Example
Create an Array Iterator object, containing the keys of the array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
text += x + "<br>";
}
Array find()
The find() method returns the value of the first array element that passes a
test function.
This example finds (returns the value of ) the first element that is larger than 18:
Example
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.find(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
Array findIndex()
The findIndex() method returns the index of the first array element that
passes a test function.
This example finds the index of the first element that is larger than 18:
Example
const numbers = [4, 9, 16, 25, 29];
let first =
numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return
value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
New Math Methods
ES6 added the following methods to the Math object:
Math.trunc()Math.sign()Math.cbrt()Math.log2()Math.log10()
The Math.trunc() Method
Math.trunc(x) returns the integer part of x:
Example
Math.trunc(4.9); // returns 4
Math.trunc(4.7); // returns 4
Math.trunc(4.4); // returns 4
Math.trunc(4.2); // returns 4
Math.trunc(-4.2); // returns -4
The Math.sign() Method
Math.sign(x) returns if x is negative, null or positive:
Example
Math.sign(-4); // returns -1
Math.sign(0); // returns 0
Math.sign(4); // returns 1
The Math.cbrt() Method
Math.cbrt(x) returns the cube root of x:
Example
Math.cbrt(8); // returns 2
Math.cbrt(64); // returns 4
Math.cbrt(125); // returns 5
The Math.log2() Method
Math.log2(x) returns the base 2 logarithm of x:
Example
Math.log2(2); // returns 1
The Math.log10() Method
Math.log10(x) returns the base 10 logarithm of x:
Example
Math.log10(10); // returns 1
New Number Properties
ES6 added the following properties to the Number object:
EPSILONMIN_SAFE_INTEGERMAX_SAFE_INTEGER
Example
let x = Number.EPSILON;
Example
let x = Number.MIN_SAFE_INTEGER;
Example
let x = Number.MAX_SAFE_INTEGER;
New Number Methods
ES6 added 2 new methods to the Number object:
Number.isInteger()Number.isSafeInteger()
The Number.isInteger() Method
The Number.isInteger() method returns true if the argument is an integer.
Example
Number.isInteger(10); // returns true
Number.isInteger(10.5); // returns false
The Number.isSafeInteger() Method
A safe integer is an integer that can be exactly represented as a double precision number.
The Number.isSafeInteger() method returns true if the argument is a safe integer.
Example
Number.isSafeInteger(10); // returns true
Number.isSafeInteger(12345678901234567890); // returns false
Safe integers are all integers from -(253 - 1) to +(253 - 1).
This is safe: 9007199254740991. This is not safe: 9007199254740992.
New Global Methods
ES6 added 2 new global number methods:
isFinite()isNaN()
The isFinite() Method
The global isFinite() method returns false if the argument is Infinity or NaN.
Otherwise it returns true:
Example
isFinite(10/0); // returns false
isFinite(10/1); // returns true
The isNaN() Method
The global isNaN() method returns true if the argument is NaN. Otherwise it returns false:
Example
isNaN("Hello"); // returns true