JS中循環邏輯和判斷邏輯的使用實例

源代碼見：

https://github.com/Embrace830/JSExample

&&和||的理解

a || b：如果a是true，那么b不管是true還是false，都返回true。因此不用判斷b了，這個時候剛好判斷到a，因此返回a。

　　　如果a是false，那么就要判斷b，如果b是true，那么返回true，如果b是false，返回false，其實不就是返回b了嗎。

a && b：如果a是false，那么b不管是true還是false，都返回false，因此不用判斷b了，這個時候剛好判斷到a，因此返回a。

　　　如果a是true，那么就要在判斷b，和剛剛一樣，不管b是true是false，都返回b。

判斷邏輯，因為重置按鈕需要清空之前的style，這里用if語句也可以，但是比較繁瑣，所以采用了與門操作符，好處就是代碼量比較少。

this.index === btns.length - 1 && (content.style.cssText = "");

循環邏輯，因為5個按鈕的功能相似，故通過循環的到每個按鈕的屬性，並改變其對應的值。將 attribute及其對應的 style分別用數組儲存

function changeAttr(elem, attr, sty) {
     elem.style[attr] = sty;
 }
     window.onload = function () {
         var content = document.getElementById('content');
         var btns = document.getElementsByClassName("btn");
         var styles = ["200px", "200px", "red", "none", "block"];
         var attrs = ["width", "height", "background", "display", "display"];
         for( var i = 0; i < btns.length; i++){
            btns[i].index = i;
            btns[i].onclick = function () {
            this.index === btns.length - 1 && (content.style.cssText = "");
            alert(this.index);
　　　　　　　　　alert(i);//5
            changeAttr(content, attrs[this.index], styles[this.index]);//this.index改為i時功能無法實現，由於觸發onclick事件時，i已經完成遍歷值為5 15             }
         }
      }

對於上述代碼中的紅色問題，可用匿名函數（閉包）將每次遍歷的 i 值傳入函數，使其值始終保持在內存。

 for(var i=0;i<btn.length;i++){
   (function(n){
      btn[n].onclick=function(){
        n===btn.length-1&&(show.style.cssText="");
        change(show,style[n],attr[n]);
      }
    })(i)
}