JS代码的简单重构与优化
JS代码的简单重构与优化（适合新手）
//bad
if (age > 20) {
return true;
} else {
return false;
}
//good
return age > 20;
这种一看就明白吧，没什么说的。
Demo . 2
//bad
for (var i = 0; i < arr.length; i++) {
//do something...
}
//good
for (var i = 0, len = arr.length; i < len; i++) {
//do something...
}
将数组的长度进行存储，循环时就不用每次去读取一次数组长度，从而提升性能
Demo . 3
//bad
if (value !== "") {
//do something...
}
//good
if (value) {
//do something...
}
js中所有 非空字符 作布尔运算时，都会返回 true，反之返回 false。 （空格 属于非空字符）
Demo . 4
//bad
if (value !== 0) {
//do something...
}
//good
if (value) {
//do something...
}
js中所有 非零 数字作布尔运算时，都会返回 true， 反之返回 false。
Demo . 5
//bad
if (user.id === 10) {
if (user.name !== "") {
if (user.email === "email") {
//do something...
}
}
}
//good
if(user.id === 10 && user.name !=="" && user.email === "email") {
//do something...
}
//good
if (user.id !== 10) return;
if (user.name === "") return;
if (user.email !== "email") return;
//do something...
多层条件嵌套，进行 转换 或 拆分。
Demo . 6
//bad
var a = "aa";
var b = "bb";
var c = "cc";
var d;
//good
var a = "aa",
b = "bb",
c = "cc",
d ;
多个变量的定义，写一个 var 即可，遵循的原则：被赋值的在前面，只是进行声明放后面（d 在最后）
Demo . 7
//bad
for (var i = 0; i < 100; i++){
str += str;
document.getElementById("box").innerHtml = str;
}
//good
for (var i = 0; i < 100; i++) {
str += str;
}
document.getElementById("box").innerHtml = str;
尽可能的减少DOM操作，将DOM操作放在循环体之外，数据处理好后，只执行一次DOM操作即可。
Demo . 8
//bad
function test() {
var a = b = 1;
console.log(a);
}
//good
function test() {
var a = 1,
b = 1;
console.log(a);
}
避免使用 连等号 声明赋值变量。js基础好点的同学都知道，这里存在着一个坑： b 会被声明为全局变量，意思就是在 test() 方法之外b也是可以被访问到的。 全局变量是不推荐使用的，容易污染环境。
Demo . 9
//bad
if (age > 20) {
console.log("年龄大于20");
}
//good
(age > 20) && console.log("年龄大于20");
这里的bad并不是说第一种写法不好，其实就可读性来说，第一种比第二种更好。 只是第二种写法更加优雅一点（个人觉得）。 这个句法可能有些同学用的比较少，解释一下：
如果第一个条件为 true ,那么就执行后面的语句，第一个条件为false, 后面的语句便不会执行。后面的语句可以是表达式，方法，或变量，常量都可以。 比如 (age > 20) && test()。用于赋值时的具体说明，如下图
Demo . 10
//bad
if (age > 20) {
value = "similar";
//do something...
}
//good
if (age > 20 && value = "similar") {
//do something...
}
这个可以说是Demo9的变体，代码可读性还是第一个比较好，当你采用第二种写法时，请配合注释使用。因为有些人可能会认为你这是书写失误，少写了一个 = ，从而他自行给你补上了（value == "similar"）。而你实际上是想做赋值操作的。因为你要写上注释说明，你这里不是书写失误，而是要进行赋值。
Demo . 11
//bad
if (value === "") {
value = "similar";
}
//good
if(!value) {
value = "similar";
}
//good
value = value || "similar";
这个和Demo9的 && 号运算正好相反，当第一个条件为 false 时，执行后面的语句。因为空字符串作布尔运算是返回 false的，所以可以这样用。
Demo . 12
//bad
i = i + 1;
i = i - 1;
//good
i++;
i--;
这个没什么好说的。
Demo . 13
//bad
if (typeof str === "String") {
}
//good
if (typeof str === "string") {
}
这里只是帮大家填个坑，不存在好坏。typeof 运算是用来检查数据类型的（常用来检查js中的基础类型），它返回的是一个字符串（并且始终为小写），所以第一个始终为false。 检查js中的引用类型要用 instanceof 运算， 如： var arr = []; if(arr instanceof Array){}, 但 Function 类型比较特别，也可以用 typeof 来进行判断。
Demo . 14
//(bad) 格式化字符串 fontSize => font-size
function stringFormat(str) {
var strArr = str.split(''),
len = strArr.length,
i = 0;
for (; i < len; i++) {
if(/^[A-Z]$/.test(strArr[i])) {
strArr[i] = "-" + strArr[i].toLowerCase();
}
}
return strArr.join('');
}
//(good) 格式化字符串 fontSize => font-size
function stringFormat(str) {
return (str.replace(/([a-z])(A-Z)/g, "$1-$2")).toLowerCase();
}
两个方法实现同样的功能，但第二个优雅得多，性能上也比第一个要好。当对字符串进行循环操作，如：查找、替换。 首先考虑的应该是使用 正则，不应该是循环遍历。
Demo . 15
//bad
function regist(userName, userPwd, userEmail, userPhone) {
//do something...
}
//good
function regist(user) {
//do something
}
当一个方法接收的参数过多的时候，可以考虑将其封装成一个json对象， 这样简单得多。
Demo . 16
var a = 1,
b = "1";
//(bad) 输出 a等于b
if (a == b) {
console.log("a等于b");
}
//(good) 输出 a不等于b
if (a === b) {
console.log("a等于b");
} else {
console.log("a不等于b");
}
推荐使用 全等 判断，这样更准确。 字符串和数字并不是全等的。关于比较的一点说明：
目前只想到这么多，麻烦大家进行补充，感谢！
