JavaScript中for in和for of的区别示例详解

更新时间：2025年06月26日 10:59:17 作者：加油乐

在JavaScript中for...in和for...of是两种不同的循环结构,它们各自有特定的用途和特点,这篇文章主要介绍了JavaScript中for in和for of区别的相关资料,需要的朋友可以参考下

一. 前言

在对数组或对象进行遍历时，我们经常会使用到两种方法: for in和for of
它们两者都可以用于遍历，不过for in遍历的是数组的索引或对象的属性名（index），而for of遍历的是数组值或元素字段（value）

二. for in

1. for in循环对象

for in 用于循环对象时, key为对象中的每个属性名使用 对象名[key]可以访问对象中对应的属性值

window.location.href = "https://blog.csdn.net/2301_76459194?spm=1011.2266.3001.5343"
let obj = { name: "张三", age: 28 }
 for (const key in obj) {
     console.log(key);  // name age
     console.log(obj[key]); //张三 28
 }

2. for in循环数组

for in 用于循环数组时, key为数组中的每个下标 , 使用 数组名[key]可以访问数组中对应的值

let arr = [1, 5, 8, 9, 19, 85]
    for (const key in arr) {
        console.log(key);  // 0 1 2 3 4 5
        console.log(arr[key]); // 1 5 8 9 19 85
    }

三. for of

1. for of循环数组

for of 用于数组的循环时 , iterator是数组的每个值

let arr = [1, 5, 8, 9, 19, 85]
 for (const iterator of arr) {
     console.log(iterator);  //1 5 8 9 19 85
 }

2. for of循环字符串

for of 用于字符串的循环时 , iterator是字符串的每个字段

 let str = '这是一段文字'
   for (const iterator of str) {
       console.log(iterator); // 这 是 一 段 文 字
   }

总结

到此这篇关于JavaScript中for in和for of区别的文章就介绍到这了,更多相关JS for in和for of的区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript实现网页播放器
这篇文章主要为大家详细介绍了JavaScript实现网页播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
Webstorm2016使用技巧(SVN插件使用)
这篇文章主要介绍了Webstorm2016使用技巧(SVN插件使用),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
在JS中如何调用JSP中的变量
在JS中如何调用JSP中的变量，具体该怎么实现？下面有个不错的示例，需要的朋友可以了解下
2014-01-01
jstl中判断list中是否包含某个值的简单方法
下面小编就为大家带来一篇jstl中判断list中是否包含某个值的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
JavaScript 中实现 use strict的方法及优势
本教程将讨论JavaScript中的use strict特性,在这里,我们将通过不同的示例了解如何在JavaScript代码语句中创建和执行use strict关键字,需要的朋友可以参考下
2023-09-09
原生JS实现随机点名项目的实例代码
这篇文章主要介绍了原生JS实现随机点名项目的实例代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-04-04
JS中的算法与数据结构之常见排序（Sort）算法详解
这篇文章主要介绍了JS中的算法与数据结构之常见排序（Sort）算法,结合实例形式详细分析了js常见排序算法中的冒泡排序、选择排序、插入排序、希尔排序、归并排序、快速排序等算法相关实现技巧与操作注意事项,需要的朋友可以参考下
2019-08-08
浅谈JS封闭函数、闭包、内置对象
下面小编就为大家带来一篇浅谈JS封闭函数、闭包、内置对象。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
微信小程序使用ucharts在小程序中加入横屏展示功能的全过程
这篇文章主要给大家介绍了关于微信小程序使用ucharts在小程序中加入横屏展示功能的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友可以参考下
2022-09-09
JavaScript字典与集合详解
这篇文章主要介绍了JavaScript字典与集合详解，集合是由一组无序且不重复的元素构成。我们可以将集合看成一种特殊的数组，它的特殊之处就是无序且不重复，这也就意味着我们不能通过下标的方式进行访问，而且集合中不会出现重复的元素
2022-07-07