作為一個編程4年的的前端工程師，一路走來踩過許多坑。希望我的經(jīng)驗能讓你少踩些坑，在編程的路上走的更順些！

1. 禁用var聲明

只使用const或let聲明變量。并且首選const，當一個變量需要重新賦值時，才使用let。并且在創(chuàng)建變量時就應該給變量賦值。

原因：

• var缺乏作用域的限制，很容易導致全局作用域污染，引發(fā)“命名沖突”和“錯誤賦值”等問題。
• var存在變量提升，可能導致在變量聲明之前就使用變量，產(chǎn)生未定義的情況。
• var允許重復聲明同一變量，容易導致意外修改已有變量的值，引發(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.使用嚴格相等運算符（===）

在進行相等比較時，只使用嚴格相等運算符（===）進行比較。

原因：

• 雙等號（==）在進行類型比較時會默認進行類型轉(zhuǎ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)容

使用模板字符串（反引號標記）來拼接字符串，而不是使用加號（+）。

原因：

• 模板字符串允許在字符串中插入變量或表達式，使得代碼更加清晰易讀。

代碼示例：

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é)尾是一種很好的習慣，雖然不使用分號，編譯器也不會進行報錯，但在我們項目越來越龐大代碼越來越復雜時，分號可以幫助我們更好的理解代碼。維護起來也會更加輕松。

以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]);
}

在上面的示例中，缺少分號會導致編譯器認為它是一個表達式，但是它實際上是三個獨立不同的表達式，這樣的結(jié)果就是會引起報錯。

5. 使用對象代替多個參數(shù)

在定義函數(shù)時，給函數(shù)定義多個參數(shù)的做法是很愚蠢的一種寫法，因為，當需要傳的參數(shù)變的很多很復雜時，代碼的閱讀和維護就變的很困難，而使用對象參數(shù)是一種很好的替代方案。

代碼示例：

// ❌ 錯誤做法
function avatarUrl(avatar, format = "small", caption = true,) {
  //函數(shù)內(nèi)容
}

avatarUrl(user.avatar, 'thumb', false)

當我們在使用上面這個函數(shù)時，很難知道哪些參數(shù)被使用了以及他的含義是什么。例如上面avatarUrl的最后一個參數(shù)false，就很難讓人理解它代表的是什么意思呢？

所以我們在維護時，必須要閱讀完函數(shù)的定義才能知道他的每個參數(shù)代表什么意思。而且當我們需要改變參數(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.禁止使用縮寫

當初學者在剛開始編寫代碼時，很容易為了貪圖方便和快，就用縮寫來進行命名，雖然這樣是方便的當時的工作，但是卻為后期的維護埋下了定時炸彈。讓后續(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)時，我們都要提前對對象進行判空，很多人第一時間都會想到使用&&進行前置非空判斷，但是其實遇到這種情況，我們使用可選鏈操作符(?.也能達到一樣的效果，并且可讀性更強。

示例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. 可讀性代碼勝過聰明代碼

• 永遠記住，我們寫的代碼是給其他開發(fā)人員以及未來的自己看的。我們編寫的代碼的目的是為了解決某個問題，而不是讓我們的代碼成為一個問題（bug）。
• 不要為了炫技而寫代碼，我們要寫出每個人都能理解和調(diào)試的代碼。