JS 代码的简单重构与优化

JS 代码的简单重构与优化

1.返回值

//bad
if(age < 20){
    return true;
}else {
    return false;
}

//good
return age < 20;
复制代码

2.将数组长度进行存储，循环时就不用每次都读取一次数组长度，提升性能。（适用于一次加载20以上的dataList）

//bad
for(var i = 0; i < array.length; i++){
    const element = array[i];
}

//good
for(var i = 0; len = array.length; i < len; i++){
    const element = array[i];
}
复制代码

3.js 中，所有非空字符作布尔运算时，都会返回true，反之返回false。

//bad
if(value != ""){
    //do something
}

//good
if(value){
    //do something
}
复制代码

4.多层嵌套，进行转化与拆分

//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;
复制代码

5.多个变量定义，写一个var即可，遵循的原则，被赋值的写在前面，只是进行声明的写在后面。

//bad
var a = "aa";
var b = "bb";
var c = "cc";
var d;

//good
var a = "aa",
    b = "bb",
    c = "cc",
    d
复制代码

6.尽可能的减少DOM操作，将DOM操作放在循环体之外，数据处理好后，只执行一次DOM操作即可。

//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;
复制代码

7.避免使用 连等号 声明赋值变量。js基础好点的同学都知道，这里存在着一个坑： b 会被声明为全局变量，意思就是在 test() 方法之外b也是可以被访问到的。 全局变量是不推荐使用的，容易污染环境。

//bad
function test() {
    var a = b = 1;
    console.log(a);
}

//good
function test() {
    var a = 1,
    b = 1;

    console.log(a);
}
复制代码

8.typeof 运算是用来检查数据类型的（常用来检查js中的基础类型），它返回的是一个字符串（并且始终为小写），所以第一个始终为false。 检查js中的引用类型要用 instanceof 运算， 如：

`var arr = [];  if(arr instanceof Array){}`, 
复制代码

但 Function 类型比较特别，也可以用 typeof 来进行判断。

//bad
if (typeof str === "String") {

}

//good
if (typeof str === "string") {

}
复制代码

9.两个方法实现同样的功能，但第二个优雅得多，性能上也比第一个要好。当对字符串进行循环操作，如：查找、替换。 首先考虑的应该是使用 正则，不应该是循环遍历。

//(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();
}
复制代码

10.当一个方法接收的参数过多的时候，可以考虑将其封装成一个json对象， 这样简单得多。

//bad
function regist(userName, userPwd, userEmail, userPhone) {
    //do something...
}

//good
function regist(user) {
    //do something
}
复制代码

11.使用三元运算表达式进行if…else的判断

//bad
if (age > 20) {
    value = "aa";
} else {
    value = "bb";
}

//good
value = age > 20 ? "aa" : "bb";
复制代码

转载于:https://juejin.im/post/5b6983a56fb9a04fb016fd2a