HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

在 Javascript 中循环遍历数组

javascriptfront end technologyweb development

数组是一种线性数据结构，能够存储不同数据类型的元素。数组也被定义为有序集合。在数组中，每个值都称为一个元素，可以用索引号来标识。

const array_name = [item1, item2, ...];
const movies = [Bahubali, RRR, KGF, P​​ushpa];
//上述元素的索引值
Bahubali – [0]
RRR – [1]
KGF – [2]
Pushpa – [3]

循环是一种编程元素，循环中会定义一系列指令，并会持续迭代，直到满足循环中的条件。编码中会出现重复的情况，在这种情况下，我们使用循环来节省时间并减少错误。

语法

for (statement 1; statement 2; statement 3) {
    // 要执行的程序块
}

  • 语句 1 在执行程序块之前只会执行一次。

  • 语句 2 将描述程序块执行的条件。

  • 语句 3 将在每次执行程序块后执行。

while 循环

while 循环 可用于 JavaScript 数组。循环将检查括号 () 内声明的条件；如果满足条件，则返回 true，如果不满足条件，则返回 false，循环终止。

在数组中，如果希望循环迭代到最后一个元素，我们可以使用 length 属性

示例

在下面的示例中，我们在数组上使用 while 循环 和 length 属性到达数组末尾。

<html>
   <head>
      <title>Using While loop in JavaScript array</title>
   </head>
   <body>
      <script>
         const emp_id = [1180, 1181, 1182, 1183, 1184, 1185, 1186];
         let i = 0;
         while (i < emp_id.length) {
            document.write(emp_id[i]);
            document.write("<br>");
            i++;
         }
      </script>
   </body>
</html>

输出

上述脚本的输出将是 −

1180
1181
1182
1183
1184
1185
1186

do…while 循环

此 do…while 循环与 while 循环几乎相似。do…while 循环将在执行循环中提到的条件之前执行主体，因此比 while 循环多执行一次。

示例

在下面的程序中，我们对数组执行 do…while 循环以迭代每个元素。

<!DOCTYPE html>
<html>
   <head>
      <title>Using do...while loop in JavaScript array</title>
   </head>
   <body>
      <script>
         const emp_id = [1180, 1181, 1182, 1183, 1184, 1185, 1186];
         let i = 0;
         do {
            document.write(emp_id[i]);
            document.write("<br>");
            i++;
         }
         while (i < emp_id.length);
      </script>
   </body>
</html>

输出

上述脚本的输出将是 −

1180
1181
1182
1183
1184
1185
1186

示例

让我们考虑这种场景，我们给出索引变量i = 7的输入，并且它会在停止之前运行一次循环，即使索引变量不在数组中，并将输出返回为undefined(未定义)。

<!DOCTYPE html>
<html>
   <head>
      <title>Using do...while loop in JavaScript array</title>
   </head>
   <body>
      <script>
         const emp_id = [1180, 1181, 1182, 1183, 1184, 1185, 1186];
         let i = 0;
         do {
            document.write(emp_id[i]);
            document.write("<br>");
            i++;
         }
         while (i < emp_id.length);
      </script>
   </body>
</html>

输出

上述脚本的输出将是 −

1180
1181
1182
1183
1184
1185
1186

for 循环

在 for 循环中，初始化、条件和迭代都将在循环的括号内声明。初始化一个值以迭代地执行循环内的语句，直到条件不满足为止。

示例

在下面的示例中，我们对数组执行 for 循环。它会检查条件，然后开始执行循环内的代码，直到满足条件为止。

<html>
   <head>
      <title>Using for loop in JavaScript array</title>
   </head>
   <body>
      <script>
         const emp_id = [100, 200, 300, 400, 500, 600, 700];
         for (let i = 0; i < emp_id.length; i++) {
            document.write(emp_id[i]);
            document.write("<br>");
         }
      </script>
   </body>
</html>

输出

上述脚本的输出将是 −

100
200
300
400
500
600
700

for…in 循环

for…in 循环是一种更简单的数组循环方法，因为它提供了键，我们可以使用该键从数组中检索数据。

示例

在下面的示例中，我们在 JavaScript 数组中使用了 for…in 循环。

<html>
   <head>
      <title>Using for...in loop in JavaScript array</title>
   </head>
   <body>
      <script>
         const emp_id = [7, 10, 18, 17, 45, 99, 333];
         for (i in emp_id) {
            document.write(emp_id[i]);
            document.write("<br>");
         }
      </script>
   </body>
</html>

输出

上述脚本的输出将是 −

7
10
18
17
45
99
333

for…of 循环

for…of 循环 是数组内部循环的最简单方法之一。它将直接获取元素，而不是获取键。而且它的语法与 for…in 循环类似。

示例

在此示例中，我们在 JavaScript 数组中使用了 for…of 循环。在这里，我们不再需要使用索引来获取数组中的每个元素，因为这会获取数组的每个元素。

<html>
   <head>
      <title>Using for...in loop in JavaScript array</title>
   </head>
   <body>
      <script>
         const prime_num = [2, 3, 5, 7, 11, 13, 17, 19];
         for (output of prime_num) {
            document.write(output);
            document.write("<br>");
         }
      </script>
   </body>
</html>

输出

上述脚本的输出将是 −

2
3
5
7
11
13
17
19

相关文章

打印 下一节 ❯