var arr = [1,2,3];
var map = new Map();
map.set('baylor',22);
var s = new Set();
s.add([1,2,3]);
for (var x of arr) {//遍历array集合
alert(x);
}
for (var x of map) {//遍历map集合
alert('key='+x[0] + ',value=' + x[1]);
}
for (var x of s) {//遍历set集合
alert(x);
}

for ... in循环由于历史遗留问题,它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性。

当我们手动给Array对象添加了额外的属性后,for ... in循环将带来意想不到的意外效果:

 var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
alert(x); // '0', '1', '2', 'name'
}

for ... in循环将把name包括在内,但Arraylength属性却不包括在内。

for ... of循环则完全修复了这些问题,它只循环集合本身的元素:

 var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
alert(x); // 'A', 'B', 'C'
}

更好的方式是直接使用iterable内置的forEach方法,它接收一个函数,每次迭代就自动回调该函数。例如:

Array

 var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
alert(element);
});

Set:

 var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
alert(element);
});

Map:

 var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
alert(value);
});

如果对某些参数不感兴趣,由于JavaScript的函数调用不要求参数必须一致,因此可以忽略它们。

JavaScript遍历集合(for...of/for...in/forEach)的更多相关文章

  1. scala的多种集合的使用(3)之遍历集合的方法

    遍历集合的方法 1.用foreach循环遍历一个集合 foreach接收一个函数作为参数.定义的函数应该接收一个元素作为输入参数,然后不要返回任何的东西.输入的参数的类型应该匹配集合中的类型.随着fo ...

  2. javaScript遍历对象、数组总结(转载)

    javaScript遍历对象.数组总结  转载来源 https://www.cnblogs.com/chenyablog/p/6477866.html 在日常工作过程中,我们对于javaScript遍 ...

  3. javaScript遍历对象、数组总结

        javaScript遍历对象总结 1.使用Object.keys()遍历 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性). var obj = {'0':'a ...

  4. JavaScript 遍历对象、数组总结

    在日常工作过程中,我们对于javaScript遍历对象.数组的操作是十分的频繁的,今天抽空把经常用到的方法小结一下,方便今后参考使用!   javaScript遍历对象总结     1.使用Objec ...

  5. Java使用foreach遍历集合元素

    Java使用foreach遍历集合元素 1.实例源码 /** * @Title:ForEach.java * @Package:com.you.model * @Description:使用forea ...

  6. for循环和foreach循环遍历集合的效率比较

    先上代码 package com.test; import java.util.ArrayList; import java.util.LinkedList; import java.util.Lis ...

  7. Java forEach 方式遍历集合(Java 8 新特性)

    JDK 8 新增 forEach 方式遍历集合,这种方式比原来的 for each 循环还要简洁和便利. 需要注意:如果你计算机安装的是 JDK 8 以前的版本,是不支持 JDK 8 的新特性 Lis ...

  8. 关于for与forEach遍历集合中对集合进行操作的问题

    遍历List集合,在循环中再对List集合进行操作,有时候会遇到ConcurrentModificationException(并发修改异常);其实只有在forEach循环集合再对集合操作会发生异常: ...

  9. JSTL详解(常用标签以及c:forEach遍历集合)

    JSTL标签 一. JSTL的简介 1. 什么是JSTL 2. JSTL常用标签库 3. JSTL使用步骤 二. 核心标签库常用标签 1. c: set 标签 2. c: out 标签 3. c: i ...

随机推荐

  1. [转摘]VMware下Windows系统出现大量可删除ATA Channel的解决办法

    编辑VMX配置文件加上一句话就可以了 devices.hotplug = "false" 原文:http://blog.ihipop.info/2015/05/4830.html

  2. fatal: could not read Username for 'https://git.dev.tencent.com' 解决方法

    在使用webhook自动部署时测试出现此问题,通过以下方法粗暴解决: vim .git/config 文件,在remote "origin"  url中加入帐号密码,如图所示,格式 ...

  3. AngularJS 1.x 思维索引

    我们在这里不讨论Angular2和Angular4,因为其完全重写,其实已经不叫AngularJS了. AngularJS的缺陷: 性能问题:通过检查脏值进行数据更新,当数据不断增加时,检查的效率就不 ...

  4. [ZZ]AppiumForWindows 菜鸟计划合集

    AppiumForWindows 菜鸟计划 (一) Appium 材料包 AppiumForWindows 菜鸟计划 (二) 源码环境搭建及代码结构 AppiumForWindows 菜鸟计划 (三) ...

  5. @RequestParam、@ReqeustBody、@ReponseBody认识

    简介: @RequestParam和@RequestBody均是处理request body部分的注解,都用于获取请求部分的参数. @ResponseBody是用于响应部分的注解 1. @Reques ...

  6. spring声明式事务 同一类内方法调用事务失效(转)

    原文 https://blog.csdn.net/jiesa/article/details/53438342 [问题] Spring的声明式事务,我想就不用多介绍了吧,一句话“自从用了Spring ...

  7. maven私库nexus2.3.0-04迁移升级到nexus-3.16.1-02(异机迁移备份)

    环境信息: nexus2.3.0-04安装在32位Windows server 2003系统上 安装位置信息如下: 仓库迁移 Nexus的构件仓库都保存在sonatype-work目录中,nexus2 ...

  8. IdentityServer4(一)使用客户端凭证方式

    这个篇文章主要是记录自己参考官方文档搭建身份认证的过程 使用的.NET Core2.2 参考地址:https://identityserver4.readthedocs.io/en/latest/qu ...

  9. 软件推荐----数据库数据处理Navicat Premium

    一般情况下,企业对数据库的管控很严,通常管控分成以下: 对整台服务器管理权限,如:操作系统Administrator+SA 对单个数据库(Oracle的表空间)完全权限,如:SQL DB_Owner ...

  10. RIDE创建工程和测试套件和用例--书本介绍的入门方法,自己整理实践下

    1.选择File->New Project 2.弹出的New Project对话框,在Name文本框输入一个名词,如“TestProject-0805”,右侧选中“Directory”,选中建立 ...