JS代码优化之基础优化

作为前端工程师，js对我们来说再熟悉不过了；但是往往在coding过程中，有些代码会让你觉得很臃肿且重复，此时就需要代码优化了；简单的代码优化会让你的代码更加的简单且优雅。

常见写法优化

问题1：如果a>10，返回true;相反返回false;

//bad
if(a>10){
    return true;
}else{
    return false;
}
//good
 return a>10

问题2：如果params参数不为空，再执行。。。

//bad
if(params !== ""){
    // to do 
}
//good
if(params){
    // to do
}

问题3:如果this.isedit参数存在,则this.checked赋值true;否则赋值false;

//bad
this.checked = this.isedit?true:false;
//good
this.checked = !!this.isedit

问题4：获取array数组的长度

//bad
const length = array.length;
//good
const length = array == null ? 0:array.length

问题5：HTML渲染参数

//bad
<span>{{data}}</span>
//good
<span>{{data||""}}</span>
//在不保证data参数一定有的情况下，这种写法会提升容错率

问题6：如果params存在，调用fn;

//bad
if(params){
    fn()
}
funcation fn(){}
//good
params && fn()
fn()

问题7：循环数组

//bad
for (var i = 0; i < arr.length; i++) {
    //to do 
}
//good
let len = arr.length; 
for (var i = 0;  i < len; i++) {
    //to do 
}
存储数组长度，循环不用每次读取数组长度，提升性能

问题8：多个判断条件同时判断

//bad
if(user.id === 1){
    if(user.name !== ""){
        if(user.phone !== ""){
            //to do
        }
    }
}
//good
if(user.id === 1 && user.name !=="" && user.phone !==""){
    //to do
}

问题9：多个变量定义

//bad 
var a = 1;
var b = 2;
var c = 3;
//good
var a = 1,
    b = 2,
    c = 3

问题10：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;
将dDOM操作放在循环体之外，尽可能减少DOM操作

这里只是部分列举，后续其他的会不断补充。