每種語言都有其獨特性，使用最廣泛的編程語言 JavaScript 也不例外。
今天這篇文章將討論一些 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";
到這里，我要與你分享的內容，就全部結束了，感謝你的閱讀，祝編程開心。
