JS中的三个循环小结

2024-02-18 09:46:51

一、for循环

　　四部曲:

　　1、设置初始值 var i = 0

　　2、设置循环执行条件 i < 5

　　3、执行循环体中的内容{ [循环体] } 包起来的部分

　　4、每一轮循环完成后都执行我们的i++累加操作

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

　　break/continue:在循环体中遇到这两个关键字，循环体中的后面的代码就不在执行了

　　　　break：在循环体中，出现break，整个循环就直接的结束了，i++最后的这个累加的操作也不执行了

　　　　continue:在循环体中，出现continue，当前这一轮的循环就结束了，继续下一轮的循环，i++继续执行　

for(var i = 0;i<10;i++){
 if(i<=5){
  i+=2;
  continue;
 }
 i+=3;
 break;
 console.log(i)//不执行
}
console.log(i)//9

二、for in 循环

　　用来循环一个对象中的属性名和属性值的　

var object = {
 name:'小李',
 age:18,
 height:'170cm',
 hobby:'敲代码'
}
//对象中有多少组键值对，就循环几次
//顺序问题:首先循环数字的属性名(按照从小到大),再把剩下的属性名按照我们写得顺序循环
for(var key in object){
　　console.log(key);//每一次循环获取的属性名
　　console.log(object[key])// 获取属性值 在for in 中只能通过对象名[key]来获取 不能写obj.key
}

　　案例：表格隔行换色　（三元运算符满足条件如果有多个执行，可以加上括号，然后使用逗号分隔）

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  body,div,ul,li{
   margin:0;
   padding: 0;
   font-family: Arial;
   font-size:12px;
  }
  ul li{
   list-style:none;
  }
  #list{
   margin:10px auto 0;
   padding:10px;
   width:500px;
   border:1px solid #ddd;
   border-radius:10px;
   /*background: -webkit-linear-gradient(top left,#31b0d5,#67b168,#ac2925)*/
  }
  #list li{
   height:30px;
   line-height: 30px;
   cursor:pointer;
  }
  .c1{
   background:#ddd;
  }
  .c2{
   background: #a6e1ec;
  }
  .c3{
   background: #67b168;
  }
 </style>
</head>
<body>
 <div id='list'>
  <ul>
   <li>11111111111111111111111111</li>
   <li>22222222222222222222222222</li>
   <li>33333333333333333333333333</li>
   <li>44444444444444444444444444</li>
   <li>55555555555555555555555555</li>
   <li>66666666666666666666666666</li>
   <li>11111111111111111111111111</li>
   <li>22222222222222222222222222</li>
   <li>33333333333333333333333333</li>
   <li>44444444444444444444444444</li>
   <li>55555555555555555555555555</li>
   <li>66666666666666666666666666</li>
  </ul>
 </div>
 <script type='text/javascript'>
  //原理：操作所有的li，让按照奇偶行的规律，改变他的class样式的属性值，奇数行是c1，偶数行是c2
  //通过元素的标签名获取一组元素
  // document.getElementsByTagName('元素的标签名字')
  //在整个文档中（获取的范围，上下文），我们通过元素的标签名来获取一组元素
  //获取整个文档的所有的li，他是一个集合，我们把这个集合叫做类数组（类似于数组）
  //并且类数组是对象数据类型的
  // var oLis = document.getElementsByTagName('li');
  //索引:就是代表当前是第几个元素的位置下标，索引是从0开始的
  //length：代表获取的集合的长度，或者是当前获取了多少li
  //通过dom方法获取到的类数组可以通过用.item(索引)来获取某一个
  var oList = document.getElementById('list');
  var oLis = oList.getElementsByTagName('li');
  for(var i = 0;i<oLis.length;i++){
   var oLi = oLis[i];
   i%2===0?oLi.className = 'c1':oLi.className='c2'
  }
 </script>
</body>
</html>

以上所述是小编给大家介绍的JS中的三个循环小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

js 实现获取name 相同的页面元素并循环遍历的方法

