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 测试上述代码运行效果!

相关文章

  • JsonProperty 的使用方法详解

    JsonProperty 的使用方法详解

    这篇文章主要介绍了JsonProperty 的使用方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • Prototype框架详解

    Prototype框架详解

    Prototype是一个JavaScript框架,旨在简化动态Web应用程序的开发。原型被称为作为一个单一的文件分发的prototype.js,本文给大家介绍prototype框架,感兴趣的朋友一起学习吧
    2015-11-11
  • JS常用的几种数组遍历方式以及性能分析对比实例详解

    JS常用的几种数组遍历方式以及性能分析对比实例详解

    这篇文章主要介绍了JS常用的几种数组遍历方式以及性能分析对比,结合实例形式详细分析了javascript针对数组遍历的几种常见使用方法及执行效率对比,具有一定参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • JS中的算法与数据结构之字典(Dictionary)实例详解

    JS中的算法与数据结构之字典(Dictionary)实例详解

    这篇文章主要介绍了JS中的算法与数据结构之字典(Dictionary),结合实例形式详细分析了javascript数据结构中字典的概念、原理、定义与常见使用方法,需要的朋友可以参考下
    2019-08-08
  • javascript iframe中打开文件,并检测iframe存在否

    javascript iframe中打开文件,并检测iframe存在否

    从iframe中打开文件,并检测iframe存在否如果说只是检测页面存在否,直接设置target用伪协议就可以解决了...
    2008-12-12
  • javascript之Object.assign()的痛点分析

    javascript之Object.assign()的痛点分析

    这篇文章主要介绍了javascript之Object.assign()的痛点分析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • 利用Three.js实现3D三棱锥立体特效

    利用Three.js实现3D三棱锥立体特效

    Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。本文将用Three.js实现3D三棱锥立体特效,感兴趣的可以了解一下
    2022-06-06
  • js实现本地图片文件拖拽效果

    js实现本地图片文件拖拽效果

    这篇文章主要为大家详细介绍了js实现本地图片文件拖拽效果,拖拽文件到指定位置,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 使用JavaScript关闭窗口的4种方法举例

    使用JavaScript关闭窗口的4种方法举例

    在Web开发中,有时候我们需要通过JavaScript来控制用户的浏览器行为,其中之一就是关闭浏览器窗口,下面这篇文章主要给大家介绍了关于使用JavaScript关闭窗口的4种方法,需要的朋友可以参考下
    2024-01-01
  • 原生JS实现-星级评分系统的简单实例

    原生JS实现-星级评分系统的简单实例

    下面小编就为大家带来一篇原生JS实现-星级评分系统的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08

最新评论