JavaScript 基本變量語法的使用

本變量語法

1、在使用javaScript的時候，遵循以下命名規范

2、必須以字母或下劃線開頭，中間可以是數字、字符或下劃線

，也能以 $ 和 _ 符號開頭（不過我們不推薦這么做）

3、變量名不能包含空格等符號，嚴格區分大小寫

4、不能使用javaScript關鍵字作為變量名，如：function

1、變量的聲明

1、變量是用于存儲信息的"容器"

2、在 JavaScript 中創建變量通常稱為"聲明"變量

3、我們使用 var 關鍵詞來聲明變量

4、變量聲明之后，該變量是空的（它沒有值）如需向變量賦值，請使用等號

5、不過，您也可以在聲明變量時對其賦值

2、多變量

1、可以在一條語句中聲明很多變量。該語句以 var 開頭，并使用逗號分隔變量即可

3、重新聲明 JavaScript 變量

1、如果重新聲明 JavaScript 變量，該變量的值不會丟失：

2、在以下兩條語句執行后，變量 carname 的值依然是 "Volvo"：

文已經原作者Shadeed 授權翻譯。

變量無處不在，即使我們在寫一個小的函數，或者一個應用程序:我們總是先聲明，分配和使用變量。編寫好的變量可提高代碼的可讀性和易維護性。

在本文中，主要介紹 5種有關在 JavaScript 中聲明和使用變量的最佳做法。

1.首選 const，再 let

我使用const或let聲明變量，兩者之間的主要區別是const變量需要一個初始值，并且一旦初始化就無法重新分配其值。

另一方面，let聲明不需要初始值，我們可以多次重新分配其值。

// const 需要初始化
const pi = 3.14;
// 不能重新分配const
pi = 4.89; // throws "TypeError: Assignment to constant variable"

另一方面，let聲明不需要初始值，我們可以多次重新分配其值。

// let 初始化是可選的
let result;
// let can be reassigned
result = 14;
result = result * 2;

選擇變量的聲明類型時的一個好習慣是首選const，否則使用let。

function myBigFunction(param1, param2) {
  /* lots of stuff... */

  const result = otherFunction(param1);

  /* lots of stuff... */
  return something;
}

例如，如果我們正在查看函數體，并看到const result = ...聲明：

function myBigFunction(param1, param2) {
  /* lots of stuff... */

  const result = otherFunction(param1);

  /* lots of stuff... */
  return something;
}

不知道myBigFunction()內部會發生什么，我們可以得出結論，result 變量只分配了一次，聲明之后是只讀的。

在其他情況下，如果必須在執行過程中多次重新分配變量，則可以使用let聲明。

2.最小化變量的范圍

變量存在于它們所創建的作用域內。代碼塊和函數體為const和let變量創建一個作用域。提高變量可讀性的一個好習慣是將變量保持在最小作用域內。

例如，以下函數是二進制搜索算法的實現：

function binarySearch(array, search) {
  let middle;
  let middleItem;
  let left = 0;
  let right = array.length - 1;

  while(left <= right) {
    middle = Math.floor((left + right) / 2);
    middleItem = array[middle];
    if (middleItem === search) { 
      return true; 
    }
    if (middleItem < search) { 
      left = middle + 1; 
    } else {
      right = middle - 1; 
    }
  }
  return false;
}

binarySearch([2, 5, 7, 9], 7); // => true
binarySearch([2, 5, 7, 9], 1); // => false

middle和middleItem變量在函數體的開頭聲明。因此，這些變量在binarySearch()函數體創建的整個作用域內都是可用的。

middle變量保留二進制搜索的中間索引，而middleItem變量保留二進制搜索的中間索引。

但是，middle和middleItem變量只在while循環代碼塊中使用。所以為什么不直接在while代碼塊中聲明這些變量呢?

function binarySearch(array, search) {
  let left = 0;
  let right = array.length - 1;

  while(left <= right) {
    const middle = Math.floor((left + right) / 2);
    const middleItem = array[middle];
    if (middleItem === search) {
      return true; 
    }
    if (middleItem < search) {
      left = middle + 1; 
    } else {
      right = middle - 1; 
    }
  }
  return false;
}

