10 современных функций, которые вы должны начать использовать в своем коде

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

Есть за чем следить, и вы все еще можете делать что-то по-старому. Итак, вот 10 способов, которыми вы можете модернизировать свой код JavaScript.

1.  Arrow Functions
2.  Default Parameters
3.  Object Instead of Switch
4.  Optional Chaining
5.  Destructuring
6.  Ternary Operator
7.  Nullish Coalescing Operator
8.  Map and Set
9.  Object.hasOwnProperty()
10. Iterating an Object

1. Стрелочные функции

Компактная альтернатива традиционному функциональному выражению. Есть некоторые ограничения, такие как отсутствие привязки this, но она все равно будет работать для ваших средних потребностей.

Вот сравнение традиционной анонимной функции со стрелочной функцией:

Это уже более лаконично, но мы можем сделать лучше. Когда тело функции состоит из одной строки, скобки тела и ключевое слово return можно опустить, поэтому здесь мы неявно возвращаем a + 5:

(a) => a + 5;

На этом вечеринка не заканчивается. Когда есть один аргумент, мы также можем опустить круглые скобки аргумента:

a => a + 5;

Что, если нам нужно, чтобы это была именованная функция? Мы просто объявляем его в переменной:

const sum = a => a + 5;

2. Параметры по умолчанию

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

Вот как выглядит традиционное решение по сравнению с использованием параметров по умолчанию:

Теперь это намного лаконичнее. Мы можем сделать то же самое со стрелочными функциями:

const print = (a = 5) => console.log(`The number is ${a}`);

3. Объект вместо переключателя

Оператор switch является одним из основных элементов разработки программного обеспечения, поскольку он может работать с различными сценариями. Однако иногда это может быть довольно многословно, поэтому нам может понадобиться более простая альтернатива.

Вот как мы можем заменить переключатель объектом:

Сопряжение осуществляется через объект map . Затем мы используем метод доступа к свойству скобки, чтобы получить соответствующее значение.

4. Необязательная цепочка

Необязательный оператор цепочки ? очень полезен, когда вы хотите безопасно получить доступ к свойству, но при этом иметь компактный код.

Давайте посмотрим на пример без и с опциональной цепочкой:

То же самое относится к вызову функции или доступу к элементу массива:

5. Деструктуризация

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

Мы использовали скобки, а затем указали внутри них свойство для извлечения. Вот пример с массивами:

Здесь мы использовали квадратные скобки для извлечения первого и второго элемента из массива.

Мы можем перейти на следующий уровень и получить доступ к вложенным свойствам, как показано ниже:

Или мы могли бы даже смешать деструктурирование массива и объекта:

6. Тернарный оператор

Оператор, который принимает три операнда: условие, выражение для выполнения, если условие истинно, выражение для выполнения, если условие ложно. Это компактная альтернатива оператору if else.

Вы также можете выбрать более сложные варианты использования по условиям вложенности:

Я предлагаю вам использовать этот оператор с осторожностью, так как он может стать сложным для чтения. Для более сложных случаев использования вам, вероятно, следует избегать этого.

7. Нулевой оператор объединения

Часто вам нужно указать значение по умолчанию для вашей переменной. Некоторое время назад единственным кратким вариантом было использование логического оператора ИЛИ || . Вы должны были быть осторожны с одной вещью, хотя (и вы все еще делаете). Значение по умолчанию используется в случае, если левый операнд ложный, а не ложный.

Иногда это может иметь большое значение, приводя к неожиданному поведению. Давайте посмотрим на пример:

Эти две функции будут работать нормально для большинства пользователей. Однако для пользователя с идентификатором 0 две функции будут вести себя совершенно по-разному: в верхней части вывод будет неправильным, поскольку идентификатор со значением 0 является ложным, поэтому по умолчанию используется заполнитель.

Однако нижний будет работать правильно. Поскольку мы использовали оператор ??, он учитывает только ложные левые операнды, поэтому 0 обрабатывается как допустимое значение, что в данном случае и требуется.

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

8. Карта и набор

Ошибка, которую часто совершают джуниоры, заключается в использовании массивов для всего. Есть и другие структуры данных!

Класс Map удобен, когда вы хотите связать ключи со значениями. Он похож на Объекты, но есть и некоторые отличия, которые могут сделать Карту более подходящей для некоторых случаев использования. Например, ключи карты могут отличаться от строк.

Вот пример:

С другой стороны, класс Set очень удобен, когда вам нужно сохранить список уникальных значений. Это означает, что каждое значение появляется в наборе только один раз.

Мутировать Set очень просто по сравнению с массивом. Конечно, класс Set предназначен только для определенных случаев использования.

9. Object.hasOwnProperty()

Метод, который возвращает true, если объект, для которого он вызывается, имеет указанное свойство. Он также достаточно надежен, поскольку учитывает только собственные свойства объекта, а не какие-либо унаследованные свойства.

Вот пример использования:

10. Итерация объекта

Иногда вам может понадобиться перебрать свойства объекта. Теперь, конечно, вы не можете просто сделать это, поскольку объект не является итерируемым. Вот три метода, которые могут помочь вам в этом:

Каждый метод имеет различный результат, независимо от того, нужно ли вам повторять ключи объекта, значения или и то, и другое.

Подведение итогов

Ладно, на сегодня все, надеюсь, вам было полезно!

Спасибо за прочтение. Оставайтесь с нами, чтобы узнать больше!

Рекомендации

Изображение обложки