JS中的三个循环小结


Posted in Javascript onJune 20, 2017

一、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中的三个循环小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 函数速查表
Feb 07 Javascript
Javascript 判断客户端浏览器类型代码
Mar 01 Javascript
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
Javascript模块化机制实现原理详解
Apr 02 Javascript
详解Vue 方法与事件处理器
Jun 20 #Javascript
Vue Ajax跨域请求实例详解
Jun 20 #Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 #Javascript
详解Angular的8个主要构造块
Jun 20 #Javascript
vue之数据交互实例代码
Jun 20 #Javascript
jquery加载单文件vue组件的方法
Jun 20 #jQuery
Angular.JS中select下拉框设置value的方法
Jun 20 #Javascript
You might like
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
PHP 批量删除数据的方法分析
2009/10/30 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
javascript document.referrer 用法
2009/04/30 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
urllib2自定义opener详解
2014/02/07 Python
在Python中使用元类的教程
2015/04/28 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
python 产生token及token验证的方法
2018/12/26 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
Python如何定义有可选参数的元类
2020/07/31 Python
银行财务部实习生的自我鉴定
2013/11/27 职场文书
《我的第一本书》教学反思
2014/02/15 职场文书
合作协议书范文
2014/08/20 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
评职称个人总结
2015/03/05 职场文书
毕业实习单位意见
2015/06/04 职场文书
法律服务所工作总结
2015/08/10 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
素质教育学习心得体会
2016/01/19 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android