作為一個編程4年的的前端工程師，一路走來踩過許多坑。希望我的經(jīng)驗?zāi)茏屇闵俨刃┛樱诰幊痰穆飞献叩母樞?/p>
image.png
1. 禁用var聲明
只使用const或let聲明變量。并且首選const，當(dāng)一個變量需要重新賦值時，才使用let。并且在創(chuàng)建變量時就應(yīng)該給變量賦值。
原因：
- var缺乏作用域的限制，很容易導(dǎo)致全局作用域污染，引發(fā)“命名沖突”和“錯誤賦值”等問題。
- var存在變量提升，可能導(dǎo)致在變量聲明之前就使用變量，產(chǎn)生未定義的情況。
- var允許重復(fù)聲明同一變量，容易導(dǎo)致意外修改已有變量的值，引發(fā)代碼錯誤。
注意：我們最好在創(chuàng)建變量時就進行賦值，這樣可以防止我們的代碼出現(xiàn)，聲明了變量但未賦值的情況。
代碼示例：
// ❌ 錯誤做法
var old = "";
// ✅ 正確做法
const immutable = "John";
let counter = 1;
counter++; // counter === 2;
// 將對象和數(shù)組聲明為const，以防止類型更改
const user = {firstname: "John", lastname: "Doe"};
const users = ["Mac", "Roe"];
2.使用嚴(yán)格相等運算符（===）
在進行相等比較時，只使用嚴(yán)格相等運算符（===）進行比較。
原因：
- 雙等號（==）在進行類型比較時會默認(rèn)進行類型轉(zhuǎn)換，導(dǎo)致不同類型的值也可能被判定為相等。
- 嚴(yán)格相等運算符（===）不僅比較兩個值的值，還會比較它們的數(shù)據(jù)類型。只有值和類型都相同時才會返回 true。
注意：在使用雙等號進行0作為假值會錯誤地等于false，
代碼示例：
// ❌ 錯誤做法
1 == "1"; // true
0 == false; // true
"" == 0; // true
null == undefined; // true
[1] == true; // true
"false" == false; // false
// ✅ 正確做法
1 === 1; // true
1 === "1"; // false
0 === false; // false
3.使用模板字符串來拼接內(nèi)容
使用模板字符串（反引號標(biāo)記）來拼接字符串，而不是使用加號（+）。
原因：
- 模板字符串允許在字符串中插入變量或表達(dá)式，使得代碼更加清晰易讀。
代碼示例：
const name = 'Alice';
const age = 30;
// ❌ 錯誤做法
// 字符串拼接
const greeting = 'Hello, my name is ' + name + ' and I am ' + age + ' years old.';
console.log(greeting); // Hello, my name is Alice and I am 30 years old.
// 多行字符串（使用\n換行）
const multiLineString = 'This is a\nmulti-line\nstring.';
console.log(multiLineString); // This is a // multi-line // string.
// ✅ 正確做法
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // Hello, my name is Alice and I am 30 years old.
// 多行字符串
const multiLineString = ` This is a
multi-line
string. `;
console.log(multiLineString);
//This is a
// multi-line
// string.
4.在語句末尾使用分號
在行末使用分號結(jié)尾是一種很好的習(xí)慣，雖然不使用分號，編譯器也不會進行報錯，但在我們項目越來越龐大代碼越來越復(fù)雜時，分號可以幫助我們更好的理解代碼。維護起來也會更加輕松。
以for循環(huán)為例：
代碼示例：
// ❌ 錯誤做法
for (let i = 0 i < numbers.length i++) {
console.log(numbers[i]);
} // 報錯：Uncaught SyntaxError: Unexpected identifier
// ✅ 正確做法
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
在上面的示例中，缺少分號會導(dǎo)致編譯器認(rèn)為它是一個表達(dá)式，但是它實際上是三個獨立不同的表達(dá)式，這樣的結(jié)果就是會引起報錯。
5. 使用對象代替多個參數(shù)
在定義函數(shù)時，給函數(shù)定義多個參數(shù)的做法是很愚蠢的一種寫法，因為，當(dāng)需要傳的參數(shù)變的很多很復(fù)雜時，代碼的閱讀和維護就變的很困難，而使用對象參數(shù)是一種很好的替代方案。
代碼示例：
// ❌ 錯誤做法
function avatarUrl(avatar, format = "small", caption = true,) {
//函數(shù)內(nèi)容
}
avatarUrl(user.avatar, 'thumb', false)
當(dāng)我們在使用上面這個函數(shù)時，很難知道哪些參數(shù)被使用了以及他的含義是什么。例如上面avatarUrl的最后一個參數(shù)false，就很難讓人理解它代表的是什么意思呢？
所以我們在維護時，必須要閱讀完函數(shù)的定義才能知道他的每個參數(shù)代表什么意思。而且當(dāng)我們需要改變參數(shù)的順序時，不得不改變所有地方的函數(shù)調(diào)用。
但是如果我們使用對象來傳參，一個順序的改變并不會影響到所有地方的調(diào)用：
// ✅ 正確做法
function avatarUrl(avatar, options={format: 'small', caption: true}) {
// 函數(shù)內(nèi)容
}
avatarUrl(user.avatar, {
caption: false ,
format: "thumb"
})
6. 利用提前返回簡化邏輯
在編寫代碼時，我們經(jīng)常會用到if/else來進行判斷，而且可能會進行多層嵌套，但是過多過深的嵌套會使的我們的代碼可讀性變差并且很難維護，所以我們使用return來解決這個問題。
提前返回可以減少大量的不必要的else條件，提高代碼的可讀性
代碼示例：
// ❌ 錯誤做法
function doSomething() {
if (user) {
if (user.role === "ADMIN") {
return 'Administrator';
} else {
return 'User';
}
} else {
return 'Anonymous';
}
}
// ✅ 正確做法
function doSomething() {
if (!user) return 'Anonymous'
if (user.role === "ADMIN") return 'Administrator'
return 'User'
}
7. 熟練掌握內(nèi)置函數(shù)
JavaScript給我們提供了許多內(nèi)置的Array、Object、String函數(shù)。我們需要精通并掌握它們，這樣讓我們寫起代碼時來事半功倍。
代碼示例：
//我們要過濾掉admin屬性值為false的對象
// ❌ 錯誤做法
const users = [
{
username: "JohnDoe",
admin: false
},
{
username: "Todd",
admin: true
},
];
const admins = [];
function getAdmins() {
users.forEach((user) => {
if (user.admin) admins.push(user)
})
return admins
}
// ✅ 正確做法
function getAdmins() {
return users.filter((user) => user.admin)
}
8.禁止使用縮寫
當(dāng)初學(xué)者在剛開始編寫代碼時，很容易為了貪圖方便和快，就用縮寫來進行命名，雖然這樣是方便的當(dāng)時的工作，但是卻為后期的維護埋下了定時炸彈。讓后續(xù)的代碼閱讀和維護變的難上加難。
// ❌ 錯誤做法
function someFunction() {
events.forEach(e => {
e.tickets.forEach(t => {
`${e.name} for ${t.full_name}`
})
})
}
// ✅ 正確做法
function someFunction() {
events.forEach(event => {
event.tickets.forEach(ticket => {
`${event.name} for ${ticket.full_name}`
})
})
}
很明顯的是，在下面的例子中我們在閱讀和維護時都不用猜測參數(shù)e和t代表什么意思和作用，根據(jù)命名就可以知道它的作用和含義。極大的提高了代碼的可讀性和后期的維護。
9. 使用可選鏈操作符(?.)來代替&&的前置非空判斷
在遇到對象的某個屬性可能為空(null)或者不存在(undefined)時，我們都要提前對對象進行判空，很多人第一時間都會想到使用&&進行前置非空判斷，但是其實遇到這種情況，我們使用可選鏈操作符(?.也能達(dá)到一樣的效果，并且可讀性更強。
示例1：
// ❌ 錯誤做法
function doSomething(params) {
if (params && params.filter) return 'Foo'
return 'Bar'
}
// ✅ 正確做法
function doSomething(params) {
if (params?.filter) return 'Foo'
return 'Bar'
}
10. 用for...of代替for循環(huán)
傳統(tǒng)的for循環(huán)需要我們手動創(chuàng)建索引變量并且需要根據(jù)條件判斷來進行遞增/遞減操作，而for...of內(nèi)置了一個迭代器可以自動幫我們遍歷數(shù)組中的所有值，這樣我們的代碼可以變的更加簡潔，也可以減少手動操作出差的情況。
let users = ["Fedor Emelianenko", "Cyril Gane", "Conor McGregor"];
// ❌ 錯誤做法
// 這樣可以避免在每次迭代時重新評估長度
let usersCount = users.length;
for (let i = 0; i < usersCount; i++) {
console.log(users[i]);
}
// ✅ 正確做法
for(let user of users) {
console.log(user);
}
11. 可讀性代碼勝過聰明代碼
- 永遠(yuǎn)記住，我們寫的代碼是給其他開發(fā)人員以及未來的自己看的。我們編寫的代碼的目的是為了解決某個問題，而不是讓我們的代碼成為一個問題（bug）。
- 不要為了炫技而寫代碼，我們要寫出每個人都能理解和調(diào)試的代碼。
該文章在 2024/3/29 23:57:28 編輯過
400 186 1886
