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. POJ 1797 Heavy Transportation(Dijkstra变形——最长路径最小权值)

    题目链接: http://poj.org/problem?id=1797 Background Hugo Heavy is happy. After the breakdown of the Carg ...

  2. JS_全

    <script src="jquery-1.9.1.js" type="text/javascript"></script> <s ...

  3. 【转】Maven pom.xml 配置详解

    原文链接:https://yq.aliyun.com/articles/38271 pom.xml文件配置详解 --声明规范 <project xmlns="http://maven. ...

  4. 5dfda1332b67817b0f2d7839242021ce'Java数据结构和算法

    1.return 一个空的集合,而不是 null 如果一个程序返回一个没有任何值的集合,请确保一个空集合返回,而不是空元素.这样你就不用去写一大堆 "if else" 判断null ...

  5. java进行图片和字符串的互相转换

    今天做项目,突然发现图片居然能转成字符串,字符串也能转成图片. 接下来让我们进行代码演示吧! /** * 字符串转图片 * @param imgStr --->图片字符串 * @param fi ...

  6. MySQL服务器最大连接数怎么设置才合理[转]

    如果mysql 连接数据设置不合理可能会导致很小的流量mysql就提示MySQL: ERROR 1040: Too many connections错误了,那么要如何才算是合理设置mysql最大连接数 ...

  7. python3 第十二章 - 数据类型之List(列表)

    Python内置的一种数据类型是列表:list. list是一种有序的集合 可以随时添加和删除其中的元素. 它可以作为一个方括号内的逗号分隔值出现. 列表的数据项不需要具有相同的类型 创建一个列表,只 ...

  8. javascript 类数组对象

    原文:https://segmentfault.com/a/1190000000415572 定义: 拥有length属性,其他属性(索引)为非负整数(对象中的所有会被当做字符串来处理,这里你可以当做 ...

  9. eclipse启动报错the catalog could not be loaded please ensure that you have network access and if needed have configured your network proxy

    搜索关键词不对在网上查了一圈没找到合适的解决办法 去看报错的日志文件 然并卵.不过下面有个config.ini,想着以前能用现在不能用,肯定是配置问题,打开该文件 转载请注明出处http://www. ...

  10. SSM与jsp传递实体类

    jsp传controller Controller: @RequestMapping({"/user"}) public void registerUser(User uu) th ...