详谈js遍历集合(Array,Map,Set)


Posted in Javascript onApril 06, 2017

Array可以使用下标,Map和Set不能使用下标,ES6引入了iterable类型,Array,Map,Set都属于iterable类型,它们可以使用for...of循环来遍历:

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
  alert(x);
}
for (var x of s) { // 遍历Set
  alert(x);
}
for (var x of m) { // 遍历Map
  alert(x[0] + '=' + x[1]);
}

>for...of与for...in的区别: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'
}

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

>更好的方式:iterable内置的forEach方法:

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

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
  alert("参数1="+element+",参数2="+sameElement);
});
//参数1=A,参数2=A
//参数1=B,参数2=B
//参数1=C,参数2=C

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

以上这篇详谈js遍历集合(Array,Map,Set)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js正则表达exec与match的区别说明
Jan 29 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
javascript中this用法实例详解
Apr 06 #Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 #Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 #Javascript
JS优化与惰性载入函数实例分析
Apr 06 #Javascript
大白话讲解JavaScript的Promise
Apr 06 #Javascript
JS实现的二叉树算法完整实例
Apr 06 #Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 #Javascript
You might like
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
python实现输入数字的连续加减方法
2018/06/22 Python
pandas值替换方法
2018/07/10 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
Python Flask框架扩展操作示例
2019/05/03 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
日语专业个人的求职信
2013/12/03 职场文书
光盘行动倡议书
2014/02/02 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
青春励志演讲稿
2014/04/29 职场文书
爱心捐书活动总结
2014/07/05 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
工作态度检讨书范文
2015/05/06 职场文书
总经理致辞
2015/07/29 职场文书
导游词之包公祠
2019/11/25 职场文书