7 мощных приемов оптимизации JavaScript, которые вам нужно знать

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

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

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

Запасное место для отображения некоторых настроек.

Если значение равно [] или 0, с помощью логического ИЛИ || не дает вам ожидаемых результатов.

Бычий симбиоз был бы лучшим решением?? Если определенное значение равно null или не определено, используйте только резервные значения.

// Lengthy
let name;
if (user?.name) {
  name = user.name;
} else {
  name = "Anonymous";
}
// Shortly
const name = user?.name ?? "Anonymous";

2. Вскоре для переключения

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

const dayNumber = new Date().getDay();
// Lengthy
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";
}
// Shortly
const days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
];
// Or
const days = `Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday`.split(
    ","
);
const day = days[dateNumber];

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

Вы также можете использовать бинарный оператор, чтобы решить, какую функцию вызывать в зависимости от условий.

Шаблоны вызовов функций должны быть одинаковыми, иначе вы столкнетесь с ошибками.

// Lengthy
function f1() {
  // ...
}
function f2() {
  // ...
}
// Shorter
condition ? f1() : f2();

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

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

К счастью, у JavaScript есть способ помочь вам в этом.

// Lenghty
const isVowel = (letter) => {
  return (
    letter === "a" ||
    letter === "e" ||
    letter === "i" ||
    letter === "o" ||
    letter === "u"
  );
};
// Shortly
const isVowel = letter => /[aeiou]/i.test(letter);

Циклы for-of и for-in полезны для повторения массива или объекта без необходимости вручную отслеживать индекс ключей объекта.

For-of

const arr = [1, 2, 3, 4, 5];
// Lengthy
for (let i = 0; i < arr.length; i++) {
  const element = arr[i];
  // ...
}
// Shortly
for (const element of arr) {
  // ...
}

For-in

const obj = {
  a: 1,
  b: 2,
  c: 3,
};
// Lengthy
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  const value = obj[key];
  // ...
}
// Shortly
for (const key in obj) {
  const value = obj[key];
  // ...
}

6. Ложные проверки

Если вы хотите проверить, является ли переменная нулевой, неопределенной, 0, ложной, NaN или пустой строкой, вы можете использовать оператор логического не (!) для этого без необходимости использования нескольких эффектов.

Это упрощает проверку того, содержит ли переменная допустимые данные.

// Lengthy
const isFalsey = (value) => {
  if (
    value === null ||
    value === undefined ||
    value === 0 ||
    value === false ||
    value === NaN ||
    value === ""
  ) {
    return true;
  }
  return false;
};
// Shortly
const isFalsey = (value) => !value;

7. Вторичный оператор

Вы, должно быть, сталкивались с тернарным оператором как разработчик JavaScript.

Это отличный метод для написания кратких операторов if-else.

Однако вы можете использовать его для написания краткого кода и даже связывать его для проверки нескольких условий.

// Lengthy
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";
}
// Shortly
const info =
  value < minValue
    ? "Value is too small"
    : value > maxValue ? "Value is too large" : "Value is in range";

Вот и все, ребята!

Спасибо, что нашли время, чтобы прочитать это.

Это совершенно бесплатно!