js中的iterable用法
iterable字面意思:可迭代的,可重复的 、
遍历Array
可以采用下标循环,遍历Map
和Set
就无法使用下标。为了统一集合类型,ES6标准引入了新的iterable
类型,Array
、Map
和Set
都属于iterable
类型。
具有iterable
类型的集合可以通过新的for ... of
循环来遍历。
for ... of
循环是ES6引入的新的语法,
用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
- console.log(x);
- }
- for (var x of s) { // 遍历Set
- console.log(x);
- }
- for (var x of m) { // 遍历Map
- console.log(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) {
- console.log(x); // '0', '1', '2', 'name'
- }
for ... in
循环将把name
包括在内,但Array
的length
属性却不包括在内。
for ... of
循环则完全修复了这些问题,它只循环集合本身的元素:
- var a = ['A', 'B', 'C'];
- a.name = 'Hello';
- for (var x of a) {
- console.log(x); // 'A', 'B', 'C'
- }
这就是为什么要引入新的for ... of
循环。
然而,更好的方式是直接使用iterable
内置的forEach
方法,它接收一个函数,每次迭代就自动回调该函数。以Array
为例:
- a.forEach(function (element, index, array) {
- // element: 指向当前元素的值
- // index: 指向当前索引
- // array: 指向Array对象本身
- console.log(element + ', index = ' + index);
- });
注意,forEach()
方法是ES5.1标准引入的,你需要测试浏览器是否支持。
Set
与Array
类似,但Set
没有索引,因此回调函数的前两个参数都是元素本身:
- var s = new Set(['A', 'B', 'C']);
- s.forEach(function (element, sameElement, set) {
- console.log(element);
- });
Map
的回调函数参数依次为value
、key
和map
本身:
- var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
- m.forEach(function (value, key, map) {
- console.log(value);
- });
如果对某些参数不感兴趣,由于JavaScript的函数调用不要求参数必须一致,因此可以忽略它们。例如,只需要获得Array
的element
:
- var a = ['A', 'B', 'C'];
- a.forEach(function (element) {
- console.log(element);
- });
js中的iterable用法的更多相关文章
- [转载]js中return的用法
一.返回控制与函数结果,语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制,无函数结果,语法为:return; 在大多数情况下,为事件处理函 ...
- js中this的用法
经过近几周的模拟面试题,我查询了一些资料,今天就来说说,在js中this的用法吧.方法有四:第一,用作全局变量,第二,用作表该对象,第三,用作构造函数,第四,用作call和applay
- JQuery之append和appendTo的区别,还有js中的appendChild用法
JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...
- JS中event.keyCode用法及keyCode对…
js中event.keyCode用法及keyCode对照表 标签: javascriptJavaScriptJavascriptjavaScript 2012-12-11 15:11 HTML Jav ...
- 浅谈JS中 reduce() 的用法
过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...
- JS中 reduce() 的用法
过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...
- JS中的this用法详解
随着对js的深入学习和使用,你会发现它里面包含了很多令人困惑的机制,比如对象.闭包.原型链继承等等,而这其中肯定包含令你现在或者曾经费解的this,如果你不把心一横,花点时间还真不明白这个this的用 ...
- JS中document.createElement()用法及注意事项
今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.createElement(),这个方法在ie下支持这样创建元素 ...
- JS中$含义和用法
原博客:https://www.cnblogs.com/jokerjason/p/7404649.html$在JS中本身只是一个符号而异,在JS里什么也不是.但在JS应用库JQUERY的作者将之做为一 ...
随机推荐
- ELK日志分析平台环境部署 (yum安装)
前言:通常体质被分散存储在不同的设备上面,在庞大的服务器集群中,我们需要集中化的管理,日志的统计和检索,一般我们使用grep和awk,wc等linux命令虽然能够实现检索和统计,但是呢,对于要求更高的 ...
- Python学习(十九) —— 前端基础之HTML
转载自:http://www.cnblogs.com/liwenzhou/p/7988087.html 一.HTML介绍 1.Web服务本质 import socket sk = socket.soc ...
- 今天开始学习php,粘一些重点放这以便查看记忆。
1.PHP的变量用$定义. PHP 将所有全局变量存储在一个名为 $GLOBALS[index] 的数组中. index 保存变量的名称.这个数组可以在函数内部访问,也可以直接用来更新全局变量. 2. ...
- form表单利用iframe高仿ajax
html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- window下用taskkill杀死进程
TASKKILL [/S system [/U username [/P [password]]]] { [/FI filter] [/PID processid | /IM imagename] } ...
- webstrom中如何将npm菜单调出?
在package.json文件上点击右键>>>点击show npm scripts就可以了.如图:
- CSS规范 - 分类方法
CSS文件的分类和引用顺序 通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类. 我们按照CSS的性质和用途,将CSS文件分成“公共型样式”.“特殊型样式”.“皮肤型 ...
- Web界面实现数据库增删改查过程
实现方法:JSP+Servlet+JavaBean 基本实现思想:jsp文件为显示界面,包括增删改查四个界面,然后使用form或者href超链接的方法将网页获得的值传到Servlet中的方法里:而se ...
- Booksort POJ - 3460 (IDA*)
Description The Leiden University Library has millions of books. When a student wants to borrow a ce ...
- python爬取今日头条关键字图集
1.访问搜索图集结果,获得json如下(右图为data的一条的详细内容).页面以Ajax呈现,每次请求20个图集,其中 title --- 图集名字 artical_url --- 图集的地址 cou ...