Molerose

Javascript DOM 编程艺术 (笔记No.4 - 循环语句)
学习一种新的程序设计语言看起来可能很难,但事实却并非如此。DOM脚本看起来似乎比CSS更复杂,可只要领悟了它的语法...
扫描右侧二维码阅读全文
09
2018/09

Javascript DOM 编程艺术 (笔记No.4 - 循环语句)

学习一种新的程序设计语言看起来可能很难,但事实却并非如此。DOM脚本看起来似乎比CSS更复杂,可只要领悟了它的语法,你就会发现自己又掌握了,一样功能强大的Web开发工具。归根结底,代码都是思想和概念的体现。


循环语句

if 语句或许是最重要,最有用的条件语句了,他的唯一不足是无法完成重复性的操作。

在语句里,包含在花括号里的代码块只能执行一次

如果需要多次执行同一个代码块,就必须使用循环语句

循环语句可以让我们反复多次执行同一段代码,

工作原理

它们的工作原理几乎一样:只要给定的条件仍能得到满足,包含在循环语句里的代码块就将重复的执行下去,一旦给定条件的求值结果不是true,循环也就到此为止

while 循环

while 循环与if语句非常相似,他们的语法几乎完全一样

不过while循环与if语句唯一的区别是:只要给定的求值结果是true,包含在花括号里的代码将反复的执行下去

语法

while (condition) {
    statements;
}

whild 循环实例

var count = 1;
while ( count < 11) {
    alert (count);
    count++;
}
// alert 最终弹出的内容为10

代码分析

  1. 创建数值变量 count 并赋值为 1
  2. 以 count<1 (意思是“只要变量count的值小于1,就重复执行这个循环”) 为条件创建一个 while 循环
  3. 在 while 循环的内容不,用 ++ 操作符对变量 count 的值执行加1操作,而这一操作将重复10次

注意

这里的关键是在while循环的内部必须发生一些会影响循环控制条件的事情。

上述示例中,我们在while循环的内部对变量count的值进行了加1操作,而这将导致循环控制条件在经过10次循环后的求值结果变成false。

如果我们增加变量count的值,这个while循环将永远执行下去

do...while循环

类似与if语句的情况,while循环的花括号部分所包含的语句有可能不被执行,因为对循环控制条件的求值将发生在每次循环开始之前,所以如果循环控制条件的首次求值结果是false,哪些代码将以此也不会被执行。

在某些场合,我们希望那些包含在循环语句内部的代码至少被执行一次

这时,do循环是我们最佳的选择,语法如下

do {
    statements;
} while (condition);

这与while循环非常的相似,但有个显而易见的区别:对于循环控制条件的求值发生在每次循环结束之后。

因此,即使循环控制条件的首次求值结果是false,包含在花括号里面的语句也至少会被执行一次。

将上述中提到的 while 循环改写如下方式

var count = 1;
do {
    alert(count);
    count++
} while (count < 11);
// alert 所弹出的值为 10 

如下代码则将 do...while 循环展现的淋漓尽致

var count = 1;
do {
    alert(count);
    count++;
} while (count < 1)

// 可与单纯的while循环进行比较

var count = 1;
while (count < 1) {
    alert(count);
    count++
}

代码分析

上述do循环里,循环控制条件求值结果永远不为true(count<1):变量count的初始值是1,所以它在这里永远不会小于1。

可是因为do循环的循环控制条件出现在花括号部分之后,所以包含在这个都循环内部的代码还是执行了一次。

也就是说,仍将看到一跳alert信息。

这些语句执行完之后,变量count的值将是2,尽快循环控制条件的求值结果是false

for 循环

用for循环来重复执行一些代码也很方便,它类似于while循环。

事实上,for循环只是刚才介绍的while循环的一种辩题。

仔细观察,其实可以改写为下属例子

initialize; // 初始化
while (condition) {
    statements;
    increment; // 增量
}

而for循环不过是进一步改写为如下所示的紧凑形式而已

for (initial condition; test condition; alert condition) {
    statements;
}

用for循环来重复执行一些代码的好处是循环控制结构更加清晰。

与循环有关的所有内容都包含在for语句的圆括号部分。

for (var count = 1; count < 11; count++) {
    alert(count)
}
// alert 最终所弹出的数值为10

for 循环最常见的用途之一是对某个数组的全体元素进行遍历处理。

这往往需要用到数组的 array.length 属性,这个属性可以告诉我们在给定数组里面的元素个数。

var beatles = Array("John","Paul","George","Ringo");
for (var count = 1; count < beatles.length; count++) {
    alert(beatles[count]);
}
// alert 所弹出的信息分别是beatle数组中的四个值
Last modification:September 9th, 2018 at 05:27 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment