JavaScript循环_动力节点Java学院整理


Posted in Javascript onJune 28, 2017

要计算1+2+3,我们可以直接写表达式:

1 + 2 + 3; // 6

要计算1+2+3+...+10,勉强也能写出来。
但是,要计算1+2+3+...+10000,直接写表达式就不可能了。
为了让计算机能计算成千上万次的重复运算,我们就需要循环语句。
JavaScript的循环有两种,一种是for循环,通过初始条件、结束条件和递增条件来循环执行语句块:

var x = 0;
var i;
for (i=1; i<=10000; i++) {
  x = x + i;
}
x; // 50005000

让我们来分析一下for循环的控制条件:

i=1 这是初始条件,将变量i置为1;
i<=10000 这是判断条件,满足时就继续循环,不满足就退出循环;
i++ 这是每次循环后的递增条件,由于每次循环后变量i都会加1,因此它终将在若干次循环后不满足判断条件i<=10000而退出循环。

练习

利用for循环计算1 * 2 * 3 * ... * 10的结果。

for循环最常用的地方是利用索引来遍历数组:

var arr = ['Apple', 'Google', 'Microsoft'];
var i, x;
for (i=0; i<arr.length; i++) {
  x = arr[i];
  alert(x);
}

for循环的3个条件都是可以省略的,如果没有退出循环的判断条件,就必须使用break语句退出循环,否则就是死循环:

var x = 0;
for (;;) { // 将无限循环下去
  if (x > 100) {
    break; // 通过if判断来退出循环
  }
  x ++;
}

for ... in

for循环的一个变体是for ... in循环,它可以把一个对象的所有属性依次循环出来:

var o = {
  name: 'Jack',
  age: 20,
  city: 'Beijing'
};
for (var key in o) {
  alert(key); // 'name', 'age', 'city'
}

要过滤掉对象继承的属性,用hasOwnProperty()来实现:

var o = {
  name: 'Jack',
  age: 20,
  city: 'Beijing'
};
for (var key in o) {
  if (o.hasOwnProperty(key)) {
    alert(key); // 'name', 'age', 'city'
  }
}

由于Array也是对象,而它的每个元素的索引被视为对象的属性,因此,for ... in循环可以直接循环出Array的索引:

var a = ['A', 'B', 'C'];
for (var i in a) {
  alert(i); // '0', '1', '2'
  alert(a[i]); // 'A', 'B', 'C'
}

请注意,for ... in对Array的循环得到的是String而不是Number。

while

for循环在已知循环的初始和结束条件时非常有用。而上述忽略了条件的for循环容易让人看不清循环的逻辑,此时用while循环更佳。

while循环只有一个判断条件,条件满足,就不断循环,条件不满足时则退出循环。比如我们要计算100以内所有奇数之和,可以用while循环实现:

var x = 0;
var n = 99;
while (n > 0) {
  x = x + n;
  n = n - 2;
}
x; // 2500

在循环内部变量n不断自减,直到变为-1时,不再满足while条件,循环退出。

do ... while

最后一种循环是do { ... } while()循环,它和while循环的唯一区别在于,不是在每次循环开始的时候判断条件,而是在每次循环完成的时候判断条件:

var n = 0;
do {
  n = n + 1;
} while (n < 100);
n; // 100

do { ... } while()循环要小心,循环体会至少执行1次,而for和while循环则可能一次都不执行。

练习

请利用循环遍历数组中的每个名字,并显示Hello, xxx!

请尝试for循环和while循环,并以正序、倒序两种方式遍历。

小结

循环是让计算机做重复任务的有效的方法,有些时候,如果代码写得有问题,会让程序陷入“死循环”,也就是永远循环下去。JavaScript的死循环会让浏览器无法正常显示或执行当前页面的逻辑,有的浏览器会直接挂掉,有的浏览器会在一段时间后提示你强行终止JavaScript的执行,因此,要特别注意死循环的问题。

在编写循环代码时,务必小心编写初始条件和判断条件,尤其是边界值。特别注意i < 100和i <= 100是不同的判断逻辑。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
JS画5角星方法介绍
Sep 17 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
浅析Bootstrap验证控件的使用
Jun 23 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 #Javascript
微信小程序后台解密用户数据实例详解
Jun 28 #Javascript
JavaScript箭头函数_动力节点Java学院整理
Jun 28 #Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 #Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 #Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 #Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 #Javascript
You might like
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
python 队列详解及实例代码
2016/10/18 Python
python查看模块,对象的函数方法
2018/10/16 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
python中PyQuery库用法分享
2021/01/15 Python
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
年会活动策划方案
2014/01/23 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
社区低保工作总结2015
2015/07/23 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书