現在，middle和middleItem變量僅存在于使用變量的作用域。他們的生命周期和生命周期極短，因此更容易推斷其作用。

3.在接近位置聲明變量

我強烈希望在函數主體的頂部聲明所有變量，尤其是在函數較大的情況下。不幸的是，這種做法的缺點是使我在函數中使用的意圖變量變得混亂。

盡量在接近使用位置的地方聲明變量。這樣，我們就不用猜了:嘿，我看到了這里聲明的變量，但是它在哪里被使用了。

假設我們有一個函數，該函數的主體中包含很多語句。我們可以在函數的開頭聲明并初始化變量結果，但是只能在return語句中使用result：

function myBigFunction(param1, param2) {
  const result = otherFunction(param1);
  let something;

  /*
   * calculate something... 
   */

  return something + result;
}

問題在于result 變量在開頭聲明，但僅在結尾使用，沒有足夠的理由在開始時聲明該變量。

讓我們通過將result 變量聲明移到return語句之前來改進這個函數

function myBigFunction(param1, param2) {
  let something;

  /* 
   * calculate something... 
   */

  const result = otherFunction(param1);
  return something + result;
}

現在，result變量在函數中有了它的正確位置。

4.好的命名意味著易于閱讀

從良好的變量命名的眾多規則中，我區分出兩個重要的規則。

第一個很簡單：使用駝峰命名為變量取名，并且在命名所有變量時保持一致。

const message = 'Hello';
const isLoading = true;
let count

有特殊含義的數字或字符串，變量命名通常是大寫的，在單詞之間加下劃線，以區別于常規變量

const SECONDS_IN_MINUTE = 60;
const GRAPHQL_URI = 'http://site.com/graphql';

第二條規則，在變量命名中，我認為這是最重要的：變量名稱應明確無歧義地指出哪些數據保存了該變量。

以下是一些很好的變量命名示例：

let message = 'Hello';
let isLoading = true;
let count;

message 名稱表示此變量包含某種消息，很可能是字符串。

isLoading相同，布爾值指示加載是否在進行中。

count變量表示保存一些計數結果的數字類型變量。

選擇一個明確表明其角色的變量名。

舉個例子，這樣就能看出區別了。假設看到了這樣一個函數:

function salary(ws, r) {
  let t = 0;
  for (w of ws) {
    t += w * r;
  }
  return t;
}

你能總結出這個函數的作用嗎?像ws、r、t、w這樣的變量名幾乎沒有說明它們的意圖。

相反，相同的函數，但使用了解釋性變量命名

function calculateTotalSalary(weeksHours, ratePerHour) {
  let totalSalary = 0;
  for (const weekHours of weeksHours) {
    const weeklySalary = weekHours * ratePerHour;
    totalSalary += weeklySalary;
  }
  return totalSalary;
}

該代碼清楚地說明了它的作用。這就是良好命名的力量。

5. 引入中間變量

我比較少注釋代碼。我更喜歡編寫代碼即解釋的風格，通過對變量、屬性、函數和類的良好命名來表達意圖。

編寫自文檔代碼的一個好習慣是引入中間變量。在處理長表達式時很有用。

考慮以下表達式：

const sum = val1 * val2 + val3 / val4;

我們引入兩個中間變量，增強長表達式的可讀性:

const multiplication = val1 * val2;
const division       = val3 / val4;

const sum = multiplication + division;

另外，讓我們回顧一下二進制搜索實現算法：

function binarySearch(array, search) {
  let left = 0;
  let right = array.length - 1;

  while(left <= right) {
    const middle = Math.floor((left + right) / 2);
    const middleItem = array[middle];
    if (middleItem === search) {
      return true; 
    }
    if (middleItem < search) {
      left = middle + 1; 
    } else {
      right = middle - 1; 
    }
  }
  return false;
}

這里middleItem是一個保存中間項目的中間變量。使用中間變量MiddleItem而不是直接使用項目訪問器array [middle]可讀性更好。

