JavaScript 中 forEach、for in 与 for of 遍历用法详解
作者:小括号时间:2026-10-30 19:29:04浏览:395
本文详细解析 JavaScript 中三种常见遍历方式:forEach、for in 和 for of。通过数组与对象的遍历实例,展示 forEach 的回调参数、for in 的索引特性以及 for of 对可迭代对象的要求。重点讲解如何利用 Symbol.iterator 和生成器函数使普通对象支持 for of 遍历,帮助开发者根据场景选择合适方案。
一、forEach
1.1 遍历数组
var array = [1,2,3,4,5,6];
/**
* currentValue 当前元素
* index 当前元素的索引值
* arr 当前元素所属的数组对象
**/
array.forEach(function(currentValue, index, arr) {
console.log("index: " + index + "; currentValue: ", currentValue);
});1.2 遍历对象
var object = {"a":1, "b":2, "c":3};
/**
* currentValue 当前元素
* index 当前元素的索引值
* arr 当前元素所属的数组对象
**/
Object.keys(object).forEach(function(currentValue, index, arr) {
console.log("index: " + index + "; currentValue: ", currentValue);
});二、for in
2.1 遍历数组
var array = [1,2,3,4,5,6];
for (var index in array) {
console.log("index: " + index + "; currentValue: ", array[index]);
}2.2 遍历对象
var object = {"a":1, "b":2, "c":3};
for (var index in object) {
console.log("index: " + index + "; currentValue: ", object[index]);
}三、for of
3.1 遍历数组
var array = [1,2,3,4,5,6];
for (var varlue of array) {
console.log("currentValue: ", varlue);
}3.2 遍历对象
for of 不能直接遍历普通数组或对象,需要为对象增加 Symbol.iterator 属性以使其成为可迭代对象。
3.2.1 方法一
var obj = {
a:1,
b:2,
c:3
};
obj[Symbol.iterator] = function(){
var keys = Object.keys(this);
var count = 0;
return {
next(){
if(count < keys.length) {
return {value:obj[keys[count++]], done:false};
}else{
return {value:undefined, done:true};
}
}
}
};
for(var k of obj){
console.log(k);
}3.2.2 方法二使用ES6 function*()
var obj = {
a:1,
b:2,
c:3
};
obj[Symbol.iterator] = function*(){
var keys = Object.keys(obj);
for(var k in keys){
yield [k, keys[k]]
}
};
for(var [k, v] of obj){
console.log(k, v);
}感兴趣的朋友可以使用本站在线工具:http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果!
作者最新文章
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
