JS中forEach、for.. of、for..in三种循环

1. forEach

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数，是ES5规定的一个Array对象的内置函数。

let a = [1, 2, 3, 4, 5]
a.forEach( val => {
   console.log(val) // 1, 2, 4, 5, 
 })

forEach循环使用时有一个需要注意的地方，就是它无法使用break和continue来中断跳出循环

2. for..in

for..in循环可以遍历对象中所有可枚举的对象属性(包括对象自有属性和继承的属性)。

什么是可枚举属性
JavaScript中的属性不光有值，还有一些特性，其中一个就是可枚举性：Enumerable，如果还值为true则该属性是可枚举的，反之则不是。

如何判断属性是否可枚举：使用Object.propertyIsEnumerable()函数

let obj = {a: 1, b: 2, c: 3}
obj.propertyIsEnumerable('a') // true
obj.propertyIsEnumerable('toString') // false

for(x in obj) {
  console.log(x) // 会输出a, b, c,但不会输出toString
}

如果只需要获取对象的实例属性(跳过继承属性)，可以使用hasOwnProperty()进行过滤:

for (key in obj) {
  if (object.hasOwnProperty(key)) {
    let element = obj[key];
  }
}

注：建议不要用for..in来循环一个数组，虽然可以但是最好不要，因为不像对象，数组的index跟普通的对象属性不一样，是重要的数值序列指标。

3. for..of

ES6里引入了一种新的循环方法，它就是for-of循环，它既比传统的for循环简洁，同时弥补了forEach和for-in循环的短板。
我们看一下它的for-of的语法：

for (var value of myArray) {
  console.log(value);
}

for-of的语法看起来跟for-in很相似，但它的功能却丰富的多，它能循环很多东西。

for-of循环使用例子：

循环一个数组(Array):

let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

我们可以使用const来替代let，这样它就变成了在循环里的不可修改的静态变量。

for (const value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

循环一个字符串：

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

循环一个类型化的数组(TypedArray)：

for (let value of iterable) {
  console.log(value);
}
// 0
// 255

循环一个Map:

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

for (let entry of iterable) {
  console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

循环一个 Set:

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3