Изучите эти элегантные приемы и сокращения для написания профессионального кода JavaScript.
Я собрал список полезных приемов JavaScript, которые помогут сделать ваш код более элегантным и профессиональным. Я надеюсь, вам понравится это!
1. Однострочный вариант "если-еще"
В JavaScript вы можете использовать тернарный условный оператор для сжатия ваших операторов if-else.
Например:
Помните, что это сокращение предназначено для того, чтобы код был чище. Используйте его только тогда, когда он явно делает выражение более понятным.
2. Нулевое слияние
Оператор объединения с нулевым значением ?? возвращает правую часть, если левая часть равна нулю. В противном случае он возвращает значение слева. Это полезно, потому что позволяет опустить длительные проверки if.
Синтаксис объединения NULL:
someValue ?? defaultValue
Например:
Выход:
Nothing found Nothing found
3. Дополнительная цепочка
В JavaScript вы можете получить доступ к свойствам и методам объекта с помощью точечной записи.
Например:
fruit.color
Но если вы попытаетесь получить доступ к свойству неопределенного объекта, вы увидите ошибку. Чтобы этого избежать, вам необходимо убедиться, что объект определен, прежде чем обращаться к его свойствам:
const color = fruit && fruit.color;
Но это не выглядит мило. Вместо этого вы можете использовать необязательную цепочку, добавив вопросительный знак перед точечной нотацией, например:
const color = fruit?.color;
Давайте посмотрим на пример с реальным JS-объектом:
Выход:
undefined undefined
4. Преобразование любого значения в логическое.
В JavaScript вы можете привести что угодно к логическому значению. Причина в том, что под капотом все в JavaScript либо Правдиво, либо Ложно.
Чтобы преобразовать что-либо в логическое значение, используйте двойной восклицательный знак !!.
Например:
5. Распространение
Вы можете распределить элементы одного массива в другой массив, используя оператор распространения ....
Например, давайте объединим два массива чисел вместе с помощью оператора распространения:
Вы также можете заменить метод .push() оператором распространения при добавлении элементов в массив.
Например:
6. Деструктуризация с помощью оператора спреда
Вы можете использовать оператор распространения ..., чтобы деструктурировать оставшиеся значения объекта.
Для демонстрации создадим объект student. Давайте назначим свойства name и age переменным, а оставшиеся свойства - третьей переменной:
7. Удаление дубликатов из массива
Вы можете удалить дубликаты массива, преобразовав массив в набор, а затем добавив значения из набора обратно в массив.
Это работает, потому что набор - это уникальная коллекция элементов.
Другими словами, в наборе не может быть двух одинаковых значений. Таким образом, преобразование массива в набор удаляет скрытые дубликаты.
Например:
const nums = [1,1,1,1,3,4,5] const uniqueNums = [...new Set(nums)];
А вот альтернативный способ сделать то же самое:
const nums = [1,1,1,1,3,4,5] const uniqueNums = Array.from(new Set(nums))
Кстати, если вам нужен массив уникальных элементов, почему вы все равно не используете набор?
8. Оператор && в оценке короткого замыкания
Вы используете if-check, чтобы узнать, истинно ли выражение?
Вы можете сделать то же самое с сокращением, используя оператор короткого замыкания &&.
Например:
Выход:
Yeah Yeah
9. Вставьте значения в строку
Вы можете встроить переменную в строку, заключив строку в обратные кавычки и используя ${}.
Например:
Эти струны иногда называют «струнами на стероидах».
10. Назначение свойств объекта
Если вы хотите, чтобы ключи вашего объекта имели то же имя, что и значения, вы можете опустить литералы объекта.
Например:
11. Значения по умолчанию
В JavaScript у вас может быть функция со значением аргумента по умолчанию.
Таким образом, вы можете вызывать функцию как с указанием значения аргумента, так и без него.
Давайте посмотрим на пример:
12. Объявление переменных одной строкой
Вы можете объединить объявления переменных в одну строку вместо использования одной строки для каждого объявления.
Например:
13. Значения объекта как массив
Используйте метод Object.values(), чтобы собрать все значения объекта в массив.
Например:
14. Найти элемент в массиве
Используйте встроенный метод find(), чтобы найти элемент, соответствующий определенному критерию.
Например:
15. Находится ли элемент в массиве?
Вместо использования метода indexOf() для проверки наличия элемента в массиве вы можете использовать метод includes().
Например:
16. Проверка нескольких условий
Избегайте цепочек условий, используя метод includes().
Например:
17. Назначьте несколько значений одной строкой кода
Вы можете использовать деструктуризацию, чтобы присвоить несколько значений в одной строке кода.
Например:
Это относится и к объектам:
18. Поменять местами две переменные без третьей
Используйте деструктуризацию, чтобы отделить значения от массива. Это можно применить для замены двух переменных без третьей.
Например:
19. Math.pow () Сокращение.
Вместо использования функции Math.pow() для возведения числа в степень вы можете использовать оператор ** как сокращение:
20. Math.floor () Сокращение
Вместо использования функции Math.floor() для округления числа в меньшую сторону вы можете использовать оператор ~~ как сокращение:
Заключение
Спасибо за прочтение. Надеюсь, вам понравилось.
Удачного кодирования!
Читайте также
Больше контента на plainenglish.io
