js中foreach，for in，for of的使用及区别，遍历对象，遍历数组使用的不一样 JavaScript

本文已参与「新人创作礼」活动,一起开启掘金创作之路。   js中的循环有很多种，循环主要是用于数组或者集合。众多的for循环功能有相同的也有相近的，有些能互相替换有些不可以，因为使用场景不一样，比如对于元素内置集合对象只能用var xxx in来遍历，而不能用计数器来循环，下面就把各种循环情况罗列下并含相关举例：

1. for(var obj in objs){ ... } 语句
   如果集合中的元素是对象可以直接对它进行操作。范例：

for (var l in document.links){
    alert(l.href);
}

如果对象是多个属性和值的形式话得这样用：

var obj = {a: 1, b: 2};
for (var i in obj) {
    alert("key:" + i + ", value:" + obj[i]);  
}

严格来说这叫对象数组。

2. arr1.forEach(function(v,i,a){ ... }); 语句
forEach()函数一般只能用于数组，功能是从头到尾把数组遍历一遍。有三个参数分别是：数组元素，元素的索引，数组本身

var arr1=["a",66,8,24];
arr1.forEach(function(v,i,a){//分别对应：数组元素，元素的索引，数组本身，后两个可根据需要缺省
    alert(v);
});

注意：下面的写法也可以

var arr1=["a",66,8,24];
arr1.forEach((v,i,a) => {  
     alert(v);  
});

但是在ES6新特性中forEach可以用下面的写法来遍历对象：

Array.prototype.forEach.call(document.links, function(div) {
    alert("该div类名是：" + (div.className || "空"));
});

3. for(obj of objs){ ... } 语句 【推荐】
ES6新特性，低版本的不支持，目前绝大多数的都支持了，基本的功能可以放心用。范例：

for (l of document.links){
    alert(l.href);
}

和for in语句类似，但是性能比for in方式高，而且更安全，因为for in会遍历子对象中的所有方法，如果要严格得用has的什么函数判断是否有方法。


4. for常规语句遍历，不做赘述

var links=document.links;
for(var i=0;i<links.length;i++){
    alert(links[i]);
}

拓展：

在jQuery中可以有更简便的办法：

$("a").each(function(){
    alert($(this).attr("href"))
});

$("li").each(function(){
    alert($(this).text())
});