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
下面小编就为大家带来一篇JS中位置与大小的获取方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
对于js的一些常见事件的总结2008-12-12
JavaScript设计模式之原型模式(Object.create与prototype)介绍
这篇文章主要介绍了JavaScript设计模式之原型模式(Object.create与prototype)介绍,原型模式指使用原型实例来拷贝、创建新的可定制的对象,新建的对象,不需要知道原对象创建的具体过程,需要的朋友可以参考下2014-12-12
下面小编就为大家带来一篇html中鼠标滚轮事件onmousewheel的处理方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
本文主要介绍了基于javascript实现报表页面集成天气的方法步骤，简单三步，一看就懂。具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
这篇文章主要介绍了ES6正则的扩展,结合实例形式详细分析了ES6正则操作常用的修饰符、模式、属性、方法及相关操作技巧,需要的朋友可以参考下2017-04-04
javascript中$(function() {});写与不写有哪些区别
javascript中$(function() {....}) 是jQuery中的经典用法，等同于 $(document).ready(function() {....}) javascript中$(function() {});写与不写有哪些区别，需要的朋友可以参考下2015-08-08
本文主要介绍我为桌面和 Web 设计的一个超级秘密 Flutter 项目使用了画布和可拖动节点界面。本教程将展示我如何使用堆栈来使用小部件完成可拖动功能,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了Javascript confirm多种使用方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
最新评论