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

Switch case

Вы можете рефакторить switch оператор на объект, делая синтаксис более чистым и более декларативным.

// Длинная версия
switch (something) {
  case 1:
    doSomething();
  break;
case 2:
    doSomethingElse();
  break;
case 3:
    doSomethingElseAndOver();
  break;
  // И так далее...
}
// Сокращенная версия
var cases = {
  1: doSomething,
  2: doSomethingElse,
  3: doSomethingElseAndOver
};

if проверяет значение

Эта техника очень тривиальна, хотя стоит упомянуть. Поскольку значение уже является логическим, его можно проверить напрямую в if.

// Длинная версия
if (isTrue === true)
if (isTrue === false)

// Сокращенная версия
if (isTrue)
if (!isTrue)

Короткие операторы if

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

// Длинная версия
if(x == 1 || x == 5 || x == 7) 
  console.log('Х имеет какое-то значение');

// Сокращенная версия
([1,5,7].indexOf(x) !=- 1) && alert('Х имеет какое-то значение');

If true … else

// Длинная версия
let result;
if (x) {
    result = "If";
}
else {
    result = "Else";
}
// Сокращенная версия
let x = true; let result = x ? "If Case" : "Else Case";

Использование таблиц поиска

Если у нас несколько условий if-else и поведение каждого условия различно, мы можем использовать таблицы поиска. Мы также можем сделать то же самое с помощью оператора switch, однако использование подхода поиска является более чистым и четким, IMO.

// Длинная версия
if (hero === 'Spiderman') {
  callSpider();
}
else if (hero === 'Superman') {
  callSuperman();
}
else if (hero === 'Ironman') {
  callIronMan();
}
else if (hero === 'Hulk') {
  callHulk();
} else {
  throw new Error('Нет такого героя...!!! - ' + type);
}

// Сокращенная версия
var heroNeeded= {
  Spiderman: callSpider,
  Superman: callSuperman,
  Ironman: callIronMan,
  Hulk: callHulk
};
 
var func = heroNeeded[hero];
(!func) && throw new Error('Герой ' + hero + ' недоступен); 
func();

Цикл For




// Длинная версия
let justiceLeaque = ['Batman', 'Superman', 'Flash', 'Green Lantern']
for(let hero = 0; hero < justiceLeaque.length; hero++){
   console.log(justiceLeaque[hero])
}
// Сокращенная версия
let justiceLeaque = ['Batman', 'Superman', 'Flash', 'Green Lantern']
for(let hero of justiceLeaque){
   console.log(hero)
}

Проверка на пустоту, Null и Undefined

Мы хотим проверить значения на неопределенные или нулевые. Это очень распространенный сценарий для всех типов приложений.

// Длинная версия
if (anyVariable !== null || anyVariable !== undefined || anyVariable !== '') {
  var doSomeCalculation = anyVariable;
}
// Сокращенная версия
var doSomeCalculation = anyVariable  || '';
//выход: '' (пустая строка)

Вызов функции

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

function printA () {
  console.log('A');
};
function printB () {
  console.log('B');
};
// Длинная версия
var isTrue = true;
if (isTrue) {
  printA();
} else {
  printB();
}
// Сокращенная версия
(isTrue ? printA : printB)();

About the Author

Ergashev Lazizbek

Добрый день, дорогие мои читатели, позвольте мне рассказать вам немного о себе. Я Лазизбек Эргашев, я веб-разработчик из Узбекистана. В основном я использую laravel/php для бэкэнда и vuejs/javascript для фронтэнда. Основная цель моего блога - поделиться с вами своим опытом и знаниями.

View All Articles