浅谈JS数组内置遍历方法有哪些和区别

目录

• forEach()（ES6）方法
• map()（ES6） 方法
• flatMap()方法
• for...in...
• for...of...
• filter（ES6）遍历数组
• every（）函数（ES6）
• find（）函数（ES6）
• findIndex（）函数 （ES6）

forEach()（ES6）方法

forEach()（ES6）方法对数组的每个元素执行一次给定的函数。

    1. 数组里的元素个数有几个，该方法里的回调就会执行几次
    2. 第一个参数是数组里的元素，第二个参数为数组里元素的索引，第三个参数则是它自己（利用第三个参数可以进行数组去重）
    3. 数组自带的遍历方法，foreach在循环次数未知或者计算起来较复杂的情况下效率比for循环高
    4. 循环的数组元素是基本数据类型，不会改变原数据的数据，循环的数组元素为对象，会改变原数组的对象属性的值
    5. 循环过程中不支持修改索引，回调中使用return不会报错，但是无效

    注意：不能使用break和continue跳出整个循环或当前循环的，会报错，但是结合try...catch可以实现跳出循环

const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));

缺点：没有办法中止或跳出 `forEach()` 循环

map()（ES6） 方法

map()（ES6） 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

    const array1 = [1, 4, 9, 16];
    const map1 = array1.map(x => x * 2);
    console.log(map1);  //[2, 8, 18, 32]

    三个参数：数组元素，元素索引，原数组本身

flatMap()方法

flatMap()方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。

    var arr1 = [1, 2, [3, 4]];
    arr1.flatMap(x => x);    //[1, 2, 3, 4]
    var arr1 = [1, 2, 3, 4];
    arr1.flatMap(x => [[x * 2]]);   // [[2], [4], [6], [8]]

for...in...

这个循环用的人也很多，但是效率最低（输出的 key 是数组索引），如果遍历的是对象，输出的则是对象的属性名

for...of...

  性能要好于 `for..in...`，但仍然比不上普通的 `for` 循环
     注意：不能循环对象，因为任何数据结构只要部署 Iterator接口，就可以完成遍历操作，有些数据结构原生具备 Iterator 接口，比如Array、Map、Set、String等，而 Iterator 接口是部署在数据结构的Symbol.iterator属性上的，而对象Object恰恰是没有Symbol.iterator属性的，所以无法被for..of遍历

filter（ES6）遍历数组

filter（ES6）遍历数组，过滤出符合条件的元素并返回一个新数组, 如果没有任何数组元素通过测试，则返回空数组。

    const result = words.filter(word => word.length > 6);
    console.log(result)   //["exuberant", "destruction", "present"]
some（）函数（ES6）
    遍历数组中是否有符合条件的元素，返回值为Boolean值
    这个它只要找到一个符合条件的，就返回 true。
    var arr = [
     { id: 1, name: '买笔', done: true },
     { id: 2, name: '买笔记本', done: true },
     { id: 3, name: '练字', done: false }
    ]
    
    var bool = arr.some(function (item, index) {
     return item.done
    })
    console.log(bool)    // true

every（）函数（ES6）

   测试数组的各个元素是否通过了回调函数的测试
    若都通过，返回 true，否则返回 false
    简单的说就是如果回调函数每次返回的值都是 true 的话，则 every() 返回 true，否则为 false。

    var arr = [
        { id: 1, name: '买笔', done: true },
        { id: 2, name: '买笔记本', done: true },
        { id: 3, name: '练字', done: false }
    ]
    var bool = arr.every((item, index) => {
        return item.done
    })
    console.log(bool)    // false

find（）函数（ES6）

返回第一个通过测试的元素,如果没有通过测试的元素，则会返回**undefined**。

    var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
    var num = arr.find( (item, index) => {
        return item === 3
    })
    console.log(num)   //  3

findIndex（）函数 （ES6）

这个函数与上面的find（）作用一样，就是它返回的值为该通过第一个元素的索引。

    var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
    var num = arr.findIndex(item => {
        return item === 3
    })
    console.log(num)   //  4

 到此这篇关于浅谈JS数组内置遍历方法有哪些和区别的文章就介绍到这了,更多相关JS数组内置遍历内容请搜索华域联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持华域联盟！

您可能感兴趣的文章:

• JavaScript数组 几个常用方法总结
• javascript数组遍历for与for in区别详解
• Javascript的数组与字典用法与遍历对象的属性技巧
• JS数组及对象遍历方法代码汇总
• JS数组循环的方式以及效率分析对比

本文由 华域联盟 原创撰写：华域联盟 » 浅谈JS数组内置遍历方法有哪些和区别

转载请保留出处和原文链接：https://www.cnhackhy.com/84265.htm