JavaScript 实践经验

每个人编写JavaScript的方式都有些不同。但是还有很多共同之处，以下是一组相当简单的JavaScript编写经验指南和注意事项，让您少走弯路。

避免全局变量

尽量减少使用全局变量。这包括所有数据类型，对象和功能。

全局变量和函数可以被其他脚本覆盖。所以请改用局部变量。

局部变量必须使用let，const和var关键字声明，否则会成为全局变量。

始终声明变量

在声明变量和常量时，请使用let和const关键字，而不是var。

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

这样做有很多充分的理由-例如，它避免了由于意外重新分配而引起的问题，并避免了会影响可读性的提升。

将所有声明放在每个脚本或函数的顶部是一种很好的编程做法。

下面提供更简洁的代码，并在代码开头提供一个查找所有变量的地方。

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

使用扩展语法

为了最大程度地提高可读性，我们使用扩展语法，将JS的每一行都换行。

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

您应该在运算符和操作数，参数等之间使用空格：

  // 这更具可读性
  if(dayOfWeek === 7 && weather === "sunny") {
  /* Some code */
  }
  
  // 可读性较差
  if(dayOfWeek===7&&weather==="sunny"){
  /* Some code */
  }

不要将数字，字符串或布尔值声明为对象

始终将数字，字符串或布尔值视为原始值。不作为对象。

将这些类型声明为对象会降低执行速度，并产生意外结果。

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

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

无法比较对象：

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

document.write(str1 == str2); // 返回false，因为str1和str2是不同的对象
document.write(str1 === str2); // 返回false，因为str1和str2是不同的对象

不要使用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(){};

当心自动类型转换

JavaScript是一种松散类型或动态语言。JavaScript中的变量并不直接与任何特定的值类型相关联，并且可以为所有变量分配（并重新分配）所有类型的值。

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

在进行数学运算时，JavaScript可以将数字转换为字符串：

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

请注意，数字可能会意外转换为NaN（非数字）：

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

使用严格比较

==比较操作总是比较之前转换（以匹配类型）。

该===全等运算符强制值和类型的比较。

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

使用模板常量

要将值插入字符串，请使用模板常量（` `）。

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

通用循环

当使用for，for...in或for...of循环，确保正确定义初始化，用let关键字。

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

还请记住：

• 循环关键字与其左括号之间不应有空格。

• 括号和花括号之间应有一个空格。

函数命名

对于函数名称，请使用lowerCamelCasing，并在适当的地方使用简明易懂的语义名称。

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

使用默认值结束switch

switch始终以default:结尾。即使您认为没有必要。

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";
}

错误处理

如果程序的某些状态抛出未捕获的错误，它们将停止执行并可能降低示例的实用性。

因此，您应该使用try...catch块来捕获错误。

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