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 showModalDialog模态对话框使用说明
Dec 31 Javascript
javascript中indexOf技术详解
May 07 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
JS前端笔试题分析
Dec 19 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 Javascript
微信小程序实现录音Record功能
May 09 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
php中如何防止表单的重复提交
2013/08/02 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
详解php中 === 的使用
2016/10/24 PHP
jquery中:input和input的区别分析
2011/07/13 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
js选项卡的实现方法
2015/02/09 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
物流仓储实习自我鉴定
2013/09/25 职场文书
外语学院毕业生的自我鉴定
2013/11/28 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
Mysql 用户权限管理实现
2021/05/25 MySQL
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers