Код должен выглядеть великолепно! Я считаю, что код не может быть отличным, если он не аккуратный, сжатый и читаемый - я уверен, что вы согласны, читать обширный, беспорядочный, непонятный код совсем не весело. Мы все были там!

Существует множество сокращений и ярлыков Javascript. Иногда они могут быть невероятно полезными, но иногда они могут скрывать смысл кода или вносить ошибки. В Northcoders мы любим показывать нашим студентам, как использовать преимущества Javascript и избегать ловушек - я подумал, - почему бы не поделиться со всем миром некоторыми из моих любимых сокращений?

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

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

Вот способ сделать ваши выражения if… else красивыми. Уловите суть if… else с помощью однострочной альтернативы: тернарного оператора. Рассмотреть возможность:

это можно сократить до:

Условное выражение оценивается первым, и первое выражение выполняется, если условие выполняется, иначе выполняется второе выражение.

113 символов превратились в 68 символов без скобок и скобок. Что не любить?

Вы также можете вкладывать тернарные операторы. Но вложенные тернарные операторы довольно трудно читать. Если вам нужно вложиться, лучше всего придерживаться if… иначе, чтобы поддерживать чувство приоритета.

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

Вы можете часто использовать if… else, чтобы установить для переменной значение по умолчанию, если запрашиваемое значение равно null или undefined.

Мы можем использовать оператор ИЛИ (||), чтобы исправить это. Поскольку логические выражения вычисляются слева направо, если левое значение перед оператором истинно, переменная будет присвоена левому значению немедленно, поскольку истинность любой части дизъюнкции достаточно, чтобы гарантировать истинность всего утверждения. Вот почему это называется «короткое замыкание».

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

Ах! Так красивее. Использование этого все более распространенного шаблона позволило вдвое сократить длину кода и сделать его более читабельным.

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

Что ж, поскольку мы не передаем второй аргумент, будет выдана ошибка. Почему? Мы не можем добавить undefined к 5! Это NaN (а не число). Чтобы защититься от этого, мы можем выполнить короткое замыкание с помощью оператора ИЛИ следующим образом:

Начиная с ES6, Javascript имеет новый синтаксис для параметров по умолчанию, который, возможно, даже лучше. Просто добавьте значения по умолчанию в заголовок функции:

Предупреждение - помните, что среди ложных значений есть пустые строки и ноль, поэтому, если они передаются, значение по умолчанию справа от || будет использоваться!

3. Ценности объекта

С ES6 нам больше не нужно повторять значение ключа объекта, если имя ключа и значение идентичны. Этот код:

становится:

Красиво лаконично!

4. Оператор распространения

Другой фаворит ES6 - оператор распространения (…) - позволяет получить аккуратный и лаконичный код. По сути, этот оператор расширяет выражения, в которых ожидается несколько аргументов, переменных или элементов. У этого оператора много вариантов использования, поэтому я покажу вам несколько моих любимых, чтобы продемонстрировать, как он работает.

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

Вот еще один вариант использования. Раньше нам приходилось работать с массивами, используя такие методы, как .slice (), .push () или .concat (), например:

С оператором распространения мы можем выполнять эти операции более элегантно:

Оператор распространения может сделать гораздо больше - следите за будущей публикацией в блоге об этом!

5. Шаблонные литералы

Как часто вы делаете что-то подобное?

Я знаю, что всегда находил такие вещи в лучшем случае немного запутанными, а в худшем - совершенно уродливыми и нечитаемыми. Литералы шаблонов позволяют нам составлять строки с большей лаконичностью и изяществом. Заключите строку в обратные кавычки, а не в одинарные или двойные кавычки, и интерполируйте вашу строку с помощью Javascript, используя следующий синтаксис: $ {}. Все, что находится между фигурными скобками, будет оцениваться как Javascript.

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

БОНУС: объявление переменных

Вот вам возможность быстро сэкономить время и место. Знаете ли вы, что необязательно объявлять несколько переменных в нескольких строках? Этот код:

эквивалентно:

Вау - намного приятнее!

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

Какие сокращения Javascript вы используете, чтобы писать краткий, читаемый код? Оставьте комментарий, дайте мне знать!

Нравится это? Помогите мне и добавьте в избранное / поделитесь. Спасибо :)