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] = 100ar[1] = truear[2] = 'etoak'ar[3] = null//普通forfor(let i = 0;i<ar.length;i++){console.log(`数组元素值是${ar[i]}`)}// for infor(let key in ar){console.log(`数组索引值是${key}`)console.log(`数组元素值是${ar[key]}`)}//for offor(let value of ar){console.log(`数组元素值是${value}`)}//forEachar.forEach(function(value,index){console.log(`索引值是${index}`)console.log(`数组元素值是${value}`)})//forEach 箭头函数版ar.forEach(value=>XXXX)}</script></body>
</html>