JS 中forEach,for in、for of用法实例总结

 更新时间:2023年05月24日 09:11:03   作者:书香水墨  
这篇文章主要介绍了JS 中forEach,for in、for of用法,结合实例形式总结分析了JS 中forEach,for in、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 测试上述代码运行效果!

相关文章

  • ionic实现带字的toggle滑动组件

    ionic实现带字的toggle滑动组件

    这篇文章主要为大家详细介绍了ionic实现带字的toggle滑动组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JS中document获取元素的常用方法(附案例)

    JS中document获取元素的常用方法(附案例)

    这篇文章主要介绍了JS中document获取元素的常用方法,并提供了具体的示例代码,这些方法涵盖了从单个元素到多个元素的获取方式,需要的朋友可以参考下
    2025-05-05
  • 基于javascript实现图片左右切换效果

    基于javascript实现图片左右切换效果

    这篇文章主要为大家介绍了基于javascript实现图片左右切换效果,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • javascript axios 实现进度监控的示例代码

    javascript axios 实现进度监控的示例代码

    在使用axios发送HTTP请求时,可以通过onUploadProgress和onDownloadProgress来监控上传和下载的进度,具有一定的参考价值,感兴趣的可以了解一下
    2025-01-01
  • JS小数转换为整数的方法分析

    JS小数转换为整数的方法分析

    这篇文章主要介绍了JS小数转换为整数的方法,结合实例形式分析了数值转换的常用方法与使用技巧,需要的朋友可以参考下
    2017-01-01
  • 纯JS代码实现气泡效果

    纯JS代码实现气泡效果

    js气泡效果,在项目需求中经常遇到。今天小编把大概实现步骤分享到脚本之家平台,感兴趣的朋友可以参考下
    2016-05-05
  • 基于Echarts实现饼图效果

    基于Echarts实现饼图效果

    这篇文章主要为大家详细介绍了基于Echarts实现饼图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • JavaScript中map函数的实用技巧总结

    JavaScript中map函数的实用技巧总结

    map是JavaScript中的一个高阶函数,它被用于遍历数组,并对数组中的每个元素执行一个由你提供的函数,然后返回一个新数组,这篇文章主要给大家介绍了关于JavaScript中map函数的实用技巧,需要的朋友可以参考下
    2025-05-05
  • JS原型链怎么理解

    JS原型链怎么理解

    本文重点给大家介绍javascript中的原型链知识,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看下吧
    2016-06-06
  • JavaScript懒加载与预加载原理与实现详解

    JavaScript懒加载与预加载原理与实现详解

    这篇文章主要介绍了JavaScript懒加载与预加载,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-09-09

最新评论