如何使用 for...in 语句在 JavaScript 中循环遍历数组?
我们使用 JavaScript 的 for...in 语句来循环遍历数组或对象的可枚举属性。它是 for 循环的变体。与 JavaScript 中的其他循环构造不同，for...in 循环不必担心迭代次数。这是因为迭代大小是根据对象的可枚举属性或数组中的元素数量固定的。
JavaScript 中的"for...in"语句
for...in 循环迭代对象的所有可枚举属性。使用简单赋值运算符或默认初始化程序分配的所有属性都被视为可枚举属性。
语法
for(var num in numbers){
// 语句
}
这将创建一个变量 num ，该变量迭代数组 numbers 中的所有元素。此 num 逐一获取存储在 numbers 数组中的元素的索引。
让我们通过一个例子看看 for...in 循环的工作原理。
示例 1
在这里，我们将创建一个字符串数组，然后使用 for...in 循环对其进行迭代。让我们看看相同的代码。
<!DOCTYPE html> <html> <body> <h3> for...in loop in JavaScript</h3> <div id="result"></div> <script> var arr = ["xyz", "abc", "pqr"]; var text = ""; for(var str in arr){ text += arr[str] + ","; } document.getElementById("result").innerHTML = text; </script> </body> </html>
在上面的代码中，str分别取值 0、1 和 2，用于检索数组的元素。
请注意索引顺序取决于实现。这意味着不能保证索引以正确的顺序遍历。由于这个原因，不建议将 for...in 循环与数组一起使用。应该使用不同的循环构造，如传统的 for 循环或 for...of 循环。
for...in 循环虽然可用，但与对象而不是数组配合使用效果更好。这是因为循环变量逐个取键的值，使对象的迭代非常容易。
语法
for(var num of numbers){
// 语句
}
这将创建一个变量 num，该变量迭代数组 numbers 中的所有元素。这个 num 逐个获取存储在数字数组中的元素的值。
以下是如何在 JavaScript 中使用 for...of 循环处理对象的示例。
示例 2
在这里，我们将创建一个包含不同数据类型的元素数组。我们将使用 for...of 循环来迭代该数组。
<!DOCTYPE html> <html> <body> <h3> for...of loop in JavaScript</h3> <div id="result"></div> <script> var arr = ["Jane Doe", 2 , 59.57]; var text = "The elements of the array are <br><br>"; for(var ele of arr){ text += ele + "<br>"; } document.getElementById("result").innerHTML = text; </script> </body> </html>
在上面的代码中，正如在输出中看到的，变量 ele 采用了数组中现有元素的值。
我们还可以使用 Array.prototype.forEach() 方法来遍历数组。 forEach() 的参数是一个针对数组的所有元素执行的函数。
语法
const arr = ["Jane Doe", 2, 59.57]
arr.forEach(function fun(ele){
// 语句
}
请注意，"原型"被替换为数组的名称，在本例中为 arr。函数 fun 有一个参数 ele，它逐一获取存储在数组 arr 中的元素的值。
以下是如何在 JavaScript 中将 forEach() 方法与数组一起使用的示例。
示例 3
在这里，我们将创建一个包含不同数据类型的元素数组。我们将使用 forEach() 方法对其进行迭代数组。
让我们看看相同的代码。
<!DOCTYPE html> <html> <body> <h3> forEach() method in javascript</h3> <div id="result"></div> <script> var arr = ["Jane Doe", 2 , 59.57]; var text = "The elements of the array are <br><br>"; arr.forEach(function fun(ele){ text += ele + "<br>"; }) document.getElementById("result").innerHTML = text; </script> </body> </html>
在上面的代码中，正如在输出中看到的，变量 ele 取数组中现有元素的值。
结论
for...in、for...of 和 forEach() 结构通过提供传统 for a 循环急需的变体，使我们的生活更轻松。
