Источник: Nuances of Programming
В любом языке программирования сокращения помогают написать более чистый и оптимизированный код и выполнить задачи, использовав кротчайший синтаксис. Разберём способы сокращения в JavaScript.
1. Объявление переменных
2. Множественное объявление переменных
Мы можем присвоить значение нескольким переменным, записав их в одну строчку с помощью деструктуризации массива.
3. Тернарный оператор
С помощью тернарного (условного) оператора можно сэкономить 5 строк в коде.
4. Присваивание значения по умолчанию
Используя оценку короткого замыкания OR(||), можно задать переменной значение по умолчанию в случае, когда ожидаемое значение — false.
5. Оценка короткого замыкания AND(&&)
Если функция вызывается только с переменной со значением true, то можно применить оценку короткого замыкания AND(&&) как альтернативный вариант.
При отрисовке компонентов по условию в React использовать оценку короткого замыкания AND(&&) еще удобнее. Например:
<div> { this.state.isLoading && <Loading /> } </div>
6. Смена значения двух переменных
Чтобы поменять значение двух переменных, мы зачастую задействуем третью переменную. Однако это можно сделать, используя деструктуризацию массива.
7. Стрелочные функции
Здесь можно найти более подробную информацию о стрелочных функциях.
8. Шаблонные литералы
Обычно мы используем оператор плюс +, чтобы объединять строки с переменными. Однако с помощью шаблонных литералов ES6 это можно сделать гораздо проще.
9. Многострочная строка (String)
Как правило, для многострочной записи мы применяем оператор плюс + вместе с символом перехода на новую строку \n. Но еще проще будет — использовать обратные кавычки `.
10. Проверка нескольких условий
Для сопоставления нескольких условий можно записать их все в массив и использовать метод indexOf() или includes().
11. Присвоение значения свойству объекта
Если имя переменной и ключа объекта схожи, то можно указать лишь имя переменной в объектных литералах вместо ключа и значения. JavaScript автоматически выдает ключ и значение такими же, как и в переменной.
12. Преобразование строки в число
Для преобразования строки в число существуют такие методы, как parseInt и parseFloat. Однако для этого можно также использовать унарный оператор +, поставив его перед значением строки.
13. Многократное повторение строки
Если вам нужно повторить строку определённое количество раз, можно применить цикл for. Но с помощью метода repeat() можно сделать это в одну строку.
Совет: Хотите попросить у кого-нибудь прощение, написав «извини» 100 раз? Попробуйте метод repeat(). А если вам нужно, чтобы каждый повтор был на новой строке, добавьте \n к строке.
‘sorry\n’.repeat(100);
14. Возведение в степень
Чтобы найти степень какого-либо числа, можно применить метод Math.pow(). Или использовать синтаксис покороче, применив двойные звездочки **.
15. Двойное побитовое отрицание (~~)
С помощью двойного побитового отрицания можно заменить метод Math.floor().
Примечание: Способ двойного побитового отрицания (NOT) работает только для 32-битных целых чисел, т.е. до (2**31)-1 = 2147483647. Поэтому для любого числа больше 2147483647, этот оператор будет выдавать неверные результаты. В таких случаях лучше использовать Math.floor().
16. Нахождение максимального и минимального числа в массиве
Можно применить цикл for для перебора каждого значения массива и найти максимальное или минимальное значение. Или же использовать метод Array.reduce() и найти эти числа в массиве.
Но можно сделать это в одну строчку с помощью оператора расширения.
17. Цикл for
Обычно для перебора массива используется традиционный цикл for. Для выполнения итерации по массивам можно воспользоваться циклом for…of. А для того, чтобы найти индекс каждого значения, применяется for…in.
Также цикл for…in можно использовать для перебора свойства объекта.
let obj = {x: 20, y: 50};
for(const key in obj){
console.log(obj[key]);
}
18. Объединение массивов
19. Глубокое копирование объектов
Для глубокого копирования объектов можно совершить итерацию по каждому свойству и проверить, содержит ли текущее свойство какой-либо объект. Если да, то выполняется рекурсивный вызов той же самой функции, пропуская значение текущего свойства (т.е. вложенный объект).
Также при отсутствии функций, значений undefined, NaN или Date в объекте можно совершить глубокое копирование с помощью JSON.stringify() и JSON.parse().
В случае с одноуровневым объектом без вложений можно сделать глубокое копирование, применив оператор расширения.
Примечание: Это способ сокращения JSON.parse(JSON.stringify(obj)) не работает, если свойство объекта содержит функции, значения undefined, NaN или Date, потому что в таком случае они удаляются из объекта. Поэтому используйте этот способ, только когда объект содержит строки и числа.
20. Получение символов из строки
Некоторые из этих приемов могут и не быть актуальными в проекте, но всегда хорошо знать дополнительные способы сокращения. Веселого кодирования!
Читайте также:
Перевод статьи Amitav Mishra: 20 JavaScript Shorthand Techniques that will save your time
