JavaScript 最佳实践
避免全局变量，避免使用 new，避免使用 ==，避免使用 eval()
避免全局变量
尽量少用全局变量。
包括所有数据类型、对象和函数。
全局变量和函数可能被其他脚本覆盖。
改用局部变量，并学习如何使用 闭包。
始终声明局部变量
函数中使用的所有变量都应声明为局部变量。
局部变量必须使用 var、let 或 const 关键字声明，否则它们将成为全局变量。
严格模式不允许使用未声明的变量。
声明放在顶部
将所有声明放在每个脚本或函数的顶部是一个良好的编码实践。
这将
- 使代码更整洁
- 提供一个查找局部变量的单一位置
- 更容易避免意外的（隐式）全局变量
- 减少意外重新声明的可能性
// 在开头声明
let firstName, lastName, price, discount, fullPrice;
// 稍后使用
firstName = "John";
lastName = "Doe";
price = 19.90;
discount = 0.10;
fullPrice = price - discount;
这同样适用于循环变量
for (let i = 0; i < 5; i++) {
初始化变量
在声明变量时初始化它们是一个良好的编码实践。
这将
- 使代码更整洁
- 提供一个初始化变量的单一位置
- 避免未定义的值
// 在开头声明并初始化
let firstName = "";
let lastName = "";
let price = 0;
let discount = 0;
let fullPrice = 0,
const myArray = [];
const myObject = {};
初始化变量可以说明其预期用途（和预期数据类型）。
使用 const 声明对象
使用 const 声明对象可以防止意外的类型更改
示例
let car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat"; // 将对象更改为字符串
const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat"; // 不可能
使用 const 声明数组
使用 const 声明数组可以防止意外的类型更改
示例
let cars = ["Saab", "Volvo", "BMW"];
cars = 3; // 将数组更改为数字
const cars = ["Saab", "Volvo", "BMW"];
cars = 3; // 不可能
不要使用 new Object()
- 使用
""而不是new String() - 使用
0而不是new Number() - 使用
false而不是new Boolean() - 使用
{}而不是new Object() - 使用
[]而不是new Array() - 使用
/()/而不是new RegExp() - 使用
function (){}而不是new Function()
示例
let x1 = ""; // 新的原生字符串
let x2 = 0; // 新的原生数字
let x3 = false; // 新的原生布尔值
const x4 = {}; // 新对象
const x5 = []; // 新数组对象
const x6 = /()/; // 新的正则表达式对象
const x7 = function(){}; // 新函数对象
自己动手试一试 »
注意自动类型转换
JavaScript 是弱类型语言。
一个变量可以包含所有数据类型。
一个变量可以改变其数据类型
请注意，数字可能会意外地转换为字符串或 NaN（非数字）。
在进行数学运算时，JavaScript 可能会将数字转换为字符串
示例
let x = 5 + 7; // x.valueOf() 是 12，typeof x 是 number
let x = 5 + "7"; // x.valueOf() 是 57，typeof x 是 string
let x = "5" + 7; // x.valueOf() 是 57，typeof x 是 string
let x = 5 - 7; // x.valueOf() 是 -2，typeof x 是 number
let x = 5 - "7"; // x.valueOf() 是 -2，typeof x 是 number
let x = "5" - 7; // x.valueOf() 是 -2，typeof x 是 number
let x = 5 - "x"; // x.valueOf() 是 NaN，typeof x 是 number
自己动手试一试 »
字符串减去字符串不会产生错误，但会返回 NaN（非数字）
使用 === 比较
== 比较运算符在比较之前总是进行类型转换（以匹配类型）。
=== 运算符强制进行值和类型的比较
示例
0 == ""; // true
1 == "1"; // true
1 == true; // true
0 === ""; // false
1 === "1"; // false
1 === true; // false
自己动手试一试 »
使用参数默认值
如果一个函数调用时缺少参数，则缺失的参数值被设置为 undefined。
未定义的值可能会破坏您的代码。为参数分配默认值是一个好习惯。
ECMAScript 2015 允许在函数定义中使用默认参数
function (a=1, b=1) { /*function code*/ }
在 函数参数 中阅读更多关于函数参数和实参的信息
在 Switch 语句末尾添加 Default
始终在您的 switch 语句末尾添加 default。即使您认为没有必要。
示例
switch (new Date().getDay()) {
case 0
day = "星期日";
break;
case 1
day = "星期一";
break;
case 2
day = "Tuesday";
break;
case 3
day = "星期三";
break;
case 4
day = "Thursday";
break;
case 5
day = "Friday";
break;
case 6
day = "Saturday";
break;
default
day = "Unknown";
}
自己动手试一试 »
避免将数字、字符串和布尔值用作对象
始终将数字、字符串或布尔值视为原始值。而不是对象。
将这些类型声明为对象会减慢执行速度，并产生棘手的副作用
或者更糟糕
避免使用 eval()
eval() 函数用于将文本作为代码运行。在几乎所有情况下，都不需要使用它。
因为它允许运行任意代码，所以它也代表着安全问题。
