今天这篇文章将讨论一些 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";
到这里，我要与你分享的内容，就全部结束了，感谢你的阅读，祝编程开心。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
