前言:循环给我们的编程提供了很多方便,绝大多数编程语言都存在循环的方法,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同理。