广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript 数组遍历的五种方法
  • 390
分享到

JavaScript 数组遍历的五种方法

2024-04-02 19:04:59 390人浏览 独家记忆
摘要

目录一、for 循环:基础、简单二、forEach() 方法:使用回调函数三、map() 方法:使用回调函数四、for..in 循环:遍历对象和数组五、for…of 循环:遍历对象和

在使用 javascript 编写代码过程中,可以使用多个方法对数组进行遍历;包括 for循环、forEach循环、map 循环、forIn循环和forOf循环等方法。

一、for 循环:基础、简单

这是最基础和常用的遍历数组的方法;各种开发语言一般都支持这种方法。


let arr = ['a','b','c','d','e'];
for (let i = 0, len = arr.length; i < len; i++) {
  console.log(i);    // 0 1 2 3 4
  console.log(arr[i]); //a b c d e
}

二、forEach() 方法:使用回调函数

forEach() 这是数组对象的一个方法;其接受一个回调函数为参数。
回调函数中有三个参数:

  • 1st:数组元素(必选)
  • 2nd:数组元素索引值(可选)
  • 3rd:数组本身(可选)

let arr = ['a','b','c','d','e'];
arr.forEach((item,index,arr)=> {
  console.log(item);  // a b c d e 
  console.log(index); // 0 1 2 3 4
  console.log(arr);  // ['a','b','c','d','e']
})

三、map() 方法:使用回调函数

其使用方式和 forEach() 方法相同。


var arr = [
  {name:'a',age:'18'},
  {name:'b',age:'19'},
  {name:'c',age:'20'}
];
arr.map(function(item,index) {
  if(item.name == 'b') {
    console.log(index) // 1
  }
})

四、for..in 循环:遍历对象和数组

for…in循环可用于循环对象和数组。
推荐用于循环对象,也可以用来遍历JSON


let obj = {
  name: '王大锤',
  age: '18',
  weight: '70kg'
}
for(var key in obj) {
  console.log(key);    // name age weight
  console.log(obj[key]); // 王大锤 18 70kg
}
----------------------------
let arr = ['a','b','c','d','e'];
for(var key in arr) {
  console.log(key); // 0 1 2 3 4 返回数组索引
  console.log(arr[key]) // a b c d e
}

五、for…of 循环:遍历对象和数组

可循环数组和对象,推荐用于遍历数组。

for…of提供了三个新方法:

  • key()是对键名的遍历;
  • value()是对键值的遍历;
  • entries()是对键值对的遍历;

let arr = ['科大讯飞', '政法BG', '前端开发'];
for (let item of arr) { 
 console.log(item); // 科大讯飞 政法BG 前端开发
}
// 输出数组索引
for (let item of arr.keys()) { 
 console.log(item); // 0 1 2
}
// 输出内容和索引
for (let [item, val] of arr.entries()) { 
 console.log(item + ':' + val); // 0:科大讯飞 1:政法BG 2:前端开发
}

六、补充

6.1、break 和 Continue 问题

forEach、map、filter、reduce、every、some 函数中 break continue 关键词都会不生效,因为是在function中,但function解决了闭包陷阱的问题。
要想使用 break、continue 可以使用 for、for...in、for...of、while

6.2、数组和对象

用于遍历数组元素使用:for(),forEach(),map(),for...of
用于循环对象属性使用:for...in

以上就是JavaScript 数组遍历的五种方法的详细内容,更多关于JavaScript 数组遍历的资料请关注编程网其它相关文章!

--结束END--

