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

 更新时间:2021年11月02日 09:18:32   作者:落墨诗卷  
本文主要介绍了浅谈JS数组内置遍历方法有哪些和区别,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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 对象的四种方式比较详解

    本文主要介绍了JavaScript 对象的四种方式比较详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • JavaScript对象属性检查、增加、删除、访问操作实例

    JavaScript对象属性检查、增加、删除、访问操作实例

    这篇文章主要介绍了JavaScript对象属性检查、增加、删除、访问操作实例,本文分别给出代码实例来讲解如何给对象增加属性、检查属性存在、以及删除和访问属性,需要的朋友可以参考下
    2015-07-07
  • 由 element.appendChild(newNode) ,谈开去

    由 element.appendChild(newNode) ,谈开去

    由 element.appendChild(newNode) ,谈开去...
    2006-11-11
  • pnpm monorepo 联调方案问题解析

    pnpm monorepo 联调方案问题解析

    文章主要介绍了在pnpmmonorepo环境下进行多库联调的方案,包括使用`pnpmlink`命令来链接指定的文件夹或全局的`node_modules`,并在项目中通过`pnpmlink--global<pkg>`来引用这些库,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2024-12-12
  • js判断手机端(Android手机还是iPhone手机)

    js判断手机端(Android手机还是iPhone手机)

    现在使用手机上网的人越来越多,一些下载网站会通过判断不同系统手机来访问不同网页,比如iPhone和Android。下面我们就来介绍一下如何用javascript判断iPhone或Android手机访问
    2015-07-07
  • JS加载iFrame出现空白问题的解决办法

    JS加载iFrame出现空白问题的解决办法

    在使用IE6浏览器开发过程中出现各种奇葩问题,非常棘手,费劲脑汁终于问题解决。小编把解决办法分享到脚本之家平台,需要的朋友可以参考下
    2016-05-05
  • bcastr2.0 通用的图片浏览器

    bcastr2.0 通用的图片浏览器

    bcastr2.0 通用的图片浏览器...
    2006-11-11
  • A标签中通过href和onclick传递的this对象实现思路

    A标签中通过href和onclick传递的this对象实现思路

    想传递当前对象给一个函数,于是就将这个URL写成"Javascript:shoControlSidebar(this)",可是结果发现这并不可行,接下来为大家详细介绍下解决方法
    2013-04-04
  • Bootstrap表单组件教程详解

    Bootstrap表单组件教程详解

    表单常见的元素主要包括:文本输入框、下拉选择框、单选框、复选框、文本域、按钮等。接下来通过本文给大家介绍Bootstrap表单组件教程,感兴趣的朋友一起学习吧
    2016-04-04
  • 手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解

    手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解

    这篇文章主要介绍了手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作,结合实例形式分析了CKEDitor4 Dialog内嵌IFrame具体操作步骤与相关注意事项,需要的朋友可以参考下
    2019-06-06

最新评论