一,原生JavaScript中的循环:

for 循环代码块一定的次数,它有三个参数,来决定代码块的循环次数,第一个是初始值,第二个是终止值,第三个参数是变化规则:

//for循环
for(var i = 0, len = jsonArr.length; i < len; i++) {
console.log(JSON.stringify(jsonArr[i]));
}

for in循环一般用于遍历对象的属性,它有两个参数,in之前为属性名参数,in之后为要遍历的对象,它会遍历对象中的每一个属性,key即为属性名,对象【属性名】则输出属性值:

for(var key in jsonObj) {
console.log(key + ':' + jsonObj[key]);
}

注意:这里的key是字符串,而不是真正的索引,for in是为普通对象设计的循环,可以遍历得到字符串类型的键,如果用它来遍历数组则不方便。

forEach循环

jsonArr.forEach(function(value,index,array){
console.log('********************');
console.log(value);
console.log(index);
console.log(array);
});

这是输出结果,可以看到,value是数组元素值,index为当前值得索引,array则为当前所遍历的数组对象。

for of循环

	var jsonArr = [{
'one': '1'
},
{
'two': '2'
},
{
'three': '3'
}
];
//for of循环
for(var value of jsonArr) {
console.log(value);
}

将输出数组的每一项的值。

for-of循环除了可以遍历数组,也可以遍历其它的集合。比如,大多数类数组对象,例如DOM NodeList对象

	var nodeLis = document.getElementById('ul').childNodes;
//for of循环
for(var value of nodeLis) {
console.log(value);
}

for-of循环也支持字符串遍历,它将字符串视为一系列的Unicode字符来进行遍历:

	var str = 'i am little sun';
for(var value of str) {
console.log(value);
}

while和do while循环:

var i=0
while(i<5){
console.log(i);
i++;
}
do{
console.log(i);
i++;
}while(i<5)

二者的区别是,do while无论条件满足与否都会至少执行一次。

二,jQuery中专有的循环:

$.each()用于遍历数组和对象:

遍历数组:

	var arr1 = [0, 1, 2, 3, 4];
var arr2 = $('ul li');
$.each(arr1, function(index,value) {
console.log(index)
console.log(value)
});

遍历对象:

$.each(jsonObj, function(key, val) {
  alert(jsonObj[key]);
}); 

$().each()用于遍历jQuery中的节点对象:$(selector).each(function(index,element))

	$( $('ul li')).each(function(index,value){
console.log(index)
console.log(value)
});

部分文章中有提到,$.().each()主要用于处理dom,在测试中发现其实两者都可以同样的用于处理dom,似乎没有什么大的区别。

JavaScript里面的循环方法小结的更多相关文章

  1. JavaScript里的循环方法总结

    JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组的方法是这样的: for (var index = 0; index < myArray.length; index++) ...

  2. JavaScript里的循环方法之forEach,for-in,for-of

    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标 ...

  3. JavaScript里的循环方法:forEach,for-in,for-of

    JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组的方法是这样的: for (var index = 0; index < myArray.length; index++) ...

  4. C#后台调用前台javascript的五种方法小结

    第一种,OnClientClick (vs2003不支持这个方法) <asp:Button ID="Button1" runat="server" Tex ...

  5. JavaScript Array对象sort() 方法小结

    sort() 方法用于对数组的元素进行排序. 语法arrayObject.sort(sortfunction) 参数sortfunction 可选.规定排序顺序.必须是函数. 返回值对数组的引用.请注 ...

  6. javaScript 删除确认实现方法小结

    第一种: <a href="javascript:if(confirm('确认删除吗?'))window.location='del.php'">删除</a> ...

  7. Javascript/jQuery关于JSON或数组集合的几种循环方法

    JavaScript遍历JSON或数组集合: /** * 根据json数据生成option树形控件 * 如果有children节点则自动生成树形数据 * @param {JSON} data * @p ...

  8. javascript 终极循环方法for... of ..推荐

    js目前有很多的循环方法,如for, forEach,  for .. in,  for of 等等,而在ES6里面,我们又增加了一些数据结构,比如set,map,Symbol等. 那么我们该选取哪一 ...

  9. JavaScript基础——实现循环

    循环是多次执行同一段代码的一种手段.当你需要在一个数组或对象集上重复执行相同的任务时,这是非常有用的. JavaScript提供执行for和while循环的功能. 1.while循环 JavaScri ...

随机推荐

  1. H5学习之旅-H5的样式(5)

    样式的引入方式 外部样式表 link rel = "stylesheet" type = "text/css" href = "mystyle.css ...

  2. (十八)TableView实践(多组汽车品牌展示)

    对于多组数据,可能会用到模型的嵌套. 例如多组汽车,每组是一个模型,组内有多辆车的信息,每辆车的信息也是一个模型,相当于模型中有模型. 可以看到,每个item是一个字典,这要创建一个模型,而模型内部的 ...

  3. java工具类(三)之生成若干位随机数

    java 生成若干位随机数的问题 在一次编程的过程中偶然碰到一个小问题,就是需要生成一个4位数的随机数,如果是一个不到4位大的数字,前面可以加0来显示.因为要求最后是一个4位的整数,不带小数点.当时就 ...

  4. Java学习笔记(三)Java2D组件

    一  概述 Java2D的一切都基于java.awt包中的Graphics2D类,它是Graphics的子类. 为了绘制图形,需要使用面板作为画布,例如使用JPanel作为画布,面板有一个paintC ...

  5. iOS实现时间线列表效果(例如订单详情页面的效果)

    之前看到美团的订单详情页面很有特色,于是决定模仿一下这个效果. 其实就是简单的 TableView 技巧,下面我们就来一步一步实现它. 设计 TableViewCell 原型 子类化一个新的 UITa ...

  6. ViewPager切换动画PageTransformer的使用

    Android从3.0开始添加了属性动画后,诸多难以实现的动画都可以轻松解决了,v4包下的ViewPager控件当然也不例外,相对于非常平庸的默认切换动画,Google官方给我们展示了两个动画例子:D ...

  7. Erlang cowboy http request生命周期

    Erlang cowboy http request生命周期 翻译自: http://ninenines.eu/docs/en/cowboy/1.0/guide/http_req_life/ requ ...

  8. thrift实现HDFS文件操作

    thrift 文件如下 namespace java com.pera.file.transform struct  File{     1:string path ,     2:string co ...

  9. android 资源文字ids的作用

    ids.xml--为应用的相关资源提供唯一的资源id.id是为了获得xml中的对象而需要的参数,也就是Object = findViewById(R.id.id_name)中的id_name.这些值可 ...

  10. 面试之路(28)-反转链表(reverse ListNode)

    反转链表: java类 public class ListNode{ int key; ListNode next; } 思路分析: 需要三个指针,current,prev和next. current ...