js循环详解

最新推荐文章于 2022-09-26 20:13:59 发布

AmberHe1020

最新推荐文章于 2022-09-26 20:13:59 发布

阅读量238

点赞数

分类专栏：学习文章标签：总结

本文链接：https://blog.csdn.net/AmberHe1020/article/details/100089611

版权

学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

循环

1，for 循环：

for循环，通过累加数组索引，来输出数组中的值。（使用比较局限，一般只用于循环数组）
i

	var arr = ['nick','freddy','mike','james'];
	for(var i = 0; i<arr.length; i++){
    console.log(i + '. ' + arr[i]);
	}

输出结果：
在这里插入图片描述

2，for each 循环：

forEach 循环，跟for循环有点相似，不过会更优美，可通过参数直接获取到值，arr.forEach(function(item,index,arr){})，参数名可改变，但是顺序不能改变。

	var arr = ['nick','freddy','mike','james'];
	arr.forEach(function(item,index,arr){
   		console.log(item);	//item 数组中的每一项值
    	console.log(index);	//index 数组下标
    	console.log(arr);	//arr数组
	});

输出结果：
在这里插入图片描述

3，for in 循环：

相较于for循环，for in的功能会更加强大一些，使用范围也会更广，不但可以循环遍历数组，还可以循环遍历对象。（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){
		//	key1分别是"nick"、“freddy"的键值
    	console.log(key1);	
    	for(var key2 in userMsg[key1]){
    	//	key2就是userMsg.nick和userMsg.freddy下的键值，为"name”、“age”、“sex”。
		console.log(key +': ' + userMsg[key1][key2]);
    	}
	}

输出结果：
在这里插入图片描述

4，each 循环：

jquery下的each方法有两种，一种为 $(^{''}) . e a c h () ， j q u e r y 对象方法，用于循环遍历 j q u e r y 对象。一种为$ .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());	//	这里通过$(this)获取到当前遍历到的jquery对象，并给他一个text()方法输出该标签里面的内容。
});
</script>

输出结果：
在这里插入图片描述

$.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);	
    });
});

输出结果：
在这里插入图片描述

5，for of 循环（循环数组）：

使用例子一：（遍历数组里的每一项）

	var arr = ['nick','freddy','mike','james'];
	for(var item of arr){	
    	console.log(item);
	}

输出结果：
在这里插入图片描述

使用例子二：（遍历数组里的对象的每一项）

	var arr = [
    	{ name:'nick', age:18 },
    	{ name:'freddy', age:24 },
    	{ name:'mike', age:26 },
    	{ name:'james', age:34 }
	];
	for(var item of arr){	
    	console.log(item.name,item.age);
	}

输出结果：
在这里插入图片描述

3.for of 与 for in 的区别：
（1） for of无法循环遍历对象：

	var userMsg = {
    	0: 'nick',
    	1: 'freddy',
    	2: 'mike',	
    	3: 'james'
	};
 
	for(var key in userMsg){
    	console.log(key, userMsg[key]);	
	}
	console.log('-----------分割线-----------');
	for(var item of userMsg){	
    	console.log(item);
	}

输出结果：
在这里插入图片描述
（2）遍历输出结果不同：（for in循环遍历的是数组的下标，而for of循环遍历的是数组的值。）

	var arr = ['nick','freddy','mike','james'];
	for(var key in arr){
    	console.log(key);	
	}
	console.log('-----------分割线-----------');
	for(var item of arr){	
    	console.log(item);
	}

输出结果：
在这里插入图片描述
（3）for in 会遍历自定义属性，for of不会：
（给数组添加一个自定义属性name，并且赋值"数组"。然后进行遍历输出的，会发现新定义的属性也被for in输出来了，而for of并不会对name进行输出。）

	var arr = ['nick','freddy','mike','james'];
	arr.name = "数组";
	 
	for(var key in arr){
    	console.log(key+': '+arr[key]);	
	}
	console.log('-----------分割线-----------');
	for(var item of arr){	
    	console.log(item);
	}

输出结果：
在这里插入图片描述

AmberHe1020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js循环详解

循环1，for 循环：for循环，通过累加数组索引，来输出数组中的值。（使用比较局限，一般只用于循环数组）i var arr = ['nick','freddy','mike','james']; for(var i = 0; i<arr.length; i++){ console.log(i + '. ' + arr[i]); }输出结果：2，for each ...
复制链接

扫一扫