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. 如何一步一步新建一个Owin项目

    打开VS2015,新建Web应用程序,命名为OwinWeb(名字随意). 在弹出的“新建ASP.NET项目”窗口中选择“Empty”模板,“为以下项添加文件夹和核心引用”处全不选.点击确定. 创建完后 ...

  2. puzz: 图片和表单上传的不一致问题

    1.    方向1 用户提交表单, 图片和表单同步上传.(由同一服务器处理, 服务器压力大. 没有分离) 2.    方向2 图片和表单分开上传. 如图片访问ftp,表单提交后台(图片和后台分离) 2 ...

  3. TypeScript: this bind 和 回调的正确用法

    TypeScript 中如果传递了 而且在回调函数中用了this 的话, 就要小心了, 这个this 不一定是指向当前类对象了,如果想确保指向的还是那个对象的话, 需要在传递那个方法的时候, 先调用b ...

  4. codechef February Challenge 2018 简要题解

    比赛链接:https://www.codechef.com/FEB18,题面和提交记录是公开的,这里就不再贴了 Chef And His Characters 模拟题 Chef And The Pat ...

  5. centos7 Ruby环境变量配置

    ruby安装参考博客:https://blog.csdn.net/yelllowcong/article/details/78362370  (Redis之集群redis-trib.rb环境的搭建-y ...

  6. centos7虚拟机克隆后设置固定IP

    虚拟机centos7克隆一份出来之后,新centos7更改了固定IP,可是不生效.重启网卡时报错: network.service: control process exited, code=exit ...

  7. EMQ消息队列初体验

    使用命令创建admin用户,密码123 emqx_ctl users add admin 配置规则/etc/emqx/acl.conf(除管理员,其他用户只能订阅限定的测试主题路径) %% 允许'ad ...

  8. js调试工具及微博登录分析

    js调试工具 网页 都是采用ajax  需要提交一些参数 断点 自己去直接断点 事件断点, network 方法 靠近边栏顶部的是Call Stack(调用堆栈)窗格.当代码在断点处暂停时,Call ...

  9. 用yum快速搭建LAMP平台

    实验环境: [root@nmserver-7 html]# cat /etc/redhat-release CentOS Linux release 7.5.1804 (Core) [root@nms ...

  10. linux setup的安装

    setup作为一个l图形化的界面能够让我们更方便的去操作linux系统,而不需要记各种各样的配置文件的名称. 但是我们安装的最初的setup只有验证配置一个功能,我们还要安装完其他的功能才能使用其他的 ...