JavaScript 實用技巧

介紹一些寫 JavaScript 時注意的地方

宣告變數記得給預設型別

觀看程式碼時，可以快速了解變數型別。

Code

let name = "";
let arr = [];
let isLoading = false;

寫判斷時使用 === 跟 !==

避免比較時自動轉換型別，出現 "1" == 1 為 true 的情況。

Code

if(value === 1){
  console.log('ok')
}

使用 return 代替 if else

適時用 return 代替 if else 可以讓程式可讀性更高。

Code

if(value === ""){
  console.log("error")
}else{
  // 後續其他動作
}

改成

if(value === ""){
  console.log("error");
  // 程式中斷
  return;
}
  // 後續動作
  ...

盡量不要直接修改 DOM 的 CSS

要改變 DOM 的 style 時，盡量避免直接用 JavaScript 操作 CSS! ，可使用 add 或 remove 的 class 方法去增加及刪除樣式。

Code

避免
document.getElementById("dom").style.color = '#f00';

建議使用

先定義樣式
.textRed{
  color: #f00;
}
再增加或刪除
//javascript
document.getElementById("dom").classList.add('textRed');
document.getElementById("dom").classList.remove('textRed');

//jQuery
$("#test").addClass("aaa");
$("#test").removeClass("aaa");

簡單動畫少用函式庫

簡單的互動，可以交由 css3 的 transition 來處理，在行動裝置上會順暢很多。

Code

少用
//jQuery
$("#btn").on('hover', function(){
    $(this).animate({top: "200"}, 300);
})

建議使用

#btn{
   top: 0px;
   transition: top 0.3s;
	&:hover{
   top: 200px;
}

篩選資料時用 filter()

多利用 filter 來篩選資料，提高 code 的可讀性。
ps. filter()：回傳符合條件的元素，得到一個新陣列。

Code

少用

let arr = [];
for(let i = 0; i < data.length; i++){
   if(data[i].money > 300){
      arr.push(data[i]);
   }
}

建議使用

let arr = data.filter(function(obj){
    return obj.money > 300;
})

多利用 console.log 來 debug

開發階段時可多用 console.log 來確認變數的內容及程式的運行流程(尤其非同步執行時)，不過記得程式要上線時，把測試的 console.log 給刪掉，減少效能消耗。

Code

// 雖然是錯誤的例子，但是在每個執行接 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
// axios.get() 是非同步
// 從這邊可以清楚知道程式不是照自己想的 1 -> 2 -> 3 -> 4 -> 5 這樣執行的

整合 <script> 載入的進入點

主程式不要分檔寫，以確保程式流程。

Code

不要這樣寫
<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>

//建議把上面的 index、login、tab、banner、slidshow 都寫到
index.js 裡就好
<script src="./js/jquery.min.js"></script>
<script src="./js/index.js"></script>

不要操作原始陣列

因為陣列有傳參考的特性，所以對傳入的 array 直接操作會修改到原始資料。因此當傳入 array 進去函式裡面進行操作的時候，我們應該先拷貝一份陣列！為了避免這種情況我們應該要用 slice(0) 先複製一份陣列再來操作。

Code

function Num(list){
   list.push("9");
}
let arr = [1,2,3];
Num(arr);
console.log(arr)  // ---> [1, 2, 3, "9"]

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

不要 bind this

this 的指向一直都是 JavaScript 中最令人頭疼的問題，尤其是為了用 function 來模擬 class 的使用上面，常常需要讓綁定事件內 this 指向到 function(class)的實體上，所以常會使用到 bind，使用 bind 會造成函式的記憶體增加，我們應該使用變數來儲存 this 來調用，而不是 bind。

Code

少用

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

建議使用

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

參考：
https://medium.com/i-am-mike/10個新手必知的-javascrip-實用技巧-75b55d7c3e47