在 JavaScript 中循环遍历数组

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

const array_name = [item1, item2, ...];
const movies = [Bahubali, RRR, KGF, Pushpa];
//Index values of above elements
Bahubali – [0]
RRR – [1]
KGF – [2]
Pushpa – [3]

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

语法

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

  • 语句 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

更新于: 2022-11-18

488 次查看

启动您的 职业生涯

通过完成课程获得认证

开始
广告

© . All rights reserved.