详解 ES6 中新增的三个循环语句: for...in, for...of, and forEach
在 ES6 中，新增了三种循环语句：for...in、for...of 和 forEach。这三种循环语句在循环的方式和应用场景上都有所不同，下面就来详细解析一下它们的使用和注意事项。
1. for...in 循环语句
for...in 循环语句是用来遍历对象属性的一种循环语句，它遍历的是对象的属性名而不是属性值。for...in 循环语句的语法格式如下：
--- ---- ---- -- ---- - -- --------- ----- -
其中，prop 表示对象属性的名称，obj 表示要遍历的对象。因为它是通过对象的属性名进行循环的，所以适用于遍历对象自身的可枚举属性、原型链上的可枚举属性以及继承自原型对象的属性。
示例代码：
--- --- - - -- -- -- -- -- - -- --- ---- ---- -- ---- - ------------------ -- -- -- - ----------------------- -- -- -- - -
需要注意的是，for...in 循环语句的遍历结果是无序的，在遍历对象属性时，可能需要先进行排序后再进行操作。
2. for...of 循环语句
for...of 循环语句是用来遍历具有 Iterable 接口的对象的一种循环语句，它遍历的是对象的属性值而不是属性名。for...of 循环语句的语法格式如下：
--- ---- ----- -- --------- - -- ----- ----- -
其中，value 表示对象属性的值，iterable 表示要遍历的对象。因为它是通过对象的属性值进行循环的，所以适用于遍历数组、字符串、Set、Map 等具有 Iterable 接口的对象。
示例代码：
--- --- - --- -- --- --- ---- ----- -- ---- - ------------------- -- -- -- - -
需要注意的是，for...of 循环语句不支持普通对象的遍历，因为普通对象没有实现 Iterable 接口。如果需要遍历对象的属性值，可以使用 Object.values() 或 Object.entries() 方法来获取对象属性值的数组。
--- --- - - -- -- -- -- -- - -- --- ---- ----- -- ------------------- - ------------------- -- -- -- - -
3. forEach 循环方法
forEach 循环方法是用来遍历数组的一种循环方法，它遍历的是数组的每个元素。forEach 循环方法的语法格式如下：
------------------------------------ ------ ------ - -- ------------ -------- ---
其中，currentValue 表示当前元素的值，index 表示当前元素的下标，array 表示要遍历的数组。因为它是通过数组元素进行循环的，所以适用于遍历数组。
示例代码：
--- --- - --- -- --- --------------------------- - ------------------- -- -- -- - ---
forEach 循环方法的特点是无法通过 return 来中断循环，但是可以通过 throw 来中断循环。
--- --- - --- -- ---
--- -
--------------------------- -
-- ------ --- -- -
----- --- --------------
-
-------------------
---
- ----- ----- -
------------------------- -- ----
-总结
对于前端开发者而言，使用三种循环语句需要根据具体的使用场景进行选择。其中，for...in 循环适用于遍历对象属性名，for...of 循环适用于遍历具有 Iterable 接口的对象属性值，forEach 循环方法适用于遍历数组。同时，需要注意的是在遍历对象属性时，需要先进行排序后再进行操作，遍历普通对象时需使用 Object.values() 或 Object.entries() 方法来获取属性值的数组，forEach 循环方法无法通过 return 来中断循环，但可以通过 throw 来中断循环。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647eaee048841e9894e62484