JavaScript中for、for in、forEach的区别

最新推荐文章于 2024-08-17 11:35:56 发布

ab_dk

最新推荐文章于 2024-08-17 11:35:56 发布

阅读量412

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/ab_dk/article/details/105336355

版权

for循环

for循环只能用于循环数组，不能用于循环对象

var arr = [ 1,2,3,4,5, ];
for( var i = 0 ; i <= arr.length-1; i++ ){
	console.log(arr[i])；
}

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

for…in

数组,对象都可以使用的循环

语法形式:
for(var 自定义变量 in 数组){程序}
自定义变量 : 存储数组单元索引

 var arr = [ 1,2,3,4,5, ];
 for(var item in arr){
	console.log(item ,arr[item])
}

输出结果为
在这里插入图片描述
存储的索引的数据类型是字符串类型，如果要执行加法运算,需要转化为数值类型，只有for…in需要转化

forEach()

专门针对数组的循环遍历

语法形式:
数组.forEach(function( 参数1,参数2,参数3){程序} )
参数1 : 存储数组单元数据
参数2 : 存储数组单元索引
参数3 : 存储原始数组
参数名称可以任意定义,参数个数,根据需求来定义

var arr = [ 1,2,3,4,5, ];
arr.forEach(function(val , key , arr){
	console.log( val , key , arr )
})

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

通过循环遍历,给标签添加事件/操作

利用forEach（）添加
效果：点击第一个li标签输出1，第二个输出2，…，第五个输出5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>我是第一个li</li>
        <li>我是第二个li</li>
        <li>我是第三个li</li>
        <li>我是第四个li</li>
        <li>我是第五个li</li>
    </ul>

    <script>
        var oLis = document.querySelectorAll('li');
         oLis.forEach(function( item ，key ){
            item.onclick = function(){
                console.log(key+1);
            }
        })
</script>
</body>
</html>

在这里插入图片描述
当从第一个li标签点击到第五个标签时，控制台输出了“1，2，3，4，5”

利用for循环添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>我是第一个li</li>
        <li>我是第二个li</li>
        <li>我是第三个li</li>
        <li>我是第四个li</li>
        <li>我是第五个li</li>
    </ul>

    <script>
        var oLis = document.querySelectorAll('li');
        for(var i = 0; i <= oLis.length-1; i++){
            oLis[i].onclick = function(){
                console.log(i+1);
            }
        }
        
</script>
</body>
</html>

在上面写的这种情况时，无论怎么点击li标签，输出的都为“6”
在这里插入图片描述
在此，我们要给标签添加属性，属性值为i，每执行一次循环，将i的值赋值给index的属性值

var oLis = document.querySelectorAll('li');
for(var i = 0; i <= oLis.length-1; i++){
	oLis[i].setAttribute( 'index' , i );
	oLis[i].onclick = function(){
	// 获取的属性值,是字符串类型,要执行运算,需要转化为数值类型
	var num = this.getAttribute('index')-0;
	console.log(num+1);
	}
}

此时li的标签为：
在这里插入图片描述
点击时输出index的属性值

for循环和forEach()的区别
for循环
第一次循环建立一个循环变量 i ，之后每次循环,都是操作的这个循环变量，是对一个循环变量,重复赋值，
不管循环多少次,都只是建立一个变量 i 对这个变量重复赋值,进行操作，操作到最后只有一个 i 存储最终的数值
绑定事件,并且执行，执行事件时,for循环已经执行完毕,i的数值是5，执行程序,虽然点击的标签不同，
但是 i 都是一个变量最终数值都是5，点击标签不同,i 都是相同的5,i + 1都是6，点击任意标签,触发的都是 i+1为6 的效果

如果要是使用for循环完成效果，就要给标签,添加属性,在属性中,存储当前的索引值，执行时,再调用这个索引值

forEach()
forEach() 定义变量的方式和 for循环不同
虽然变量名称没有改变,但是每次循环都会创建一个独立不同的变量，存储的数值,也是独立的不同的数值,而且相互之间不会影响
此时当forEach() 循环结束时,循环几次,就有几个独立的变量,存储每次循环对应的数据内容，此时触发事件每个事件中变量存储的都是独立的不同的相互不影响的数据数值