加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > JS > JavaScript基础

JavaScript for 语句

JavaScript基础 2022-06-08 11:17:43小码哥的IT人生shichen

JavaScript for 语句

实例

循环代码块五次：

var text = "";
var i;
for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<p>单击该按钮可循环五次代码块。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var text = "";
  var i;
  for (i = 0; i < 5; i++) {
    text += "The number is " + i + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

页面下方有更多 TIY 实例。

定义和用法

for 语句创建循环，只要条件为真就执行该循环。

只要条件为真，循环就会继续运行。只有当条件变为假时它才会停止。

JavaScript 支持不同类型的循环：

  1. for - 多次循环代码块
  2. for/in - 遍历对象的属性
  3. for/of - 循环遍历可迭代对象的值
  4. while - 在指定条件为真时循环代码块
  5. do/while - 循环一次代码块，然后在指定条件为真时重复循环

提示：请使用 break 语句跳出循环，使用 continue 语句跳过循环中的某个值。

浏览器支持

语句 Chrome IE Firefox Safari Opera
for 支持 支持 支持 支持 支持

语法

for (statement 1; statement 2; statement 3) {
  code block to be executed
}

参数值

参数 描述
statement1

可选。在循环（代码块）开始之前执行。通常此语句用于初始化计数器变量。如需初始化多个值，请用逗号分隔每个值。

注释：该参数可以省略。但是，不要省略分号 ";"
statement2

可选。定义运行循环（代码块）的条件。通常此语句用于评估计数器变量的条件。如果返回 true，循环将重新开始，如果返回 false，循环将结束。

注释：该参数可以省略。但是，不要省略分号 ";"。此外，如果省略此参数，则必须在循环内提供 break。否则循环将永远不会结束，这将使您的浏览器崩溃。
statement3

可选。每次执行循环（代码块）后执行。通常此语句用于递增或递减计数器变量。

注释：这个参数可以省略（例如增加/减少循环内的值）。

技术细节

JavaScript 版本： ECMAScript 1

更多实例

示例代码：

循环遍历数组的索引，从 cars 数组中收集汽车名称：

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<p>单击该按钮可按升序循环遍历数组的索引。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var cars = ["BMW", "Volvo", "Saab", "Ford"];
  var text = "";
  var i;
  for (i = 0; i < cars.length; i++) {
    text += cars[i] + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

例子解释：

  1. 首先，我们在循环开始之前设置一个变量（var i = 0;）
  2. 然后，我们定义循环运行的条件。只要变量小于数组的长度（即 4），循环就会继续
  3. 每次循环执行时，变量加一 (i++)
  4. 一旦变量不再小于 4（数组的长度），条件为假，循环结束

示例代码：

在第一个参数中初始化多个值：

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i;
for (i = 0, len = cars.length, text = ""; i < len; i++) { 
  text += cars[i] + "<br>";
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<p>单击该按钮可遍历名为“cars”的数组的索引。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var cars = ["BMW", "Volvo", "Saab", "Ford"];
  var i;
  for (i = 0, len = cars.length, text = ""; i < len; i++) {
    text += cars[i] + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

省略第一个参数（在循环开始之前设置值）：

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<p>单击按钮来循环遍历名为“cars”的数组的索引，从索引号 2 开始。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var cars = ["BMW", "Volvo", "Saab", "Ford"];
  var i = 2;
  var len = cars.length;
  var text = "";
  for (; i < len; i++) {
    text += cars[i] + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

使用 continue 语句 - 循环代码块，但跳过 "3" 这个值：

var text = ""
var i;
for (i = 0; i < 5; i++) {
  if (i == 3) {
    continue;
  }
  text += "The number is " + i + "<br>";
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<p>单击按钮来循环遍历名为“cars”的数组的索引，但跳过 "3" 这个值：。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var text = ""
  var i;
  for (i = 0; i < 5; i++) {
    if (i == 3) {
      continue;
    }
    text += "The number is " + i + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

使用 break 语句 - 循环一段代码，但当变量 i 等于 "3" 时退出循环：

var text = ""
var i;
for (i = 0; i < 5; i++) {
  if (i == 3) {
    break;
  }
  text += "The number is " + i + "<br>";
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<p>单击该按钮可进行带中断的循环。循环应该输出数字 0 到 4，但是当变量 i 等于“3”时，break 语句退出循环。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var text = "";
  var i;
  for (i = 0; i < 5; i++) {
    if (i === 3) {
      break;
    }
    text += "The number is " + i + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

省略第二个参数。在这个例子中，我们也使用 break 语句在 i 等于 "3" 时退出循环（如果省略第二个参数，则必须在循环内提供一个 break。否则循环将永远不会结束，您的浏览器将奔溃）：

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; ; i++) {
  if (i == 3) {
    break;
  }
  text += cars[i] + "<br>";
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<p>单击该按钮可循环遍历拥有四个元素的数组的索引，但当 i 等于“3”时退出循环。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var cars = ["BMW", "Volvo", "Saab", "Ford"];
  var text = "";
  var i;
  for (i = 0;; i++) {
    if (i == 3) {
      break;
    }
    text += cars[i] + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

按降序循环遍历数组的索引（负递增）：

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = cars.length - 1; i >= 0; i--) {
  text += cars[i] + "<br>";
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<p>单击这个按钮可按降序循环遍历数组的索引。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var cars = ["BMW", "Volvo", "Saab", "Ford"];
  var text = "";
  var i;
  for (i = cars.length - 1; i >= 0; i--) {
    text += cars[i] + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

省略最后一个参数，并在循环内递增值：

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var len = cars.length;
for (; i < len;) { 
  text += cars[i] + "<br>";
  i++;
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<p>在本例中，我们省略了最后一个参数，并在循环内增加了计数器变量。</p>
<p>单击这个按钮可按升序循环遍历数组的索引。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var cars = ["BMW", "Volvo", "Saab", "Ford"];
  var i = 0;
  var len = cars.length;
  var text = "";
  for (; i < len;) {
    text += cars[i] + "<br>";
    i++;
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

循环遍历 NodeList 对象的节点并更改列表中所有 <p> 元素的背景颜色：

var myNodelist = document.getElementsByTagName("P");
var i;
for (i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.backgroundColor = "red";
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<h2>This is a h2 element</h2>
<p>This is a p element</p>
<p>This is also a p element.</p>
<p>This is also a p element - 单击按钮可更改此文档中所有 p 元素的背景颜色。</p>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
  var myNodelist = document.getElementsByTagName("P");
  var i;
  for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
  }
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

嵌套循环的例子（循环内的循环）：

var text = "";
var i, j;
for (i = 0; i < 3; i++) {
  text += "<br>" + "i = " + i + ", j = "; 
  for (j = 10; j < 15; j++) {
    document.getElementById("demo").innerHTML = text += j + " ";
  }
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<p>在这个例子中，我们有两个循环。因为有一个循环在另一个循环内，所以我们称其为嵌套循环。第一个循环通常称为“外循环”，第二个循环通常称为“内循环”，因为它位于第一个外循环内。</p>
<p>外循环先执行，每执行一次外循环，内循环也将执行。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var text = "";
  var i, j;
  for (i = 0; i < 3; i++) {
    text += "<br>" + "i = " + i + ", j = ";   
    for (j = 10; j < 15; j++) {
      document.getElementById("demo").innerHTML = text += j + " ";
    }
  }
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

相关页面

JavaScript 教程：JavaScript For 循环

JavaScript 参考手册：JavaScript for ... in 语句

JavaScript 参考手册：JavaScript break 语句

JavaScript 参考手册：JavaScript continue 语句

JavaScript 参考手册：JavaScript while 语句

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024