與缺少middleItem解釋變量的函數版本進行比較:

function binarySearch(array, search) {
  let left = 0;
  let right = array.length - 1;

  while(left <= right) {
    const middle = Math.floor((left + right) / 2);
    if (array[middle] === search) {
      return true; 
    }
    if (array[middle] < search) {
      left = middle + 1; 
    } else {
      right = middle - 1; 
    }
  }
  return false;
}

這個版本，沒有解釋變量，可讀性就比較差。

6. 總結

變量無處不在，我們總是先聲明，分配和使用變量。

在 JS 中使用變量時，第一個好的做法是使用const，否則使用let

試著保持變量的作用域盡可能小。同樣，將變量聲明往盡可能靠近使用位置。

不要低估好的命名的重要性。始終遵循這樣的規則:變量名應該清晰而明確地表示保存變量的數據。不要害怕使用較長的名字:最好是清晰而不是簡潔。

最后，少使用注釋，多寫寫代碼即的效果。在高度復雜的地方，我更喜歡引入中間變量。

作者：Shadeed 譯者：前端小智來源：dmitripavlutin

原文：https://dmitripavlutin.com/javascript-variables-practices/

者：ryanmcdermott
翻譯：前端小智
鏈接：（英文）https://github.com/ryanmcdermott/clean-code-javascript#table-of-contents

在開發中，變量名，函數名一般要做到清晰明了，盡量做到看名字就能讓人知道你的意圖，所以變量和函數命名是挺重要，今天來看看如果較優雅的方式給變量和函數命名。

變量

使用有意義和可發音的變量名

// 不好的寫法
const yyyymmdstr = moment().format("YYYY/MM/DD");

// 好的寫法
const currentDate = moment().format("YYYY/MM/DD");

對同一類型的變量使用相同的詞匯

// 不好的寫法
getUserInfo();
getClientData();
getCustomerRecord();

// 好的寫法
getUser();

使用可搜索的名字

我們讀的會比我們寫的多得多，所以如果命名太過隨意不僅會給后續的維護帶來困難，也會傷害了讀我們代碼的開發者。讓你的變量名可被讀取，像 buddy.js 和 ESLint 這樣的工具可以幫助識別未命名的常量。

// 不好的寫法
// 86400000 的用途是什么？
setTimeout(blastOff, 86400000);

// 好的寫法
const MILLISECONDS_IN_A_DAY = 86_400_000;
setTimeout(blastOff, MILLISECONDS_IN_A_DAY);

使用解釋性變量

// 不好的寫法
const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(
  address.match(cityZipCodeRegex)[1],
  address.match(cityZipCodeRegex)[2]
);


// 好的寫法
const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
const [_, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode);

避免費腦的猜測

顯式用于隱式

// 不好的寫法
const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(l => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  // 等等，“l”又是什么？
  dispatch(l);

// 好的寫法
const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(location => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  dispatch(location);
});

大家都說簡歷沒項目寫，我就幫大家找了一個項目，還附贈【搭建教程】。

無需添加不必要的上下文

如果類名/對象名已經說明了，就無需在變量名中重復。

// 不好的寫法
const Car = {
  carMake: "Honda",
  carModel: "Accord",
  carColor: "Blue"
};

function paintCar(car) {
  car.carColor = "Red";
}
// 好的寫法
const Car = {
  make: "Honda",
  model: "Accord",
  color: "Blue"
};

function paintCar(car) {
  car.color = "Red";
}

使用默認參數代替邏輯或(與)運算

// 不好的寫法
function createMicrobrewery(name) {
  const breweryName = name || "Hipster Brew Co.";
  // ...
}
// 好的寫法
function createMicrobrewery(name = "Hipster Brew Co.") {
  // ...
}

函數

函數參數（理想情況下為2個或更少）

限制函數參數的數量是非常重要的，因為它使測試函數變得更容易。如果有三個以上的參數，就會導致組合爆炸，必須用每個單獨的參數測試大量不同的情況。

一個或兩個參數是理想的情況，如果可能，應避免三個參數。除此之外，還應該合并。大多數情況下，大于三個參數可以用對象來代替。

// 不好的寫法
function createMenu(title, body, buttonText, cancellable) {
  // ...
}

createMenu("Foo", "Bar", "Baz", true);

// 好的寫法
function createMenu({ title, body, buttonText, cancellable }) {
  // ...
}

createMenu({
  title: "Foo",
  body: "Bar",
  buttonText: "Baz",
  cancellable: true
});

函數應該只做一件事

這是目前為止軟件工程中最重要的規則。當函數做不止一件事時，它們就更難組合、測試和推理。可以將一個函數隔離為一個操作時，就可以很容易地重構它，代碼也會讀起來更清晰。

// 不好的寫法
function emailClients(clients) {
  clients.forEach(client => {
    const clientRecord = database.lookup(client);
    if (clientRecord.isActive()) {
      email(client);
    }
  });
}

// 好的寫法

function emailActiveClients(clients) {
  clients.filter(isActiveClient).forEach(email);
}

function isActiveClient(client) {
  const clientRecord = database.lookup(client);
  return clientRecord.isActive();
}

函數名稱應說明其作用

// 不好的寫法
function addToDate(date, month) {
  // ...
}

const date = new Date();

// 從函數名稱很難知道添加什么
addToDate(date, 1);

// 好的寫法
function addMonthToDate(month, date) {
  // ...
}

const date = new Date();
addMonthToDate(1, date);

函數應該只有一個抽象層次

當有一個以上的抽象層次函數，意味該函數做得太多了，需要將函數拆分可以實現可重用性和更簡單的測試。

// 不好的寫法
function parseBetterJSAlternative(code) {
  const REGEXES = [
    // ...
  ];

  const statements = code.split(" ");
  const tokens = [];
  REGEXES.forEach(REGEX => {
    statements.forEach(statement => {
      // ...
    });
  });

  const ast = [];
  tokens.forEach(token => {
    // lex...
  });

  ast.forEach(node => {
    // parse...
  });
}

// 好的寫法
function parseBetterJSAlternative(code) {
  const tokens = tokenize(code);
  const syntaxTree = parse(tokens);
  syntaxTree.forEach(node => {
    // parse...
  });
}

function tokenize(code) {
  const REGEXES = [
    // ...
  ];

  const statements = code.split(" ");
  const tokens = [];
  REGEXES.forEach(REGEX => {
    statements.forEach(statement => {
      tokens.push(/* ... */);
    });
  });

  return tokens;
}

function parse(tokens) {
  const syntaxTree = [];
  tokens.forEach(token => {
    syntaxTree.push(/* ... */);
  });

  return syntaxTree;
}

大家都說簡歷沒項目寫，我就幫大家找了一個項目，還附贈【搭建教程】。

刪除重復的代碼

盡量避免重復的代碼，重復的代碼是不好的，它意味著如果我們需要更改某些邏輯，要改很多地方。

通常，有重復的代碼，是因為有兩個或多個稍有不同的事物，它們有很多共同點，但是它們之間的差異迫使我們編寫兩個或多個獨立的函數來完成許多相同的事情。刪除重復的代碼意味著創建一個僅用一個函數/模塊/類就可以處理這組不同事物的抽象。

獲得正確的抽象是至關重要的，這就是為什么我們應該遵循類部分中列出的 SOLID原則。糟糕的抽象可能比重復的代碼更糟糕，所以要小心!說了這么多，如果你能做一個好的抽象，那就去做吧!不要重復你自己，否則你會發現自己在任何時候想要改變一件事的時候都要更新多個地方。

設計模式的六大原則有：

Single Responsibility Principle：單一職責原則
Open Closed Principle：開閉原則
Liskov Substitution Principle：里氏替換原則
Law of Demeter：迪米特法則
Interface Segregation Principle：接口隔離原則
Dependence Inversion Principle：依賴倒置原則

把這六個原則的首字母聯合起來（兩個 L 算做一個）就是 SOLID （solid，穩定的），其代表的含義就是這六個原則結合使用的好處：建立穩定、靈活、健壯的設計。下面我們來分別看一下這六大設計原則。

不好的寫法

function showDeveloperList(developers) {
  developers.forEach(developer => {
    const expectedSalary = developer.calculateExpectedSalary();
    const experience = developer.getExperience();
    const githubLink = developer.getGithubLink();
    const data = {
      expectedSalary,
      experience,
      githubLink
    };

    render(data);
  });
}

function showManagerList(managers) {
  managers.forEach(manager => {
    const expectedSalary = manager.calculateExpectedSalary();
    const experience = manager.getExperience();
    const portfolio = manager.getMBAProjects();
    const data = {
      expectedSalary,
      experience,
      portfolio
    };

    render(data);
  });
}

好的寫法

function showEmployeeList(employees) {
  employees.forEach(employee => {
    const expectedSalary = employee.calculateExpectedSalary();
    const experience = employee.getExperience();

    const data = {
      expectedSalary,
      experience
    };

    switch (employee.type) {
      case "manager":
        data.portfolio = employee.getMBAProjects();
        break;
      case "developer":
        data.githubLink = employee.getGithubLink();
        break;
    }

    render(data);
  });
}

使用Object.assign設置默認對象

不好的寫法

const menuConfig = {
  title: null,
  body: "Bar",
  buttonText: null,
  cancellable: true
};

function createMenu(config) {
  config.title = config.title || "Foo";
  config.body = config.body || "Bar";
  config.buttonText = config.buttonText || "Baz";
  config.cancellable =
    config.cancellable !== undefined ? config.cancellable : true;
}

createMenu(menuConfig);

好的寫法

const menuConfig = {
  title: "Order",
  // User did not include 'body' key
  buttonText: "Send",
  cancellable: true
};

function createMenu(config) {
  config = Object.assign(
    {
      title: "Foo",
      body: "Bar",
      buttonText: "Baz",
      cancellable: true
    },
    config
  );

  // config now equals: {title: "Order", body: "Bar", buttonText: "Send", cancellable: true}
  // ...
}

createMenu(menuConfig);

大家都說簡歷沒項目寫，我就幫大家找了一個項目，還附贈【搭建教程】。

不要使用標志作為函數參數

標志告訴使用者，此函數可以完成多項任務，函數應該做一件事。如果函數遵循基于布爾的不同代碼路徑，請拆分它們。

// 不好的寫法
function createFile(name, temp) {
  if (temp) {
    fs.create(`./temp/${name}`);
  } else {
    fs.create(name);
  }
}

// 好的寫法
function createFile(name) {
  fs.create(name);
}

function createTempFile(name) {
  createFile(`./temp/${name}`);
}

避免副作用(第一部分)

如果函數除了接受一個值并返回另一個值或多個值以外，不執行任何其他操作，都會產生副作用。副作用可能是寫入文件，修改某些全局變量，或者不小心將你的所有資金都匯給了陌生人。

不好的寫法


let name = "Ryan McDermott";

function splitIntoFirstAndLastName() {
  name = name.split(" ");
}

splitIntoFirstAndLastName();

console.log(name); // ['Ryan', 'McDermott'];

好的寫法

function splitIntoFirstAndLastName(name) {
  return name.split(" ");
}

const name = "Ryan McDermott";
const newName = splitIntoFirstAndLastName(name);

console.log(name); // 'Ryan McDermott';
console.log(newName); // ['Ryan', 'McDermott'];

避免副作用(第二部分)

在JavaScript中，原始類型值是按值傳遞，而對象/數組按引用傳遞。對于對象和數組，如果有函數在購物車數組中進行了更改（例如，通過添加要購買的商品），則使用該購物車數組的任何其他函數都將受到此添加的影響。那可能很棒，但是也可能不好。來想象一個糟糕的情況：

用戶單擊“購買”按鈕，該按鈕調用一個purchase 函數，接著，該函數發出一個網絡請求并將cart數組發送到服務器。由于網絡連接不好，purchase函數必須不斷重試請求。現在，如果在網絡請求開始之前，用戶不小心點擊了他們實際上不需要的項目上的“添加到購物車”按鈕，該怎么辦?如果發生這種情況，并且網絡請求開始，那么購買函數將發送意外添加的商品，因為它有一個對購物車數組的引用，addItemToCart函數通過添加修改了這個購物車數組。

一個很好的解決方案是addItemToCart總是克隆cart數組，編輯它，然后返回克隆。這可以確保購物車引用的其他函數不會受到任何更改的影響。

關于這種方法有兩點需要注意：

1.可能在某些情況下，我們確實需要修改輸入對象，但是當我們采用這種編程實踐時，會發現這種情況非常少見，大多數東西都可以被改造成沒有副作用。

2.就性能而言，克隆大對象可能會非常昂貴。幸運的是，在實踐中這并不是一個大問題，因為有很多很棒的庫使這種編程方法能夠快速進行，并且不像手動克隆對象和數組那樣占用大量內存。

// 不好的寫法
const addItemToCart = (cart, item) => {
  cart.push({ item, date: Date.now() });
};

// 好的寫法
const addItemToCart = (cart, item) => {
  return [...cart, { item, date: Date.now() }];
};

不要寫全局函數

污染全局變量在 JS 中是一種不好的做法，因為可能會與另一個庫發生沖突，并且在他們的生產中遇到異常之前，API 的用戶將毫無用處。讓我們考慮一個示例：如果想擴展 JS 的原生Array方法以具有可以顯示兩個數組之間差異的diff方法，該怎么辦？可以將新函數寫入Array.prototype，但它可能與另一個嘗試執行相同操作的庫發生沖突。如果其他庫僅使用diff來查找數組的第一個元素和最后一個元素之間的區別怎么辦？這就是為什么只使用 ES6 類并簡單地擴展Array全局會更好的原因。

// 不好的寫法
Array.prototype.diff = function diff(comparisonArray) {
  const hash = new Set(comparisonArray);
  return this.filter(elem => !hash.has(elem));
};

// 好的寫法
class SuperArray extends Array {
  diff(comparisonArray) {
    const hash = new Set(comparisonArray);
    return this.filter(elem => !hash.has(elem));
  }
}

盡量使用函數式編程而非命令式

JavaScript不像Haskell那樣是一種函數式語言，但它具有函數式的風格。函數式語言可以更簡潔、更容易測試。如果可以的話，盡量喜歡這種編程風格。

不好的寫法

const programmerOutput = [
  {
    name: "Uncle Bobby",
    linesOfCode: 500
  },
  {
    name: "Suzie Q",
    linesOfCode: 1500
  },
  {
    name: "Jimmy Gosling",
    linesOfCode: 150
  },
  {
    name: "Gracie Hopper",
    linesOfCode: 1000
  }
];

let totalOutput = 0;

for (let i = 0; i < programmerOutput.length; i++) {
  totalOutput += programmerOutput[i].linesOfCode;
}

好的寫法

const programmerOutput = [
  {
    name: "Uncle Bobby",
    linesOfCode: 500
  },
  {
    name: "Suzie Q",
    linesOfCode: 1500
  },
  {
    name: "Jimmy Gosling",
    linesOfCode: 150
  },
  {
    name: "Gracie Hopper",
    linesOfCode: 1000
  }
];

const totalOutput = programmerOutput.reduce(
  (totalLines, output) => totalLines + output.linesOfCode,
  0
);

封裝條件

// 不好的寫法
if (fsm.state === "fetching" && isEmpty(listNode)) {
  // ...
}

// 好的寫法
function shouldShowSpinner(fsm, listNode) {
  return fsm.state === "fetching" && isEmpty(listNode);
}

if (shouldShowSpinner(fsmInstance, listNodeInstance)) {
  // ...
}

大家都說簡歷沒項目寫，我就幫大家找了一個項目，還附贈【搭建教程】。

避免使用非條件

// 不好的寫法
function isDOMNodeNotPresent(node) {
  // ...
}

if (!isDOMNodeNotPresent(node)) {
  // ...
}

// 好的寫法
function isDOMNodePresent(node) {
  // ...
}

if (isDOMNodePresent(node)) {
  // ...
}

避免使用過多條件

這似乎是一個不可能完成的任務。一聽到這個，大多數人會說，“沒有if語句，我怎么能做任何事情呢?”答案是，你可以在許多情況下使用多態性來實現相同的任務。

第二個問題通常是，“那很好，但是我為什么要那樣做呢?”答案是上面講過一個概念:一個函數應該只做一件事。當具有if語句的類和函數時，這是在告訴你的使用者該函數執行不止一件事情。

不好的寫法

class Airplane {
  // ...
  getCruisingAltitude() {
    switch (this.type) {
      case "777":
        return this.getMaxAltitude() - this.getPassengerCount();
      case "Air Force One":
        return this.getMaxAltitude();
      case "Cessna":
        return this.getMaxAltitude() - this.getFuelExpenditure();
    }
  }
}

好的寫法

class Airplane {
  // ...
}

class Boeing777 extends Airplane {
  // ...
  getCruisingAltitude() {
    return this.getMaxAltitude() - this.getPassengerCount();
  }
}

class AirForceOne extends Airplane {
  // ...
  getCruisingAltitude() {
    return this.getMaxAltitude();
  }
}

class Cessna extends Airplane {
  // ...
  getCruisingAltitude() {
    return this.getMaxAltitude() - this.getFuelExpenditure();
  }
}

避免類型檢查

JavaScript 是無類型的，這意味著函數可以接受任何類型的參數。有時q我們會被這種自由所困擾，并且很想在函數中進行類型檢查。有很多方法可以避免這樣做。首先要考慮的是一致的API。

// 不好的寫法
function travelToTexas(vehicle) {
  if (vehicle instanceof Bicycle) {
    vehicle.pedal(this.currentLocation, new Location("texas"));
  } else if (vehicle instanceof Car) {
    vehicle.drive(this.currentLocation, new Location("texas"));
  }
}

// 好的寫法
function travelToTexas(vehicle) {
  vehicle.move(this.currentLocation, new Location("texas"));
}

不要過度優化

現代瀏覽器在運行時做了大量的優化工作。很多時候，如果你在優化，那么你只是在浪費時間。有很好的資源可以查看哪里缺乏優化，我們只需要針對需要優化的地方就行了。

// 不好的寫法

// 在舊的瀏覽器上，每一次使用無緩存“list.length”的迭代都是很昂貴的
// 會為“list.length”重新計算。在現代瀏覽器中，這是經過優化的
for (let i = 0, len = list.length; i < len; i++) {
  // ...
}

// 好的寫法
for (let i = 0; i < list.length; i++) {
  // ...
}

代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

在線咨詢

上一篇：html初學者測試代碼（適合小白）
下一篇：css零基礎自學教程（七）css鏈接樣式，自定鼠標樣式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript 基本變量語法的使用

本變量語法

1、變量的聲明

2、多變量

3、重新聲明 JavaScript 變量

1.首選 const，再 let

2.最小化變量的范圍

3.在接近位置聲明變量

4.好的命名意味著易于閱讀

5. 引入中間變量

6. 總結

變量

使用有意義和可發音的變量名

對同一類型的變量使用相同的詞匯

使用可搜索的名字

使用解釋性變量

避免費腦的猜測

無需添加不必要的上下文

使用默認參數代替邏輯或(與)運算

函數

函數參數（理想情況下為2個或更少）

函數應該只做一件事

函數名稱應說明其作用

函數應該只有一個抽象層次

刪除重復的代碼

使用Object.assign設置默認對象

不要使用標志作為函數參數

避免副作用(第一部分)

避免副作用(第二部分)

不要寫全局函數

盡量使用函數式編程而非命令式

封裝條件

避免使用非條件

避免使用過多條件

避免類型檢查

不要過度優化

您的項目需求