JavaScript基础教程

JavaScript 对象

JavaScript 函数

JS HTML DOM

JS 浏览器BOM

AJAX 基础教程

JavaScript 参考手册

JavaScript 实践经验

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

避免全局变量

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

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

局部变量必须使用letconstvar关键字声明,否则会成为全局变量。

始终声明变量

在声明变量和常量时,请使用letconst关键字,而不是var

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

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

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

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

  // 声明写在最前面
  let firstName, lastName, price, discount, fullPrice;
  
  // 使用
  firstName = "nhooo.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 = "nhooo.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 = 'nhooo.com';
  console.log(`Hi! I'm ${myName}!`);
  
  // 不推荐:
  let myName = 'nhooo.com';
  console.log('Hi! I\'m' + myName + '!');

通用循环

当使用forfor...infor...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);
  }