javascript中for..in、for..of和forEach的区别

1、for..in

for..in可以将JavaScript中的对象的属性依次循环出来，当for..in作用于数组时得到的是该元素的下标，且该下标是一个String对象而不是一个Number对象。(注意：for..in实际上是历史遗留问题，其遍历的实际上是对象的属性，之所以能够遍历数组，是因为数组实际上是一个对象，而其属性就是下标，所以使用for..in遍历数组得到的下标是String类型)
for..in的问题在于，当我们为一个数组添加了一个不是数字下标的属性时，遍历数组时会将这个属性当做是下标遍历出来：

let a = ['A', 'B', 'C'];
a.name = 'Hello';
for (let x in a) {
    console.log(x); // '0', '1', '2', 'name'
}

2、for..of

for..of就是为了遍历集合而专门设计的，它只遍历数组的元素：

let a = ['A', 'B', 'C'];
a.name = 'Hello';
for (let x of a) {
    console.log(x); // 'A', 'B', 'C'
}

并且当for..of直接遍历对象时会报错：

 let obj = {
           name:'123123',
           age:15
       }
for (let cc of obj) {//Uncaught TypeError: obj is not iterable
       console.log(cc)
 }

for..of用于遍历对象需要使用Object.keys()才能正确遍历其属性（而Object.keys()方法实际上是将对象的属性键值以数组的对象返回了回来，实际上也是遍历数组。所以说for..of不能遍历对象其实也没有错）：

 let obj = {
           name:'123123',
           age:15
       }
for (let cc of Object.keys(obj)) {
      console.log(cc)//name,age
}

3、forEach

forEach是Iterable的内置方法，是一个高阶函数，其接受一个函数作为参数，每次迭代就回调该函数。是遍历Iterable(Array,Map,Set)最好的方式(但是相对于for..of有一个坏处就是不能通过break退出循环)：

let arr = ['A', 'B', 'C'];
arr.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    console.log(element + ', index = ' + index);
});
let set = new Set(['A', 'B', 'C']);
set.forEach(function (element, sameElement, set) {
    //Set没有索引，因此回调函数的前两个参数都是元素本身
    console.log(element);
});
let map = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
map.forEach(function (value, key, map) {
    //map接受的参数为值，键和其自身
    console.log(value);
});