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

    es6新增的遍历方法有哪些

    青灯夜游青灯夜游2022-03-23 16:38:23原创102

    新增的遍历方法有:1、findIndex(),可遍历数组,查找匹配的元素;2、find(),可遍历数组,查找第一个匹配的元素;3、entries(),对键值对进行遍历;4、keys(),对键名进行遍历;5、values(),对键值进行遍历。

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

    ES5中常用的10种遍历方法:

    1、原始的for循环语句

    2、Array.prototype.forEach数组对象内置方法

    3、Array.prototype.map数组对象内置方法

    4、Array.prototype.filter数组对象内置方法

    5、Array.prototype.reduce数组对象内置方法

    6、Array.prototype.some数组对象内置方法

    7、Array.prototype.every数组对象内置方法

    8、Array.prototype.indexOf数组对象内置方法

    9、Array.prototype.lastIndexOf数组对象内置方法

    10、for...in循环语句

    es6新增的遍历方法

    findIndex(callback [, thisArg])查找数组中匹配的元素

    找到一个就返回匹配的元素的下标,没找到就返回-1。
    let arr = [1, 2, 3, 4, 5, 6]// 此时我们找大于2的数
    let newArr = arr.findIndex(val => {return val > 2})
    console.log(newArr) // 2

    find(fn(callback [, thisArg])

    查找数组中匹配的元素,找到一个就返回匹配的元素,没找到就返回undefined。

    注:下面的例子相对于需求是一个错误的示范,因为我们要找出大于2的数,当找到匹配到3时,满足条件,函数就会停止。

    例:

    let arr = [1, 2, 3, 4, 5, 6]
    // 此时我们找大于2的数
    let newArr = arr.find(val => {
        return val > 2
    })
    console.log(newArr) // 3

    entries() , keys() 和 values()

    ES6 提供三个新的方法 —— entries(),keys()和values() —— 用于遍历数组和对象。它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

    for (let index of ['a', 'b'].keys()) {
      console.log(index);
    }
    // 0
    // 1
    
    for (let elem of ['a', 'b'].values()) {
      console.log(elem);
    }
    // 'a'
    // 'b'
    
    for (let [index, elem] of ['a', 'b'].entries()) {
      console.log(index, elem);
    }
    // 0 "a"
    // 1 "b"

    如果不使用for...of循环,可以手动调用遍历器对象的next方法,进行遍历。

    let letter = ['a', 'b', 'c'];  
    let entries = letter.entries();  
    console.log(entries.next().value); // [0, 'a']  
    console.log(entries.next().value); // [1, 'b']  
    console.log(entries.next().value); // [2, 'c']

    【相关推荐:javascript视频教程web前端

    以上就是es6新增的遍历方法有哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:es6 遍历方法
    上一篇:es6怎么判断对象key是否存在 下一篇:jquery有没有size方法
    Web大前端开发直播班

    相关文章推荐

    • es6深度拷贝的几种实现方法是什么• es6箭头函数要注意什么• es6中什么是装饰器• typescript跟es6有什么区别• assign是es6方法吗• es6怎么判断数组是否有某一项值
    新人一分购

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网