JavaScript中for in、for of和for Each的用法和区别

通常来讲，for…in一般用来遍历对象的键名(key)，for…of 以及forEach一般用来遍历数组的属性值(value)

具体三者之间的用法如下：

for...in

for...in语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。

for (variable in object){
    //statment
}
  

variable:在每次迭代时，variable 会被赋值为不同的属性名。

object:非 Symbol 类型的可枚举属性被迭代的对象。

示例：

var obj = {a:1, b:2, c:3};

for (var k in obj) {
  console.log( k + " = " + obj[k]);
}

// Output:
// a = 1  b = 2  c = 3

for ... in是为遍历对象属性而构建的，不建议与数组一起使用，数组可以用Array.prototype.forEach()和for ... of

它最常用的地方应该是用于调试，可以更方便的去检查对象属性（通过输出到控制台或其他方式）。尽管对于处理存储数据，数组更实用些，但是你在处理有key-value数据（比如属性用作“键”），需要检查其中的任何键是否为某值的情况时，还是推荐用for ... in。

for...of

for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

for (variable of iterable) {
    //statements
}

variable:在每次迭代中，将不同属性的值分配给变量。

iterable:被迭代枚举其属性的对象。

示例：

let iterable = [10, 20, 30];

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

for…of不可以遍历普通对象，想要遍历对象的属性，可以用for…in循环,或内建的Object.keys()方法

Array.prototype.forEach()

forEach() 方法按升序为数组中含有效值的每一项执行一次 callback 函数，那些已删除或者未初始化的项将被跳过（例如在稀疏数组上）。

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

callback：为数组中每个元素执行的函数，该函数接收一至三个参数

  currentValue：数组中正在处理的当前元素

  index:(可选) 数组中正在处理的当前元素的索引

  array:(可选)     forEach() 方法正在操作的数组

thisArg:(可选) 当执行回调函数 callback 时，用作 this 的值。

示例：

function logArrayElements(element, index, array) {
  console.log('a[' + index + '] = ' + element);
}

// 注意索引 2 被跳过了，因为在数组的这个位置没有项
[2, 5, , 9].forEach(logArrayElements);

//output: a[0] = 2  a[1] = 5  a[3] = 9

注意：除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具。