javascript第六天----for循环

js是什么

  1. 语法本身---变量---数据类型--控制结构
  2. DOM ---文档对象---查找元素---添加内容---修改标签属性---自定义属性
  3. BOM alert
    前端 主要是对文档的增删改查

伪元素的获取

:: first-letter 特殊样式添加到首字母
::first-line 特殊样式加到首行 :: before 在元素之前插入 ::after 在元素之后插入
伪元素是css渲染的 并不存在与我们的document当中!无法获取

getComputedStyle() 括号里传入 1对象 2 伪类 然后获取样式采用ge't getComputedStyle(1,2)[attr] 样的方式 没有伪类 写null 或者不写

<body>
    <div id="box" class="mybox">123</div>
</body>
<script>
    var oBox = document.getElementById("box");
    var af = getComputedStyle(oBox,"::after" )["content"];
    console.log(af);

</script>

for 循环

for(①;②;④;){③;}
①:定义语句
②:判断语句
③:执行体
④:变化语句

for(var i = 0;i<10;i++){
        console.log(i);
    }

结果是打印出0~9 就相当于console.log(0); console.log(2); console.log(3); console.log(4);
**for循环的执行顺序:1--2--3--4--2--3--4直到i=10 然后就不进入循环体

<body>
  <button id="btn">点击生成div</button>
  <div id="box"></div>
</body>
<script>
  var btn = document.getElementById("btn");
  var box = document.getElementById("box");
  var str = "";
  btn.onclick = function () {
      for (var i = 0;i<10;i++){

          str += "<div></div>"
      }
      box.innerHTML = str;
  }
</script>

遍历数组

<ul id="box">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    var oli = document.getElementsByTagName("li");
    for (var i = 0; i<4; i++){
       oli[i].onclick = function () {
           alert("kun");
       }
    }
    for (var i = 0; i<4; i++){
       oli[i].onclick = function () {
           alert(i);//打印结果是4,并不是1234
       }
    }
</script>

函数在没执行的时候是一个代码块,for循环只是注册事件,注册函数并没有执行

如果想要每次弹出来对应是1234,那么就使用自定义属性把i放在点击函数外边存起来,注意点击函数内部要用this

<script>
    var oli = document.getElementsByTagName("li");
    for (var i = 0; i<4; i++){
       oli[i].index = i;
       oli[i].onclick = function () {
           alert(this.index);
           console.log(this.index);
       }
    }
</script>

this 是谁调用这个函数 this就是谁

遍历字符串

  1. 在js当中 数据类型是可以相互转换的
<script>
    var str = "我爱北京天安门";
    console.log(str.length);
     for(var i = 0;i<str.length;i++){
        console.log(str[i]);
    }
</script>

结果是7

break 和 continue

  1. 终止循环
<script>
  for(var i=0;i<100;i++){
      console.log(i);
      if(i==25){
         console.log("nihao");
          break;
      }
      console.log(i);
  }
</script>

注意break 写在if里面 ,从25开始包括25就不打印了

  1. 跳过某一个循环
<script>
   for(var i=0;i<100;i++){
       if(i==25){
           console.log("nihao");
           continue

       }
       console.log(i);
   }
</script>

结果25不打印,其余打印

for 循环

<script>
    for(var i=0;i<5;i++){
        for (var j=0;j<6;j++){
            console.log(1);
        }
    }
</script>

结果循环了30次

for(var i=0;i<6;i++){
        for (var i=0;i<4;j++){
            console.log(1);
            consolo.label("里层");
        }
        console.log("外层");
    }

死循环,里层出来i为4,但是经过外层i++,i变为5,满足条件,进里层循环,但是,里层i又被赋值为0,所以为死循环

for(var i=0;i<2;i++){
        for (var j=0;j<3;j++){
            if(j===2){
                break;//只是终止内层循环
            }
            console.log(`里层第${j}`);
        }
        console.log(`外层${i}`);
    }

内层执行了两次,外层执行2次

label 标签 给我们的for循环打个标记 便于终止和跳出

<script>
    out:
    for(var i=0;i<2;i++){
        for (var j=0;j<3;j++){
            if(j===2){
                break out;//只是终止内层循环
            }
            console.log(`里层第${j}`);
        }
        console.log(`外层${i}`);
    }

</script>

在内部终止后,外层也终止,下面的console.log没有结果 out可以看作一个变量,但是不能用 var 会报错,也遵守变量命名规则,就是可以随意命名

