后端开发教程 - Java、Spring Boot 实战 - msg200.com
每个 JavaScript 开发者都应该知道的 7 个速记优化技巧
感谢阅读
每种语言都有其自身的怪癖，JavaScript，作为最常用的编程语言，也不例外。本文将介绍大量的JavaScript 简写优化技巧，这些技巧可以帮助你编写更好的代码，并确保你在遇到这些技巧时不会有以下反应：
1. 多重字符串检查
你经常需要检查 a 是否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不必手动跟踪的索引。keysobject
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。NaNstring!
// 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. 切换速记
较长的switch 语句通常可以通过使用以键作为开关、以值作为返回值的对象来进行优化。
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";
就这些啦，朋友们！🎉
感谢阅读
需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我
想联系我吗？请在LinkedIn上联系我
关注我的博客，每两周在Medium上获取最新资讯
常问问题
这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。
-
我是初学者，该如何学习前端 Web 开发？
可以参考以下文章： -
你能指导我吗？
抱歉，我工作已经很忙了，没时间指导任何人。