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中 使用break return 或者continue 关键字无效 因此每使用一次forEach 就会对数组所有元素遍历一遍 并且执行过程中无法终止

2. 案例

 var obj = {name: '李四'}
   var obj2 = {name: '张三'}
   var arr2 = [obj,obj2]
   var arr = ["a","b","c"]

 //item 指向的是数组中依次遍历的元素 而index指向的是当前元素的索引
   arr.forEach((item,index)=> {
        console.log(item+":"+index) // a:0  b:1  c:2
   })

   //遍历数组对象的话 item会依次指向数组中的每个对象, index指向的是当前对象的索引
   arr2.forEach((item,index)=> {
        console.log(item.name+":"+index)  // 李四:0  张三:1
   })