每个 JavaScript 开发人员都应该知道的 7 个速记优化技巧
作者：互联网
每种语言都有自己的怪癖，最常用的编程语言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";
这就是所有人！