所属分类:web前端开发
方法:1、利用“数组.keys()”方法,该方法能够遍历数组索引;2、利用“数组.values()”方法,该方法能够遍历数组元素;3、利用“数组.entries()”方法,该方法能够遍历数组的索引和元素。
前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用
本教程操作环境:windows10系统、ECMAScript 6.0版、Dell G3电脑。
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' ]
登录后复制
【相关推荐:javascript视频教程、web前端】
以上就是es6怎么实现数组的遍历的详细内容,更多请关注zzsucai.com其它相关文章!