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]