每種語(yǔ)言都有其獨(dú)特性，使用最廣泛的編程語(yǔ)言 JavaScript 也不例外。
今天這篇文章將討論一些 JavaScript 通用優(yōu)化技巧，這些技巧將幫助您編寫更好的代碼，希望你能從今天這篇文章中獲取一些新知識(shí)。
1. Fallback Values
如果值為 [] 或 0，則使用邏輯或 || 沒有給你預(yù)期的結(jié)果。
無(wú)效共生將是一個(gè)更好的解決方案？如果定義的值為 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 通常通過使用一個(gè)對(duì)象來最大化，該對(duì)象的鍵充當(dāng)開關(guān)，而值試圖充當(dāng)返回值。
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.調(diào)用函數(shù)
您還可以使用二元運(yùn)算符來根據(jù)條件決定調(diào)用哪個(gè)函數(shù)。
函數(shù)的調(diào)用模式必須相同，否則最終會(huì)出錯(cuò)。
function f1() {
// ...
}
function f2() {
// ...
}
// Lengthy
if (condition) {
f1();
} else {
f2();
}
// Shortly
conditon ? f1() : f2();4. 多字符串檢查
需要檢查一個(gè)字符串是否等于多個(gè)值之一是很常見的，這很快就會(huì)變得煩人。
幸運(yùn)的是，JavaScript 有辦法幫助您解決這個(gè)問題。
// Lenghty
cconst isVowel = (letter) => {
return (
letter === "a" ||
letter === "e" ||
letter === "i" ||
letter === "o" ||
letter === "u"
);
};
// Shortly
const isVowel = (letter) =>
5. For-Of 和 For-In 循環(huán)
For-of 和 For-in 循環(huán)有利于重復(fù)數(shù)組或?qū)ο螅鵁o(wú)需手動(dòng)跟蹤對(duì)象鍵的索引。
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 或空字符串，可以使用邏輯非 (!) 運(yùn)算符來執(zhí)行此操作，而無(wú)需多重效果。
這使得驗(yàn)證變量是否包含有效數(shù)據(jù)變得簡(jiǎn)單。
// 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 開發(fā)人員，您一定遇到過三元運(yùn)算符。
這是編寫簡(jiǎn)潔的 if-else 語(yǔ)句的絕佳方法。
但是，您可以使用它來編寫簡(jiǎn)潔的代碼，甚至可以將它鏈接起來以檢查多個(gè)條件。
// 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";
到這里，我要與你分享的內(nèi)容，就全部結(jié)束了，感謝你的閱讀，祝編程開心。
