返回顶部
首页 > 资讯 > 精选 >JS数组中有什么内置遍历方法
  • 393
分享到

JS数组中有什么内置遍历方法

2023-06-25 12:06:00 393人浏览 泡泡鱼
摘要

这篇文章将为大家详细讲解有关js数组中有什么内置遍历方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。forEach()(es6)方法forEach()(ES6)方法对数组的每个元素执行一次给定的函数。&

这篇文章将为大家详细讲解有关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数组中有什么内置遍历方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: JS数组中有什么内置遍历方法

本文链接: https://lsjlt.com/news/304609.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JS数组中有什么内置遍历方法
    这篇文章将为大家详细讲解有关JS数组中有什么内置遍历方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。forEach()(ES6)方法forEach()(ES6)方法对数组的每个元素执行一次给定的函数。&...
    99+
    2023-06-25
  • 浅谈JS数组内置遍历方法有哪些和区别
    目录forEach()(ES6)方法map()(ES6) 方法flatMap()方法for...in...for...of...filter(ES6)遍历数组every()函数(ES...
    99+
    2024-04-02
  • JS中数组遍历方式有哪些
    小编给大家分享一下JS中数组遍历方式有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!JS数组遍历的几种方式JS数组遍历,基本...
    99+
    2024-04-02
  • JS中循环遍历数组方式有哪些
    这篇文章主要讲解了“JS中循环遍历数组方式有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JS中循环遍历数组方式有哪些”吧!本文比较并总结遍历数组的四种...
    99+
    2024-04-02
  • php遍历数组的方法是什么
    这篇文章主要讲解了“php遍历数组的方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“php遍历数组的方法是什么”吧!两种方法:1、利用for循环,语法为“for($i=0;$i<...
    99+
    2023-06-29
  • JavaScript中有哪些遍历数组的方法
    这篇文章给大家介绍JavaScript中有哪些遍历数组的方法,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。javascript是一种什么语言javascript是一种动态类型、弱类型的语言,基于对象和事件驱动并具有相对...
    99+
    2023-06-14
  • php中遍历数组的方法有哪些
    本文小编为大家详细介绍“php中遍历数组的方法有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“php中遍历数组的方法有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。五种遍历方法:1、用“for($i=0...
    99+
    2023-06-30
  • es6遍历数组有哪些方法
    这篇文章主要为大家展示了“es6遍历数组有哪些方法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“es6遍历数组有哪些方法”这篇文章吧。 ...
    99+
    2024-04-02
  • JS中遍历语法之间有什么区别
    这篇文章主要为大家展示了“JS中遍历语法之间有什么区别”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JS中遍历语法之间有什么区别”这篇文章吧。for循环Java...
    99+
    2024-04-02
  • jquery遍历array数组的方法是什么
    这篇文章主要讲解了“jquery遍历array数组的方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery遍历array数组的方法是什么”吧!...
    99+
    2024-04-02
  • php foreach遍历数组的方法是什么
    PHP中使用foreach语句来遍历数组。示例代码如下:```$colors = array("Red", &q...
    99+
    2023-09-26
    php
  • JS数组遍历普通函数有哪些
    这篇文章将为大家详细讲解有关JS数组遍历普通函数有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。JS数组遍历普通函数优点:支持流程控制(break、continue、return)forconst&n...
    99+
    2023-06-17
  • JS中遍历对象的方法有哪些
    本篇内容主要讲解“JS中遍历对象的方法有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS中遍历对象的方法有哪些”吧! 1 简介对象是在编程中最常...
    99+
    2024-04-02
  • Vue中foreach数组与js中遍历数组的写法说明
    Vue foreach数组与js中遍历数组的写法 场景 Vue中使用Axios发送get或者post请求,发送请求时需要在js中 对请求参数进行遍历并处理。 接收响应时需要对响应结果...
    99+
    2024-04-02
  • es6遍历数组的方法有哪些
    ES6中遍历数组的方法有以下几种: for...of循环:通过for...of循环可以依次遍历数组中的每个元素。例如: cons...
    99+
    2023-10-26
    es6
  • JS怎么循环遍历json数组
    本篇内容主要讲解“JS怎么循环遍历json数组”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS怎么循环遍历json数组”吧!例如数据库里面的json字符串是这样的var str&nb...
    99+
    2023-07-04
  • php遍历数组的两种方法是什么
    本文操作环境:Windows10系统、PHP7.1版、Dell G3电脑。php遍历数组的两种方法是什么在php中,通常使用for或foreach来遍历数组。新建一个php文件,命名为test.php,用于讲解php遍历数组常用的两种方法。...
    99+
    2019-08-24
    php
  • php遍历数组的四种方法是什么
    本教程操作环境:windows7系统、PHP7.1版、DELL G3电脑方法1:使用for语句遍历for循环会将控制循环次数的变量预先定义在for语句中,因此for循环语句能够按照已知的循环次数进行循环操作,适用于明确知道脚本需要运行的次数...
    99+
    2019-10-24
    php 数组 遍历数组
  • PHP多维数组遍历的方法是什么
    PHP多维数组遍历的方法有以下几种:1. 使用嵌套循环:使用两个或多个嵌套的foreach循环来遍历多维数组。外层循环用于遍历第一维...
    99+
    2023-10-11
    PHP
  • java二维数组遍历的方法是什么
    遍历二维数组可以使用嵌套的循环来实现,具体步骤如下: 使用嵌套的循环遍历二维数组的行和列。 外层循环控制行的索引,内层循环控制列的...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作