JavaScript中for…in,for…of,forEach的区别

俗话说的好，万事开头难，最近刚刚开通了公众号，我也就趁热打铁，赶紧开始了自己的blog生涯~

欢迎大家关注我的公众号，共同交流，共同成长~
欢迎访问我的 个人网站（www.kennyeow.com）
最近一直在深入的学习JavaScript，在学习以及使用的过程中，我们常常要去遍历数组或是对象，在这个过程中，你是不是也经常遇到for…in,for…of以及forEach这几个语法，今天我们就来深入的辨析一下这三者的作用以及区别。

一、for…in

1.作用：

for…in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）,其所遍历的为对象的属性名（键），而非属性值。

2.语法：

 for (variable index in object){
    //...
}//字符串

3.实例：

//字符串
var str="Hello"
for (let i in str){
    console.log(i)
}
// 0 1 2 3 4
​
//数组
var arr=["a","b","c"]
for (let i in arr){
    console.log(i)
}
// 0 1 2
​
//普通对象
var obj={a:1,b:2,c:3}
for (let i in obj){
    console.log(i)
}
// a b c

二、for…of

1.作用：

for…of语法是ES6新引入的语法，for…of语法用于遍历可迭代（iterable）对象，js中的可迭代对象包括字符串String、数组Array、集合Set、字典Map、arguments 对象、DOM NodeList 对象等等，for…of语法用于遍历这些对象本身的元素

2.语法：

for (variable element of iterable){    
	//...
}

3.实例：

//字符串String
var str="Hello";
for (let e of str){
    console.log(e)
}
// H e l l o

//数组Array
var arr=["a","b","c"];
for (let e of arr){
    console.log(e)
}
// a b c

//集合Set
var set=new Set([1,2,3,3,4]);//Set(4) {1, 2, 3, 4}
for (let e of set){
    console.log(e)
}
// 1 2 3 4

//字典Map
var map=new Map([["a",1],["b",2],["c",3]]);
for (let e of map){
    console.log(e[0]+"=>"+e[1])
}
// a=>1 b=>2 c=>3

//arguments对象
function f(){
    for (let e of arguments){
        console.log(e)
    }
}
f(1,2,3,4,5)
// 1 2 3 4 5

//DOM NodeList 对象
var parent = document.getElementById('parent');
var child_nodes = parent.childNodes;
for (let e of child_nodes){
    console.log(e)
}
//输出parent节点的所有子节点

三、forEach

1.作用：

forEach作用于数组对象，用于遍历数组对象的每一个元素，并对每一个元素执行回调(callback)函数。

2.语法：

ArrayObject.forEach(callback(currentValue, index, arr), thisValue))

其中currentValue为遍历时数组中每次进行输入到回调函数的当前元素，为必需参数；index为当前元素的索引值，为可选参数；array为当前元素所属的数组对象，为可选参数。thisValue为传递给回调函数的"this"值，可选，如果这个参数为空，则"undefined"则会传递给"this"值。

3.实例：

//forEach实例
var obj={a:1};
var arr=[1,2,3];
arr.forEach(function(currentValue,index,arr){
    console.log(currentValue+this.a);
    console.log(index);
    console.log(arr);
},obj)
//2 0 [1,2,3]
//3 1 [1,2,3]
//4 2 [1,2,3]

四、三者的区别

1.for…in与for…of：

for…in循环由于历史遗留问题，它所遍历的其实是对象的属性名称，而for…of所遍历的是可迭代对象的自身所有元素。请看以下示例：

var arr=[1,2,3];
arr.name="numarr";
for (let i in arr){
    console.log(i)
}
//0 1 2 name

我们知道，数组Array实际上也是一个对象，在这里我们对其增加了一个属性name并赋值为numarr，在进行for…in遍历时，我们看到，它把新增的name属性也给遍历出来了，但是作为数组的特有属性length却没有遍历出来，因此我们可知，for…in所遍历的为对象的可遍历属性的属性名。我们再来看一个例子：

var obj={a:1};
var obj1=Object.create(obj);
obj1.b="b";
for (let i in obj1){
    console.log(i);
}
//b a

我们从这个例子又可以看出for…in不但把自身的属性名遍历出来，还将其原型上的属性遍历出来了，由此我们可以更进一步的确定for…in所遍历的为对象本身以及其原型对象所有可遍历属性的属性名。
而for…of则完全修复了这些问题，它只循环集合本身的元素

2.for…in还存在的缺点：

• 数组的键名为数字，但是for…in循环的时候是以字符串作为键名，如"1"、“2”、"3"等。
• 某些情况下，for…in循环会以任意顺序遍历键名。

3.forEach与for…of：

作为数组自带的forEach方法，没有办法与break、continue以及return配合使用，而for…of可以做到，下面为一个for…of中使用break的例子。

var a=[1,2,3,4,5];
for (let i of a){
    if(i >3){
        break;
    }
    console.log(i)
}
//1 2 3