在 ECMAScript 2021 中，for-in 和 for-of 循环是两种用于迭代对象中的元素的基本工具。虽然两种循环看起来非常相似，但它们之间存在着很大的差异。
for-in 循环
for-in 循环用于迭代对象中的所有可枚举属性，包括原型链上的属性。语法如下：
for (let key in object) {
// 循环体
}在循环体中，可以使用 key 变量来访问对象中的属性名。如下是一个示例，遍历对象的所有属性，并打印其值。
-- -------------------- ---- ------- ----- ------ - - ----- -------- ---- -- -- --- ---- --- -- ------- - -------------------------- - ----------------- - -- --- -- ----------- - ----- -- ---------- - --
需要注意的是，for-in 循环不保证属性的遍历顺序，并且可能会包括一些不希望遍历到的属性。
for-of 循环
for-of 循环用于迭代可迭代对象的元素，包括数组、字符串、类数组对象等。语法如下：
for (let element of iterable) {
// 循环体
}在循环体中，可以使用 element 变量来访问可迭代对象中的元素。如下是一个示例：遍历数组中的元素，并打印出每个元素的值。
-- -------------------- ---- ------- ----- --- - --- -- --- --- ---- ------- -- ---- - --------------------- - -- --- -- - -- - -- -
需要注意的是，for-of 循环只能迭代可迭代对象中的元素，而不能迭代对象中的属性。如果想要迭代对象中的属性，应该使用 for-in 循环。
区别与应用
for-in 循环和 for-of 循环可以用于不同的场景。需要考虑到的是循环的目标迭代对象的类型。
当需要遍历对象的属性时，应该使用 for-in 循环。例如，需要遍历对象中所有的键值对，实现对象内容的拷贝和深拷贝等功能。
当需要遍历可迭代对象的元素时，应该使用 for-of 循环。例如，需要遍历数组中的元素，并对它们进行处理。
因此，了解两种循环的区别和使用场景对前端开发来说十分重要。这可以大大提高代码编写的效率和质量。
总结
ECMAScript 2021 中的 for-in 循环和 for-of 循环用于迭代对象中的元素。for-in 循环遍历对象中的所有可枚举属性，for-of 循环遍历可迭代对象的元素。根据循环的目标迭代对象的类型，开发者可以选择使用不同的循环来迭代对象的属性或元素，以达到最优的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6655b3a5d3423812e4a76609