js遍历数组foreach

The JavaScript forEach method is one of the several ways to loop through arrays. Each method has different features, and it is up to you, depending on what you're doing, to decide which one to use.

JavaScript forEach方法是循环遍历数组的几种方法之一。 每种方法都有不同的功能,取决于您要执行的操作,由您决定使用哪种方法。

In this post, we are going to take a closer look at the JavaScript forEach method.

在本文中,我们将仔细研究JavaScript forEach方法。

Considering that we have the following array below:

考虑到下面的数组:

const numbers = [1, 2, 3, 4, 5];

Using the traditional "for loop" to loop through the array would be like this:

使用传统的“ for循环”来遍历数组就像这样:

for (i = 0; i < numbers.length; i++) {console.log(numbers[i]);
}

是什么使forEach()方法与众不同? (What makes the forEach( ) method different?)

The forEach method is also used to loop through arrays, but it uses a function differently than the classic "for loop".

forEach方法也用于循环遍历数组,但是它使用的功能与经典的“ for循环”不同。

The forEach method passes a callback function for each element of an array together with the following parameters:

forEach方法将数组的每个元素以及以下参数传递给回调函数 :

  • Current Value (required) - The value of the current array element当前值(必填)-当前数组元素的值
  • Index (optional) - The current element's index number索引(可选)-当前元素的索引号
  • Array (optional) - The array object to which the current element belongsArray(可选)-当前元素所属的数组对象

Let me explain these parameters step by step.

让我逐步解释这些参数。

Firstly, to loop through an array by using the forEach method, you need a callback function (or anonymous function):

首先,要使用forEach方法遍历数组,您需要一个回调函数(或匿名函数):

numbers.forEach(function() {// code
});

The function will be executed for every single element of the array. It must take at least one parameter which represents the elements of an array:

该函数将针对数组的每个单个元素执行。 它必须至少包含一个代表数组元素的参数:

numbers.forEach(function(number) {console.log(number);
});

That's all we need to do for looping through the array:

这就是我们遍历数组所需要做的一切:

Alternatively, you can use the ES6 arrow function representation for simplifying the code:

另外,您可以使用ES6箭头功能表示形式来简化代码:

可选参数 (Optional Parameters)

指数 (Index)

Alright now let's continue with the optional parameters. The first one is the "index" parameter, which represents the index number of each element.

现在,让我们继续可选参数。 第一个是“索引”参数,它表示每个元素的索引号。

Basically, we can see the index number of an element if we include it as a second parameter:

基本上,如果我们将元素作为第二个参数包含进来,我们可以看到它的索引号:

numbers.forEach((number, index) => {console.log('Index: ' + index + ' Value: ' + number);
});

数组 (Array)

The array parameter is the array itself. It is also optional and can be used if necessary in various operations. Otherwise, if we call it, it will just get printed as many times as the number of elements of the array:

array参数是数组本身。 它也是可选的,必要时可以在各种操作中使用。 否则,如果我们调用它,它将只被打印与数组元素数量一样多的次数:

numbers.forEach((number, index, array) => {console.log(array);
});

You can see the example usage of the forEach( ) method in this video:

您可以在此视频中看到forEach()方法的示例用法:

浏览器支持 (Browser Support)

The Array.forEach method is supported in all browsers expect IE version 8 or earlier:

期望IE 8或更早版本的所有浏览器都支持 Array.forEach方法:

If you want to learn more about Web Development, feel free to visit my Youtube Channel.

如果您想了解有关Web开发的更多信息,请随时访问我的Youtube频道 。

Thank you for reading!

感谢您的阅读!

翻译自: https://www.freecodecamp.org/news/javascript-foreach-how-to-loop-through-an-array-in-js/

js遍历数组foreach

