作為一個編程4年的的前端工程師，一路走來踩過許多坑。希望我的經驗能讓你少踩些坑，在編程的路上走的更順些！
1. 禁用var聲明
只使用const或let聲明變量。并且首選const，當一個變量需要重新賦值時，才使用let。并且在創建變量時就應該給變量賦值。
原因：
-
- var缺乏作用域的限制，很容易導致全局作用域污染，引發“命名沖突”和“錯誤賦值”等問題。
-
- var存在變量提升，可能導致在變量聲明之前就使用變量，產生未定義的情況。
-
- var允許重復聲明同一變量，容易導致意外修改已有變量的值，引發代碼錯誤。
-
注意：我們最好在創建變量時就進行賦值，這樣可以防止我們的代碼出現，聲明了變量但未賦值的情況。
代碼示例：
var old = "";
const immutable = "John";
let counter = 1;
counter++;
const user = {firstname: "John", lastname: "Doe"};
const users = ["Mac", "Roe"];
2.使用嚴格相等運算符（===）
在進行相等比較時，只使用嚴格相等運算符（===）進行比較。
原因：
-
- 雙等號（==）在進行類型比較時會默認進行類型轉換，導致不同類型的值也可能被判定為相等。
-
- 嚴格相等運算符（===）不僅比較兩個值的值，還會比較它們的數據類型。只有值和類型都相同時才會返回 true。
-
注意：在使用雙等號進行0作為假值會錯誤地等于false，
代碼示例：
1 == "1";
0 == false;
"" == 0;
null == undefined;
[1] == true;
"false" == false;
1 === 1;
1 === "1";
0 === false;
3.使用模板字符串來拼接內容
使用模板字符串（反引號標記）來拼接字符串，而不是使用加號（+）。
原因：
-
- 模板字符串允許在字符串中插入變量或表達式，使得代碼更加清晰易讀。
-
代碼示例：
const name = 'Alice';
const age = 30;
const greeting = 'Hello, my name is ' + name + ' and I am ' + age + ' years old.';
console.log(greeting);
const multiLineString = 'This is a\nmulti-line\nstring.';
console.log(multiLineString);
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting);
const multiLineString = ` This is a
multi-line
string. `;
console.log(multiLineString);
4.在語句末尾使用分號
在行末使用分號結尾是一種很好的習慣，雖然不使用分號，編譯器也不會進行報錯，但在我們項目越來越龐大代碼越來越復雜時，分號可以幫助我們更好的理解代碼。維護起來也會更加輕松。
以for循環為例：
代碼示例：
for (let i = 0 i < numbers.length i++) {
console.log(numbers[i]);
}
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
在上面的示例中，缺少分號會導致編譯器認為它是一個表達式，但是它實際上是三個獨立不同的表達式，這樣的結果就是會引起報錯。
5. 使用對象代替多個參數
在定義函數時，給函數定義多個參數的做法是很愚蠢的一種寫法，因為，當需要傳的參數變的很多很復雜時，代碼的閱讀和維護就變的很困難，而使用對象參數是一種很好的替代方案。
代碼示例：
function avatarUrl(avatar, format = "small", caption = true,) {
}
avatarUrl(user.avatar, 'thumb', false)
當我們在使用上面這個函數時，很難知道哪些參數被使用了以及他的含義是什么。例如上面avatarUrl的最后一個參數false，就很難讓人理解它代表的是什么意思呢？
所以我們在維護時，必須要閱讀完函數的定義才能知道他的每個參數代表什么意思。
而且當我們需要改變參數的順序時，不得不改變所有地方的函數調用。
但是如果我們使用對象來傳參，一個順序的改變并不會影響到所有地方的調用：
function avatarUrl(avatar, options={format: 'small', caption: true}) {
}
avatarUrl(user.avatar, {
caption: false ,
format: "thumb"
})
6. 利用提前返回簡化邏輯
在編寫代碼時，我們經常會用到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. 熟練掌握內置函數
JavaScript給我們提供了許多內置的Array、Object、String函數。我們需要精通并掌握它們，這樣讓我們寫起代碼時來事半功倍。
代碼示例：
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.禁止使用縮寫
當初學者在剛開始編寫代碼時，很容易為了貪圖方便和快，就用縮寫來進行命名，雖然這樣是方便的當時的工作，但是卻為后期的維護埋下了定時炸彈。讓后續的代碼閱讀和維護變的難上加難。
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}`
})
})
}
很明顯的是，在下面的例子中我們在閱讀和維護時都不用猜測參數e和t代表什么意思和作用，根據命名就可以知道它的作用和含義。極大的提高了代碼的可讀性和后期的維護。
9. 使用可選鏈操作符(?.)來代替&&的前置非空判斷
在遇到對象的某個屬性可能為空(null)或者不存在(undefined)時，我們都要提前對對象進行判空，很多人第一時間都會想到使用&&進行前置非空判斷，但是其實遇到這種情況，我們使用可選鏈操作符(?.也能達到一樣的效果，并且可讀性更強。
示例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循環
傳統的for循環需要我們手動創建索引變量并且需要根據條件判斷來進行遞增/遞減操作，而for...of內置了一個迭代器可以自動幫我們遍歷數組中的所有值，這樣我們的代碼可以變的更加簡潔，也可以減少手動操作出差的情況。
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. 可讀性代碼勝過聰明代碼
：給前端小白的11個建議（少走彎路）
400 186 1886
