5 JavaScript «плохие» части, которые фиксируются в ES6

Автор оригинала: FreeCodeCamp Community Member.

Раджараодомв

Особенности ECMASSPSCS 6 (ES6) можно разделить на функции, которые являются чистыми синтаксическими сахаром (например: класс ), функции, которые улучшают JavaScript (например Import ) и функции, которые фиксируют некоторые из «плохих» частей JavaScript ( Как Пусть ключевое слово). Большинство блогов и статей объединяют все три типа и могут сокрушать новичков. Поэтому я пишу этот пост, который фокусируется только на ключевых функциях ES6, которые фиксируют «плохие» части.

Хорошо, давайте начнем.

1. Область блока

ES5 имел только «Объем на уровне функциональности» (I.E. Вы охватываете код в функциях для создания области) и вызвали множество проблем. ES6 обеспечивает «блок»-левеловающее значение (то есть вьющиеся скобки на область), когда мы используем « пусть » или « const » вместо « var ».

Предотвратить переменную подъемность за пределами объема

Ниже на рисунке показано, что переменная «бонус» не поднимается за пределами «если» блокировки блока, создавая работу в качестве большинства языков программирования.

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

ES6 не позволяет дублировать декларацию переменных, когда мы объявляем их, используя “Пусть” или “const” в той же области . Это очень полезно в том, чтобы избежать дублирующихся выражений функций, поступающих из разных библиотек (например, функция «Добавить» функцию ниже).

Устраняет необходимость в iife

В ES5 в случаях, как ниже, мы должны были использовать немедленно, вызываемое функциональное выражение (IIFE), чтобы убедиться, что мы не загрязняем и не перезаписываем глобальную область. В ES6 мы можем просто использовать фигурные скобки ({}) и использовать конститут или Пусть получить тот же эффект.

Babel – инструмент для преобразования ES6 до ES5

Делает его тривиальным для использования функций в петлях

В ES5, если у вас была функция внутри цикла (например, для (var; i <3; i ++) {…}), и если эта функция пыталась получить доступ к циклической переменной «I», мы будем в беде из-за поднимая. В ES6, если вы нам E « Пусть», вы можете использовать функции без каких-либо проблем.

2. Лексический «это» (через функции стрелки)

В ES5 «Это» может варьироваться в зависимости от «где», называется, и даже «как» его называют и вызвало всевозможные боли для разработчиков JS. ES6 устраняет этот основной вопрос «Лексическим» этим.

Проблема и две обходные пути в ES5:

На приведенной ниже картинке мы пытаемся распечатать имя пользователя и зарплату пользователя. Но мы получаем зарплату с сервера (смоделированного). Обратите внимание, что когда ответ вернется, «Это« окно »вместо объекта« человек ».

Решение в ES6

Просто используйте функцию FAT-arrow =>, и вы получаете лексику «это» автоматически .

3. Работа с “аргументами”

В ES5 «Аргументы» действуют как массив (то есть. Мы можем зацикливаться на нем), но не является массивом. Итак, все функции массива, такие как сортировка, ломтик и так далее, не доступны.

В ES6 мы можем использовать новую функцию, называемую «отдых» параметры. Он представлен 3 точками и именем, такими как … args. Параметры отдыха – это массив, и поэтому мы можем использовать все функции массива.

4. Классы

Концептуально, нет такой вещи, как «класс» (то есть чертежа) в js, как оно в том, что он находится в других языках ОО, как Java. Но люди в течение длительного времени лечили «функцию» (AKA «Функциональные конструкторы»), которые создают объекты, когда мы используем ключевое слово «новое» в качестве классов.

А поскольку JS не поддерживает «классы» и просто имитирует его через «прототипы», это синтаксис был очень запутанным как для существующих разработчиков JS, так и для новых комиссий, которые хотят использовать его в традиционной моде. Это особенно верно для Такие вещи: создание подклассов, вызывающих функции в родительском классе и так далее.

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

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

Строгий режим («Использовать строгое») помогает определить общие вопросы (или «плохие» части), а также помогает с «Обеспечение» JavaScript Отказ В ES5 строгий режим необязательно, но в ES6 это необходимо для многих Особенности ES6 . Таким образом, большинство людей и инструментов, как Babel автоматически добавляют «использовать строго» в верхней части файла, помещающего весь код JS в строгий режим и заставляя нас писать лучший JavaScript.

Вот и все! ?

Если это было полезно, пожалуйста, нажмите на хлопок? Нажмите ниже несколько раз, чтобы показать вашу поддержку! ⬇⬇⬇ ??

Мои другие посты

https://medium.com/@rajaraodv/latest

Ecmascript 2015+.

1. Проверьте эти полезные советы и трюки Ecmascript 2015 (ES6)
2. 5 JavaScript «плохие» части, которые фиксируются в ES6
3. Это «класс» в ES6 новой «плохой» части?

Улучшения терминалов

1. Как Jazz Up Ваш терминал – пошаговое руководство с картинками
2. Джаз вверх твой “ZSH” терминал В семь шагов – визуальное руководство

Www.

1. Увлекательная и грязная история Интернета и JavaScript

Виртуальный домос

1. Внутренняя работа виртуального дома

Производительность реагирования

1. Два быстрых способа уменьшить размер реагирования в производстве
2. Использование PREACT вместо реагирования

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

1. JavaScript Turging полный – Объяснил
2. Функциональное программирование в JS – с практическими примерами (часть 1)
3. Функциональное программирование в JS – с практическими примерами (часть 2)
4. Почему redux нуждаются в редуллерах, чтобы быть «чистыми функциями»

WebPack

1. WebPack – запутанные детали
2. Замена WebPack & Hot модуль [HMR] (под капотом)
3. HMR и React-Loader WebPack – отсутствующее руководство

Проект.js.

1. Почему черновик и Почему вы должны внести свой вклад
2. Как проект.js представляет богатые текстовые данные

Реагировать и redux:

1. Шаг за шагом Руководство по созданию приложений React Redux
2. Руководство для построения приложения React Redux Crud (3-страничное приложение)
3. Использование Addractwares в React Redux Apps
4. Добавление прочной проверки формы для реагирования приложений Redux
5. Обеспечение приложений React Redux с токенами JWT
6. Обработка транзакционных электронных писем в Action Redux Apps
7. Анатомия приложения React Redux
8. Почему redux нуждаются в редуллерах, чтобы быть «чистыми функциями»
9. Два быстрых способа уменьшить размер реагирования в производстве

Если это было полезно, пожалуйста, нажмите на хлопок? Кнопка ниже несколько раз, чтобы показать вашу поддержку! ⬇⬇⬇ ??

Оригинал: “https://www.freecodecamp.org/news/5-javascript-bad-parts-that-are-fixed-in-es6-c7c45d44fd81/”