5 „лоши“ части на JavaScript, които са фиксирани в ES6

Функциите на ECMAScript 6 (ES6) могат да бъдат разделени на функции, които са чиста синтактична захар (като: class ), функции, които подобряват JavaScript (като импортиране ) и функции, които коригират някои от „лошите“ части на JavaScript (като ключовата дума let ). Повечето блогове и статии съчетават и трите вида и могат да победят новодошлите. Така че пиша тази публикация, която се фокусира само върху ключовите функции на ES6, които поправят „лошите“ части.

Надявам се, че в края на този блог ще разберете, че като използвате само няколко ES6 функции като let и дебелата стрелка, ще получите масивна възвръщаемост.

Добре, да започнем.

1. Обхват на блока

ES5 имаше само „обхват на ниво функция“ (т.е. вие увивате код във функции, за да създадете обхват) и предизвика много проблеми. ES6 осигурява обхват на ниво „блок“ (т.е. фигурни скоби за обхват), когато използваме „ let “ или „ const “ вместо „ var “.

Предотвратяване на променливо повдигане извън обхвата

Долната снимка показва, че променливата „бонус“ не се повдига извън блока „ако“, което прави работа като повечето езици за програмиране.

Забележка: Можете да щракнете върху снимките, за да увеличите и прочетете

Предотвратяване на дублираща се декларация на променлива

ES6 не позволява дублирано деклариране на променливи, когато ги декларираме, използвайки „let“ или „const“ в същия обхват . Това е много полезно за избягване на дублиращи се функционални изрази, идващи от различни библиотеки (като израза на функцията „добавяне“ по-долу).

Елиминира необходимостта от IIFE

В ES5, в случаи като по-долу, трябваше да използваме незабавно извикан израз на функция (IIFE), за да гарантираме, че няма да замърсим или презапишем глобалния обхват. В ES6 можем просто да използваме фигурни скоби ({}) и да използваме const или let, за да получим същия ефект.

babel - Инструмент за конвертиране на ES6 в ES5

В крайна сметка трябва да стартираме ES6 в обикновен браузър. Babel е най-популярният инструмент, използван за конвертиране на ES6 в ES5. Той има различни интерфейси като CLI, Node-модул и също така онлайн конвертор. Използвам модулния възел за своите приложения и използвам онлайн версията, за да видя бързо разликите. Долната снимка показва как Babel преименува променливите, за да симулира „let“ и „const“!

Прави тривиално използването на функции в цикли

В ES5, ако имате функция в цикъл (като за (var i = 0; i <3; i ++) {…}), и ако тази функция се опита да осъществи достъп до променливата на цикъла „i“, ние ще проблеми поради повдигане. В ES6, ако ни позволите“, можете да използвате функции без проблем.

Забележка: Не можете да използвате const, защото той е постоянен, освен ако не използвате новия цикъл for..of.

2. Лексикално „това“ (чрез стрелкови функции)

В ES5 „това“ може да варира в зависимост от „къде“ се нарича и дори „как“ се нарича и е причинило всякакви болки на JS разработчиците. ES6 елиминира този основен проблем, като го „лексикално“.

Лексикална „тази“ характеристика, която принуждава променливата „това“ винаги да сочи към обекта, в който се намира физически .

Проблемът и две решения в ES5:

На снимката по-долу се опитваме да отпечатаме собственото име и заплатата на потребителя. Но ние получаваме заплатата от сървъра (симулирано). Забележете, че когато отговорът се върне, „това“ е „прозорец“ вместо обекта „човек“.

Решението в ES6

Просто използвайте функцията за стрелка на мазнини => и ще получите лексикалното "това" автоматично .

Картината по-долу показва как Babel преобразува функцията за стрелки с мазнини в обикновена ES5 функция без заобиколно решение, така че да работи в текущите браузъри.

3. Справяне с „аргументи”

В ES5, „аргументите“ действат като масив (т.е. можем да го завъртим), но не е масив. Така че, всички функции на Array като сортиране, нарязване и т.н. не са налични.

