详谈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 相关文章推荐
比较详细的javascript对象的property和prototype是什么一种关系
Aug 06 Javascript
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
按钮JS复制文本框和表格的代码
Apr 01 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
JavaScript中的比较操作符>、=、
Dec 31 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 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
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
Python 实现数组相减示例
2019/12/27 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
介绍一下except的用法和作用
2015/01/22 面试题
运动会广播稿60字
2014/01/15 职场文书
三年级数学教学反思
2014/01/31 职场文书
干部个人对照检查材料
2014/08/25 职场文书
转正申请报告格式
2015/05/15 职场文书
学校运动会开幕词
2016/03/03 职场文书
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js