Home-theater-designers
ES6 се отнася до версия 6 на езика за програмиране на ECMA Script. ECMA Script е стандартизираното име за JavaScript, а версия 6 е следващата версия след версия 5, която беше пусната през 2011 г. Това е значително подобрение на езика на JavaScript и добавя много повече функции, предназначени да улеснят мащабната разработка на софтуер. .
ECMAScript или ES6 беше публикуван през юни 2015 г. Впоследствие беше преименуван на ECMAScript 2015. Поддръжката на уеб браузъра за пълния език все още не е завършена, въпреки че се поддържат основни части. Основните уеб браузъри поддържат някои функции на ES6. Възможно е обаче да се използва софтуер, известен като a играч за преобразуване на ES6 код в ES5, който се поддържа по -добре от повечето браузъри.
Нека сега разгледаме някои основни промени, които ES6 внася в JavaScript.
1. Константи
Най -накрая концепцията за константи стигна до JavaScript! Константи са стойности, които могат да бъдат дефинирани само веднъж (за обхват, обхват, обяснен по -долу). Предефинирането в същия обхват предизвиква грешка.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
Можете да използвате константата навсякъде, където можете да използвате променлива ( където ).
console.log('Value is: ' + joe * 2)
// prints: 8
2. Променливи и функции с обхват на блока
Добре дошли в 21 -ви век, JavaScript! С ES6 променливите са декларирани като позволявам (и константи, описани по -горе) следват правилата за обхват на блока, точно както в Java, C ++ и т.н. (За да научите повече, вижте как да декларирате променливи в JavaScript.)
Преди тази актуализация променливите в JavaScript бяха обхванати от функции. Тоест, когато имате нужда от нов обхват за променлива, трябваше да я декларирате в рамките на функция.
Променливите запазват стойността до края на блока. След блока се възстановява стойността във външния блок (ако има такъв).
Lorem ipsum dolor sit amet, consectetur
{
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
Можете също така да предефинирате константи в рамките на такива блокове.
{
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. Функции на стрелките
ES6 представя функции със стрелки към JavaScript. (Те са подобни на традиционните функции, но имат по -прост синтаксис.) В следния пример, х е функция, която приема параметър, наречен да се и връща нейното увеличение:
var x = a => a + 1;
x(4) // returns 5
Използвайки този синтаксис, можете лесно да дефинирате и предавате аргументи във функциите.
Използване с a за всеки() :
[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16
Определете функции, приемащи множество аргументи, като ги заградите в скоби:
[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]
4. Параметри на функцията по подразбиране
Параметрите на функциите вече могат да бъдат декларирани със стойности по подразбиране. В следното, х е функция с два параметъра да се и б . Вторият параметър б е дадена стойност по подразбиране на 1 .
var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4
За разлика от други езици като C ++ или python, параметрите със стойности по подразбиране могат да се появят преди тези без настройки по подразбиране. Имайте предвид, че тази функция е дефинирана като блок с a връщане стойност чрез илюстрация.
var x = (a = 2, b) => { return a * b }
Аргументите обаче се съпоставят отляво надясно. При първото извикване по -долу, б има неопределен стойност въпреки това да се е деклариран със стойност по подразбиране. Предаденият аргумент е съпоставен с да се отколкото б . Функцията се връща NaN .
x(2)
// returns NaN
x(1, 3)
// returns 3
Когато изрично предавате неопределен като аргумент се използва стойността по подразбиране, ако има такава.
x(undefined, 3)
// returns 6
5. Параметри на функцията за почивка
При извикване на функция понякога възниква необходимост от възможност за предаване на произволен брой аргументи и за обработка на тези аргументи в рамките на функцията. Тази нужда се обработва от параметри на функцията за почивка синтаксис. Той предоставя начин за улавяне на останалите аргументи след дефинираните аргументи, използвайки синтаксиса, показан по -долу. Тези допълнителни аргументи се улавят в масив.
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. Шаблониране на низове
Шаблонирането на низове се отнася до интерполиране на променливи и изрази в низове, използващи синтаксис като perl или черупката. Шаблон за низ е затворен в обратни знаци ( „ ). За разлика от единичните кавички ( ' ) или двойни кавички ( ' ) показват нормални низове. Изразите вътре в шаблона са маркирани между $ { и } . Ето един пример:
var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'
Разбира се, можете да използвате произволен израз за оценка.
// 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'
Този синтаксис за дефиниране на низове може да се използва и за дефиниране на многоредови низове.
var x = `hello world
next line`
// returns
hello world
next line
7. Свойства на обекта
ES6 предлага опростен синтаксис за създаване на обекти. Разгледайте примера по -долу:
var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
Изчислените имена на имоти също са доста изящни. С ES5 и по -ранни версии, за да зададете свойство на обект с изчислено име, трябваше да направите това:
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}
Сега можете да направите всичко в едно определение:
var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}
И разбира се, за да дефинирате методи, можете просто да го определите с името:
var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6
8. Синтаксис на формално определение на клас
Определение на класа
И накрая, JavaScript получава формален синтаксис за дефиниция на клас. Въпреки че е просто синтактична захар над вече наличните класове, базирани на протипи, тя служи за подобряване на яснотата на кода. Това означава, че това е така не добавете нов обектен модел или нещо подобно.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
Деклариране на методи
Определянето на метод също е доста просто. Няма изненади там.
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
Получатели и сеттери
Сега имаме и гетъри и сетери, с проста актуализация на синтаксиса. Нека предефинираме Кръг клас с ■ площ Имот.
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
Нека сега добавим сетер. За да може да се дефинира радиус като задаваемо свойство, трябва да предефинираме действителното поле до _радиус или нещо, което няма да се сблъска със сетера. В противен случай срещаме грешка при препълване на стека.
Ето предефинирания клас:
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
Като цяло, това е хубаво допълнение към обектно-ориентирания JavaScript.
Наследяване
В допълнение към дефинирането на класове с помощта на клас ключова дума, можете също да използвате разширява ключова дума за наследяване от супер класове. Нека да видим как работи това с пример.
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
И това беше кратко въведение в някои от функциите на JavaScript ES6.
Следващо: запознаване с няколко важни метода на JavaScript масив и скриптове на анимация на робот, чувствителна към гласа! Също така научете за страхотна рамка отпред, наречена Vue.
Кредит на изображението: micrologia/ Depositphotos
Дял Дял Туит електронна поща Canon срещу Nikon: Коя марка фотоапарат е по -добра?Canon и Nikon са двете най -големи имена в камерата. Но коя марка предлага по -добрата гама от фотоапарати и обективи?
софтуер за организиране на файлове и папкиПрочетете Напред Свързани теми
- Програмиране
- JavaScript
Абонирайте се за нашия бюлетин
Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!
Щракнете тук, за да се абонирате