随着 ECMAScript 2015 （ES6）规范的普及和使用，越来越多的 JavaScript 开发人员开始使用 for...of 循环来遍历对象中的元素。然而，使用 for...of 循环时经常会遇到一些问题和 Bug，本文将会详细介绍如何解决这些问题。
问题描述
在使用 for...of 循环时，可能会遇到下面这些常见的问题：
1. TypeError: obj[Symbol.iterator] is not a function
当使用 for...of 循环遍历一个自定义对象时，可能会抛出 TypeError 的异常，提示 obj[Symbol.iterator] is not a function。
-- -------------------- ---- -------
----- --- - -
-- --
-- --
-- --
------------------ ---------- -
------ -
----- ---------- -
------ -
----- ------
------ -------
-
-
-
-
-
--- ---- ---- -- ---- -
-----------------
-
-- ---------- -------------------- -- --- - --------2. for...of 循环无法遍历数组中新增的属性
使用 for...of 循环遍历数组时，无法正确地遍历数组中新增的属性。
const arr = ['a', 'b', 'c']
arr.newProp = 'new property'
for (let item of arr) {
console.log(item)
}
// output: a b c解决方案
1. TypeError: obj[Symbol.iterator] is not a function
要解决这个问题，需要确保对象拥有正确的迭代器。为了让 for...of 循环正确地遍历对象，对象必须拥有一个 [Symbol.iterator] 属性，并返回一个迭代器对象，该迭代器对象必须具有一个 next() 方法，并在每次调用时返回 value 和 done 属性。
-- -------------------- ---- -------
----- --- - -
-- --
-- --
-- --
------------------ ---------- -
----- ---- - -----------------
--- - - -
------ -
----- -- -- -
----- --- - -------
----- ----- - ---------
---
------ -
----- - - ------------
------ ----- ------
-
-
-
-
-
--- ---- ----- ------ -- ---- -
---------------- ------
-- ------- - -
-- - -
-- - -
-2. for...of 循环无法遍历数组中新增的属性
要解决这个问题，可以使用 for-in 循环遍历数组，或者使用 Object.keys() 方法把数组中包含的元素和属性转换为一个新数组，然后再遍历该数组。
-- -------------------- ---- ------- ----- --- - ----- ---- ---- ----------- - ---- --------- -- -- ------ ------ --- ---- --- -- ---- - ----- ----- - -------- ---------------- ------ -- ------- - - -- - - -- - - -- ------- --- -------- - -- -- ------------- ------------- ----- ------- - ---------------- --- ---- --- -- -------- - ----- ----- - -------- ---------------- ------ -- ------- - - -- - - -- - - -- ------- --- -------- -
需要注意的是，使用 for-in 循环遍历数组时，会把数组中除了数值下标外的属性也一起遍历，可能会导致一些意外行为的发生，因此建议使用 Object.keys() 方法转换数组再遍历。
总结
使用 for...of 循环遍历对象是一种方便和直观的方法，但是需要注意对象必须拥有正确的迭代器才能被 for...of 循环正确遍历。并且，使用 for...of 循环遍历数组时可能无法正确遍历数组中新增的属性，可以使用 for-in 循环或 Object.keys() 方法代替。
编写高质量的代码不仅需要掌握技能，还需要学习和积累更多经验和知识，希望本文对读者在学习和开发前端技术时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f0961ef6b2d6eab3a9db57