JavaScript 最佳实践，经验总结
JavaScript 最佳实践
请避免全局变量、new、===、eval()
始终声明局部变量
所有在函数中使用的变量应该被声明为局部变量。
局部变量必须通过 var 关键词来声明，否则它们将变成全局变量。
严格模式不允许未声明的变量。
在顶部声明
一项好的编码习惯是把所有声明放在每段脚本或函数的顶部。
这么做的好处是：
- 获得更整洁的代码
- 提供了查找局部变量的好位置
- 更容易避免不需要的全局变量
- 减少不需要的重新声明的可能性
// 在顶部声明
var firstName, lastName, price, discount, fullPrice;
// 稍后使用
firstName = "Bill";
lastName = "Gates";
price = 19.90;
discount = 0.10;
fullPrice = price * 100 / discount;
也可以用于循环变量：
// 在顶部声明
var i;
// 稍后使用
for (i = 0; i < 5; i++) {
默认地，JavaScript 会将所有声明移至顶部（JavaScript hoisting）。
初始化变量
在您声明变量时对其进行初始化是个好习惯。
这么做的好处是：
- 更整洁的代码
- 在单独的位置来初始化变量
- 避免未定义值
// 在开头进行声明和初始化
var firstName = "",
lastName = "",
price = 0,
discount = 0,
fullPrice = 0,
myArray = [],
myObject = {};
变量初始化使我们能够了解预期用途和预期的数据类型。
请不要声明数值、字符串或布尔对象
请始终将数值、字符串或布尔值视作原始值。而非对象。
如果把这些类型声明为对象，会拖慢执行速度，并产生讨厌的副作用：
示例代码：
var x = "Bill";
var y = new String("Bill");
(x === y) // 结果为 false，因为 x 是字符串，而 y 是对象。
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>切勿将字符串创建为对象。</p>
<p>字符串和对象无法安全地进行比较。</p>
<p id="demo"></p>
<script>
var x = "Bill"; // x 是字符串
var y = new String("Bill"); // y 是对象
document.getElementById("demo").innerHTML = x===y;
</script>
</body>
</html>
运行结果：
切勿将字符串创建为对象。 字符串和对象无法安全地进行比较。 false
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
或者甚至更糟：
示例代码：
var x = new String("Bill");
var y = new String("Bill");
(x == y) // 结果是 false，因为你无法比较对象。
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>切勿将字符串创建为对象。</p>
<p>JavaScript 无法比较对象。</p>
<p id="demo"></p>
<script>
var x = new String("Bill");
var y = new String("Bill");
document.getElementById("demo").innerHTML = x==y;
</script>
</body>
</html>
运行结果：
切勿将字符串创建为对象。 Javascript 无法比较对象。 false
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
请勿使用 new Object()
- 请使用 {} 来代替 new Object()
- 请使用 "" 来代替 new String()
- 请使用 0 来代替 new Number()
- 请使用 false 来代替 new Boolean()
- 请使用 [] 来代替 new Array()
- 请使用 /()/ 来代替 new RegExp()
- 请使用 function (){}来代替 new Function()
示例代码：
var x1 = {}; // 新对象
var x2 = ""; // 新的原始字符串值
var x3 = 0; // 新的原始数值
var x4 = false; // 新的原始布尔值
var x5 = []; // 新的数组对象
var x6 = /()/; // 新的正则表达式
var x7 = function(){}; // 新的函数对象
完整实例：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x1 = {};
var x2 = "";
var x3 = 0;
var x4 = false;
var x5 = [];
var x6 = /()/;
var x7 = function(){};
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>";
</script>
</body>
</html>
运行结果：
x1: object x2: string x3: number x4: boolean x5: object x6: object x7: function
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
意识到自动类型转换
请意识到数值会被意外转换为字符串或 NaN（Not a Number）。
JavaScript 属于松散类型。变量可包含不同的数据类型，并且变量能够改变其数据类型：
示例代码：
var x = "Hello"; // typeof x 为字符串
x = 5; // 把 typeof x 更改为数值
完整实例：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = "Hello";
var x = 5;
document.getElementById("demo").innerHTML = typeof x;
</script>
</body>
</html>
运行结果：
number
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如果进行数学运算，JavaScript 能够将数值转换为字符串：
示例代码：
var x = 5 + 7; // x.valueOf() 是 12, typeof x 是数值
var x = 5 + "7"; // x.valueOf() 是 57, typeof x 是字符串
var x = "5" + 7; // x.valueOf() 是 57, typeof x 是字符串
var x = 5 - 7; // x.valueOf() 是 -2, typeof x 是数值
var x = 5 - "7"; // x.valueOf() 是 -2, typeof x 是数值
var x = "5" - 7; // x.valueOf() 是 -2, typeof x 是数值
var x = 5 - "x"; // x.valueOf() 是 NaN, typeof x 是数值
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>删除注释（在行的开头）以测试每种情况：</p>
<p id="demo"></p>
<script>
var x = 5;
//x = 5 + 7; // x.valueOf() 是 12，typeof x 是数字
//x = 5 + "7"; // x.valueOf() 是 57，typeof x 是字符串
//x = "5" + 7; // x.valueOf() 是 57，typeof x 是字符串
//x = 5 - 7; // x.valueOf() 是 -2，typeof x 是数字
//x = 5 - "7"; // x.valueOf() 是 -2，typeof x 是数字
//x = "5" - 7; // x.valueOf() 是 -2，typeof x 是数字
//x = 5 - "x"; // x.valueOf() 是 NaN，typeof x 是数字
document.getElementById("demo").innerHTML = x.valueOf() + " " + typeof x;
</script>
</body>
</html>
运行结果：
删除注释（在行的开头）以测试每种情况： 5 number
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
用字符串减去字符串，不会产生错误而是返回 NaN（Not a Number）：
示例代码：
"Hello" - "Dolly" // 返回 NaN
完整实例：
<!DOCTYPE html>
<html>
<body>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "Hello" - "Kitty";
</script>
</body>
</html>
运行结果：
NaN
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
使用 === 比较
== 比较运算符总是在比较之前进行类型转换（以匹配类型）。
=== 运算符会强制对值和类型进行比较：
示例代码：
0 == ""; // true
1 == "1"; // true
1 == true; // true
0 === ""; // false
1 === "1"; // false
1 === true; // false
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>删除注释（在行的开头）以测试每种情况：</p>
<p id="demo"></p>
<script>
var x;
//x = (0 == ""); // true
//x = (1 == "1"); // true
//x = (1 == true); // true
//x = (0 === ""); // false
//x = (1 === "1"); // false
//x = (1 === true); // false
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
删除注释（在行的开头）以测试每种情况： undefined
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
使用 Parameter Defaults
如果调用函数时缺少一个参数，那么这个缺失参数的值会被设置为 undefined。
undefined 值会破坏您的代码。为参数设置默认值是一个好习惯。
示例代码：
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>将默认值设置为函数参数。</p>
<p id="demo"></p>
<script>
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
return x * y;
}
document.getElementById("demo").innerHTML = myFunction(4);
</script>
</body>
</html>
运行结果：
将默认值设置为函数参数。 0
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
请在函数参数这一章阅读更多有关函数参数的内容。
用 default 来结束 switch
请使用 default 来结束您的 switch 语句。即使您认为没有这个必要。
示例代码：
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";
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var day;
switch (new Date().getDay()) {
case 0:
day = "周日";
break;
case 1:
day = "周一";
break;
case 2:
day = "周二";
break;
case 3:
day = "周三";
break;
case 4:
day = "周四";
break;
case 5:
day = "周五";
break;
case 6:
day = "周六";
break;
default:
day = "未知";
}
document.getElementById("demo").innerHTML = "今天是：" + day;
</script>
</body>
</html>
运行结果：
今天是：周四
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
避免使用 eval()
eval() 函数用于将文本作为代码来允许。在几乎所有情况下，都没有必要使用它。
因为允许任意代码运行，它同时也意味着安全问题。
