JavaScript претерпел огромные улучшения за последние несколько десятилетий. Итак, являетесь ли вы новичком или имеете некоторый опыт работы с интерфейсом, эта статья для вас.
Давайте двигаться дальше.
В этой статье я собираюсь распространять следующие функции:
- Литералы шаблона
- Функции со стрелками
- Уничтожение
Это явно не все характеристики. Но это наименьшие функции, которыми мы пользуемся большую часть времени.
1. Литералы шаблона:
До ES6 вот как мы поступали с конкатенацией строк:
Теперь, используя литералы шаблонов, мы можем определить заполнитель в строке, чтобы избавиться от всех уродливых конкатенаций:
Обратите внимание, что я использую символ обратной кавычки вокруг строки. Я знаю, это выглядит забавно 😊. Никто не знал этого символа обратной кавычки до выпуска Angular2. Таким образом, вы можете увидеть этот символ перед цифрой 1 на клавиатуре.
2. Функции стрелки:
Это одна из моих любимых функций в ES6! Вдохновленная полезной концепцией лямбда-выражений в C#, стрелочная функция обеспечивает чистый и лаконичный синтаксис для написания функциональных выражений.
До ES6 вот как мы поступали с функциональными выражениями:
В стрелочных функциях ключевое слово function можно избежать или полностью убрать:
Мы также можем избавиться от ключевого слова return, если наша функция является однолинейной:
Разве это не намного чище и лаконичнее, чем прежний синтаксис?
Подождите 😊, мы даже можем сделать этот синтаксис короче, если наша функция ожидает только один параметр:
Здесь мы попадаем в другой сценарий, если наша функция не ожидает никакого параметра, тогда нам нужно использовать пару скобок:
Что еще более интересно, стрелочные функции полезны в сценарии, где нам нужно передать функции обратного вызова в качестве аргументов:
3. Уничтожение:
Разрушение — это способ извлечения свойств из объекта или элементов из массива. Возьмем пример объекта «employee»:
Допустим, нам нужно получить доступ к этим свойствам и сохранить их в переменных соответственно:
Вам не кажется, что в коде слишком много повторений. Здесь вступает в действие концепция Разрушения, и посмотрим, как мы можем справиться с этим повторением:
Вот и все! Этот код точно такой же, как мы использовали выше. Внутри фигурных скобок мы определяем три переменные: имя, возраст и страну. Их значения будут извлечены из соответствующих свойств в объекте сотрудника.
Обратите внимание, что нам не нужно упоминать все свойства, чтобы получить значения. Если нас интересует только одно свойство country, мы можем сделать так:
Разрушение объекта полезно в сценарии, если мы имеем дело с вложенными объектами:
Без деструкции нам пришлось бы упасть в уродливый повторяющийся код:
Теперь мы можем избавиться от этого раздражающего повторения кода, используя разрушение объекта:
мы получаем объект выставления счетов «сотрудник» и сохраняем в улицу, город и штат соответственно.
Подводя итог, можно сказать, что ES6 — это действительно удобный способ писать чистый и лаконичный код.
Какие ваши любимые функции ES6? Используйте комментарий, чтобы сообщить мне!
Если вам понравилось чтение, пожалуйста, похлопайте :-)