【JavaScript】for、forEach 、for in、each循环详解

前言：循环给我们的编程提供了很多方便，绝大多数编程语言都存在循环的方法，javasript中也存在着很多循环的方法有for，for in，while，do while等，还有ES5中的forEach，jquery中封装的each，ES6中的for of。现在聊聊常用的for，for in，forEach，each

一、for循环

var arr = ['nick','freddy','mike','james'];
for(var i = 0, len=arr.length; i<len; i++){
	console.log(i+'. '+arr[i]);
}

输出结果：

for循环，通过累加数组索引，来输出数组中的值。（使用比较局限，一般只用于循环数组）

二、forEach循环

var arr = ['nick','freddy','mike','james'];
arr.forEach(function(item,i,arr){
	console.log(item);
	console.log(i);
	console.log(arr);
});

输入结果：

forEach循环，跟for循环有点相似，不过会更优美，可通过参数直接获取到值，arr.forEach(function(item,i,arr){})，其中item为该索引下的值，i为索引，arr为数字本身，参数名可改变，但是顺序不能改变。

三、for in循环

var arr = ['nick','freddy','mike','james'];
var userMsg = {
	nick: {
		name: 'nick',
		age: 18,
		sex: '男'	
	},
	freddy: {
		name: 'freddy',
		age: 24,
		sex: '男'
	}	
};

for(var i in arr){	
	console.log(i+'. '+arr[i]);
}
console.log('-----------分割线-----------');
for(var i1 in userMsg){
	console.log(i1);	
	for(var i2 in userMsg[i1]){
		console.log(i2+': '+userMsg[i1][i2]);
	}
}

输出结果：

相较于for循环，for in的功能会更加强大一些，使用范围也会更广，不但可以循环遍历数组，还可以循环遍历对象。代码中的i，i1，i2分别是目标对象（数组）中的键值（数组中叫习惯叫索引）。arr数组中的i分别0,1,2,3，userMsg对象下的i1分别是"nick"、"freddy"的键值, i3就是userMsg.nick和userMsg.freddy下的键值了，为"name"、"age"、"sex"。（for in在写法上会稍微复杂些，不过他很清晰的展示了循环过程）。

四、each循环

jquery下的each方法有两种，一种为$('').each()，jquery对象方法，用于循环遍历jquery对象。一种为$.each()循环方法，用于循环遍历数组、对象。

①、$('').each()

<body>
	<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>  
    <ul>
        <li>li(1)</li>
        <li>li(2)</li>
        <li>li(3)</li>
    </ul>
</body>
<script>
$('li').each(function(i,item) {
    console.log($(this).text());
});
</script>

输出结果：

这里通过$(this)获取到当前遍历到的jquery对象，并给他一个text()方法输出该标签里面的内容。

②、$.each()

var arr = ['nick','freddy','mike','james'];
var userMsg = {
	nick: {
		name: 'nick',
		age: 18,
		sex: '男'	
	},
	freddy: {
		name: 'freddy',
		age: 24,
		sex: '男'
	}	
};
$.each(arr,function(i,item){
	console.log(i+'. '+item);
});
console.log('-----------分割线-----------');
$.each(userMsg,function(i1,item1){
	console.log(i1);
	$.each(item1,function(i2,item2){
		console.log(i2+': '+item2);	
	});
});

输出结果：

jquery把$.each()方法封装的很完美，使用起来更加清晰。跟for in 循环那里一样，i，i1，i2还是是目标对象（数组）中的键值（数组中叫习惯叫索引），而item1，item2则为该键值下的值，item1相当于是userMsg.nick 和userMsg.freddy。item2同理。

【JavaScript】for、forEach 、for in、each循环详解

猜你喜欢