JavaScript претерпел огромные улучшения за последние несколько десятилетий. Итак, являетесь ли вы новичком или имеете некоторый опыт работы с интерфейсом, эта статья для вас.

Давайте двигаться дальше.

В этой статье я собираюсь распространять следующие функции:

  • Литералы шаблона
  • Функции со стрелками
  • Уничтожение

Это явно не все характеристики. Но это наименьшие функции, которыми мы пользуемся большую часть времени.

1. Литералы шаблона:

До ES6 вот как мы поступали с конкатенацией строк:

Теперь, используя литералы шаблонов, мы можем определить заполнитель в строке, чтобы избавиться от всех уродливых конкатенаций:

Обратите внимание, что я использую символ обратной кавычки вокруг строки. Я знаю, это выглядит забавно 😊. Никто не знал этого символа обратной кавычки до выпуска Angular2. Таким образом, вы можете увидеть этот символ перед цифрой 1 на клавиатуре.

2. Функции стрелки:

Это одна из моих любимых функций в ES6! Вдохновленная полезной концепцией лямбда-выражений в C#, стрелочная функция обеспечивает чистый и лаконичный синтаксис для написания функциональных выражений.

До ES6 вот как мы поступали с функциональными выражениями:

В стрелочных функциях ключевое слово function можно избежать или полностью убрать:

Мы также можем избавиться от ключевого слова return, если наша функция является однолинейной:

Разве это не намного чище и лаконичнее, чем прежний синтаксис?

Подождите 😊, мы даже можем сделать этот синтаксис короче, если наша функция ожидает только один параметр:

Здесь мы попадаем в другой сценарий, если наша функция не ожидает никакого параметра, тогда нам нужно использовать пару скобок:

Что еще более интересно, стрелочные функции полезны в сценарии, где нам нужно передать функции обратного вызова в качестве аргументов:

3. Уничтожение:

Разрушение — это способ извлечения свойств из объекта или элементов из массива. Возьмем пример объекта «employee»:

Допустим, нам нужно получить доступ к этим свойствам и сохранить их в переменных соответственно:

Вам не кажется, что в коде слишком много повторений. Здесь вступает в действие концепция Разрушения, и посмотрим, как мы можем справиться с этим повторением:

Вот и все! Этот код точно такой же, как мы использовали выше. Внутри фигурных скобок мы определяем три переменные: имя, возраст и страну. Их значения будут извлечены из соответствующих свойств в объекте сотрудника.

Обратите внимание, что нам не нужно упоминать все свойства, чтобы получить значения. Если нас интересует только одно свойство country, мы можем сделать так:

Разрушение объекта полезно в сценарии, если мы имеем дело с вложенными объектами:

Без деструкции нам пришлось бы упасть в уродливый повторяющийся код:

Теперь мы можем избавиться от этого раздражающего повторения кода, используя разрушение объекта:

мы получаем объект выставления счетов «сотрудник» и сохраняем в улицу, город и штат соответственно.

Подводя итог, можно сказать, что ES6 — это действительно удобный способ писать чистый и лаконичный код.

Какие ваши любимые функции ES6? Используйте комментарий, чтобы сообщить мне!

Если вам понравилось чтение, пожалуйста, похлопайте :-)