本文标题: JavaScript 数组遍历的五种方法

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

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript 数组遍历的五种方法
    目录一、for 循环:基础、简单二、forEach() 方法:使用回调函数三、map() 方法:使用回调函数四、for..in 循环:遍历对象和数组五、for…of 循环:遍历对象和...
    99+
    2022-11-11
  • python遍历数组的两种方法
    python遍历数组的两种方法第一种,最常用的,通过for in遍历数组 [cpp] view plain copy colours = ["red","green","blue"]   for colour in col...
    99+
    2023-01-31
    两种 遍历 数组
  • javascript遍历对象的五种方式实例代码
    目录准备 五种武器 for…in Object.keys Object.getOwnPropertyNames Object.getOwnPropertySymbols Reflec...
    99+
    2022-11-12
  • 浅谈shell 遍历数组的几种方法
    背景 某天遇到一个问题,现象如下:第一种遍历正常打印元素,然而第二种遍历只会打印一个元素! #!/bin/bash # $1 代表文件目录 # 执行 eg: # sh your_shell.sh /user/li...
    99+
    2022-06-04
    shell 遍历数组
  • python数组遍历三种实用方法
     >>> os.__file__.split('\\')['E:', 'Python', 'Python25', 'lib', 'os.pyc']>>> os.path.split(os.__file__...
    99+
    2023-01-31
    遍历 三种 数组
  • php数组的创建遍历的各种方法
    在 PHP 开发中,数组是一种十分重要的数据类型。它可以存储多个元素,并且可以在运行时动态地扩展和缩小大小。 在本文中,我们将探讨 PHP 中数组的创建和遍历的各种方法。一、数组的创建a. 直接创建可以使用 array() 函数来创建一个简...
    99+
    2023-05-19
  • python遍历数组的两种方法的代码
    工作过程中,把开发过程中较好的一些内容段备份一下,下面内容是关于python遍历数组的两种方法的内容,希望对小伙伴有用途。 colours = ["red","green","blue"] for colour in colours: ...
    99+
    2023-01-31
    两种 遍历 数组
  • Java中Map循环遍历的五种方法实现
    目录1、创建一个Enum2、开始遍历方法一方法二方法三方法四方法五因为Map比较常用,所以今天来总结下Map取值比较常用的几种遍历方法。 1、创建一个Enum public enum...
    99+
    2022-11-13
  • 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 数组 遍历数组
  • JavaScript中有哪些遍历数组的方法
    这篇文章给大家介绍JavaScript中有哪些遍历数组的方法,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。javascript是一种什么语言javascript是一种动态类型、弱类型的语言,基于对象和事件驱动并具有相对...
    99+
    2023-06-14
  • JAVA——二维数组遍历二维数组的三种方法
    目录 🍒java中二维数组的定义和赋值 🍒二维数组遍历的三种方法 🍇第一种:for循环遍历 🍇第二种方法:通过Arrays.deepToString()遍历 🍇...
    99+
    2023-09-22
    java 开发语言
  • javaScript遍历对象和数组的方法总结
    在日常工作过程中,我们对于javaScript遍历对象、数组的操作是十分的频繁的,今天抽空把经常用到的方法小结一下,方便今后参考使用! javaScript遍历对象总结 1、使用Ob...
    99+
    2022-11-13
  • JavaScript遍历对象的七种方法汇总
    目录前言属性的可枚举性遍历对象for...inObject.keys()Object.values()Object.entries()Object.getOwnPropertyNam...
    99+
    2022-11-13
    JavaScript遍历对象方法 JavaScript遍历对象
  • 遍历ArrayList的三种方法
    遍历 ArrayList 可以使用以下三种方法:1. 使用 for 循环遍历:可以使用 for 循环结合 ArrayList 的 s...
    99+
    2023-09-14
    ArrayList
  • php遍历一个数组的三种方法是什么
    3种遍历数组的方法:1、用for语句遍历,语法“for($i=0;$i<数组长度;$i++){//循环代码}”;2、用foreach语句遍历,语法“foreach($arr as $k=>$v){//循环代码}”;3、用whil...
    99+
    2022-09-06
  • PHP遍历数组的6种方式总结
    目录1、foreach2、array_map3、array_walk4、for5、each6、reset总结在PHP的日常操作中,数组是最常出现的结构,而我们几乎每天都在处理数组相关的内容。那么问题来了,你一般怎么遍历并处理数组。 1、fo...
    99+
    2014-08-30
    php遍历数组 php遍历数组使用的是 php数组遍历的三种方法
  • python 遍历数组的3种方法及常用的代码
      直接使用数组的元素进行遍历,但这种遍历方法效率较低,不推荐使用。可以使用 python中的 num或者 int数组。 2、使用 python中的my_num,该方法通过数组的末尾进行遍历,效率最高,可以直接使用。 5、在 Python...
    99+
    2023-09-21
    python 算法 数据结构
  • php遍历两个数组的方法
    PHP是一种非常强大且广泛应用的编程语言,对于遍历两个数组的需求在实际开发中会经常出现。在本文中我们将介绍几种PHP遍历两个数组的方法,以满足不同的需求。1.使用for循环遍历最基本的遍历方式,也是最容易理解和上手的方式。我们可以使用两个嵌...
    99+
    2023-05-19
  • JavaScript:js数组/对象遍历方法
    一、js遍历方法 序号方法描述1for使用最基本的for循环可以遍历数组2for offor...of语句用来遍历可迭代对象(包括数组、Set、Map、字符串等),它可以替代传统的for循环和forEach()方法。for...of循环每次...
    99+
    2023-10-27
    前端 javascript
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作