ES6提供了entries(),keys(),values()方法返回数组的遍历器,对于遍历器(Iterator)可以使用for...of进行便利,也可是使用entries()返回的遍历器Iterator.next()方法进行遍历。

1.使用keys()遍历。

keys()返回的是数组元素索引号的遍历器。

const arr1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k']
for (let index of arr1.keys()) {
console.log(index);
}

结果:

可以看到输出的都是每个数组元素的index。

0
1
2
3
4
5
6
7
8
9
10

2.使用values()遍历。

values()返回的是数组元素值的遍历器。

for (let val of  arr1.values()) {
console.log(val);
}

结果:

a
b
c
d
e
f
g
h
i
j
k

3.使用entries()遍历。

配合解构使用,可以拿到元素的index和value。

for (let [index, val] of arr1.entries()) {
console.log(index, val);
}

结果:

0 'a'
1 'b'
2 'c'
3 'd'
4 'e'
5 'f'
6 'g'
7 'h'
8 'i'
9 'j'
10 'k'

4.使用Iterator.next()遍历。

基于entries()返回的遍历器,调用遍历器的next()的方法可以获取每一个元素的访问入口,该入口有一个done属性可以表明是否便利结束。通过入口可以拿到value属性,其就是元素的索引和值的数组。

let arrEntries=arr1.entries();
let entry=arrEntries.next();
while(!entry.done){
console.log(entry.value);
entry=arrEntries.next();
}

结果:

[ 0, 'a' ]
[ 1, 'b' ]
[ 2, 'c' ]
[ 3, 'd' ]
[ 4, 'e' ]
[ 5, 'f' ]
[ 6, 'g' ]
[ 7, 'h' ]
[ 8, 'i' ]
[ 9, 'j' ]
[ 10, 'k' ]

End

ES6,数组遍历的更多相关文章

  1. 关于 ES5 & ES6 数组遍历的方法

    ES5 数组遍历方法 1.for 循环 , , , , ] ; i < arr.length; i++) { console.log(arr[i]) } 2.forEach , , , , ] ...

  2. ES6 数组遍历方法的实战用法总结(forEach,every,some,map,filter,reduce,reduceRight,indexOf,lastIndexOf)

    目录 forEach every some map filter reduce && reduceRight indexOf lastIndexOf 前言 ES6原生语法中提供了非常多 ...

  3. JS几种数组遍历方式以及性能分析对比

    前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得 ...

  4. js数组遍历和对象遍历

    针对js各种遍历作一个总结分析,从类型用处:分数组遍历和对象遍历:还有性能,优缺点等. JS数组遍历: 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3,9]; for ( ...

  5. ES6数组及数组方法

    ES6数组可以支持下面的几种写法: (1)var [a,b,c] = [1,2,3]; (2)var [a,[[b],c]] = [1,[[2],3]]; (3)let [x,,y] = [1,2,3 ...

  6. 数组的复制及ES6数组的扩展

    一.数组的复制 // alert([1,2,3]==[1,2,3]); let cc = [0,1,2]; let dd = cc; alert(dd==cc);//此时改变dd会影响cc ES5 只 ...

  7. js数组遍历方法总结

    数组遍历方法 1.for循环 使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显. 1 2 3 for(j = 0,len=arr.length; j < le ...

  8. es6数组的扩展

    数组扩展运算符 ...(三个点) const demoArr=[0,1,2,3,4] console.log(...demoArr) // 0 1 2 3 4 // 他把一个数组用逗号分隔了出来 // ...

  9. ES6 数组方法拓展

    ES6 数组方法拓展 1.Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括E ...

  10. ES6数组相关

    ES6数组新增的几个方法: 1. forEach() //forEach()遍历数组,无返回值,不改变原数组 var arr=[1,2,3,4] arr.forEach((item,index,arr ...

随机推荐

  1. 安装win8+Ubuntu14.04双系统的经验总结

    当时查资料,很多人推荐了easyBCD直接安装ubuntu,但是在我的笔记本上行不通.我的笔记本是Lenovo V480+win8正版系统.这是因为我的笔记本的引导结构是EFI,而不是MBR.我的方法 ...

  2. Spider_Man_4 の BeautifulSoup

    一 介绍 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Beautiful Soup会帮你 ...

  3. php匹配图片、视频文件、音乐文件的正则表达式

    $pattern_video = "/(src)=(\\\?)([\"|']?)([^ \"'>]+\.(swf|flv|mp4|rmvb|avi|mpeg|ra| ...

  4. dede的pagelist标签的listsize数字属性详解

    转载▼http://blog.sina.com.cn/s/blog_a4f3bd4e01012c8n.html dede的pagelist标签的listsize数字属性详解.见远seo经常用织梦搭建各 ...

  5. dedecms后台系统基本参数标题

    1,站点设置 2,核心设置 3,附件设置 4,会员设置 6,性能选项 7,其它选项 8,模块设置 在E:\wamp\www\dededln\back\inc\configgroup.txt

  6. Redis的事务功能详解

    Redis的事务功能详解 MULTI.EXEC.DISCARD和WATCH命令是Redis事务功能的基础.Redis事务允许在一次单独的步骤中执行一组命令,并且可以保证如下两个重要事项: >Re ...

  7. 前端之CSS介绍--选择器

    一.CSS简介 介绍 css我们称呼层叠样式表(英文全称:Cascading Style Sheets).它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等 ...

  8. Centos7 开放防火墙端口命令

    Centos 7 使用firewalld代替了原来的iptables,使用方法如下: >>>关闭防火墙 systemctl stop firewalld.service       ...

  9. python 导入模块错误

    问题: 导入一些模块或者运行第三方软件的时候,会出现一下类似错误: ImportError: No module named future.utils 问题原因: 没有安装第三方库 future,这个 ...

  10. 【深度学习系列】迁移学习Transfer Learning

    在前面的文章中,我们通常是拿到一个任务,譬如图像分类.识别等,搜集好数据后就开始直接用模型进行训练,但是现实情况中,由于设备的局限性.时间的紧迫性等导致我们无法从头开始训练,迭代一两百万次来收敛模型, ...