JS中循环逻辑和判断逻辑的使用实例

ゞ浴缸里的玫瑰 2021-12-23 16:09 262阅读 0赞

源代码见：

[https://github.com/Embrace830/JSExample][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分别用数组储存

1 function changeAttr(elem, attr, sty) {
     2      elem.style[attr] = sty;
     3  }
     4      window.onload = function () {
     5          var content = document.getElementById('content');
     6          var btns = document.getElementsByClassName("btn");
     7          var styles = ["200px", "200px", "red", "none", "block"];
     8          var attrs = ["width", "height", "background", "display", "display"];
     9          for( var i = 0; i < btns.length; i++){
    10             btns[i].index = i;
    11             btns[i].onclick = function () {
    12             this.index === btns.length - 1 && (content.style.cssText = "");
    13             alert(this.index);
    　　　　　　　　　alert(i);//5
    14             changeAttr(content, attrs[this.index], styles[this.index]);//this.index改为i时功能无法实现，由于触发onclick事件时，i已经完成遍历值为5
    15             }
    16          }
    17       }

对于上述代码中的红色问题，可用匿名函数（闭包）将每次遍历的 i 值传入函数，使其值始终保持在内存。

1  for(var i=0;i<btn.length;i++){
    2    (function(n){
    3       btn[n].οnclick=function(){
    4         n===btn.length-1&&(show.style.cssText="");
    5         change(show,style[n],attr[n]);
    6       }
    7     })(i)
    8 }

转载于:https://www.cnblogs.com/embrace-ly/p/10547401.html

[https_github.com_Embrace830_JSExample]: https://github.com/Embrace830/JSExample