Шта је ЕС6 и шта ЈаваСцрипт програмери треба да знају

Шта је ЕС6 и шта ЈаваСцрипт програмери треба да знају

ЕС6 се односи на верзију 6 програмског језика ЕЦМА Сцрипт. ЕЦМА Сцрипт је стандардизовано име за ЈаваСцрипт, а верзија 6 је следећа верзија након верзије 5, која је објављена 2011. То је велико побољшање језика ЈаваСцрипт и додаје много више функција намењених да олакша развој софтвера великих размера. .





ЕЦМАСцрипт, или ЕС6, објављен је у јуну 2015. Касније је преименован у ЕЦМАСцрипт 2015. Подршка за читав језик веб прегледача још није потпуна, иако су велики делови подржани. Велики веб прегледачи подржавају неке функције ЕС6. Међутим, могуће је користити софтвер познат као плаиер за претварање кода ЕС6 у ЕС5, што је боље подржано у већини прегледача.





Погледајмо сада неке велике промене које ЕС6 доноси у ЈаваСцрипт.





1. Константе

Коначно, концепт константи је стигао до ЈаваСцрипт -а! Константе су вредности које се могу дефинисати само једном (по опсегу, доле објашњеном опсегу). Поновна дефиниција унутар истог опсега изазива грешку.

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. век, ЈаваСцрипт! Са ЕС6, променљиве су декларисане коришћењем дозволити (и горе описане константе) следе правила за одређивање опсега блокова, баш као у Јави, Ц ++ итд. (Да бисте сазнали више, погледајте како декларисати променљиве у ЈаваСцрипт -у.)

Пре овог ажурирања, променљиве у ЈаваСцрипт -у су имале опсег функција. То јест, када вам је био потребан нови опсег за променљиву, морали сте да га декларишете унутар функције.





Променљиве задржавају вредност до краја блока. Након блока, вредност у спољном блоку (ако постоји) се враћа.

како додати пречице на иПхоне
{
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. Функције стрелица

ЕС6 представља функције стрелица у ЈаваСцрипт. (Ове су сличне традиционалним функцијама, али имају једноставнију синтаксу.) У следећем примеру, Икс је функција која прихвата параметар тзв до , и враћа његов прираштај:

var x = a => a + 1;
x(4) // returns 5

Помоћу ове синтаксе можете са лакоћом дефинисати и проследити аргументе у функцијама.

Коришћење са а за сваки() :

[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

За разлику од других језика, као што су Ц ++ или питхон, параметри са подразумеваним вредностима могу се појавити пре оних без подразумеваних вредности. Имајте на уму да је ова функција дефинисана као блок са повратак вредност путем илустрације.

var x = (a = 2, b) => { return a * b }

Међутим, аргументи се слажу с лева на десно. У првом позиву испод, б има недефинисан вредност иако до је декларисан са подразумеваном вредношћу. Прослеђени аргумент се подудара са до радије него б . Функција се враћа НаН .

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. Стринг Темплатинг

Предложак низа односи се на интерполацију променљивих и израза у низове помоћу синтаксе попут перла или љуске. Предложак низа је затворен у знакове повратне ознаке ( `` ). Насупрот томе, једноструки наводници ( ' ) или двоструки наводници ( ' ) означавају нормалне низове. Изрази унутар шаблона су означени између $ { и } . Ево примера:

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. Својства објекта

ЕС6 доноси поједностављену синтаксу за креирање објеката. Погледајте пример испод:

var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}

Рачунати називи некретнина су такође прилично згодни. Са ЕС5 и старијим верзијама, да бисте поставили својство објекта са израчунатим именом, морали сте да урадите ово:

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. Синтакса формалне дефиниције класе

Дефиниција класе

И на крају, ЈаваСцрипт добија формалну синтаксу дефиниције класе. Иако је то само синтаксички шећер у односу на већ доступне класе засноване на прототипима, он служи за побољшање јасноће кода. То значи да ово значи не додајте нови модел објекта или било шта слично.

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

Све у свему, ово је леп додатак објектно оријентисаном ЈаваСцрипт-у.

Наслеђивање

Поред дефинисања класа помоћу класа кључну реч, можете користити и продужава кључна реч за наслеђивање од супер класа. Погледајмо како ово функционише на примеру.

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

И то је био кратак увод у неке карактеристике ЈаваСцрипт ЕС6.

Следеће: упознавање са неколико важних метода низа ЈаваСцрипт и скриптирање гласовне анимације робота! Такође сазнајте о сјајном фронт-енд оквиру који се зове Вуе.

Кредит за слику: мицрологиа/ Депоситпхотос

Објави Објави Твеет Емаил Цанон против Никона: Која марка фотоапарата је боља?

Цанон и Никон су два највећа имена у индустрији фотоапарата. Али који бренд нуди бољу линију камера и објектива?

ар зоне апп шта је то
Прочитајте следеће Повезане теме
  • Програмирање
  • ЈаваСцрипт
О аутору Јаи Сридхар(17 објављених чланака) Више од Јаиа Сридхара

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили