JavaScript 實(shí)踐經(jīng)驗(yàn)

每個(gè)人編寫JavaScript的方式都有些不同。但是還有很多共同之處，以下是一組相當(dāng)簡(jiǎn)單的JavaScript編寫經(jīng)驗(yàn)指南和注意事項(xiàng)，讓您少走彎路。

避免全局變量

盡量減少使用全局變量。這包括所有數(shù)據(jù)類型，對(duì)象和功能。

全局變量和函數(shù)可以被其他腳本覆蓋。所以請(qǐng)改用局部變量。

局部變量必須使用let，const和var關(guān)鍵字聲明，否則會(huì)成為全局變量。

始終聲明變量

在聲明變量和常量時(shí)，請(qǐng)使用let和const關(guān)鍵字，而不是var。

  // 推薦:
  let myAge = 22;
  const myName = "(cainiaoplus.com)";
  
  // 不推薦:
  var myAge = 22;
  var myName = "(cainiaoplus.com)";

這樣做有很多充分的理由-例如，它避免了由于意外重新分配而引起的問題，并避免了會(huì)影響可讀性的提升。

將所有聲明放在每個(gè)腳本或函數(shù)的頂部是一種很好的編程做法。

下面提供更簡(jiǎn)潔的代碼，并在代碼開頭提供一個(gè)查找所有變量的地方。

  // 聲明寫在最前面
  let firstName, lastName, price, discount, fullPrice;
  
  // 使用
  firstName = "(cainiaoplus.com)";
  lastName = "Choudhary";
  
  price = 26.90;
  discount = 1.25;
  
  fullPrice = price * 100 / discount;

使用擴(kuò)展語法

為了最大程度地提高可讀性，我們使用擴(kuò)展語法，將JS的每一行都換行。

  // 推薦:
  function myFunc() {
  console.log("Parrot Tutorial");
  }
  
  // 不推薦:
  function myFunc() { console.log("Parrot Tutorial"); }

您應(yīng)該在運(yùn)算符和操作數(shù)，參數(shù)等之間使用空格：

  // 這更具可讀性
  if(dayOfWeek === 7 && weather === "sunny") {
  /* Some code */
  }
  
  // 可讀性較差
  if(dayOfWeek===7&&weather==="sunny"){
  /* Some code */
  }

不要將數(shù)字，字符串或布爾值聲明為對(duì)象

始終將數(shù)字，字符串或布爾值視為原始值。不作為對(duì)象。

將這些類型聲明為對(duì)象會(huì)降低執(zhí)行速度，并產(chǎn)生意外結(jié)果。

var str1 = "New Delhi";
var str2 = new String("New Delhi");

document.write(str1 === str2); // 返回 false because str1 and str2 have different types

無法比較對(duì)象：

var str1 = new String("New Delhi");
var str2 = new String("New Delhi");

document.write(str1 == str2); // 返回false，因?yàn)閟tr1和str2是不同的對(duì)象
document.write(str1 === str2); // 返回false，因?yàn)閟tr1和str2是不同的對(duì)象

不要使用new Object()

• 使用{}代替new Object()

• 使用""代替new String()

• 使用0代替new Number()

• 使用false代替new Boolean()

• 使用[]代替new Array()

• 使用/()/代替new RegExp()

• 使用function (){}代替new Function()

let x1 = {};
let x2 = "";
let x3 = 0;
let x4 = false;
let x5 = [];
let x6 = /()/;
let x7 = function(){};

當(dāng)心自動(dòng)類型轉(zhuǎn)換

JavaScript是一種松散類型或動(dòng)態(tài)語言。JavaScript中的變量并不直接與任何特定的值類型相關(guān)聯(lián)，并且可以為所有變量分配（并重新分配）所有類型的值。

var x = 20; // x is now a Number
x = "(cainiaoplus.com)";   // x is now a String
x = true;   // x is now a Boolean

在進(jìn)行數(shù)學(xué)運(yùn)算時(shí)，JavaScript可以將數(shù)字轉(zhuǎn)換為字符串：

num = 50 + 10;// 返回 60,  typeof num is a number
num = 50 + "10";  // 返回 "5010",  typeof num is a string
num = "50" + 10;  // 返回 "5010",  typeof num is a string
num = "50" - 10;  // 返回 "40",typeof num is a number

請(qǐng)注意，數(shù)字可能會(huì)意外轉(zhuǎn)換為NaN（非數(shù)字）：

num = 50 * "Parrot";  // 返回 "NaN",   typeof num is a number

使用嚴(yán)格比較

==比較操作總是比較之前轉(zhuǎn)換（以匹配類型）。

該===全等運(yùn)算符強(qiáng)制值和類型的比較。

  1 == "1";   // true
  1 == true;  // true
  
  1 === "1";  // false
  1 === true;   // false

使用模板常量

要將值插入字符串，請(qǐng)使用模板常量（` `）。

  // 推薦:
  let myName = 'cainiaoplus.com';
  console.log(`Hi! I'm ${myName}!`);
  
  // 不推薦:
  let myName = 'cainiaoplus.com';
  console.log('Hi! I\'m' + myName + '!');

通用循環(huán)

當(dāng)使用for，for...in或for...of循環(huán)，確保正確定義初始化，用let關(guān)鍵字。

  let fruits = ["Apple", "Mango", "Banana"];
  
  // 推薦:
  for(let i of fruits) {
   console.log(i);
  }
  
  // 不推薦:
  for(i of fruits) {
   console.log(i);
  }

還請(qǐng)記?。?/p>

• 循環(huán)關(guān)鍵字與其左括號(hào)之間不應(yīng)有空格。

• 括號(hào)和花括號(hào)之間應(yīng)有一個(gè)空格。

函數(shù)命名

對(duì)于函數(shù)名稱，請(qǐng)使用lowerCamelCasing，并在適當(dāng)?shù)牡胤绞褂煤?jiǎn)明易懂的語義名稱。

  // 推薦:
  function sayHello() {
  alert('Hello!');
  }
  
  // 不推薦:
  function sayhello() {
  alert('Hello!');
  }

使用默認(rèn)值結(jié)束switch

switch始終以default:結(jié)尾。即使您認(rèn)為沒有必要。

var day;
switch (new Date().getDay()) {
case 0: day = "Sunday";
break;
case 1: day = "Monday";
break;
case 2: day = "Tuesday";
break;
case 3: day = "Wednesday";
break;
case 4: day = "Thursday";
break;
case 5: day = "Friday";
break;
case 6: day = "Saturday";
break;
default: day = "Undefined Day";
}

錯(cuò)誤處理

如果程序的某些狀態(tài)拋出未捕獲的錯(cuò)誤，它們將停止執(zhí)行并可能降低示例的實(shí)用性。

因此，您應(yīng)該使用try...catch塊來捕獲錯(cuò)誤。

  try {
  console.log(results);
  }
  catch(e) {
  console.error(e);
  }