JavaScript 遍历数组的几种方式

文章目录

- 创建数组
- 获取数组的长度
- 遍历数组
- - 使用普通for循环来遍历数组
  - 使用ES5 for in循环
  - 使用ES6 for of循环
  - 使用forEach来进行迭代
  - 箭头函数
  - 测试遍历数组

创建数组

括号内的数字是数组的长度

let ar = new Array(4)
//向数组添加元素
ar[0] = 100
ar[1] = true
ar[2] = 'etoak'
ar[3] = null

获取数组的长度

//let ar = new Array(4)
console.log(arr.length)//打印数组长度

遍历数组

使用普通for循环来遍历数组

for(let i = 0;i<ar.length;i++){
	console.log(`数组元素值是${ar[i]}`)
}

使用ES5 for in循环

如果是单值集合，那么这个key就是索引值
如果是键值对，那么这个key就是属性名

for(let key in ar){
   console.log(`数组索引值是${key}`)
   console.log(`数组元素值是${ar[key]}`)
}

使用ES6 for of循环

for(let value of 循环体){
    //这个value就是值
}

注意：此循环不能用来迭代我们自己创建的js对象
因为我们自己的创建的对象底层没有迭代器

使用forEach来进行迭代

/*
	循环体.forEach(function(每个被遍历的对象,索引值){
		//业务逻辑
	})
*/
ar.forEach(function(value,index){
   console.log(`索引值是${index}`)
   console.log(`数组元素值是${value}`)
})

箭头函数

在ES6中，匿名函数可以省略为箭头函数ar.forEach(value=>XXXX)

匿名函数去掉function，在参数后，添加 =>

如果只有一个参数，则括号括号省略
如果大括号内直接是return 语句，则大括号省略 return 省略

测试遍历数组

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>数组</title>
		<style>
			div{
				width:200px;
				height:100px;
				background-color: coral;
			}
		</style>
	</head>
	<body>
		<!--
			onmouseover:鼠标滑过
		-->
		<div onmouseover="showArray()">测试域</div>
		<script>

			function showArray(){
            
				let ar = new Array(4)

				ar[0] = 100
				ar[1] = true
				ar[2] = 'etoak'
				ar[3] = null

			   //普通for
				for(let i = 0;i<ar.length;i++){
					console.log(`数组元素值是${ar[i]}`)
				}

				// for in
				for(let key in ar){
				    console.log(`数组索引值是${key}`)
				    console.log(`数组元素值是${ar[key]}`)
				}

				//for of
				for(let value of ar){
				    console.log(`数组元素值是${value}`)
				}

				//forEach
				ar.forEach(function(value,index){
				    console.log(`索引值是${index}`)
                    console.log(`数组元素值是${value}`)
				})
				
				//forEach 箭头函数版
				ar.forEach(value=>XXXX)
	
			}
		</script>
	</body>
</html>