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

最新推荐文章于 2023-07-25 18:33:27 发布

汪小穆

最新推荐文章于 2023-07-25 18:33:27 发布

阅读量6.1k

点赞数 23

分类专栏： JavaScript 文章标签： for for in forEach each 循环

本文链接：https://blog.csdn.net/w390058785/article/details/78444088

版权

JavaScript 专栏收录该内容

33 篇文章 6 订阅

订阅专栏

前言：循环给我们的编程提供了很多方便，绝大多数编程语言都存在循环的方法，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 index = 0, len=arr.length; index<len; index++){
    console.log(index + '. ' + arr[i]);
}

输出结果：

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

二、forEach循环

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

输入结果：

forEach循环，跟for循环有点相似，不过会更优美，可通过参数直接获取到值，arr.forEach(function(item,index,arr){})，其中item为该索引下的值，index为索引，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 index in arr){	
    console.log(index +'. ' + arr[index]);
}
console.log('-----------分割线-----------');
for(var key1 in userMsg){
    console.log(key1);	
    for(var key2 in userMsg[key1]){
	console.log(key +': ' + userMsg[key1][key2]);
    }
}

输出结果：

相较于for循环，for in的功能会更加强大一些，使用范围也会更广，不但可以循环遍历数组，还可以循环遍历对象。代码中的index，key1，key2分别是目标对象（数组）中的键值（数组中叫习惯叫索引）。arr数组中的index分别0,1,2,3，userMsg对象下的key1分别是"nick"、"freddy"的键值, key2就是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(index,item){
    console.log(index+'. '+item);
});
console.log('-----------分割线-----------');
$.each(userMsg,function(key1,item1){
    console.log(key1);
    $.each(item1,function(key2,item2){
	console.log(key2 + ': ' + item2);	
    });
});

输出结果：

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

汪小穆

关注

23
点赞
踩
73

收藏

觉得还不错? 一键收藏
2
评论
【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',...
复制链接

扫一扫

专栏目录