JavaScript ES6

Obsah

    Zobrazit obsah

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

  • Operátor

  • 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

  • Záznamy objektů

  • 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é slovo let vám umožňuje deklarovat proměnnou pomocí blokový rozsah.

Příklad

var x = 10;
// Here x is 10
{ 
  let x = 2;
    // Here x is 2
}
// Here x is 10

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>Redeclaring a Variable Using let</h2>

<p id="demo"></p>

<script>
let  x = 10;
// Here x is 10

{  
  let x = 2;
  // Here x is 2
}

// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Přečtěte si více o let v kapitole: JavaScript Let.

JavaScript konst

Klíčové slovo const vám umožňuje deklarovat konstantu (a JavaScript proměnná 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

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>Declaring a Variable Using const</h2>

<p id="demo"></p>

<script>
var  x = 10;
// Here x is 10
{  
  const x = 2;
  // Here x is 2
}
// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Přečtěte si více o const v kapitole: JavaScript Const.

Funkce šipek

Šipkové funkce umožňují krátkou syntaxi pro zápis funkčních výrazů.

Nepotřebujete klíčové slovo function, klíčové slovo return a složené závorky.

Příklad

// ES5
var x = function(x, y) {
     
   return x * y;
}

// ES6
const x = (x, y) => x * y;

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Functions</h2>

<p>With arrow functions, you don't have to type the function keyword, the return keyword, and the curly brackets.</p>

<p>Arrow functions are not supported in IE11 or earlier.</p>

<p id="demo"></p>

<script>
const x = (x, y) =&gt; x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>

Funkce šipek nemají vlastní toto. Nejsou příliš vhodné pro definování objektových metod.

Funkce šipek nejsou zvednuté. Musí být definovány před použitím.

Pomocí const je bezpečnější než použití var, protože výraz funkce ano vždy konstantní hodnotu.

Klíčové slovo return a složené závorky můžete vynechat pouze v případě, že se jedná o jeden příkaz. 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 };

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Functions</h2>

<p>Arrow functions are not supported in IE11 or earlier.</p>

<p id="demo"></p>

<script>
const x = (x, y) =&gt; { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>

Další informace o funkcích šipek naleznete v kapitole: Funkce šipek JavaScriptu.

Operátor Spread (...).

Operátor ... rozšiřuje iterovatelný (jako pole) do více prvků:

Příklad

const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];

const year = [...q1, ...q2, ...q3, ...q4];

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The ... Operator</h2>

<p>The "spread" operator spreads elements of iterable objects:</p>

<p id="demo"></p>

<script>
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];

const year = [...q1, ...q2, ...q3, ...q4];
document.getElementById("demo").innerHTML = year; 
</script>

</body>
</html>

Operátor ... lze použít k rozšíření iterovatelného do více argumentů pro volání funkcí:

Příklad

const numbers = [23,55,21,87,56];
let maxValue = Math.max(...numbers);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The ... Operator</h2>
<p>The "Spread" operator can be used to expand an iterable into more arguments for function calls:</p>

<p id="demo"></p>

<script>
const numbers = [23,55,21,87,56];
let maxValue = Math.max(...numbers);

document.getElementById("demo").innerHTML = maxValue; 
</script>

</body>
</html>

Smyčka For/Of

Příkaz for/of JavaScriptu se zacyklí prostřednictvím hodnot iterovatelných objektů.

for/of umožňuje smyčku přes datové struktury které jsou iterovatelné, jako jsou pole, řetězce, mapy, seznamy uzlů a další.

Smyčka for/of má následující syntaxi:

for (variable of iterable) {
      // code block to be executed
}

proměnná - pro každou iteraci je hodnota další vlastnosti přiřazené k proměnné. Proměnnou lze deklarovat pomocí const, let nebo var.

iterovatelný - 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 + " ";
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Of Loop</h2>
<p>The for of statement loops through the values of any iterable object:</p>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Mini"];

let text = "";
for (let x of cars) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Smyčka přes řetězec

Příklad

let language = "JavaScript";
let text = "";


