for in，for of，for each in ,forEach使用笔记

1. for each in

---

该方法已经不被推荐使用，所以，尽量避免使用该方法。同时，该方法只能用于objecy，不能用于数组。

var sum = 0;
var obj = {prop1: 5, prop2: 13, prop3: 8};

for each (var item in obj) {
  sum += item;
}

console.log(sum); //26

2. forEach

---

从JavaScript5起，我们开始可以使用内置的forEach方法，可以为数组中的每个元素调用定义的回调函数，但是该方法只能用于数组的遍历，同时无法使用 break 语句和 return 语句中断循环。

var arr=[1,2,3]
arr.forEach(function (value) {
  console.log(value);
});
//  1
//  2
//  3

3. for in

---

for (variable in [object | array]) {
    statements 
}
variable
必需。一个变量，可以是 object 的任何属性名或 array 的任何元素索引。

object, array
可选。要对其进行循环的对象或数组。

statements
可选。要为 object 的每个属性或 array 的每个元素执行的一个或多个语句。

var obj={a:1,b:2}
for(var key in obj){
    console.log(key,obj[key])
}
//  a 1
//  b 2
var arr=[1,2,3]
for(var index in arr){
    console.log(index,obj[index])
}
// 0  1
// 1  2
// 2  3

使用 for in 循环遍历对象的属性时，原型链上的所有属性都将被访问：

Object.prototype.bar = 10;// 修改Object.prototype  
var obj={"name":"wjl","age":26};//定义一个object对象    
var keys=[];//定义一个数组用来接受key    
var values=[];//定义一个数组用来接受value    
for(var key in obj){    
   keys.push(key);    
   values.push(obj[key]);//取得value      
}
console.log("keys is ："+keys+" and values is ："+values);      
//keys is : name,age,bar and values is : wjy,26,10   

4. for of

---

对从可迭代对象中获取的迭代器的每个值执行一个或多个语句。普通对象{a:1,b:2,c:3} 无法使用for of）

for (variable of object) {
    statements 
}
variable
必需。可为 object 的任何属性值的变量。

object
必需。 Array、Map、Set 等可迭代对象或实现 迭代器接口的对象。

statements
可选。要为 object 的每个值执行的一个或多个语句。可以是复合语句。

在数组上使用

let arr = [ "fred", "tom", "bob" ];

for (let i of arr) {
    console.log(i);
}

在Map对象上使用

var m = new Map();
m.set(1, "black");
m.set(2, "red");

for (var n of m) {
  console.log(n);
}

// Output:
// 1,black
// 2,red

在Set对象上使用

var set=new Set([1, 2, 3, 4, 5]);
for (var s of set) {
    console.log(s)
}   
// 1   2   3   4   5

另外，普通对象无法使用for of 进行循环，但是可以通过Object.entries(obj)返回给定对象自身可枚举属性的键值对数组。

var obj={a:1,b:2}
var arr=Object.entries(obj)  //[["a", 1],["b", 2]]
for(var i of Object.entries(obj)){
    console.log(i)
}
//  ["a", 1]
//  ["b", 2]