javascript第六天----for循环

其他 2018-05-27 03:01:26 阅读次数: 0

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次

扫描二维码关注公众号，回复： 1046628 查看本文章

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消失。此时只是一个注册事件，不影响文档的加载，代码读取完毕之后，注册的事件还在

猜你喜欢

转载自blog.csdn.net/lxhby520/article/details/80322335
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022