for (let x of language) {
  
  text += x + " ";
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Of Loop</h2>

<p>The for of statement loops through the values of an iterable object.</p>

<p id="demo"></p>

<script>
let language = "JavaScript";

let text = "";
for (let x of language) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Více se dozvíte v kapitole: JavaScript Loop For/In/Of.

JavaScriptové mapy

Schopnost používat objekt jako klíč je důležitou funkcí mapy.

Příklad

const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Creating a Map from an Array:</p>

<p id="demo"></p>

<script>
// Create a Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

document.getElementById("demo").innerHTML = fruits.get("apples");
</script>

</body>
</html>

Další informace o objektech mapy a rozdílu mezi mapou a polem naleznete v kapitole: Mapy JavaScript.

Sady JavaScriptu

Příklad

// Create a Set
const letters = new Set();

// Add some values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add values to a Set:</p>

<p id="demo"></p>

<script>
// Create a Set
const letters = new Set();

// Add Values to the Set
letters.add("a");
letters.add("b");
letters.add("c");

// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>

</body>
</html>

Více o objektech Set se dozvíte v kapitole: Sady JavaScriptu.

Třídy JavaScriptu

Třídy JavaScriptu jsou šablony pro objekty JavaScriptu.

K vytvoření třídy použijte klíčové slovo class.

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes</h1>
<p>Creating two car objects from a car class:</p>

<p id="demo"></p>

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

document.getElementById("demo").innerHTML =
myCar1.name + " " + myCar2.name;
</script>

</body>
</html>

Více o třídách se dozvíte v kapitole: Třídy JavaScriptu.

JavaScript sliby

Promise je objekt JavaScriptu, který propojuje „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;
});

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
const myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function(){ myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});
</script>

</body>
</html>

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, který patří do kódu třetí strany, mohli vzájemně mísit 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

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>Using JavaScript Symbol()</h2>

<p id="demo"></p>

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

let id = Symbol('id');
person[id] = 140353;

document.getElementById("demo").innerHTML = person[id] + " " + person.id;
</script>

</body>
</html>

Poznámka

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Default Parameter Values</h2>
<p>If y is not passed or undefined, then y = 10:</p>

<p id="demo"></p>

<script>
function myFunction(x, y = 10) {
  return x + y;
}
document.getElementById("demo").innerHTML = myFunction(5);
</script>

</body>
</html>

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Rest Parameter</h2>

<p>The rest parameter (...) allows a function to treat an indefinite number of arguments as an array:</p>

<p id="demo"></p>

<script>
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);

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

String.includes()

Metoda includes() vrací true, pokud řetězec obsahuje zadanou hodnotu, jinak false:

Příklad

let text = "Hello world, welcome to the universe.";
text.includes("world")    // Returns true

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The includes() Method</h2>

<p>Check if a string includes "world":</p>
<p id="demo"></p>

<p>The includes() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.includes("world");
</script>

</body>
</html>

String.startsWith()

Metoda startsWith() vrací 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

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The startsWith() Method</h2>
<p>Check if a string starts with "Hello":</p>

<p id="demo"></p>

<p>The startsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "Hello world, welcome to the universe.";
document.getElementById("demo").innerHTML = text.startsWith("Hello");
</script>

</body>
</html>

String.endsWith()

Metoda endsWith() vrací hodnotu true pokud řetězec končí zadanou hodnotou, jinak false:

Příklad

var text = "John Doe";
text.endsWith("Doe")    // Returns true

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings</h2>

<p>Check if a string ends with "Doe":</p>

<p id="demo"></p>

<p>The endsWith() method is not supported in Internet Explorer.</p>

<script>
let text = "John Doe";
document.getElementById("demo").innerHTML = text.endsWith("Doe");
</script>

</body>
</html>

Array.from()

Metoda Array.from() vrací objekt Array z libovolného objektu s délkou vlastnost nebo jakýkoli iterovatelný objekt.

Příklad

Vytvořte pole z řetězce:

Array.from("ABCDEFG")   // Returns [A,B,C,D,E,F,G]

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The from() Method</h2>

<p>Return an array object from any object with a length property or any iterable object.</p>

<p id="demo"></p>

<script>
const myArr = Array.from("ABCDEFG");
document.getElementById("demo").innerHTML = myArr;
</script>

<p>The Array.from() method is not supported in Internet Explorer.</p>

