七个你需要知道的强大 JavaScript 优化技巧-51CTO.COM

每种语言都有其独特性，使用最广泛的编程语言 JavaScript 也不例外。

今天这篇文章将讨论一些 JavaScript 通用优化技巧，这些技巧将帮助您编写更好的代码，希望你能从今天这篇文章中获取一些新知识。

1. Fallback Values

如果值为 [] 或 0，则使用逻辑或 || 没有给你预期的结果。

无效共生将是一个更好的解决方案？如果定义的值为 null 或未定义，则仅使用回退值。

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


// Shortly
const name = user?.name ?? "Anonymous";

2.Shortly For Switching

Long switch case 通常通过使用一个对象来最大化，该对象的键充当开关，而值试图充当返回值。

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.调用函数

您还可以使用二元运算符来根据条件决定调用哪个函数。

函数的调用模式必须相同，否则最终会出错。

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


// Lengthy
if (condition) {
  f1();
} else {
  f2();
}


// Shortly
conditon ? f1() : f2();

4. 多字符串检查

需要检查一个字符串是否等于多个值之一是很常见的，这很快就会变得烦人。

幸运的是，JavaScript 有办法帮助您解决这个问题。

// Lenghty
cconst isVowel = (letter) => {
  return (
    letter === "a" ||
    letter === "e" ||
    letter === "i" ||
    letter === "o" ||
    letter === "u"
  );
};


// Shortly
const isVowel = (letter) =>

5. For-Of 和 For-In 循环

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. False Checks

如果要检查变量是否为 null、undefined、0、false、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.Secondary Operator

作为 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";

到这里，我要与你分享的内容，就全部结束了，感谢你的阅读，祝编程开心。