每个 JavaScript 开发人员都应该知道的 7 个速记优化技巧

2022-10-30 16:55:47 阅读：188 来源： 互联网

每种语言都有自己的怪癖，最常用的编程语言JavaScript也不例外。本文将介绍大量的 JavaScript 速记优化技巧，这些技巧可以帮助您编写更好的代码，并确保这不是您遇到它们时的反应：

1. 多个字符串检查

通常，您可能需要检查 a 是否等于多个值之一，并且很快就会变得疲惫不堪。幸运的是，JavaScript 有一个内置的方法来帮助你解决这个问题。string

// 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-ofFor-in`

For-of循环是迭代或的好方法，而不必手动跟踪的索引。For-inarrayobjectkeysobject

`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. 虚假支票

如果要检查变量是、、、还是空变量，则可以使用 Logical Not （）运算符一次检查所有变量，而无需编写多个条件。这使得检查变量是否包含有效数据变得容易。nullundefined0falseNaNstring!

// 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 operatorif-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. Function calls

With the help of the , you can also determine which function to call based on conditions.ternary operator

IMPORTANT SIDE-NOTE: The of the functions must be the same, else you risk running into an errorscall signature

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

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

// Short-hand
(condition ? f1 : f2)();

6. Switch shorthand

Long switch cases can often be optimized by using an object with the keys as the switches and the values as the return values.

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

这就是所有人！

标签：javaJDK,java,虚拟机,布局,数据,代码,程序
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9