</body>
</html>

Klíče pole()

Metoda keys() vrací objekt Array Iterator s klíči pole.

Příklad

Vytvořte objekt Array Iterator obsahující klíče pole:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

let text = "";
for (let x of keys) {
  text += x + "<br>";
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The keys() Method</h2>

<p>Return an Array Iterator object with the keys of the array:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();

let text = "";
for (let x of keys) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

<p>Array.keys() is not supported in Internet Explorer.</p>

</body>
</html>

Pole najít()

Metoda find() vrací hodnotu prvního prvku pole, který předává testovací funkce.

Tento příklad najde (vrátí hodnotu ) první prvek, který je větší než 18:

Příklad

 const numbers = [4, 9, 16, 25, 29];
let first = 
  numbers.find(myFunction);
function myFunction(value, index, array) {
    return 
  value > 18;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The find() Method</h2>

<p id="demo"></p>

<script>
const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

document.getElementById("demo").innerHTML = "First number over 18 is " + first;

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

Všimněte si, že funkce má 3 argumenty:

  • Hodnota položky

  • Index položky

  • Samotné pole

Pole findIndex()

Metoda findIndex() vrací index prvního prvku pole, který projde testovací funkcí.

Tento příklad najde index prvního prvku, který je větší než 18:

Příklad

 const numbers = [4, 9, 16, 25, 29];
let first = 
  numbers.findIndex(myFunction);
function myFunction(value, index, array) {
    return 
  value > 18;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The findIndex() Method</h2>

<p id="demo"></p>

<script>
const numbers = [4, 9, 16, 25, 29];

document.getElementById("demo").innerHTML = "First number over 18 has index " + numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
</script>

</body>
</html>

Všimněte si, že funkce má 3 argumenty:

  • Hodnota položky

  • Index položky

  • Samotné pole

Nové matematické metody

ES6 přidal do objektu Math následující metody:

  • Math.trunc()

  • Math.sign()

  • Math.cbrt()

  • Math.log2()

  • Math.log10()

Metoda Math.trunc().

Math.trunc(x) vrací část celého čísla x:

Příklad

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

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.trunc()</h2>

<p>Math.trunc(x) returns the integer part of x:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.trunc(4.7);
</script>

</body>
</html>

Metoda Math.sign().

Math.sign(x) vrátí, pokud je x záporné, nulové nebo kladné:

Příklad

Math.sign(-4);    // returns -1
Math.sign(0);    // returns 0
Math.sign(4);    // returns 1

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.sign()</h2>

<p>Math.sign(x) returns if x is negative, null or positive:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.sign(4);
</script>

</body>
</html>

Metoda Math.cbrt().

Math.cbrt(x) vrátí odmocninu x:

Příklad

Math.cbrt(8);    // returns 2
Math.cbrt(64);    // returns 4
Math.cbrt(125);    // returns 5

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.cbrt()</h2>

<p>Math.cbrt(x) returns the cube root of x:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.cbrt(8);
</script>

</body>
</html>

Metoda Math.log2().

Math.log2(x) vrací základní 2 logaritmus x:

Příklad

Math.log2(2);    // returns 1

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.log2()</h2>

<p>Math.log2() returns the base 2 logarithm of a number.</p>
<p>How many times must we multiply 2 to get 8?</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.log2(8);
</script>

</body>
</html>

Metoda Math.log10().

Math.log10(x) vrací základní 10 logaritmus x:

Příklad

Math.log10(10);    // returns 1

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.log10()</h2>

<p>Math.log10() returns the base 10 logarithm of a number.</p>
<p>How many times must we multiply 10 to get 1000?</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Math.log10(1000);
</script>

</body>
</html>

Vlastnosti nového čísla

ES6 přidal do objektu Number následující vlastnosti:

  • EPSILON

  • MIN_SAFE_INTEGER

  • MAX_SAFE_INTEGER

Příklad EPSILON

let x = Number.EPSILON;

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>Number Object Properties</h2>

<p>EPSILON</p>

<p id="demo"></p>

<script>
let x = Number.EPSILON;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Příklad MIN_SAFE_INTEGER

let x = Number.MIN_SAFE_INTEGER;

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>Number Object Properties</h2>

<p>MIN_SAFE_INTEGER</p>

<p id="demo"></p>

<script>
let  x = Number.MIN_SAFE_INTEGER;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Příklad MAX_SAFE_INTEGER

let x = Number.MAX_SAFE_INTEGER;

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>Number Object Properties</h2>

<p>MAX_SAFE_INTEGER</p>

<p id="demo"></p>

<script>
let  x = Number.MAX_SAFE_INTEGER;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Nové číselné metody

ES6 přidal 2 nové metody do objektu Number:

  • Number.isInteger()

  • Number.isSafeInteger()

Metoda Number.isInteger().

Pokud je argument celé číslo, metoda Number.isInteger() vrátí true.

Příklad

Number.isInteger(10);        // returns true
Number.isInteger(10.5);      // returns false

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isInteger() Method</h2>

<p>The isInteger() method returns true if the argument is an integer.</p>
<p>Otherwise it returns false.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
Number.isInteger(10) + "<br>" + Number.isInteger(10.5);
</script>

</body>
</html>

Metoda Number.isSafeInteger().

Bezpečné celé číslo je celé číslo, které lze přesně vyjádřit jako číslo s dvojnásobnou přesností.

Pokud je argumentem bezpečné celé číslo, metoda Number.isSafeInteger() vrací true.

Příklad

Number.isSafeInteger(10);    // returns true
Number.isSafeInteger(12345678901234567890);  // returns false

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isSafeInteger() Method</h2>

<p>The isSafeInteger() method returns true if the argument is a safe integer.</p>
<p>Otherwise it returns false.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
Number.isSafeInteger(10) + "<br>" + Number.isSafeInteger(12345678901234567890);
</script>

</body>
</html>

Bezpečná celá čísla jsou celá čísla od -(253 - 1) do +(253 - 1).
Toto je bezpečné: 9007199254740991. Toto není bezpečné: 9007199254740992.

Nové globální metody

ES6 přidal 2 nové metody globálních čísel:

  • isFinite()

  • isNaN()

Metoda isFinite().

Globální metoda isFinite() vrací false, pokud je argument Infinity nebo NaN.

Jinak vrátí true:

Příklad

isFinite(10/0);       // returns false
isFinite(10/1);       // returns true

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isFinite() Method</h2>

<p>The isFinite() method returns false if the argument is Infinity or NaN.</p>
<p>Otherwise it returns true.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
isFinite(10 / 0) + "<br>" + isFinite(10 / 1);
</script>

</body>
</html>

Metoda isNaN().

Globální metoda isNaN() vrátí true, pokud je argument NaN. Jinak vrátí false:

Příklad

isNaN("Hello");       // returns true

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The isNaN() Method</h2>

<p>The isNan() method returns true if the argument is NaN. Otherwise it returns false.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
isNaN("Hello") + "<br>" + isNaN("10");
</script>

</body>
</html>

Záznamy objektů()

Příklad

Vytvořte Iterátor pole a poté iterujte přes páry klíč/hodnota:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();
for (let x of f) {
  document.getElementById("demo").innerHTML += x;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arrays</h1>
<h2>The entries() method</h2>

<p>entries() returns an Array Iterator object with key/value pairs:</p>

<p id="demo"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();

for (let x of f) {
  document.getElementById("demo").innerHTML += x + "<br>";
}
</script>

<p>The entries() method is not supported in Internet Explorer 11 (or earlier).</p>

</body>
</html>

Metoda entries() vrací objekt Array Iterator s páry klíč/hodnota:

[0, "Banán"]
[1, "Pomeranč"]
[2, "Jablko"]
[3, "Mango"]

Metoda entries() nemění původní pole.

Moduly

Moduly se importují dvěma různými způsoby:

Import z pojmenovaných exportů

Importujte pojmenované exporty ze souboru person.js:

import { name, age } from "./person.js";

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import { name, age } from "./person.js";

let text = "My name is " + name + ", I am " + age + ".";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Import z výchozích exportů

Importujte výchozí export ze souboru message.js:

import message from "./message.js";

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import message from "./message.js";

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>

Další informace o modulech naleznete v: Moduly JavaScriptu.