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
            }
         }
      }

对于上述代码中的红色问题，可用匿名函数（闭包）将每次遍历的 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)
}