Home-theater-designers
ES6 odkazuje na verzi 6 programovacího jazyka ECMA Script. ECMA Script je standardizovaný název pro JavaScript a verze 6 je další verzí po verzi 5, která byla vydána v roce 2011. Jedná se o zásadní vylepšení jazyka JavaScript a přidává mnoho dalších funkcí, které mají usnadnit vývoj softwaru ve velkém měřítku .
ECMAScript nebo ES6 byl publikován v červnu 2015. Následně byl přejmenován na ECMAScript 2015. Podpora webového prohlížeče pro celý jazyk ještě není dokončena, i když jsou podporovány velké části. Hlavní webové prohlížeče podporují některé funkce ES6. Je však možné použít software známý jako hráč převést kód ES6 na ES5, který je lépe podporován ve většině prohlížečů.
Podívejme se nyní na některé zásadní změny, které ES6 do JavaScriptu přináší.
1. Konstanty
Nakonec se koncept konstant dostal do JavaScriptu! Konstanty jsou hodnoty, které lze definovat pouze jednou (na rozsah, rozsah vysvětlen níže). Opětovná definice ve stejném rozsahu spustí chybu.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
Konstantu můžete použít všude, kde můžete použít proměnnou ( kde ).
console.log('Value is: ' + joe * 2)
// prints: 8
2. Proměnné a funkce s rozsahem bloku
Vítejte v 21. století, JavaScript! U ES6 proměnné deklarované pomocí nechat (a konstanty popisují výše) dodržujte pravidla pro vytváření bloků stejně jako v Javě, C ++ atd. (Další informace najdete v tématu deklarace proměnných v JavaScriptu.)
Před touto aktualizací měly proměnné v JavaScriptu rozsah funkcí. To znamená, že když jste potřebovali nový rozsah pro proměnnou, museli jste ji deklarovat v rámci funkce.
Proměnné uchovávají hodnotu až do konce bloku. Po bloku se obnoví hodnota ve vnějším bloku (pokud existuje).
jak najít něčí seznam na amazonu
{
let x = 'hello';
{
let x = 'world';
console.log('inner block, x = ' + x);
}
console.log('outer block, x = ' + x);
}
// prints
inner block, x = world
outer block, x = hello
V rámci těchto bloků můžete také předefinovat konstanty.
{
let x = 'hello';
{
const x = 4.0;
console.log('inner block, x = ' + x);
try {
x = 3.5
} catch(err) {
console.error('inner block: ' + err);
}
}
x = 'world';
console.log('outer block, x = ' + x);
}
// prints
inner block, x = 4
inner block: TypeError: Assignment to constant variable.
outer block, x = world
3. Šipkové funkce
ES6 představuje šipkové funkce do JavaScriptu. (Jsou podobné tradičním funkcím, ale mají jednodušší syntaxi.) V následujícím příkladu X je funkce, která přijímá parametr s názvem na , a vrátí jeho přírůstek:
var x = a => a + 1;
x(4) // returns 5
Pomocí této syntaxe můžete snadno definovat a předávat argumenty ve funkcích.
Použití s a pro každého() :
[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16
Definujte funkce přijímající více argumentů uzavřením do závorek:
[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]
4. Výchozí funkční parametry
Parametry funkcí lze nyní deklarovat s výchozími hodnotami. V následujícím, X je funkce se dvěma parametry na a b . Druhý parametr b je dána výchozí hodnota 1 .
var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4
Na rozdíl od jiných jazyků, jako je C ++ nebo python, se parametry s výchozími hodnotami mohou objevit před těmi, které nemají výchozí hodnoty. Všimněte si, že tato funkce je definována jako blok s a vrátit se hodnota pro ilustraci.
var x = (a = 2, b) => { return a * b }
Argumenty se však shodují zleva doprava. Při prvním vyvolání níže b má nedefinováno hodnotu přesto na byl deklarován s výchozí hodnotou. Předaný argument se shoduje s na spíše než b . Funkce se vrátí NaN .
x(2)
// returns NaN
x(1, 3)
// returns 3
Když výslovně zadáte nedefinováno jako argument se použije výchozí hodnota, pokud existuje.
x(undefined, 3)
// returns 6
5. Parametry klidové funkce
Při vyvolání funkce někdy vyvstane potřeba umět předat libovolný počet argumentů a tyto argumenty v rámci funkce zpracovat. Tuto potřebu řeší parametry klidové funkce syntax. Poskytuje způsob, jak zachytit zbývající argumenty po definovaných argumentech pomocí níže uvedené syntaxe. Tyto další argumenty jsou zachyceny v poli.
var x = function(a, b, ...args) { console.log('a = ' + a + ', b = ' + b + ', ' + args.length + ' args left'); }
x(2, 3)
// prints
a = 2, b = 3, 0 args left
x(2, 3, 4, 5)
// prints
a = 2, b = 3, 2 args left
6. Šablona řetězce
Šablona řetězců odkazuje na interpolaci proměnných a výrazů do řetězců pomocí syntaxe, jako je perl nebo shell. Šablona řetězce je uzavřena znaky zpětného zaškrtnutí ( `` ). Naproti tomu jednoduché uvozovky ( ' ) nebo dvojité uvozovky ( ' ) označují normální řetězce. Výrazy uvnitř šablony jsou mezi nimi vyznačeny $ { a } . Zde je příklad:
var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'
K hodnocení můžete samozřejmě použít libovolný výraz.
// define an arrow function
var f = a => a * 4
// set a parameter value
var v = 5
// and evaluate the function within the string template
var x = `hello ${f(v)}`
// returns 'hello 20'
Tuto syntaxi pro definování řetězců lze také použít k definování víceřádkových řetězců.
var x = `hello world
next line`
// returns
hello world
next line
7. Vlastnosti objektu
ES6 přináší zjednodušenou syntaxi vytváření objektů. Podívejte se na příklad níže:
var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
Vypočtené názvy vlastností jsou také docela šikovné. U ES5 a dřívějšího nastavení vlastnosti objektu s vypočítaným názvem jste museli provést toto:
var x = 'hello world', y = 25
var a = {x: x, y: y}
a['joe' + y] = 4
// a is now:
{x: 'hello world', y: 25, joe25: 4}
Nyní to můžete udělat vše v jedné definici:
var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}
A samozřejmě, k definování metod stačí definovat název:
var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6
8. Syntaxe definice formální třídy
Definice třídy
A nakonec JavaScript získá formální syntaxi definice třídy. I když jde pouze o syntaktický cukr nad již dostupnými třídami založenými na protytypech, slouží ke zlepšení srozumitelnosti kódu. To znamená, že ano ne přidat nový objektový model nebo cokoli podobného.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
Deklarace metod
Definování metody je také docela jednoduché. Žádné překvapení.
class Circle {
constructor(radius) {
this.radius = radius
}
computeArea() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
c.computeArea()
// returns: 50.26548245743669
Getters a Setters
Nyní máme také getry a nastavovače s jednoduchou aktualizací syntaxe. Pojďme předefinovat Kruh třída s plocha vlastnictví.
class Circle {
constructor(radius) {
this.radius = radius
}
get area() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
// returns: Circle {radius: 4}
c.area
// returns: 50.26548245743669
Nyní přidáme nastavovač. Umět definovat poloměr jako nastavitelnou vlastnost bychom měli předefinovat skutečné pole na _poloměr nebo něco, co nebude v rozporu se seřizovačem. Jinak narazíme na chybu přetečení zásobníku.
Zde je předefinovaná třída:
class Circle {
constructor(radius) {
this._radius = radius
}
get area() { return Math.PI * this._radius * this._radius }
set radius(r) { this._radius = r }
}
var c = new Circle(4)
// returns: Circle {_radius: 4}
c.area
// returns: 50.26548245743669
c.radius = 6
c.area
// returns: 113.09733552923255
Celkově je to pěkný doplněk objektově orientovaného JavaScriptu.
Dědictví
Kromě definování tříd pomocí třída klíčové slovo, můžete také použít rozšiřuje klíčové slovo zdědit ze super tříd. Podívejme se, jak to funguje na příkladu.
class Ellipse {
constructor(width, height) {
this._width = width;
this._height = height;
}
get area() { return Math.PI * this._width * this._height; }
set width(w) { this._width = w; }
set height(h) { this._height = h; }
}
class Circle extends Ellipse {
constructor(radius) {
super(radius, radius);
}
set radius(r) { super.width = r; super.height = r; }
}
// create a circle
var c = new Circle(4)
// returns: Circle {_width: 4, _height: 4}
c.radius = 2
// c is now: Circle {_width: 2, _height: 2}
c.area
// returns: 12.566370614359172
c.radius = 5
c.area
// returns: 78.53981633974483
A to byl krátký úvod k některým funkcím JavaScriptu ES6.
Další na řadě: seznámení s několik důležitých metod pole JavaScript a skriptování hlasově citlivé robotické animace! Podívejte se také na skvělý front-end framework s názvem Vue.
Uznání: micrologia/ Depositphotos
Podíl Podíl tweet E-mailem Canon vs. Nikon: Která značka fotoaparátu je lepší?Canon a Nikon jsou dvě největší jména v oboru fotoaparátů. Ale která značka nabízí lepší řadu fotoaparátů a objektivů?
co je fond tvůrce na tiktokČíst dále Související témata
- Programování
- JavaScript
Přihlaste se k odběru našeho zpravodaje
Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!
Kliknutím sem se přihlásíte k odběru