for in、for of、forEach的区别

forEach

forEach（）是数组的一个方法，用于遍历数组的每一项，并对每一项执行一个callback函数。
forEach（）没有返回值，返回值总是undefined。

let a = ["a","b","c"];
a.forEach(function(item,index,array){
    console.log(item); 
})
// a
// b
// c

for…of

ES6提出的语句，在可迭代对象（Array，Map，Set，String，TypedArray，arguments）上创建一个迭代循环。

• 遍历数组

let array = [10,20,30];
for(let val of array){
    console.log(val);
}
// 10
// 20
// 30

• 遍历String

let str = "boo";
for(let val of str){
    console.log(val);
}
// "b"
// "o"
// "o"

• 遍历Map

let map = new Map([["a", 1], ["b", 2], ["c", 3]]);
for(let entry of map){
    console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]

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

• 遍历Set

let set = new Set([1,1,2,2,3,3]);
for(let value of set){
    console.log(value);
}
// 1
// 2
// 3

• 遍历DOM集合

let divs = document.querySelectorAll("div");
for(let div of divs){
    div.className = "red";
}

• 遍历生成器

function* fibonacci(){
    let [prev,curr] = [0,1];
    for(;;){
        [prev,curr] = [curr,curr+prev];
        yield curr;
    }
}

for(let n of fibonacci()){
    if(n>1000) break;
    console.log(n);
}

for…in

for…in 语句以任意顺序遍历一个对象的可枚举属性的属性名。

for (variable in object) {...}

var obj = {a:1, b:2, c:3};
for(var prop in obj){
    console.log(prop);
}
//a
//b
//c

for(var prop in obj){
    console.log(obj[prop]);
}
//1
//2
//3

但是for-in会遍历对象本身的所有可枚举属性和从它原型继承而来的可枚举属性，因此如果想要仅迭代对象本身的属性，要结合hasOwnProperty（）来使用：

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

function ColoredTriangle() {
  this.color = "red";
}

ColoredTriangle.prototype = triangle;

var obj = new ColoredTriangle();

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

//原型上的可枚举数据也被迭代出来
//o.color = red
//o.a = 1
//o.b = 2
//o.c = 3

//使用hasOwnProperty（）

for (var prop in obj) {
  if( obj.hasOwnProperty( prop ) ) {
    console.log("o." + prop + " = " + obj[prop]);
  } 
}
//o.color = red

for…of与for…in的区别

• for…in循环会遍历一个object所有的可枚举属性。
• for…of只能应用于可迭代对象，即拥有[Symbol.iterator] 属性的collection对象，并不适用于所有的object.

下面的例子演示了for…of 循环和 for…in 循环的区别。

• for…in 遍历（当前对象及其原型上的）每一个属性名称
• for…of遍历（当前对象上的）每一个属性值:

Object.prototype.objCustom = function () {}; 
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7