每个人编写JavaScript的方式都有些不同。但是还有很多共同之处,以下是一组相当简单的JavaScript编写经验指南和注意事项,让您少走弯路。
尽量减少使用全局变量。这包括所有数据类型,对象和功能。
全局变量和函数可以被其他脚本覆盖。所以请改用局部变量。
局部变量必须使用let,const和var关键字声明,否则会成为全局变量。
在声明变量和常量时,请使用let和const关键字,而不是var。
// 推荐: let myAge = 22; const myName = "(thinktus.com)"; // 不推荐: var myAge = 22; var myName = "(thinktus.com)";
这样做有很多充分的理由-例如,它避免了由于意外重新分配而引起的问题,并避免了会影响可读性的提升。
将所有声明放在每个脚本或函数的顶部是一种很好的编程做法。
下面提供更简洁的代码,并在代码开头提供一个查找所有变量的地方。
// 声明写在最前面 let firstName, lastName, price, discount, fullPrice; // 使用 firstName = "(thinktus.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 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 = "(thinktus.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 = 'thinktus.com'; console.log(`Hi! I'm ${myName}!`); // 不推荐: let myName = 'thinktus.com'; console.log('Hi! I\'m' + myName + '!');
当使用for,for...in或for...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始终以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); }