Топ 10 JavaScript Shorthands для начинающих

Сокращения JavaScript не только ускоряют процесс кодирования, но и делают скрипты короче, поэтому приводят к более быстрой загрузке страниц. Сокращенные коды так же действительны, как и их сокращенные версии; по сути, они означают одно и то же – только в более компактном формате. Это один из самых простых методов оптимизации кода.

Есть несколько сокращений JavaScript, однако они не имеют официального справочного руководства. Некоторые из них действительно просты, а другие довольно пугающие даже для опытных разработчиков. В этой статье вы найдете 10 кратких ссылок на JavaScript для начинающих, с которых вы можете начать с оптимизации кода и написать более лаконичный код.

Читайте также: CSS Shorthand vs. Longhand – Когда использовать который

1. Десятичные числа
   Если вы регулярно работаете с большими десятичными знаками, эта стенография может быть удачной, так как вам больше не нужно печатать все нули, просто замените их на электронное обозначение. Например, 1e8 означает добавление восьми нулей после 1 цифры, это равно 100000000.

Число после буквы e указывает количество нулей, которые идут после цифры (ей) перед e. Аналогично, 16e4 является сокращением для 160000 и т. Д.

/ * Сокращения * /
var myVar = 1e8;

/ * Longhand * /
var myVar = 100000000;

1. Приращение, уменьшение
   Сокращение приращения состоит из двух знаков +, это означает, что значение переменной должно увеличиваться на единицу. Точно так же сокращение сокращений состоит из двух знаков, и это означает, что переменная должна быть уменьшена на один.

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

/ * Сокращения * /
я ++;
j–;

/ * Longhand * /
I = I + 1;
J = J-1;

1. Добавить, отвлечь, умножить, разделить
   Существует сокращение для каждой из четырех основных математических операций: сложение, отвлечение, умножение и деление. Они работают аналогично операторам увеличения и уменьшения, просто здесь вы можете изменить значение переменной на любое число (не только на одно).

В приведенном ниже примере переменная i увеличивается на 5, j уменьшается на 3, k умножается на 10, а l делится на 2.

/ * Сокращения * /
I + = 5;
J- = 3;
к * = 10;
л / = 2;

/ * Longhand * /
I = I + 5;
J = J-3;
K = K * 10;
л = л / 2;

1. Определите положение персонажа
   Charat () Метод является одним из наиболее часто используемых строковых методов, он возвращает символ в указанной позиции (например, 5-й символ строки). Вместо этого вы можете использовать простое сокращение: вы добавляете положение символа в квадратных скобках после строки.

Обратите внимание, что метод charAt () начинается с нуля. Поэтому myString[4] вернет 5-й символ в строке (в данном примере «y»).

var myString = “С днем ​​рождения”;

/ * Сокращения * /
MyString[4];

/ * Longhand * /
myString.charAt (4);

1. Объявляйте переменные оптом
   Если вы хотите создать более одной переменной одновременно, вам не нужно вводить их по одной. Достаточно использовать ключевое слово var (или let) только один раз, тогда вы можете просто перечислить переменные, которые вы хотите создать, через запятую.

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

/ * Сокращения * /
var i, j = 5, k = “Доброе утро”, l, m = false;

/ * Longhand * /
вар я;
var j = 5;
var k = “Доброе утро”;
вар л;
var m = false;

1. Объявить ассоциативный массив
   Объявление массив в JavaScript это относительно простая задача, используя var myArray = [“apple”, “pear”, “orange”] синтаксис. Однако объявление ассоциативного массива немного сложнее, так как здесь вам нужно не только определять значения, но и ключи (в случае обычных массивов ключи – 0, 1, 2, 3 и т. Д.).

Ассоциативный массив – это набор пар ключ-значение. Длинным способом является объявление массива, а затем добавление каждого элемента по одному. Тем не менее, с сокращением ниже, вы также можете объявить ассоциативный массив плюс все его элементы одновременно.

В приведенном ниже примере ассоциативный массив myArray назначает место рождения (значения) известным людям (ключи).

/ * Сокращения * /
var myArray = {
  “Грейс Келли”: “Филадельфия”,
  “Клинт Иствуд”: “Сан-Франциско”,
  «Хамфри Богарт»: «Нью-Йорк»,
  “София Лорен”: “Рим”,
  «Ингрид Бергман»: «Стокгольм»
}

