js中for, for in,for of,forEach循环的用法和区别

最新推荐文章于 2025-01-13 07:59:10 发布

原创最新推荐文章于 2025-01-13 07:59:10 发布 · 467 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #es6

博客同时被 3 个专栏收录

61 篇文章

订阅专栏

笔记

21 篇文章

订阅专栏

面试

14 篇文章

订阅专栏

本文介绍了JavaScript中常见的数组遍历方法，包括for循环、for...in循环、forEach和for...of循环。for循环是最基础的遍历方式，for...in主要用于遍历对象的属性，而forEach无法中断循环。for...of是ES6新增的特性，适用于遍历数组和字符串，直接获取值。此外，还展示了如何使用这些方法打印数组元素及其索引。

for遍历数组的方法：

 let arr = [1, 2, 5, 7, 8, 10, 11]
 for (let i = 0; i < arr.length; i++) {
        console.log(i, arr[i])
    }

在这里插入图片描述

for in 遍历数组

for in 循环得到的是数组或对象的key

let arr = [1, 2, 5, 7, 8, 10, 11]
for (let i in arr) {
     console.log(i, arr[i])
    }

在这里插入图片描述
for in 也可以循环对象

 let obj = {
        a: 1,
        b: 2,
        c: 3
    }
    
 for (let i in obj) {
       console.log(i, obj[i])
    }

在这里插入图片描述

forEach循环数组

明显的缺点就是不能中断
可以对数组对象进行循环，item输出的是数组的每一项对象
直接得到值

let arr = [1, 2, 5, 7, 8, 10, 11]
 arr.forEach((item, i) => {
        console.log(i, item)
    })

在这里插入图片描述

for of 循环数组

ES6新增的方法
直接得到值

let arr = [1, 2, 5, 7, 8, 10, 11]
for (let i of arr) {
        console.log(i)
    }

在这里插入图片描述
可以对字符串进行循环

let str = 'abcdf'
    for (let i of str) {
        console.log(i)
    }

在这里插入图片描述