• 技术文章 >web前端 >前端问答

    es6怎么实现数组的遍历

    长期闲置长期闲置2022-04-25 16:45:57原创280

    方法:1、利用“数组.keys()”方法,该方法能够遍历数组索引;2、利用“数组.values()”方法,该方法能够遍历数组元素;3、利用“数组.entries()”方法,该方法能够遍历数组的索引和元素。

    本教程操作环境:windows10系统、ECMAScript 6.0版、Dell G3电脑。

    es6怎么实现数组的遍历

    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怎么实现数组的遍历的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:ES6
    上一篇:css3新增了哪三种边框效果 下一篇:css3如何实现鼠标点击图片放大
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• es6怎么求两个数组的交集• es6核心特性是什么• es6中用什么导入资源• es6扩展运算符可以去重吗• sort排序是es6中的吗
    1/1

    PHP中文网