<script>
    out:
    for(var i=0;i<2;i++){
        wangwu: for (var j=0;j<3;j++){
            if(j===2){
                continue out;//只是终止内层循环
            }
            console.log(`里层第${j}`);
        }
        console.log(`外层${i}`);
    }

</script>

跳出外层循环,内层循环两次,外层循环两次,但是最后的console.log没有打印

++ --运算

<script>
  var a = 1;
   var num = a++;
   console.log(num);
   console.log(a);
</script>

第一个结果是1,第二个2 a++

  1. 如果我们取返回值 取到的是 没有+1之前的值 先赋值 后运算
  2. 如果运算结束 a发生了变化 ++a
  3. 如果我们取返回值的话 取到的是 +1之后的值 先运算 后赋值

a--
--a

for循环的性能

for 循环的性能
console.time()
console.timeEnd()系统会打印出 大概的代码执行时间,上下括号里面的名字可以随便取,但是要对应一样

<body>
  <button id="btn">增加</button>
  <div id="box">
  </div>
</body>
<script>
 var oBtn = document.getElementById("btn");
 var oBox = document.getElementById('box');
 oBtn.onclick = function () {
     console.time("tag");
     var str = '';
     for (var i = 0;i<10;i++){
         str += "<div></div>";
     }
     oBox.innerHTML += str;
     console.timeEnd("tag");
 }
</script>

这个把str的十次增加存起来放到inner HTML的一次获取,性能比下面的好,随着代码量的越来越多 inner HTML也越来越多 越来越慢。重新渲染了一次

<script>
 var oBtn = document.getElementById("btn");
 var oBox = document.getElementById('box');
 oBtn.onclick = function () {
     console.time("tag");
     // var str = '';
     for (var i = 0;i<10;i++){
         oBox.innerHTML += "<div></div>";
     }
     // oBox.innerHTML += str;
     console.timeEnd("tag");
 }
</script>

越来越慢,每次循环,都要取出我们的innerhtml,随着代码量的越来越多 inner HTML也越来越多 越来越慢。我们再写代码的时候,尽量减少innerhtml的获取 重新渲染了十次

页面的reflow(回流/重构)

  1. 尽量减少回流 当我们再页面上增加元素 改变元素宽高 放大缩小我们的窗口,改变标签的属性<div></div> 此时页面会重新渲染!
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
</body>
<script>
  var oli = document.getElementsByTagName("li");
  for (var i =0;i<oli.length;i++){
      oli[i].style.backgroundColor = "#f66";
  }
</script>

每次执行循环都会再代码中寻找oli.length属性

for (var i =0,len=oli.length;i<len;i++){
      oli[i].style.backgroundColor = "#f66";
  }

这样提高性能

for (var i =0;olis[i++];){
      oli[i].style.backgroundColor = "#f66";
  }

i=0,执行i++,取出来的值是0,进入循环体,i是1,所以0号元素不会有颜色变化

var arr =[1,2,3];
  console.log(arr[4]);//结果是undefined 在判断语句中 相当于false
for (var i =-1;olis[++i];){
      oli[i].style.backgroundColor = "#f66";
  }

这样就可以,性能最优 但是有缺点 如果 var arr =[1,2,3]; 这样提前结束,数组中没有这六个爷爷才可以使用

  1. 尽量先取到length,然后循环。
for循环也可以这样写
var i=0;
for(;i<5;){
    console.log(1);
    i++;
}

文档流

document.write 将内容写入body的最下边,document.write只会写入一个打开的文档流中,追加到body后边

<body>
  <div>123</div>
</body>
<script>
  document.write("nihao");
</script>

如果想在关闭的文档流中追加,那么

<body>
  <div>123</div>
</body>
<script>
  window.onload = function(){
      document.write("nihao");
  }
</script>

当window的资源加载完毕之后,我们认为 文档流关闭 此时 write会重新打开文档流 覆盖原有内容,上面中出现nihao,document.write()里面可以任意写包括标签,如果要在里面写jsdocument.write("<script>alert(1);<\/script>");需要用到转义\

<body>
  <div>123</div>
</body>
<script>
  document.onclick = function () {
      document.write("<script>alert(1);<\/script>");
  }
</script>

出现123,当点击之后出现弹窗,确定后,123消失。此时只是一个注册事件,不影响文档的加载,代码读取完毕之后,注册的事件还在

阅读更多
文章标签: for循环
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

javascript第六天----for循环

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