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遍历元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
uni-app是一个使用Vue.js开发所有前端应用的框架,下面这篇文章主要给大家介绍了关于uniApp常见面试题及答案的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
在学习javaScript, 学到regular expression的时候见知识点有些杂乱，于是将其整理了一些在本文与大家分享2014-05-05
这篇文章主要介绍了JS控制按钮10秒钟后可用的方法,涉及JavaScript基于时间函数控制页面元素样式动态变换的技巧,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了使用堆实现Top K算法，即JS实现，文中详细介绍了Top K算法，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要介绍了详解浏览器渲染页面过程的相关资料,需要的朋友可以参考下2017-02-02
似乎有人觉得用VBS监视注册表很高级？使用了WMI事件而已，跟《用VBS监视进程创建和删除》一样2011-10-10
正好最近在学习webpack的源码,所以下面这篇文章主要给大家介绍了关于webpack源码中一些精妙的方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-02-02
这篇文章主要分享ES6 20个经常使用技巧，作用是使JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言，具体使用详情需要的小伙伴可以参考下面文章内容2022-06-06
Clipboard API 是一组用于在浏览器中操作剪贴板的 JavaScript API,它允许开发者在网页上读取和写入剪贴板内容,实现复制、剪切和粘贴等功能,这篇文章主要介绍了JS实现复制粘贴文字及图片功能,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了JS实现问卷星自动填问卷脚本两秒自动提交功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2017-08-08
最新评论