1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 【JavaScript】for forEach for in each循环详解

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

时间:2018-12-26 12:41:25

相关推荐

【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 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="/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同理。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。