JavaScript使用 for...in 、 for...of 或者 forEach() 遍历元素的示例
更新时间：2023年09月15日 10:13:55 作者：谢尔登
for...in 、 for...of 和 forEach 都是用于循环遍历集合元素的方法,但它们之间有一些重要的区别,本文通过实例代码介绍JavaScript使用 for...in 、 for...of 或者 forEach() 遍历元素的相关知识,感兴趣的朋友一起看看吧
for...in 、 for...of 和 forEach 都是用于循环遍历集合元素的方法，但它们之间有一些重要的区别：
1.for...in 循环：
for...in主要用于遍历对象的属性，通常是遍历对象的可枚举属性（包括继承的属性），而不是数组或集合元素。- 它遍历对象的属性名称（键名），而不是属性的值。遍历对象属性时，包括继承的属性和原型链上的属性。
- 适用于遍历普通对象（Object）的属性，不适用于数组或类似数据集合的遍历。
示例：
const person = {
name: 'John',
age: 30,
job: 'Engineer'
};
for (let key in person) {
console.log(key + ': ' + person[key]);
}输出：
name: John
age: 30
job: Engineer
2.for...of 循环：
for...of用于遍历可迭代对象（如数组、字符串、Map、Set 等），并访问它们的值。- 它不会遍历对象的属性，只会遍历集合中的元素。
- 适用于遍历数据集合，而不是对象的属性。
示例：
const colors = ['red', 'green', 'blue'];
for (let color of colors) {
console.log(color);
}输出：
red
green
blue
3.forEach：
- 用于遍历数组的元素，对每个元素执行一个回调函数。
- 提供了更高级别的抽象，让你可以更容易地执行数组操作，如映射、筛选、累加等。
- 不适用于普通对象，只适用于数组。示例：
Copy code
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number);
});主要区别总结：
- for…in 用于遍历对象的属性，for…of 用于遍历可迭代对象的元素，而 forEach 用于遍历数组元素。
- for…in 适用于对象，for…of 和 forEach 适用于数组。
- forEach 允许你传递一个回调函数，更容易进行复杂的操作，而 for…in 和 for…of 较为基础，只能用于遍历。
- 注意遍历对象时，for…in 会遍历继承的属性，这可能需要额外的处理。
到此这篇关于JavaScript使用 for...in 、 for...of 或者 forEach() 遍历元素的文章就介绍到这了,更多相关js遍历元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
分割字符串的方法有很多，这篇文章主要介绍了一个JavaScript用逗号分割字符串实例，需要的朋友可以参考下2014-09-09
webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。这篇文章主要给大家总结介绍了关于webpack学习教程之前端性能优化的相关资料，需要的朋友可以参考下。2017-12-12
按常理循环绑定事件，但是得到的结果却不是想要的，下面有个不错的示例，可以为大家详细分解下2014-04-04
下面小编就为大家带来一篇基于js里调用函数时,函数名带括号和不带括号的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
动画的原理是通过定时器setInterval() 不断移动盒子位置。但是如果同时有好几个元素都需要添加动画呢？我们就可以考虑将其封装成一个简单的动画函数。本文将为大家介绍如何进行封装，需要的可以参考一下2021-12-12
这篇文章主要介绍了微信小程序模板与设置WXML，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
TypeScript中Boolean和boolean的用法及区别
本文详细解释了TypeScript中Boolean和boolean的区别,从类型本质、使用场景、真值判断、性能考量等方面进行对比,boolean为基本类型,适用于常规布尔逻辑,而Boolean为构造函数,适用于将布尔值作为对象处理的场景,了解这些差异有助于编写更精确高效的TypeScript代码2026-04-04
这篇文章主要介绍了Javascript实现返回上一页面并刷新的小例子，有需要的朋友可以参考一下2013-12-12
这篇文章主要介绍了uniApp获取当前位置经纬度,以下是使用uni.getLocation获取当前位置的示例代码,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了Bootstrap Scrollspy源码学习，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
最新评论