Съвременен JavaScript с ES6–ES13 (JS урок)

Това те очаква в този курс по JavaScript ES6.

JavaScript съществува от много години в браузърите. Почти всеки уебсайт съдържа повече или по-малко JS код. Въпреки че първите версии бяха доста неукротими, досега се работеше добре с ES5 стандарта, поне ако бяха умели да избегнат измамите и несигурностите. Така защо да се учи нещо ново и да не се остане на добре установеното? В този урок аз показвам предимствата на новия стандарт ES6 и причините, поради които всъщност не може да се отрече от него.

До включително ES5 ключовата дума var беше единственият начин за деклариране на променливи и често предизвикваше нежелано поведение или дори грешки. ES6 изпраща в надпреварата двата нови ключови думи let и const, които отстраняват някои от недостатъците на var.

Всеки уеб разработчик познава цикъла For. Той често се използва за обхождане на масиви. С ES6 има вариант на цикъла For, който позволява това по-кратко и по-компактно.

Функциите са от съществено значение в JS и досега са били декларирани и дефинирани само с ключовата дума function. ES6 въвежда много елегантен и кратък начин на писане, който не само прави кода по-четим, но предлага и решение за досаден проблем с this.

Незадължителните параметри в ES5 могат да бъдат реализирани малко неудобно и не се откриват на повикващата функция. С ES6 незадължителните параметри могат да бъдат написани с техните стойности по подразбиране директно в сигнатурата на функцията.

Деструктурирането позволява целенасоченото извличане на елементи от обекти и масиви. При по-внимателно разглеждане се откриват много възможности за приложение, които правят JS кода по-елегантен и компактен.

Работата с arguments променливата беше необходима преди ES6, за да се позволи променлив брой параметри в функциите. В ES6 това е много по-лесно с така наречените Rest параметри.

Не само при дефинирането на функции операторът …- се използва за останалите параметри, но може да се използва и при разглобяване на масиви, за да се улови "останалата" част от елементите и да бъдат предоставени като масив.

Не само при масиви може да се използва операторът за остатък, но също и при обекти може да прихване останалите свойства и да ги предостави като обект.

Обратното на оператора за почивка е операторът за разпръскване. Той изглежда точно така (…), но е на другата страна на едно назначение и разпростира масива на неговите отделни части.

„Триковете“ с оператора Spread работят много добре и с обекти. Така обекти могат да бъдат „примесени“ в други обекти. Въпреки това, съществува и много добра алтернатива с Object.assign().

Функциите в обектния литерал са много громоздко да се пишат с ключовата дума function-. С ES6 обаче могат да се пишат много по-кратко и по-ясно.

Няма как да не се каже: многоредовите низови литерали с вградени стойности на променливи бяха мъка до ES6 и бяха много неприятни за четене. Новите литерали на шаблоните на ES6, от друга страна, са синтактично удоволствие.

Обекти винаги могат да се злоупотребяват като Key-Value-Store или речник, но с някои недостатъци. Новата структура от данни Map се освобождава от тези недостатъци и предлага надеждна функционалност на речника, каквато се среща в други програмни езици.

След като с помощта на обещанията (Promises) може да се избегне ада на обратни обаждания, async/await конструкцията дава още повече синтактичен захар. Тя се базира на обещанията и позволява асинхронните операции да се програмират почти като синхронни. Този, който е програмирал поне веднъж с async/await, оттогава избягва директното използване на then метода на обещанията (и още повече избягва използването на обратните обаждания).

Освен статичното импортиране на модули с ключовата дума import, в ES6 се поддържа и динамичното импортиране с помощта на функцията import-. Тъй като всичко това работи асинхронно, се връща обещание, чието разрешаване може лесно да се изчака с помощта на await. Така зареждането на модули по време на изпълнение в произволни моменти е вече възможно.

Наследяването продължава да се базира на прототипи, но в ES6 се пише много по-лесно и прегледно с ключовата дума extends. Когато се използва, трябва да се извика конструкторът на базовия клас точно в правилния момент с помощта на super. Как се прави това, е разяснено и в този урок, разбира се.

Сега може да се декларират и частни полета, и определено не е възможно да се достъпи отвън. Малко непривично е декларирането, което се различава доста от другите програмни езици.

С новата ключова дума class и свързаните функции като наследяване и капсулиране на данни (частни полета), всички ОО програмисти трябва да бъдат удовлетворени, нали? Искам да представя алтернатива за създаване на обекти в този урок, която се обезкласова, прототипи и this, но позволява по-гъвкав начин за "наследяване" или по-добре "съставяне".

Най-важните характеристики на версия ES6 и по-нови трябва вече да бъдат обсъдени. Винаги се добавят нововъведения. Някои по-рядко използвани функции все още не са споменати. В този урок ще бъде обяснено какво е още в очакване в бъдеще и кои функции все още може да бъдат интересни в специални случаи.