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预览上传图片发现的问题的解决方法
Nov 25 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 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 5.0对象模型深度探索之绑定
2006/09/05 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
angular.bind使用心得
2015/10/26 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
python爬虫常用的模块分析
2014/08/29 Python
python实现RSA加密(解密)算法
2016/02/17 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
python中的数据结构比较
2019/05/13 Python
python温度转换华氏温度实现代码
2020/12/06 Python
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
外企求职信范文分享
2013/12/31 职场文书
语文教学随笔感言
2014/02/18 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
全陪导游词
2015/02/04 职场文书
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server