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