中止犯下這5個JavaScript風格錯誤，使你的代碼可讀和可維護的快速提示

使你的代碼可讀和可維護的快速提示。

有多少次，你打開一箇舊的項目，發現混亂的代碼，當你添加一些新的東西時，很容易崩潰？咱們都有過這樣的經歷。

爲了減小難以讀懂的javascript的數量，我提供瞭如下示例。這些都是我過去所犯過的錯誤。

對具備多個返回值的函數使用數組解構

假設咱們有一個返回多個值的函數。一種可能的實現是使用數組解構，以下所示：

const func = () => {
  const a = 1;
  const b = 2;
  const c = 3;
  const d = 4; 
  return [a,b,c,d];
}
const [a,b,c,d] = func();
console.log(a,b,c,d); // 1,2,3,4

儘管上面的方法很好用，但確實引入了一些複雜性。

當咱們調用函數並將值分配給 a,b,c,d 時，咱們須要注意返回數據的順序。這裏的一個小錯誤可能會成爲調試的噩夢。

此外，沒法確切指定咱們要從函數中獲取哪些值，若是咱們只須要 c 和 d 怎麼辦？

相反，咱們能夠使用對象解構。

const func = () => {
  const a = 1;
  const b = 2;
  const c = 3;
  const d = 4;
  return {a,b,c,d};
}
const {c,d} = func();

如今，咱們能夠輕鬆地從函數中選擇所需的數據，這也爲咱們的代碼提供了將來的保障，容許咱們在不破壞東西的狀況下增長額外的返回變量。

不對函數參數使用對象分解

假設咱們有一個函數，該函數將一個對象做爲參數並對該對象的屬性執行一些操做。一種幼稚的方法可能看起來像這樣：

// 不推薦
function getDaysRemaining(subscription) {
  const startDate = subscription.startDate;
  const endDate = subscription.endDate;
  return endDate - startDate;
}

上面的方法按預期工做，可是，咱們建立了兩個沒必要要的臨時引用 startDate 和 endDate。

一種更好的實現是對 subscription 對象使用對象解構來在一行中獲取 startDate 和 endDate。

// 推薦
function getDaysRemaining(subscription) {
  const { startDate, endDate } = subscription;
  return startDate - endDate;
}

咱們能夠更進一步，直接對參數執行對象析構。

// 更好
function getDaysRemaining({ startDate, endDate }) {
  return startDate - endDate;
}

更優雅，不是嗎？

在不使用擴展運算符的狀況下複製數組

使用 for循環遍歷數組並將其元素複製到新數組是冗長且至關醜陋的。

能夠以簡潔明瞭的方式使用擴展運算符來達到相同的效果。

const stuff = [1,2,3];

// 不推薦
const stuffCopyBad = []
for(let i = 0; i < stuff.length; i++){
  stuffCopyBad[i] = stuff[i];
}

// 推薦
const stuffCopyGood = [...stuff];

使用var

使用 const 保證不能從新分配變量。這樣能夠減小咱們代碼中的錯誤，並使其更易於理解。

// 不推薦
var x = "badX";
var y = "baxY";

// 推薦
const x = "goodX";
const y = "goodX";

果你確實須要從新分配變量，請始終選擇 let 而不是 var。

這是由於 let 是塊做用域的，而 var 是函數做用域的。

塊做用域告訴咱們，只能在定義它的代碼塊內部訪問變量，嘗試訪問塊外部的變量會給咱們提供ReferenceError。

for(let i = 0; i < 10; i++){
  //something
}
print(i) // ReferenceError: i is not defined

函數做用域告訴咱們，只能在定義其的函數內部訪問變量。

for(var i = 0; i < 10; i++){
  //something
}
console.log(i) // 10

let 和 const 都是塊範圍的。

不使用模板字面值

手動將字符串鏈接在一塊兒至關麻煩，並且輸入時可能會形成混淆。這是一個例子：

// 不推薦
function printStartAndEndDate({ startDate, endDate }) {
  console.log('StartDate:' + startDate + ',EndDate:' + endDate)
}

模板文字爲咱們提供了一種可讀且簡潔的語法，該語法支持字符串插值。

// 推薦
function printStartAndEndDate({ startDate, endDate }) {
  console.log(`StartDate: ${startDate}, EndDate: ${endDate}`)
}

模板文字也提供了嵌入新行的簡便方法，你所須要作的就是照常按鍵盤上的Enter鍵。

// 兩行打印
function printStartAndEndDate({ startDate, endDate }) {
  console.log(`StartDate: ${startDate}
  EndDate: ${endDate}`)
}

---

來源：https://medium.com，做者：Giuseppe Picciano，翻譯：公衆號《前端全棧開發者》

本文首發於公衆號 《前端全棧開發者》 ，第一時間閱讀最新文章，會優先兩天發表新文章。