每天3小时学前端之JS-第12天-for循环语句

此系列体验视频教程

for循环语句

基本语法

for语句是循环命令的另一种形式，可以指定初始化表达式、终止条件，递增表达式。它的格式如下。

for (初始化表达式; 条件; 递增表达式) {
  语句
}

for语句后面的括号里面用分号分隔开的有三部分。

初始化语句(initial)：确定循环变量的初始值，只在循环开始时执行1次。
条件表达式(condition)：每轮循环开始时，都要执行这个条件表达式，只有值为true，才继续进行循环。
递增表达式(step 步进)：每轮循环的最后一个操作，通常用来递增循环变量。

初始化变量i
→ (条件成立 → 执行循环体 → 变量i递增)
→ (条件成立 → 执行循环体 → 变量i递增)
→ (条件成立 → 执行循环体 → 变量i递增)
→ (条件不成立 → 跳出for循环)

for (var i = 1; i <= 10; i++) {
  alter(i);
}

所有for循环，都可以改写成while循环。

var i = 1;
while (i <= 10) {
  alter(i);
  i++;
}

for语句的更多写法

for语句的三部分，可以省略任何一个，也可以全部省略。

var i = 1
for (; i <= 3; i++) {
  console.log(i);
}

var i = 1
for (; i <= 3; ) {
  console.log(i++);
}

三部分全部省略，就是无限循环

for ( ; ; ){
  console.log('Hello World');
}

请注意 for 的两个 ; 必须存在，否则会出现语法错误。

练习

打印乘法口诀

var str = ''
for( var i = 1; i <= 9; i++) {
  for(var j = 1; j <= i; j++) {
    str += j + '*' + i + '=' + (i * j) + ' '
  }
  str += '\n'
}
console.log(str);

打印斐波那契数列

// 0 1 1 2 3 5 8 13 21
var current = 0
var next = 1
var temp
var n = 5
for (var i = 0; i < n - 1; i++) {
  temp = current
  current = next
  next += temp
}
console.log(current);

作业

使用for语句打印空心的三角形

     *
    * *
   *   *
  *     *
 *       *
***********