10个初学者必知的JavaScript 实用技巧

今天我要来介绍几个我觉得是一般新手都应该要知道的一些写JavaScript的技巧，让你再学习写JavaScript的时候可以提升写code的品质，更可以解决一些后续的问题。

top1. 宣告变数的时候给预设型别

JavaScript宣告变数的时候应该要给它预设的类型!
这样做可以让接手你的程式的人或是未来的自己再观看程式码上面可以清楚的知道这个变数预设给他定义的类型是什么。

# Bad 
var name; 
var userData; 
var isOpen;# Good 
var name = ""; 
var userData = []; 
var isOpen = false;

top2. 使用=== 来进行判断

写判断式的时候不要再用****==****来判断，应该全部都改成****===****!
我们都知道JavaScript是一个弱型别语言，使用==来判断就会出现像是"1" == 1是true的奇怪现象，为了避免判断上面出现这种我要Number但是你给我String的情况，我们判断都应该使用===。

# Good 
if(val === 1){   
  console.log('ok') 
}

top3. 使用return 代替if else

if else****没有不好，只是某些情形使用****return****会让你的code更直观! 我们应该让看code的人像是再读code，而不是读逻辑，这样可以加快别人理解我们code，也可以避免过于复杂的逻辑。

# Bad 
if(value === ""){   
    alert("栏位不得为空") 
}else{   
    //后续其他动作
}# Good 
if(value === ""){     
    alert("栏位不得为空");   
    return; 
} //后续其他动作# Good 
if(value === "") return alert("栏位不得为空"); 
//后续其他动作

top4. 不要直接修改DOM的css

再改变DOM元素的style的时候，应该尽量避免直接用JavaScript操作css !
直接操作会让接手你专案的人不会知道你用JavaScript去改变style，会增加数倍维护成本，建议是使用add或remove的class方法来取代，当遇到修改style的时候就可以很方便的改css就好。

# Bad document.getElementById("dom").style.color = '#f00';# Good 
//css 
.textRed{   
    color: #f00; 
} 
//JavaScript document.getElementById("dom").classList.add('textRed'); document.getElementById("dom").classList.remove('textRed ');

top5. 简单的动画不要用JavaScript 函式库

请善用css3的transition，动态也比较顺畅 初学者学习到一些像是jquery 的JavaScript函式库时候就会喜欢把所有的动态交给函式库来做，例如hover一个按钮改变颜色或是选单跑出来等等，但是这样在行动装式上面会很卡不流畅，所以像是简单的动态都其实可以交给css3 的transition来处理，会顺畅很多。

# Bad 
// js (jquery) 
$("#btn").on('hover', function (){   
        $(this).animate({top: "200"}, 300); 
})# Good 
// css 
#btn{    
      top : 0px;    
      transition : top 0.3s; 
} 
#btn:hover{    
    top : 200px; 
}

top6. 筛选资料你应该用filter

善加利用filter来筛选资料可以提高code的可读性 蛮多人喜欢筛选资料的时候透过for迴圈在里面用if来筛选资料，不能说是错，但是code看起来很冗长，不漂亮，我们应该使用filter来做资料的筛选。

# Bad 
var arr = []; 
for( var i = 0; i < data.length; i++){    
    if(data[i].money > 300){       
        arr.push(data[i]);    
    } 
}# Good 
var arr = data.filter( function (obj){     
    return obj.money > 300; 
})

top7.妥善利用 console.log 来debug

用console.log来确认程式的运行流程，避免程式执行跟自己想的不一样! 我们都是用console.log来确认变数的内容，却很少利用console.log来判断程式的执行顺序，尤其是遇到跟非同步执行有关的问题更应该先确保程式流程没错，不过记得上线要把测试的console.log给拿掉，毕竟log是会消耗效能的，这个方法只有在debug阶段适用。

# Bad//这是一个错误的例子
//非同步，因为资料还没有回来所以return的资料是空阵列
function getData(){    
    var data = [];    
    axios.get("/api/userData").then( function (response) {        
        data = response.data;    
    })    
    .catch(function (error) { 
       console.error(error);    
     })    
    return data; 
}var res = getData(); // ----> []//虽然是错误的例子，但是在每个执行接console.log() //透过这样的console.log()方式可以清楚知道程式运行流程
function getData(){    
    console.log(1);    
    var data = [];    
    console.log(2);    
    axios.get("/api/userData").then(function (response) {        
        console.log(3);        
        data = response.data;        
        console.log(4);    
     })    
    .catch(function (error) { 
        console.error(error);    
    })    
    console.log(5);    
    return data; 
}var res = getData(); // ----> []// log : 1 -> 2 -> 5 -> 3 -> 4 
//从这边可以清楚知道程式不是照自己想的1 -> 2 -> 3 -> 4 -> 5这样执行的
//方便我们debug

top8. 整合<script> 载入的进入点

不要依照设计稿的区块来分档写js，应该要将主程式集中，尤其是在做区块的非同步处理然后要跨区块做资料沟通时，分档撰写只会给自己找麻烦。

# Bad 
<script src="./js/jquery.min.js"></script> //以下都是主程式
<script src="./js/slidshow.js"></script> 
<script src ="./js/banner.js"></script> 
<script src="./js/tab.js"></script> 
<script src="./js/login.js"></script > 
<script src="./js/index.js"></script># Good 
<script src="./js/jquery.min.js"></script> 
<script src="./js/index.js"></script>

top9. 不要操作原始阵列

当传入array进去函式里面进行操作的时候，我们应该先拷贝一份阵列! 传入函式的array因为记忆体指向都是同一个，所以如果我们把传入的array直接操作会修改到原始资料，为了避免这种情况我们应该要用slice(0)先复制一份阵列再来操作。

# Bad 
function Num(list){    
    list.push("9"); 
}
var arr = [1,2,3]; 
Num(arr); 
console.log(arr) // ---> [1, 2, 3, "9"]
# Good 
function Num(list){     
    var newArr = list.slice(0)     
    newArr.push("9"); 
}
var arr = [1,2,3]; 
Num(arr); 
console.log(arr) // ---> [1, 2, 3]

top10. 不要bind this

this的指向一直都是JavaScript中最令人头疼的问题，尤其是为了用function来模拟class的使用上面，常常需要让绑定事件内this指向到function ( class )的实体上，所以常会使用到bind，使用bind会造成函式的记忆体增加，我们应该使用变数来储存this来调用，而不是bind。

# Bad 
function Apple(){     
    this.name = "mike";     
    var btn = document.getElementById("btn");  
    btn.addEventListener("click", function(){
         alert(this.name);     
    }.bind( this)); 
} new Apple();

# Good 
function Apple(){     
    this.name = "mike";     
    var self = this;     
    var btn = document.getElementById("btn");     
    btn.addEventListener("click", function(){
         alert(self.name) ;     
    }); 
} 
new Apple();