В ES6 можем да използваме нова функция, наречена “Rest” параметри. Представен е с 3 точки и име като ... аргументи. Параметрите за почивка са масив и така можем да използваме всички функции на масива.

4. Класове

Концептуално в JS няма такова нещо като „Клас“ (т.е. план), както е в други езици на OO като Java. Но хората дълго време са третирали „функцията“ (известна още като „конструктори на функции“), която създава Обекти, когато използваме ключовата дума „нова“ като Класове.

И тъй като JS не поддържа „Класовете“ и просто го симулира чрез „прототипи“, синтаксисът е много объркващ както за съществуващите разработчици на JS, така и за новодошлите, които искат да го използват по традиционен начин на ОО. Това важи особено за неща като: създаване на подкласове, извикване на функции в родителски клас и т.н.

ES6 носи нов синтаксис, който е често срещан в различни програмни езици и улеснява всичко. Долната снимка показва едно до друго сравнение на класовете ES5 и ES6.

Забележка: Можете да кликнете върху снимката, за да увеличите мащаба и да прочетете АКТУАЛИЗАЦИЯ: Не забравяйте да прочетете: „Клас“ в ES6 ли е новата „Лоша“ част? (след това)

5. Строг режим

Стриктният режим („използвайте стриктно“) помага да се идентифицират често срещани проблеми (или „лоши“ части) и също така помага при „защитата“ на JavaScript. В ES5 строгият режим не е задължителен, но в ES6 е необходим за много функции на ES6. Така че повечето хора и инструменти като babel автоматично добавят „използвай стриктно“ в горната част на файла, поставяйки целия JS код в строг режим и принуждавайки ни да напишем по-добър JavaScript.

Това е! ?

Ако това е било полезно, моля, щракнете върху пляскането? бутон долу няколко пъти, за да покажете вашата подкрепа! ⬇⬇⬇ ??

Другите ми публикации

//medium.com/@rajaraodv/latest

ECMAScript 2015+

  1. Вижте тези полезни съвети и трикове за ECMAScript 2015 (ES6)
  2. 5 „лоши“ части на JavaScript, които са фиксирани в ES6
  3. „Клас“ в ES6 ли е новата „лоша“ част?

Подобрения на терминала

  1. Как да джазирате терминала си - Ръководство стъпка по стъпка със снимки
  2. Джазирайте своя терминал „ZSH“ в седем стъпки - визуално ръководство

WWW

  1. Очарователна и разхвърляна история на мрежата и JavaScript

Виртуален DOM

  1. Вътрешна работа на виртуалния DOM

React Performance

  1. Два бързи начина за намаляване на размера на приложението React в производството
  2. Използване на Preact вместо React

Функционално програмиране

  1. JavaScript е Тюринг завършен - обяснен
  2. Функционално програмиране в JS - с практически примери (част 1)
  3. Функционално програмиране в JS - с практически примери (част 2)
  4. Защо Redux се нуждаят от редуктори, за да бъдат „чисти функции“

WebPack

  1. Webpack - объркващите части
  2. Замяна на уеб пакет и горещ модул [HMR] (под капака)
  3. HMR и React-Hot-Loader на Webpack - липсващото ръководство

Draft.js

  1. Защо Draft.js и защо трябва да допринесете
  2. Как Draft.js представлява богати текстови данни

React и Redux:

  1. Ръководство стъпка по стъпка за изграждане на React Redux Apps
  2. Ръководство за изграждане на React Redux CRUD App ( приложение от 3 страници)
  3. Използване на Middlewares в React Redux Apps
  4. Добавяне на надеждна проверка на формуляра за реакция на Redux Apps
  5. Защита на React Redux Apps с JWT Tokens
  6. Обработка на транзакционни имейли в React Redux Apps
  7. Приложението Anatomy Of A React Redux
  8. Защо Redux се нуждаят от редуктори, за да бъдат „чисти функции“
  9. Два бързи начина за намаляване на размера на приложението React в производството

Ако това е било полезно, моля, щракнете върху пляскането? бутона отдолу няколко пъти, за да покажете вашата подкрепа! ⬇⬇⬇ ??