Наиболее распространенные функции JavaScript ES6, которые вам необходимо знать

Привет! Поскольку это мой первый носитель, прежде чем мы начнем, позвольте мне представиться вам. Меня зовут Дирдо, люди зовут меня Ардо, в настоящее время работаю веб-разработчиком Front End в одной из компаний по вызову пассажиров в Южной Джакарте, Индонезия 👋

Работа в мире Front End означает, что вы будете тесно сотрудничать с CSS и JavaScript. Какой бы ни была структура, масштаб или метод, вы никогда не отделитесь от CSS и JavaScript! на самом деле, они будут вашими лучшими друзьями в повседневной жизни 😃

Что ж, поскольку заголовок - «JavaScript», в этой статье я расскажу вам только о JavaScript. Итак, без дальнейших подробностей, давайте перейдем к 8 потрясающим функциям ES6 JavaScript!

Обзор:

  • Блочные переменные (let)
  • Константа (const)
  • Функция стрелки
  • Шаблонные литералы
  • Параметр по умолчанию
  • Оператор распространения
  • Обещать
  • Модули (экспорт / импорт)

Дополнительно (функции ES10):

  • Object.fromEntries
  • Object.entries
  1. Переменные с блочной областью видимости (let)

Объявление переменной - это самая простая вещь в коде. Без него вы точно ничего не сможете сделать! Но даже самая простая вещь обязательно требует внимания, особенно если она влияет на объем работ. Проверь это:

ключевые моменты:

  • объем переменной var - это вся включающая функция
  • повторное объявление не приведет к ошибке
  • Подъем разрешен
  • На верхнем уровне он создаст свойство для глобального объекта.

ключевые моменты:

  • let переменная заблокирована-область видимости
  • повторное объявление абсолютно выдает ошибку
  • Подъем не допускается
  • На верхнем уровне не создавайте свойство для глобального объекта.

Полная ссылка: mdn

2. Константа (const)

не только let, существует еще один тип переменных с другой функциональностью. Проверь это:

ключевые моменты:

  • разрешено переназначение значения переменной
  • декларация без начального значения разрешена

ключевые моменты:

  • значение нельзя переназначить
  • в декларации должно быть указано начальное значение

Полная ссылка: mdn

3. Функция стрелки

«Быть ​​как можно короче!» Я думаю, что это своего рода девиз для каждого разработчика / инженера, особенно когда вы просто пишете один оператор, вы можете найти кратчайший способ написать код, подобный функции. Проверь это:

ключевые моменты:

  • есть this
  • должен указать return, чтобы вернуть значение
  • должен указать function
  • необходимо использовать круглые скобки аргументов ()
  • необходимо использовать скобку {}

ключевые моменты:

  • нет this
  • нет необходимости return возвращать значение одним оператором
  • нет необходимости указывать function
  • используйте => вместо ()
  • одиночный / простой оператор не может использовать {}

Полная ссылка: mdn

4. Шаблонные литералы

Написание многострочной строки с переменными в JavaScript? больше не нужно беспокоиться. Проверь это:

ключевые моменты:

  • используйте + между выражением переменной
  • ввод не влияет на линию разрыва

ключевые моменты:

  • просто используйте ' (обратная галочка), чтобы обернуть строки
  • используйте ${}, чтобы написать выражение
  • Enter отобразит структурную линию

Полная ссылка: mdn

5. Параметр по умолчанию

Обработка неиспользуемых параметров - это еще одна вещь, которую нужно сделать, если вы не назначаете значения параметров по умолчанию, но есть ли более короткий способ справиться с этим? Проверь это:

Полная ссылка: mdn

6. Оператор распространения

Это одна из моих любимых функций в ES6. это как волшебство! 🌈
Как следует из названия, оператор распространения распределяет значения внутри объекта / массива в различные места (аргументы, элементы или выражение объекта). круто правда ?! давай проверим это:

ключевые моменты:

  • concat поместит элементы в конец массива
  • concat зависит от порядка в массиве
  • concat возвращает не значения, а сам массив

ключевые моменты:

  • синтаксис распространения не зависит от порядка
  • синтаксис распространения более гибкий с точки зрения порядка
  • синтаксис распространения вернет значения внутри массива / объекта

В этом разделе concat и синтаксис распространения имеют свои особенности, а функция зависит от случая. но если вам нужно объединить значения объекта / массива и вам нужен гибкий порядок, синтаксис распространения выглядит как лучший вариант вместо concat.

Полная ссылка: mdn

7. Обещание

Вы когда-нибудь запускали несколько функций, но не уверены, завершаются ли другие процессы один за другим? или, может быть, вы хотите начать вызывать функцию сразу после завершения другого асинхронного процесса? ну, вы можете использовать callback, но есть ли другой способ справиться с такими вещами? Проверь это:

ключевые моменты:

  • callback передает другую функцию в аргумент
  • вложение большого количества обратных вызовов может быть болезненным. это может вызвать ад обратного вызова
  • promise возвращает объект
  • promise имеет 3 состояния: ожидает выполнения, выполнено, отклонено;

Полная ссылка: mdn

8. Модули (экспорт / импорт)

В наши дни написание кода в немодульном файле - это выбор не для каждого разработчика, работающего в команде. Можете ли вы представить, как использовать один файл main.js для написания различных функций со своей командой? Невозможно. Что ж, спасибо за возможности экспорта / импорта! Теперь вы можете без проблем работать с командой. Проверь это:

также вам нужно будет поместить type="module" в свой тег ‹script›

Полная ссылка: mdn

Дополнительно

8 приведенных выше примеров, вероятно, являются наиболее часто используемыми, а некоторые из них являются простейшими (я думаю) функциями ES6, которые вам, возможно, нужно знать и использовать (или, может быть, вы уже знаете и используете их! 😆).

Так что, если вы уже знаете и используете их в своей работе, возможно, вы захотите взглянуть на некоторые функции ES10, которые я лично считаю крутыми и очень полезными. Давай проверим это последнее 😉

Object.fromEntries
Иногда вы можете встретить случай, когда структура данных не соответствует ожидаемой, например, когда вам нужен объект, но вместо этого вы получаете массив. Так что ты будешь делать? Не беспокойтесь, проверьте это!

или, может быть, вы хотите, чтобы объект стал массивом?

Подведение итогов

Есть еще много функций ES, которые вы можете найти в другой версии. Все приведенные выше примеры представляют собой всего лишь базовую реализацию, чтобы дать вам полную картину о каждой функции. В реальном мире вы могли бы найти более сложные случаи. Так что продолжайте суетиться! 😄 👊

И последнее: я сделал живую версию кода, вы можете проверить ее на веб-сайте; или мой github; 😉