在前端开发中，数组的遍历是开发者经常会遇到的任务之一。在 ECMAScript 2020 中，引入了两种不同的方法：for...in 和 for...of，用于数组的遍历。虽然这两种方法都可以遍历数组，但它们有很大的差异。本文将详细讨论这两种方法的差异，并提供一些示例代码，以帮助你正确地使用这些方法。
for...in 方法
for...in 方法用于遍历对象的属性，不仅包含数组的元素，还包括数组的原型链中的属性。因此，使用 for...in 遍历数组时，需要注意它的局限性，否则就可能会出现一些意想不到的问题。下面是一个 for...in 遍历数组的示例代码：
--- --- - --------- --------- ---------- ------- - -- ---- - -------------- -------- -
这段代码将输出：
- ----- - ------ - ------
可以看到，使用 for...in 遍历数组时，返回的是当前元素的下标，而不是元素本身。因此，使用这种方法时，需要根据下标访问到数组中的元素，这可能会增加代码的复杂性和出错的可能性。
for...of 方法
for...of 方法用于遍历可迭代对象，例如数组、Map 和 Set 等。与 for...in 不同，for...of 只返回数组中的元素，而不包括原型链中的属性。此外，for...of 也适用于许多其他的内置对象，例如 String、TypedArray 等。下面是一个 for...of 遍历数组的示例代码：
--- --- - --------- --------- ---------- ------- ---- -- ---- - ------------------ -
这段代码将输出：
----- ------ ------
可以看到，使用 for...of 遍历数组时，返回的是数组中的元素，而不是元素的下标。因此，使用这种方法时，可以直接访问到数组中的元素，不会增加代码的复杂性和出错的可能性。
正确使用方法
在实际开发中，应该根据实际需求选择正确的遍历方法。如果需要遍历对象的属性，应该使用 for...in 方法；如果需要遍历数组中的元素，则应该使用 for...of 方法。下面是一个示例代码，演示了如何正确地使用这些方法：
--- --- - --------- --------- ---------- ------- - -- ---- - -------------- -------- - ------- ---- -- ---- - ------------------ -
这段代码演示了如何分别使用 for...in 和 for...of 遍历数组。在实际开发中，应该根据实际需求选择正确的方法，避免出现不必要的错误和复杂性。
总结
ECMAScript 2020 中提供了两种不同的方法用于数组的遍历：for...in 和 for...of。虽然这两种方法都可以遍历数组，但它们有很大的差异。for...in 方法用于遍历对象的属性，包括数组的原型链中的属性，返回的是元素的下标；for...of 方法用于遍历可迭代对象，只返回数组中的元素，返回的是元素本身。在实际开发中，应该根据实际需求选择正确的遍历方法，避免出现不必要的错误和复杂性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6521240b95b1f8cacd89b7f8