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