JavaScript 经验分享与注意事项
避免全局变量
- 请尽量少地使用全局变量。
- 它包括所有的数据类型、对象和函数。
- 全局变量和函数可被其他脚本覆盖。
- 请使用局部变量替代，并学习如何使用闭包。
始终声明局部变量
- 所有在函数中使用的变量应该被声明为局部变量。
- 局部变量必须通过 var 关键词来声明，否则它们将变成全局变量。
- 严格模式不允许未声明的变量。
在顶部声明
一项好的编码习惯是把所有声明放在每段脚本或函数的顶部。
这么做的好处是：
- 获得更整洁的代码
- 提供了查找局部变量的好位置
- 更容易避免不需要的全局变量
- 减少不需要的重新声明的可能性
// 在顶部声明var firstName, lastName, price, discount, fullPrice;// 稍后使用firstName = "埃隆";lastName = "马斯克";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 = {};
变量初始化使我们能够了解预期用途和预期的数据类型。
请不要声明数值、字符串或布尔对象
请始终将数值、字符串或布尔值视作初始值，而非对象。
如果把这些类型声明为对象，会拖慢执行速度，并产生负面影响：
<!DOCTYPE html><html><body><p>切勿将字符串创建为对象。</p><p>字符串和对象无法安全地进行比较。</p><p id="demo"><script>var x = "马斯克"; // x 是字符串var y = new String("马斯克"); // y 是对象document.getElementById("demo").innerHTML = x===y;</script></body></html>
或者甚至更糟：
<!DOCTYPE html><html><body><p>切勿将字符串创建为对象。</p><p>JavaScript 无法比较对象。</p><p id="demo"><script>var x = new String("马斯克");var y = new String("马斯克");document.getElementById("demo").innerHTML = x==y;</script></body></html>
请勿使用 new Object()
- 请使用 {} 来代替 new Object()
- 请使用 "" 来代替 new String()
- 请使用 0 来代替 new Number()
- 请使用 false 来代替 new Boolean()
- 请使用 [] 来代替 new Array()
- 请使用 /()/ 来代替 new RegExp()
- 请使用 function (){}来代替 new Function()
<!DOCTYPE html><html><body><p id="demo"><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>
要注意自动类型转换
要注意数值可能会被意外转换为字符串或 NaN（Not a Number）。
JavaScript 属于弱类型语言，变量可包含不同的数据类型，并且变量隐式转换为其数据类型：
<!DOCTYPE html><html><body><p id="demo"><script>var x = "Hello";var x = 5;document.getElementById("demo").innerHTML = typeof x;</script></body></html>
如果进行数学运算，JavaScript 能够将数值转换为字符串：
<!DOCTYPE html><html><body><p>删除注释（在行的开头）以测试每种情况：</p><p id="demo"><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>
用字符串减去字符串，不会产生错误而是返回 NaN（Not a Number）：
<!DOCTYPE html><html><body><p id="demo">我的第一个段落</p><script>document.getElementById("demo").innerHTML = "Hello" - "Kitty";</script></body></html>
使用 === 比较
== 比较运算符总是在比较之前进行类型转换（以匹配类型）。
=== 运算符会强制对值和类型进行比较：
<!DOCTYPE html><html><body><p>删除注释（在行的开头）以测试每种情况：</p><p id="demo"><script>var x;//x = (0 == ""); // true//x = (1 == "1"); // true//x = (1 == true); // true//x = (0 === ""); // false//x = (1 === "1"); // false//x = (1 === true); // falsedocument.getElementById("demo").innerHTML = x;</script></body></html>
请为参数设置默认值
如果调用函数时缺少一个参数，那么这个缺失参数的值会被设置为 undefined。
undefined 值可能会让您的代码报错，因此为参数设置默认值是一个好习惯。
<!DOCTYPE html><html><body><p>将默认值设置为函数参数。</p><p id="demo"><script>function myFunction(x, y) {if (y === undefined) {y = 0;}return x * y;}document.getElementById("demo").innerHTML = myFunction(4);</script></body></html>
用 default 来结束 switch
请使用使用 default 来结束您的 switch 语句。即使您认为没有这个必要。
<!DOCTYPE html><html><body><p id="demo"><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>
避免使用 eval()
eval() 函数用于将文本作为代码来允许。在几乎所有情况下，都没有必要使用它。因为允许任意代码运行，它同时也意味着安全问题。