在 JavaScript 中迭代数组的4种方法比较

如果您已经了解 javascript 数组的基础知识，那么是时候通过更高级的主题将您的技能提升到一个新的水平。在本系列教程中，您将探索在 JavaScript 中使用数组进行编程的中级主题。

迭代或遍历数组是我们几乎在涉及使用数组的每个项目中都必须做的事情。您可能需要遍历数组的原因有很多，例如将数组数据显示为输出或对其进行转换。

有许多方法可用于在 javaScript 中迭代数组。在本教程中，我们将详细了解它们的优缺点。

方法	优势	坏处
for loop	可以提前退出break，使用异步代码，通用浏览器支持	冗长且有点容易出错
forEach() method	简洁易读	没有异步支持，没有提前退出break
for...of loop	与其他可迭代类型一起工作，允许提前退出，语法减少错误	对旧浏览器的支持较少
for...in loop	对稀疏数组有效，允许提前退出	可能会返回意外的继承元素

方法	带中断和继续的流量控制？	使用异步代码？	浏览器支持	笔记
for loop	是的	是的	所有浏览器	更冗长的语法，差一错误
forEach() method	不	不	现代浏览器	简洁并在其他功能之后链接（即。map）
for...of loop	是的	是的	现代浏览器	简单的语法减少错误
for... in loop	是的	是的	所有浏览器	对稀疏数组有效，可以返回意外的（继承的）元素

访问数组元素的基础知识

让我们从使用索引访问数组元素的基础知识开始。JavaScript 中的数组索引从 0 开始。这意味着第一个元素可以通过array_name[0]在代码中使用来访问。类似地，对于包含元素的数组n，最后一个元素可以通过使用array_name[n - 1].

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];
let first = animals[0];
let last = animals[4];
console.log(first);
// Outputs: Fox 
console.log(last);
// Outputs: Zebra

使用for循环迭代

遍历数组的最常见方法之一是循环for。循环for使用值 0 初始化我们的迭代变量以从第一个元素开始循环。因为我们要遍历整个数组，所以我们需要计算数组的长度，这很容易用属性来完成length。我们数组中的最后一个元素将可以通过使用访问array_name[length - 1]。

以下代码片段向我们展示了如何使用循环按顺序遍历数组for：

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];
let animal_count = animals.length;
for(let i = 0; i < animal_count; i++) {
  console.log(animals[i]);
}
/* Outputs: 
Fox 
Dog 
Lion 
Cat 
Zebra 
*/

请注意我们如何使用小于运算符 ( <) 而不是小于或等于运算符 ( <=) 作为我们的循环结束条件。

for在遍历数组时使用循环的两个优点是它得到广泛支持，并且允许您通过break和continue语句控制循环的流程。您可以在找到所需内容后立即退出循环。for当您处理异步代码时，循环也能很好地工作。

缺点是它有点冗长，你很可能偶尔会犯一个错误。

forEach()使用方法迭代

您还可以使用内置forEach()方法在 JavaScript 中迭代数组。此方法接受一个回调函数作为其参数，该函数对每个数组元素执行一次。回调函数可以在别处定义，可以是内联函数，也可以是箭头函数。

回调函数可以接受三个不同的参数：

当前元素本身
当前元素的索引
forEach()我们调用方法的数组

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];
animals.forEach(animal => console.log(animal));
/* Outputs: 
Fox 
Dog 
Lion 
Cat 
Zebra 
*/

如您所见，使用该forEach()方法使我们的代码更加简洁。这是另一个使用回调函数的第二个参数的示例。

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];
animals.forEach((animal, idx) => {
  console.log(`Animal ${idx + 1}: ${animal}`);
});
/* Outputs: 
Animal 1: Fox 
Animal 2: Dog 
Animal 3: Lion 
Animal 4: Cat 
Animal 5: Zebra 
*/

使用forEach()非常适合对数组进行简单迭代。但是，您不能使用breakandcontinue中途退出循环并更改程序流程。using 的另一个缺点forEach()是您将无法通过此方法使用异步代码。

for...of使用循环迭代

ES6 标准为 JavaScript 添加了很多新特性。其中之一是迭代器和可迭代对象的概念。您可以使用for...of循环遍历任何实现该@@iterator方法的对象中的值。Array、String、Set 或 Map 等内置类型可以使用循环for...of来迭代它们的值。

let animals = ["Fox", "Dog", "Lion", "Cat", "Zebra"];
for(let animal of animals) {
  console.log(animal);
}
/* Outputs: 
Fox 
Dog 
Lion 
Cat 
Zebra 
*/

使用for...of构造进行迭代有很多优点。例如，您也可以使用它来迭代其他内置的可迭代类型。除此之外，它还允许您跳出循环并使用breakorcontinue语句控制程序流。

唯一的潜在缺点是浏览器支持略少，但这完全取决于您的目标受众。

在 JavaScript 中迭代数组的4种方法比较第1张

for...in使用循环迭代

您还可以使用语句遍历数组for...in。这将遍历对象的所有可枚举字符串属性。这也包括继承的可枚举属性。

for...in我想在这里提一下，不推荐使用语句迭代循环。这是因为，正如我之前提到的，该语句将遍历所有整数和非整数属性，即使它们是继承的。当我们遍历数组时，我们通常只对整数键感兴趣。

循环的遍历顺序for...in定义明确，它从遍历非负整数键开始。非负整数键按值升序遍历。然后按创建顺序遍历其他字符串键。

一种可以for...in比其他方法更好地通过循环遍历的数组类型是稀疏数组。例如，for...of循环将遍历稀疏数组中的所有空槽，而for...in循环则不会。

下面是一个用循环遍历稀疏数组的例子for...in：

let words = new Array(10000);
words[0] = "pie";
words[548] = "language";
words[3497] = "hungry";
for(let idx in words) {
  if(Object.hasOwn(words, idx)) {
    console.log(`position ${idx}: ${words[idx]}`);
  }
}
/* Outputs: 
Position 0: pie 
Position 548: language 
Position 3497: hungry 
*/

您可能已经注意到，我们使用了一个静态方法调用Object.hasOwn()来检查我们查询的对象的指定属性是否确实是它自己的属性。