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