javascript中for...of和for..in循环的区别
更新时间：2022年08月16日 15:26:23 投稿：zx
JS中循环语句众多，你是否也有用的时候突然不知道用哪个的经历，本文主要介绍了javascript中for...of和for..in循环的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
for…in可以用来干什么
（1）for…in最好用来遍历对象，但也可以遍历数组（有缺陷）
（2）for…in遍历的是key-value中的key值
我们先看怎么使用for…in遍历对象
const obj = {
a:1,
b:2,
c:3
}
for( var o in obj){
console.log(o); // 遍历出来的是对象中的属性，a,b,c
console.log(obj[o]); // 遍历出来的是对象中属性各自对应的值1,2,3
}需要注意的是，使用for…in遍历对象时，不仅会把对象上的属性遍历出来，还会把对象原型链上的可枚举的属性遍历出来
再看看for…in遍历数组能不能成功
const arr = [1,2,3,4,5]
for(var a in arr){
console.log(a); // 输出的是数组索引
console.log(arr[a]); // 输出的是数组索引对应的值
}
结果是成功的，但又为什么说最好不要用for…in遍历数组呢？
（1）for…in遍历出的数组索引为字符串型数字，不能直接进行几何运算
（2）遍历的顺序可能不是按照实际数组的内部顺序
（3）使用for…in会遍历所有的可枚举属性，包括原型
for…of能用来做什么
（1）for…of可以用来遍历数/数组/字符串/map/set等拥有迭代器对象的集合
（2）for…of遍历出来的是key-value中的value值
// 遍历数组
var arr = [1,2,3,4,3,5,7];
for (let i of arr){
console.log(i);
}
// 遍历字符串
var str = 'hello'
for (let s of str){
console.log(s);
}
// 遍历set集合
const set = new Set([1,2,3,4])
for (let s of set){
console.log(s);
}补充：
（1）for…of不能用来遍历对象，因为普通对象中没有迭代器对象
（2）与forEach()不同的是，for…of可以使用break,continue,return等语句
总结下来就是：
（1）在遍历对象时用for…in，在遍历数组时用for…of
（2）for…in遍历出的是key，for…of遍历出的结果是value。
也就是说遍历数组时，for…in遍历的是数组的索引，for…of遍历的是数组的元素值。
到此这篇关于javascript中for...of和for..in循环的区别的文章就介绍到这了,更多相关javascript for...of和for..in内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
ECharts提供了自适应功能,可以自动调整图表大小以适应屏幕变化,下面这篇文章主要给大家介绍了关于前端Echarts自适应分辨率和缩放功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
用该方法创建了 Event 对象以后，必须用上表中所示的初始化方法初始化对象。关于初始化方法的详细信息，请参阅 Event 对象参考。2010-08-08
今天小编就为大家分享一篇Layui数据表格之单元格编辑方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了JS简单获取当前日期和农历日期的方法,涉及javascript日期运算与字符串转换相关操作技巧,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了JavaScript创建对象的常用方式,结合实例形式总结分析了javascript面向对象程序设计中对象创建的常见方式、相关操作技巧与注意事项,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了js异或运算符^小技巧，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
高山登不上,不是因为体力不支,只因鞋里一粒。学习也是如此，因而有必要把JavaScript中常见的和与其它语言不同的那些细节学习一下2012-06-06
大家用cnblogs,csdn博客发布技术文档的时候，可以用下面的代码实现运行功能。当然大家看了源码就会发现其实方法还有很多。有更好的方法就发布一下啊。2009-11-11
JavaScript高级程序设计 阅读笔记（十九） js表格排序
js表格排序实现代码，需要的朋友可以参考下2012-08-08
这篇文章主要为大家详细介绍了bootstrap监听滚动实现头部跟随滚动,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
最新评论