JavaScript 最佳实践

避免全局变量，避免new，避免==，避免eval()

避免全局变量

尽量减少全局变量的使用。

这包括所有数据类型、对象和函数。

全局变量和函数可以被其他脚本覆盖。

使用局部变量代替，并学习如何使用关闭。

始终声明局部变量

函数中使用的所有变量都应声明为当地的变量。

局部变量必须被宣布与var，这let，或者const关键字，否则它们将成为全局变量。

严格模式不允许未声明的变量。

顶部声明

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

这会：

提供更清晰的代码
提供一个地方来查找局部变量
更容易避免不需要的（隐含的）全局变量
减少不必要的重新声明的可能性

// Declare at the beginning
let firstName, lastName, price, discount, fullPrice;

// Use later
firstName = "John";
lastName = "Doe";

price = 19.90;
discount = 0.10;

fullPrice = price - discount;

这也适用于循环变量：

for (let i = 0; i < 5; i++) {

初始化变量

在声明变量时对其进行初始化是一种很好的编码习惯。

这会：

提供更清晰的代码
提供一个地方来初始化变量
避免未定义的值

// Declare and initiate at the beginning
let firstName = "";
let lastName = "";
let price = 0;
let discount = 0;
let fullPrice = 0,
const myArray = [];
const myObject = {};

初始化变量提供了预期用途（和预期数据类型）的想法。

声明对象时使用常量

使用 const 声明对象将防止任何类型的意外更改：

示例

let car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat"; // Changes object to string

const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat"; // Not possible

声明数组常量

使用 const 声明数组将防止任何类型的意外更改：

示例

let cars = ["Saab", "Volvo", "BMW"];
cars = 3; // Changes array to number

const cars = ["Saab", "Volvo", "BMW"];
cars = 3; // Not possible

不要使用 new Object()

使用""代替new String()
使用0代替new Number()
使用false代替new Boolean()
使用{}代替new Object()
使用[]代替new Array()
使用/()/代替new RegExp()
使用function (){}代替new Function()

示例

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean
const x4 = {};           // new object
const x5 = [];           // new array object
const x6 = /()/;         // new regexp object
const x7 = function(){}; // new function object

亲自试一试 »

当心自动类型转换

JavaScript 是松散类型的。

变量可以包含所有数据类型。

变量可以更改其数据类型：

示例

let x = "Hello"; // typeof x is a string
x = 5; // changes typeof x to a number

亲自试一试 »

请注意数字可能会意外转换为字符串或NaN（不是数字）。

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

示例

let x = 5 + 7;       // x.valueOf() is 12, typeof x is a number
let x = 5 + "7";     // x.valueOf() is 57, typeof x is a string
let x = "5" + 7;     // x.valueOf() is 57, typeof x is a string
let x = 5 - 7;       // x.valueOf() is -2, typeof x is a number
let x = 5 - "7";     // x.valueOf() is -2, typeof x is a number
let x = "5" - 7;     // x.valueOf() is -2, typeof x is a number
let x = 5 - "x";    // x.valueOf() is NaN, typeof x is a number

亲自试一试 »

从字符串中减去字符串，不会产生错误，而是返回NaN（不是数字）：

示例

"Hello" - "Dolly" // returns NaN

亲自试一试 »

使用===比较

这个==比较运算符始终在比较之前进行转换（转换为匹配类型）。

这个===运算符强制比较值和类型：

示例

0 == "";        // true
1 == "1";       // true
1 == true;      // true

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

亲自试一试 »

使用参数默认值

如果调用函数时缺少参数，则缺少参数的值将设置为undefined。

未定义的值可能会破坏您的代码。为参数分配默认值是一个好习惯。

示例

function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}

亲自试一试 »

ECMAScript 2015允许在函数定义中使用默认参数：

function (a=1, b=1) { /*function code*/ }

阅读有关函数参数和参数的更多信息，请访问功能参数

用默认值结束你的开关

永远结束你的switch带有 a 的语句default。即使你认为没有必要。

示例

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

亲自试一试 »

避免将数字、字符串和布尔值作为对象

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

将这些类型声明为对象会降低执行速度，并产生令人讨厌的副作用：

示例

let x = "John";
let y = new String("John");
(x === y) // is false because x is a string and y is an object.

亲自试一试 »

或者更糟糕的是：

示例

let x = new String("John");
let y = new String("John");
(x == y) // is false because you cannot compare objects.

亲自试一试 »

避免使用 eval()

这个eval()函数用于将文本作为代码运行。在几乎所有情况下，都没有必要使用它。

因为它允许运行任意代码，所以它也代表了一个安全问题。