js中的循环有很多种,循环主要是用于数组或者集合。众多的for循环功能有相同的也有相近的,有些能互相替换有些不可以,因为使用场景不一样,比如对于元素内置集合对象只能用var xxx in来遍历,而不能用计数器来循环,下面就把各种循环情况罗列下并含相关举例:
- 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()) });