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

растерянный


1. Несколько проверок строк

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

// Long-hand
const isVowel = (letter) => {
  if (
    letter === "a" ||
    letter === "e" ||
    letter === "i" ||
    letter === "o" ||
    letter === "u"
  ) {
    return true;
  }
  return false;
};

// Short-hand
const isVowel = (letter) =>
  ["a", "e", "i", "o", "u"].includes(letter);
Войти в полноэкранный режим

Выйти из полноэкранного режима


2. For-of а также For-in петли

For-of а также For-in циклы — отличный способ перебирать array или же object без необходимости вручную отслеживать индекс принадлежащий keys принадлежащий object.



For-of

const arr = [1, 2, 3, 4, 5];

// Long-hand
for (let i = 0; i < arr.length; i++) {
  const element = arr[i];
  // ...
}

// Short-hand
for (const element of arr) {
  // ...
}
Войти в полноэкранный режим

Выйти из полноэкранного режима



For-in

const obj = {
  a: 1,
  b: 2,
  c: 3,
};

// Long-hand
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  const value = obj[key];
  // ...
}

// Short-hand
for (const key in obj) {
  const value = obj[key];
  // ...
}
Войти в полноэкранный режим

Выйти из полноэкранного режима


3. Фальшивые чеки

Если вы хотите проверить, является ли переменная null, undefined, 0, false, NaNили пустой stringвы можете использовать Логическое НЕ (!) для проверки всех из них сразу, без необходимости писать несколько условий. Это позволяет легко проверить, содержит ли переменная допустимые данные.

// Long-hand
const isFalsey = (value) => {
  if (
    value === null ||
    value === undefined ||
    value === 0 ||
    value === false ||
    value === NaN ||
    value === ""
  ) {
    return true;
  }
  return false;
};

// Short-hand
const isFalsey = (value) => !value;
Войти в полноэкранный режим

Выйти из полноэкранного режима


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

Как JavaScript разработчик, вы наверняка сталкивались с ternary operator. Это отличный способ писать лаконично if-else заявления. Однако вы также можете использовать его для написать лаконичный код и даже связать их, чтобы проверить несколько условий.

// Long-hand
let info;
if (value < minValue) {
  info = "Value is too small";
} else if (value > maxValue) {
  info = "Value is too large";
} else {
  info = "Value is in range";
}

// Short-hand
const info =
  value < minValue
    ? "Value is too small"
    : value > maxValue ? "Value is too large" : "Value is in range";
Войти в полноэкранный режим

Выйти из полноэкранного режима


5. Вызовы функций

С помощью ternary operatorвы также можете определить, какой функция звонить по условиям.

ВАЖНОЕ ЗАМЕЧАНИЕ: call signature принадлежащий функции должны быть одинаковыми, иначе вы рискуете столкнуться с ошибками

function f1() {
  // ...
}
function f2() {
  // ...
}

// Long-hand
if (condition) {
  f1();
} else {
  f2();
}

// Short-hand
(condition ? f1 : f2)();
Войти в полноэкранный режим

Выйти из полноэкранного режима


6. Переключить стенографию

Длинная переключать случаи часто можно оптимизировать, используя объект с ключи как переключатели и ценности как возвращаемые значения.

const dayNumber = new Date().getDay();

// Long-hand
let day;
switch (dayNumber) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}

// Short-hand
const days = {
  0: "Sunday",
  1: "Monday",
  2: "Tuesday",
  3: "Wednesday",
  4: "Thursday",
  5: "Friday",
  6: "Saturday",
};
const day = days[dayNumber];
Войти в полноэкранный режим

Выйти из полноэкранного режима


7. Резервные значения

|| оператор может установить резервное значение для переменной.

// Long-hand
let name;
if (user?.name) {
  name = user.name;
} else {
  name = "Anonymous";
}

// Short-hand
const name = user?.name || "Anonymous";
Войти в полноэкранный режим

Выйти из полноэкранного режима

Это все люди! 🎉

Нужен Фрилансер, занимающийся фронтенд-разработкой с самым высоким рейтингом чтобы отрубить ваши беды развития? Свяжитесь со мной по Апворк

Хотите увидеть, над чем я работаю? Проверьте мой Персональный сайт а также Гитхаб

Хотите подключиться? Свяжитесь со мной по LinkedIn

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

Следите за моими блогами, чтобы каждые две недели новые лакомые кусочки на Дев

Часто задаваемые вопросы

Это несколько часто задаваемых вопросов, которые я получаю. Итак, я надеюсь, что это Часто задаваемые вопросы Раздел решает ваши проблемы.

  1. Я новичок, как мне научиться Front-End Web Dev?
    Посмотрите следующие статьи:

    1. Дорожная карта разработки интерфейса
    2. Идеи внешнего интерфейса
  2. Не могли бы вы наставлять меня?

    Извините, у меня и так много работы, и у меня нет времени кого-либо наставлять.