JavaScript里面的循环方法小结

一,原生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,似乎没有什么大的区别。

原文地址:https://www.cnblogs.com/benxiaohai-microcosm/p/9025502.html

时间: 2024-10-07 19:44:27

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

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

JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组的方法是这样的: for (var index = 0; index < myArray.length; index++) {  console.log(myArray[index]); } 自从JavaScript5起,我们开始可以使用内置的forEach方法: myArray.forEach(function (value) {  console.log(value); }); 写法简单了许多,但也有短处:你不能中断循环

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

JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组的方法是这样的: for (var index = 0; index < myArray.length; index++) { console.log(m

关于javascript中dataset的问题小结

DataSet是ADO.NET的中心概念.可以把DataSet当成内存中的数据库,DataSet是不依赖于数据库的独立数据集合.所谓独立,就是说,即使断开数据链路,或者关闭数据库,DataSet依然是可用的,DataSet在内部是用XML来描述数据的,由于XML是一种与平台无关.与语言无关的数据描述语言,而且可以描述复杂关系的数据,比如父子关系的数据,所以DataSet实际上可以容纳具有复杂关系的数据,而且不再依赖于数据库链路. 一.关于dataset 1.html5自定义属性及基础 html5

网页刷新页面方法小结

1.页面自动刷新:把如下代码加入<head>区域中 <meta http-equiv="refresh" content="20"> 其中20指每隔20秒刷新一次页面. 2.页面自动跳转:把如下代码加入<head>区域中 <meta http-equiv="refresh" content="20;url=https://www.baidu.com/"> 其中20指隔20秒后跳转

Javascript中的循环

Javascript中有两种循环的方法for循环和for-in循环 for循环主要用来循环数组,for-in循环应该用来遍历非数组对象.从技术上来说,for-in循环也可以用来遍历数组(JS中数组也是对象),但这样做并不是很好,当该数组被自定义函数扩大后,有可能导致逻辑上的错. for循环的常规写法 for(var i = 0; i < myarray.length; i++){ //对myarray[i]进行操作 } 在常规写法中,每次循环时都要重新访问计算数组的长度,将会导致代码运行速度下降

javascript之正则表达式基础知识小结

javascript之正则表达式基础知识小结,对于学习正则表达式的朋友是个不错的基础入门资料. 元字符 ^ $ . * + ? = ! : | \ / ( ) [ ] { } 在使用这些符号时需要用“\”来进行转移. 如果记不清楚那些标点符号需要转移,可以在使用标点符号时都使用反斜杠“\” 简单匹配 1.直接量 /javascript/ 匹配带有“javascript”的字符串 比如“javascript is an object-oriented scripting language” 2.[

JAVASCRIPT基础07-for-in循环

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

asp.net(c#)网页跳转七种方法小结

1.response.redirect  这个跳转页面的方法跳转的速度不快,因为它要走2个来回(2次 postback),但他可以跳 转到任何页面,没 有站点页面限制(即可以由雅虎跳到新浪),同时不能跳过登录保护.但速度慢是其最大缺陷!redirect跳转机制:首先是发送一个 http请求到客户端,通知需要跳转到新页面,然后客户端在发送跳转请求到服务器端.需要注意的是跳转后内部空间保存的所有数据信息将会丢失,所以需要用到session. 实例 : using System; using Syst

.net中TreeView使用方法小结(2)

在实际开发中,很少是手工编辑TreeView节点,通常都是通过读取数据库或者其他数据文件的内容来编辑节点.在我现在开发的项目中就需要根据mdb中的数据来编辑节点. 数据库中表的内容如下:   TreeView的父子节点的关系是根据"F_No"字段内容与"F_SuperiorNo"字段内容的关系确定的.   编程思路是,首先得到F_SuperiorNo=1的所有城市名组成的一个ArrayList.这个ArrayList的中的每一项都包含着城市名和F_No(表现形式为城