js遍历数组foreach_JavaScript forEach –如何在JS中遍历数组相关推荐

  1. php如何对数组进行分组,如何在PHP中对数组进行分组排序

    如何在PHP中对数组进行分组排序 发布时间:2021-01-04 16:28:51 来源:亿速云 阅读:98 作者:Leah 这篇文章将为大家详细讲解有关如何在PHP中对数组进行分组排序,文章内容质量 ...

  2. java数组删除数组元素_如何在Java中删除数组元素

    java数组删除数组元素 When we create an array in Java, we specify its data type and size. This is used by JVM ...

  3. java怎么把数组清空_如何在JavaScript中清空数组?

    有没有一种方法可以清空数组,如果可以的话,可以使用.remove()吗? 例如, A = [1,2,3,4]; 我该如何清空? #1楼 清除现有数组A : 方法1 (这是我对问题的原始回答) A = ...

  4. java 字符串 数组 索引_如何在Java中找到数组中元素的索引?

    我希望在Java中找到给定元素的索引,知道它的内容. 我尝试了以下示例,该示例不起作用: class masi { public static void main( String[] args ) { ...

  5. mysql 数组变量_如何在MySQL中模拟数组变量?

    您可以使用WHILE循环在MySQL中实现: SET @myArrayOfValue = '2,5,2,23,6,'; WHILE (LOCATE(',', @myArrayOfValue) > ...

  6. 如何在TypeScript中删除数组项?

    本文翻译自:How do I remove an array item in TypeScript? I have an array that I've created in TypeScript a ...

  7. 如何在JavaScript中比较数组?

    本文翻译自:How to compare arrays in JavaScript? I'd like to compare two arrays... ideally, efficiently. 我 ...

  8. 如何在Ruby中使用数组方法

    介绍 (Introduction) Arrays let you represent lists of data in your programs. Once you have data in an ...

  9. 如何在C ++中使用数组?

    C ++从C继承了数组,几乎可以在任何地方使用它们. C ++提供了更易于使用且不易出错的抽象(自C ++ 98起为std::vector<T> std::array<T, n> ...

最新文章

  1. kafka异步推送设置重试_一篇文章了解 Kafka 幂等性的原理及实践
  2. Flutter开发之Text的overflow属性不生效(14)
  3. 一致性hash算法 - consistent hashing
  4. 玩转OpenVswitch:简介
  5. 获取项目版本号与设置引导页的判断条件
  6. 高性能WEB开发之Web性能测试工具推荐
  7. 采用ASP.NET IIS 注册工具 (Aspnet_regiis.exe)对web.config实行本地加密
  8. junit5和junit4_JUnit 5 –下一代JUnit的初步了解
  9. Vista系统自带IIS 7.0设置技巧详解
  10. 解决 transaction-manager Attribute transaction-manager is not allowed here
  11. .netcore发布时指定服务器的系统类型
  12. 京东物流:将连续第10年春节也送货 为坚守岗位一线员工补贴近4亿元
  13. 类别动态绑定到TreeView控件
  14. C语言外部变量extern
  15. 步进电机选型的计算方法
  16. 支付宝快捷支付服务 android,图文详解Android下支付宝快捷支付教程
  17. 企业合并_OA替换 | K2 BPM 为你解决企业“变革”大烦恼
  18. 【前端】你真的理解JavaScript中的变量和数据类型吗
  19. CSS基础知识(一):选择器
  20. 基于java+Mysql的志愿者管理系统代码分享

热门文章

  1. Linux在U盘安装python的过程详解
  2. 目录的操作 c# 1614532397
  3. fastdfs配置-跟踪服务器
  4. dj电商-数据表的设计-用户表设计
  5. mysql-电商库演练1-创建数据-基本查询练习
  6. linux-history历史命令-光标的移动操作-命令行上的字符删除操作
  7. LeetCode 910. Smallest Range II
  8. 循序渐进学爬虫:多线程+队列爬取豆瓣高分计算机类书籍
  9. Java实现升序排列的整形数组A,元素两两不相等找出A[i]=i的数据
  10. linux中sed工具的简单解析与实例参考