实例如下: <input type="hidden" name="blues" value="蓝色浏阳河之最"> <input type="hidden" name="blues" value="蓝色浏阳河之亲"> <input type="hidden" name="blues" value="蓝色浏阳河之
JavaScript中关于for循环删除数组元素内容时出现的问题

昨天用for循环进行数组去重的时候出现的问题, 首先,用双重for循环把前一个和所有后面的元素进行比较,如果相等则删除. 但是,如果数组里面有三个以上连续相等的元素的时候,就会出现问题. var arr = [1,1,1,2,2]; for(var i=0; i<arr.length-1; i++){ for(var j=i+1; j<arr.length; j++){ if(arr[i] === arr[j]){ arr.splice(j,1); } } } document.write(&
JavaScript中for循环的几种写法与效率总结

前言对于for循环,相信大家再常用不过了.但是这回说下for循环是因为看代码时我居然没有看明白一个for循环的意思,真是不应该啊. 这个for循环是这么写的: for (var i = 0, rule; rule = rules[i++];) { //do something } 这个写法是什么意思呢?后面再说,现卖个关子,这个写法我感觉还是挺好的. for循环写法对效率的影响说上面那段代码之前,先说一下for循环的效率问题.在接触js时关于for循环的写法和对效率影响的文章挺不少的.但总的
js实现为a标签添加事件的方法(使用闭包循环)

本文实例讲述了js实现为a标签添加事件的方法.分享给大家供大家参考,具体如下: 以示例说明: 实现效果:循环为带有ml-praise样式类的a标签添加事件,并且在点击a标签后,相应的数量增加1. Html结构如下所示: <ul> <li><a href="javascript:;" class="ml-praise">数量:<span class="ding-num">100</span>
Javascript中for循环语句的几种写法总结对比

前言 for循环我们在js遍历对象或数组时都会有用到了,今天我们一起来看一些关于for循环的一些使用例子了,具体的操作细节如下文介绍. 一般写法如下: for(var i = 0;i< arr.length;i++) { var a = arr[i]; //... } 这就是一个常见的,正序循环的for循环.这样写的缺点大家都明白:每次都从arr里取length与i来对比,浪费性能(而且,要是arr的长度是动态变化的,就会出现死循环).改进这个循环的办法是用变量保存arr.length: for
原生js实现无限循环轮播图效果

知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量 list.style.left=newLeft+"px";//当前的偏移值=新的偏移值 //以偏移的距离来判断是否跳回第一张和最后一张 if(newLeft>-600){ list.style.left=-3000+"px
JS 循环li添加点击事件（闭包的应用）

废话不多说了,直接给大家贴代码了,具体代码如下所述: var aLi = document.querySelectorAll('.article-tab li'); for (var i = 0; i <= aLi.length; i++) { (function(){ var p = i aLi[i].onclick = function() { alert(p); } })(); } 以上所述是小编给大家介绍的JS 循环li添加点击事件 (闭包的应用),希望对大家有所帮助,如果大家有任何疑问
js实现无缝循环滚动

本文实例为大家分享了js无缝循环滚动实现代码,供大家参考,具体内容如下 1.图片格式:260*400. 2.使用循环定时器轻松实现 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> </head> <style type="text/css"&
javaScript如何跳出多重循环break、continue

先来说说break和continue之间的区别摘自JavaScript高级程序设计 for(var i=0;i<10;i++){ if(i>5){ break; } } console.log(i); ---6 •当i=5和10的时候,会执行到break,并退出循环 for(var i=1;i<10;i++){ if(i>5){ continue; } num++; } console.log(num); ---4 var num=0; for(var i=1;i<10;i
JS中的三个循环小结

一.for循环四部曲: 1.设置初始值 var i = 0 2.设置循环执行条件 i < 5 3.执行循环体中的内容{ [循环体] } 包起来的部分 4.每一轮循环完成后都执行我们的i++累加操作 for(var i = 0;i<5;i++){ console.log(i) } break/continue:在循环体中遇到这两个关键字,循环体中的后面的代码就不在执行了 break:在循环体中,出现break,整个循环就直接的结束了,i++最后的这个累加的操作也不执行了 continue:在循
JS中图片压缩的方法小结

首先想一想我们有哪些需求?大多时候我们需要将一个File对象压缩之后再变为File对象传入到远程图片服务器:有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程数据库:有时候后它还有可能是一块canvas画布,或者是一个Image对象,或者直接就是一个图片的url地址,我们需要将它们压缩上传到远程:面对这么多的需求,王二索性画了一张图: Alt text 二.解决办法如上图所示,王二一共写了七个方法,基本覆盖了JS中大部分文件类型的转换与压缩,其中: 1. url
JS中的reduce()方法使用小结

目录一.语法二.实例三.其他相关方法过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce() 的用法. 一.语法 arr.reduce(function(prev,cur,index,arr){ ... }, init); 其中, arr 表示原数组: prev 表示上一次调用回调时的返回值,或者初始值 init; cur 表示当前正在处理的
JS中数组常用的循环遍历你会几种

前言数组和对象作为一个最基础数据结构,在各种编程语言中都充当着至关重要的角色,你很难想象没有数组和对象的编程语言会是什么模样,特别是 JS ,弱类型语言,非常灵活.本文带你了解常用数组遍历.对象遍历的使用对比以及注意事项. 数组遍历随着 JS 的不断发展,截至 ES7 规范已经有十多种遍历方法.下面按照功能类似的方法为一组,来介绍数组的常用遍历方法. for.forEach.for ...of const list = [1, 2, 3, 4, 5, 6, 7, 8,, 10, 11]; f
浅谈js中的三种继承方式及其优缺点

第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = 'yellow'; this.view = function(){ return this.hair + ',' + this.eye + ',' + this.skin; } } //子类 function man(){ this.feature = ['beard','strong']; } man.pr
js中less常用的方法小结

1.color 解析颜色把代表颜色的字符串转换为颜色值 @c:'#000' .box{ background:color(@c) } 2.data-uri 把我们需要使用的素材图片转化成BASE64编码 ,项目中尤其是移动端的项目,节省了图片的加载时间,是图片优化的一个手段:LESS对于大图片是不能转码的,我们可以使用BASE64工具转码(tool.css-js.com) 项目中慎用,当你在移动端项目中有一些大图实在没有办法处理了的情况下在使用BASE64. @c:'#000' @url:'.
浅谈JS中的三种字符串连接方式及其性能比较

工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题,在JS中处理这类问题一般有三种方法,这里将它们一一列出顺便也对它们的性能做个具体的比较. 第一种方法用连接符"+"把要连接的字符串连起来: str="a"; str+="b"; 毫无疑问,这种方法是最便捷快速的,如果只连接100个以下的字符串建议用这种方法最方便. 第二种方法以数组作为中介用 join 连接字符串: var arr=new Array(); arr.push(a);
C语言中的三种循环语句

目录一.while循环二.do while 循环三.for 循环一.while循环 while即:首先检查启动循环的条件是否满足,当条件满足时,不断地重复循环体内的语句,直到不满足条件就退出. while循环基本形式: while(条件) { <循环体>; <循环体>; } eg: 1 //输入任意个int型,整数并判断其位数#include int main() { int x; intn=0; scanf("%d",&x); n++; x /
JS中闭包的经典用法小结(2则示例)

本文实例总结了JS中闭包的经典用法.分享给大家供大家参考,具体如下: 闭包这个东西,网上有很多介绍资料.个人看了很多,还是一知半解.这里不做理论介绍,直接给出2个例子. 代码1:记录函数被调用的次数 function a() { var i = 0; function b() { return ++i; } return b; } var c = a(); c();//1 c();//2 这种方式类似C语言中的private static变量,能够保持局部变量的内存不释放. 代码2:正确给DOM
js中forEach，for in，for of循环的用法示例小结

本文实例讲述了js中forEach,for in,for of循环的用法.分享给大家供大家参考,具体如下: 一.一般的遍历数组的方法: var array = [1,2,3,4,5,6,7]; for (var i = 0; i < array.length; i++) { console.log(i,array[i]); } 二.用for in的方遍历数组,得到的是索引 var array = [1,2,3,4,5,6,7]; for(let index in array) { console

JS中的三个循环小结

相关推荐

随机推荐