JavaScript ES6 носи нов синтаксис и нови страхотни функции, за да направи кода ви по-модерен и по-четлив. Позволява ви да пишете по-малко код и да правите повече. ES6 ни запознава с много страхотни функции като функции със стрелки, низове на шаблони, унищожаване на класове, модули ... и много други. Нека да разгледаме.
const и нека
const
е нова ключова дума в ES6 за деклариране на променливи. const
е по-мощен от var
. Веднъж използвана, променливата не може да бъде преназначена. С други думи, това е неизменяема променлива, освен когато се използва с обекти.
Това е наистина полезно за насочване към селекторите. Например, когато имаме един бутон, който задейства събитие, или когато искате да изберете HTML елемент в JavaScript, използвайте const
вместо var
. Това е така, защото var
е „повдигнат“. Винаги е за предпочитане да се използва, const
когато не искате да преназначавате променливата.

В горния код const
няма да се промени и не може да бъде преназначен. Ако се опитате да му придадете нова стойност, това ще ви върне грешка.

let
може да бъде преназначен и да придобие нова стойност. Той създава променлива променлива .
let
е същото като const
това, че и двете са блокирани. Това означава, че променливата е достъпна само в рамките на нейния обхват.
Функции със стрелки
Функцията стрелка е наистина страхотна и прави кода ви по-четлив, по-структуриран и изглежда като модерен код. Вместо да използвате това:

Използвай това:

Както виждате, функцията със стрелки изглежда по-четлива и изчистена! Вече няма да е необходимо да използвате стария синтаксис.
Също така, можете да използвате функцията Arrow с map
, filter
иreduce
вградени функции.

Функцията на картата със стрелки изглежда по-ясна и четлива, отколкото map
в ES5. С ES6 можете да пишете по-кратък и по-интелигентен код. Можете да използвате същото с filter
и reduce
.
Шаблонни литерали
Шаблонните литерали или низовете на шаблони са доста готини. Не е нужно да използваме оператора плюс (+) за обединяване на низове или когато искаме да използваме променлива вътре в низ.
Старият синтаксис:

С нов ES6 синтаксис:

Толкова просто! Това е наистина огромна разлика между стария синтаксис и ES6. Когато играете със струни, литералният низ в ES6 изглежда по-организиран и добре структуриран от ES5.
Параметри по подразбиране
Когато работя в PHP, обикновено използвам параметри по подразбиране. Те ви позволяват да дефинирате параметър предварително.
Така че, когато забравите да напишете параметъра, той няма да върне недефинирана грешка, тъй като параметърът вече е дефиниран по подразбиране. Така че, когато стартирате функцията си с пропуснат параметър, тя ще вземе стойността на параметъра по подразбиране t
и няма да върне грешка!
Вижте този пример:

Горната функция връща недефинирана, защото сме забравили да й дадем втория параметър age
.
Но ако използвахме параметъра по подразбиране, той няма да се върне недефиниран и ще използва стойността си, когато забравим да зададем параметър!

Както виждате, функцията връща стойност, въпреки че сме пропуснали втория параметър. Сега с параметъра по подразбиране можем да се справим с грешката предварително.
Унищожаване на масив и обект
Унищожаването прави присвояването на стойностите на масив или обект на новата променлива по-лесно.
Старият синтаксис:

Със синтаксис ES6:

С ES5 трябва да присвоим всяка стойност на всяка променлива. С ES6 просто поставяме стойностите си в къдрави скоби, за да получим каквото и да е свойство на обекта.
Забележка:ако присвоите променлива, която не е идентична с името на свойството, тя ще се върне недефинирана. Например, ако името на свойството е name
и го присвоим на ausername
променлива,ще се върне недефинирано.
Винаги трябва да наименуваме променливата по същия начин като името на свойството. Но в случай, че искаме да преименуваме променливата, :
вместо това можем да използваме двоеточието .

За масива използваме същия синтаксис като обекта. Трябва само да заменим къдравите скоби с квадратни скоби.

Внос и износ
Използването import
и export
във вашето приложение на JavaScript го прави по-мощен. Те ви позволяват да създавате отделни и многократно използваеми компоненти.
Ако сте запознати с която и да е рамка на JavaScript MVC, ще видите, че те използват import
и export
боравят с компонентите през повечето време. И така, как наистина работят?
Това е просто! export
ви позволява да експортирате модул, който да се използва в друг JavaScript компонент. Използваме import
за импортиране на този модул, за да го използваме в нашия компонент.
Например имаме два файла. Първият е кръстенdetailComponent.js
а вторият е кръстенhomeComponent.js
.
В detailComponent.js
ще експортираме detail
функцията.

И ако искаме да използваме тази функция в homeComponent.js
,ние просто ще използваме import
.

Ако искаме да импортираме повече от един модул, просто ги поставяме в къдрави скоби.

Толкова готино, нали ?!
Обещания
Обещанията са нова функция на ES6. Това е метод за писане на асинхронен код. Може да се използва, когато например искаме да извлечем данни от API или когато имаме функция, която отнема време за изпълнение. Обещанията улесняват решаването на проблема, така че нека създадем първата си обещание!

Ако влезете в конзолата си, тя ще върне Promise. Така че, ако искаме да изпълним функция след извличане на данни, ще използваме Promise. Обещанието взема два параметъра: resolve
и reject
да се справи с очакваната грешка.
Забележка: функцията за извличане сама връща Promise!
const url="//jsonplaceholder.typicode.com/posts";
const getData=(url)=>{return fetch(url);}
getData(url).then(data=> data.json()).then(result=> console.log(result));
Сега, ако влезете в конзолата си, тя ще върне масив от данни.
Параметър за почивка и оператор за разпространение
The rest parameters are used to get the argument of an array, and return a new array.


The spread operator has the same syntax as the rest parameter, but the spread operator takes the Array itself and not just the arguments. We can use the Spread parameter to get the values of an Array, instead of using a for loop or any other method.
const arr=['said',20,'JavaScript enthusiast','Hi','Said','How are you?']; const Func=(...anArray)=>{ return anArray; } console.log(Func(arr)); //output ["said", 20, "JavaScript enthusiast", "Hi", "Said", "How are you?"
Classes
Classes are the core of object oriented programming (OOP). They make your code more secure and encapsulated. Using classes gives your code a nice structure and keeps it oriented.

To create a class, use the class
keyword followed by the name of the class with two curly brackets.

Now we can access the class
methods and properties using the new
keyword.
class myClass{ constructor(name,age){ this.name=name; this.age=age; } } const Home= new myClass("said",20); console.log(Home.name)// said
За да наследите от друг клас, използвайте extends
ключовата дума, последвана от името на класа, от който искате да наследите.

Можете да научите повече за класовететук.
ES6 има и други невероятни функции - можете да ги разгледате тук.
Заключение
Надявам се, че тази статия ви е била полезна и се надявам, че успях да ви представя някои от функциите на ES6. Ако е така, абонирайте се за този пощенски списък, за да научите повече за предните теми. Благодаря за отделеното време.
Между другото, наскоро работех със силна група софтуерни инженери за едно от мобилните си приложения. Организацията беше страхотна и продуктът беше доставен много бързо, много по-бързо от други фирми и фрийлансъри, с които съм работил, и мисля, че мога честно да ги препоръчам за други проекти там. Изпратете ми имейл, ако искате да се свържете - [email protected]