25 сокращений в JavaScript
В этой статье написаны лайфхаки для упрощения и сокращения кода в JS, которые я усвоил на протяжении многих лет.
1. Тернарный оператор
Отличный лайфхак для экономии кода, если ты хочешь написать оператор if..else в одной строке.
Длинная версия:
Сокращенная версия:
Ты также можешь вложить свой оператор if следующим образом:
Однако, аккуратней с вложенными тернарными выражениями, они быстро становятся нечитаемыми.
2. Присвоение с дефолтным значением.
При присвоении значения переменной другой переменной ты можешь убедиться, что исходная переменная не является nulll, undefined или falsy (ложной). Ты можешь написать длинный оператор if с несколькими условными выражениями или использовать оценку короткого замыкания.
Длинная версия:
Сокращенная версия:
Попробуй сам!
Обрати внимание, что если ты установишь для variable1 ложное значение false или 0 например, то будет присвоено значение bar.
3. Сокращение объявления переменных
Рекомендуется объявлять назначения переменных в начале функций. Этот сокращенный метод может сэкономить много времени и места при одновременном объявлении нескольких переменных.
Длинная версия:
Сокращенная версия:
4. Сокращение в условии if
При выполнении проверки if, операторы присваивания иногда могут быть опущены.
Длинная версия:
Сокращенная версия:
Примечание: эти два примера не совсем равны, если likeJavaScript является истинным значением.
Другой пример. Если a НЕ равно true, сделай что-нибудь.
Длинная версия:
Сокращенная версия:
5. Сокращение цикла For
Этот небольшой совет действительно полезен, если тебе нужен простой JavaScript и ты не хочешь полагаться на внешние библиотеки.
Длинная версия:
Сокращенная версия:
Если ты просто хочешь получить доступ к индексу:
Это также работает, если ты хочешь получить доступ к ключам в буквальном объекте:
Сокращение для Array.forEach:
6. Оператор нулевого слияния
Вместо того, чтобы писать шесть строк кода для присвоения значения по умолчанию, если предполагаемый параметр имеет значение null или undefined, мы можем просто использовать оператор нулевого слияния и выполнить то же самое с помощью всего одной строки кода.
Длинная версия:
Сокращенная версия:
7. Десятичные основные экспоненты
Возможно, ты видел это повсюду. По сути, это интересный способ писать числа без нулей в конце. Например, 1e7 по сути означает 1, за которой следуют 7 нулей. Он представляет собой десятичное основание (которое JavaScript интерпретирует как тип с плавающей запятой), равное 10 000 000.
Длинная версия:
Сокращенная версия:
Также в новых версиях JavaScript, можно писать числа с нижним подчеркиванием, например:
8. Сокращение свойств объекта
Определение объектных литералов в JavaScript значительно упрощает жизнь. ES6 предоставляет еще более простой способ назначения свойств объектам. Если имя переменной совпадает с ключом объекта, ты можешь воспользоваться сокращенной записью.
Длинная версия:
Сокращенная версия:
9. Сокращение стрелочных функций
Классические функции легко читать и писать в их простой форме, но они имеют тенденцию становиться немного многословными и запутанными, когда ты начинаешь вкладывать их в вызовы других функций.
Длинная версия:
Сокращенная версия:
Важно отметить, что значение this внутри стрелочной функции определяется иначе, чем для полных функций, поэтому два примера не являются строго эквивалентными.
10. Сокращение return
Return - это ключевое слово, которое мы часто используем для возврата окончательного результата функции. Стрелочная функция с одним оператором неявно вернет результат своей оценки (функция должна опустить фигурные скобки ({}), чтобы опустить ключевое слово return).
Чтобы вернуть многострочный оператор (например, литерал объекта), необходимо использовать () вместо {}, чтобы обернуть тело функции. Это гарантирует, что код оценивается как один оператор.
Длинная версия:
Сокращенная версия:
Можно записать и без круглых скобок:
11. Значения параметров по умолчанию
Ты можешь использовать оператор if для определения значений по умолчанию для параметров функции. В ES6 ты можешь определить значения по умолчанию в самом объявлении функции.
Длинная версия:
Сокращенная версия:
12. Шаблонные литералы
Тебе не надоело использовать знак "+" для объединения нескольких переменных в строку? Если ты умеешь использовать ES6, то тебе повезло. Все, что тебе нужно сделать, это использовать обратную кавычку и ${}, чтобы заключить твои переменные.
Длинная версия:
Сокращенная версия:
13. Деструктурированное присвоение
Если ты работаешь с любой популярной веб-платформой, высока вероятность того, что ты будешь использовать массивы или данные в виде объектных литералов для передачи информации между компонентами и API. Как только объект данных достигнет компонента, тебе нужно будет его распаковать.
Длинная версия:
Сокращенная версия:
14. Сокращение многострочной строки
Если тебе когда-либо приходилось писать многострочные строки в коде, ты бы написал это следующим образом:
Длинная версия:
Но есть способ попроще. Просто используй обратные кавычки.
Сокращенная версия:
15. Сокращение с помощью оператора расширения
Синтаксис с оператором расширения, представленный в ES6, имеет несколько вариантов использования, которые делают код JavaScript более эффективным и интересным в использовании. Его можно использовать для замены определенных функций массива. Оператор распространения - это просто серия из трех точек.
Длинная версия:
Сокращенная версия:
В отличие от функции concat(), ты можешь использовать оператор распространения, чтобы вставить массив в любое место внутри другого массива.
Ты также можешь комбинировать оператор распространения с деструктуризацией ES6:
16. Сокращение обязательного параметра
По умолчанию JavaScript устанавливает для параметров функции значение undefined, если им не передается значение. Некоторые другие языки выдадут предупреждение или ошибку. Чтобы принудительно назначить параметры, ты можешь использовать оператор if для выдачи ошибки, если он не определен, или ты можешь воспользоваться «сокращением обязательных параметров».
Длинная версия:
Сокращенная версия:
17. Сокращение Array.find
Если тебе когда-либо приходилось писать функцию поиска на простом JavaScript, ты, вероятно, использовал бы цикл for. В ES6 была представлена новая функция массива с именем find().
Длинная версия:
Сокращенная версия:
18. Сокращение Object[key]
Знаешь ли ты, что Foo.bar также можно записать как Foo['bar']? Поначалу кажется, что не стоит так писать. Однако эта нотация дает тебе строительный блок для написания повторно используемого кода.
Рассмотрим этот упрощенный пример функции проверки:
Эта функция отлично справляется со своей задачей. Однако рассмотрим сценарий, в котором у тебя очень много форм, в которых тебе нужно применить проверку, но с другими полями и правилами. Разве не было бы неплохо создать универсальную функцию проверки, которую можно было бы настроить во время выполнения?
Теперь у нас есть функция проверки, которую мы можем повторно использовать во всех формах без необходимости писать настраиваемую функцию проверки для каждой.
19. Сокращение двойного побитового НЕ
Побитовые операторы - одна из тех функций, о которых ты узнаешь из руководств по JavaScript для начинающих, и ты никогда не сможешь их нигде реализовать. Кроме того, кто захочет работать с единицами и нулями, если ты не имеешь дело с двоичными?
Однако есть очень практичный вариант использования оператора Double Bitwise NOT. Ты можешь использовать его как замену Math.floor(), выполняются они примерно с одинаковой скоростью.
Длинная версия:
Сокращенная версия:
20. Сокращение экспоненциальной мощности
Сокращение для степенной функции математической экспоненты:
Длинная версия:
Сокращенная версия:
21. Преобразование строки в число
Бывают случаи, когда твой код получает данные в строковом формате, но их нужно обрабатывать в числовом формате. Это не имеет большого значения, мы можем выполнить быстрое преобразование.
Длинная версия:
Сокращенная версия:
22. Присвоение собственности объектам
Рассмотрим следующий фрагмент кода:
Как бы ты объединил их в один объект? Один из способов - написать функцию, которая копирует данные из второго объекта в первый. К сожалению, это может быть не то, что тебе нужно - тебе может потребоваться создать совершенно новый объект, не изменяя ни один из существующих объектов. Самый простой способ - использовать функцию Object.assign, представленную в ES6:
Ты также можешь использовать обозначение разрушения объекта, введенное в ES8:
Нет ограничений на количество свойств объекта, которые ты можешь объединить. Если у тебя есть объекты с одинаковыми именами свойств, значения будут перезаписаны в том порядке, в котором они были объединены.
23. Побитовые IndexOf сокращения
При выполнении поиска с использованием массива функция indexOf() используется для получения позиции искомого элемента. Если элемент не найден, возвращается значение -1. В JavaScript 0 считается «ложным», а числа больше или меньше 0 считаются «правдивыми». В результате приходится писать такой правильный код.
Длинная версия:
Сокращенная версия
Оператор bitwise(~) вернет истинное значение для чего угодно, кроме -1. Отменить это так же просто, как и сделать ! ~. В качестве альтернативы мы также можем использовать функцию includes():
24. Object.entries()
Это функция, которая была введена в ES8, которая позволяет преобразовывать литеральный объект в массив пары ключ/значение:
25. Object.values()
Это также новая функция, представленная в ES8, которая выполняет функцию, аналогичную Object.entries(), но без ключевой части:
Источник: https://www.sitepoint.com/shorthand-javascript-techniques/