/ * Longhand * /
var myArray = new Array ();
туАггау[“Grace Kelly”] = “Филадельфия”;
туАггау[“Clint Eastwood”] = “Сан-Франциско”;
туАггау[“Humphrey Bogart”] = “Нью-Йорк”;
туАггау[“Sophia Loren”] = “Рим”;
туАггау[“Ingrid Bergman”] = “Стокгольм”;

1. Объявить объект
   Сокращение для объявления объекта работает аналогично сокращению для ассоциативных массивов. Однако здесь есть не пары ключ-значение, а пары свойство-значение, которые нужно поместить в фигурные скобки {}.

Единственное отличие в сокращенном синтаксисе состоит в том, что свойства объекта не заключены в кавычки (name, placeOfBirth, age, wasJamesBond в приведенном ниже примере).

/ * Сокращения * /
var myObj = {имя: “Шон Коннери”, место рождения: “Эдинбург”,
возраст: 86 лет, wasJamesBond: true};

/ * Longhand * /
var myObj = new Object ();
myObj.name = “Шон Коннери”;
myObj.placeOfBirth = “Эдинбург”;
myObj.age = 86;
myObj.wasJamesBond = true;

1. Используйте условный оператор
   условный (троичный) оператор часто используется в качестве ярлыка для оператора if-else. Он состоит из трех частей:

1. условие
2. что произойдет, если условие выполнено (если)
3. что произойдет, если условие ложно (иначе)

В приведенном ниже примере мы отправляем простое сообщение (внутри переменной message) людям, которые хотят войти в клуб. Используя сокращенную форму, это всего лишь одна строка кода для запуска оценки.

вар возраст = 17;

/ * Сокращения * /
var message = age> = 18? «Разрешено»: «Отказано»;

/ * Longhand * /
if (age> = 18) {
  var message = “Разрешено”;
} еще {
  var message = “Запрещено”;
}

Если вы хотите проверить его, просто скопируйте код в веб-консоль (F12 в большинстве браузеров) и измените значение переменной age несколько раз.
9. Проверьте наличие
Часто бывает так, что вам нужно проверить, присутствует ли переменная или нет. Сокращение «если есть» поможет вам сделать это с гораздо меньшим количеством кода.

Имейте в виду, что большинство статей о сокращенных JavaScript-кодах не дают правильной произвольной формы, так как нотация if (myVar) не просто проверяет, является ли переменная ложной, но и содержит несколько других вещей. А именно, переменная не может быть неопределенной, пустой, нулевой и ложной.

var myVar = 99;

/ * Сокращения * /
if (myVar) {
  console.log (“переменная myVar определена и она не пуста
  И не ноль И не ложь. “);
}

/ * Longhand * /
if (typeof myVar! == “undefined” && myVar! == “” && myVar! == null
&& myVar! == 0 && myVar! == false) {
  console.log (“переменная myVar определена и она не пуста
  И не ноль И не ложь. “);
}

Вы можете проверить, как работает сокращение «если есть», вставив следующий фрагмент кода в веб-консоль и изменив значение myVar несколько раз.

Чтобы понять, как работает это сокращение, стоит проверить его со значениями “” (пустая строка), false, 0, true, непустая строка (например, “Hi”), число (например, 99), и когда переменная не определена (просто var myVar;).
10. Проверьте отсутствие
Сокращение «если есть» можно использовать для проверки отсутствия переменной, поместив перед ней восклицательный знак. Восклицательный знак логический не оператор в JavaScript (и в большинстве языков программирования).

Следовательно, с помощью нотации if (! MyVar) вы можете проверить, не является ли переменная myVar неопределенной, пустой, нулевой или ложной.

var myVar;

/ * Сокращения * /
if (! myVar) {
  console.warn (“Переменная myVar не определена (ИЛИ) пуста (ИЛИ)
  null (OR) false. “);
}

/ * Longhand * /
if (typeof myVar === “undefined” || myVar === “” || myVar === null
|| myVar === 0 || myVar === false) {
  console.warn (“Переменная myVar не определена (ИЛИ) пуста (ИЛИ)
  null (OR) false. “);
}

Читайте также: JavaScript Jargon: 10 терминов, которые вы должны знать