JavaScript forEach() 方法

 JavaScript Array 对象

实例

列出数组的每个元素:

<button onclick="numbers.forEach(myFunction)">点我</button> <p id="demo"></p> <script> demoP = document.getElementById("demo"); var numbers = [4, 9, 16, 25]; function myFunction(item, index) { demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>"; } </script>

输出结果:

index[0]: 4
index[1]: 9
index[2]: 16
index[3]: 25

尝试一下 »


定义和用法

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。


浏览器支持

表格中的数字表示支持该方法的第一个浏览器版本号。

方法          
forEach() Yes 9.0 1.5 Yes Yes

语法

array.forEach(function(currentValue, index, arr), thisValue)

参数

参数 描述
function(currentValue, index, arr) 必需。 数组中每个元素需要调用的函数。
函数参数:

参数 描述
currentValue 必需。当前元素
index 可选。当前元素的索引值。
arr 可选。当前元素所属的数组对象。
thisValue 可选。传递给函数的值一般用 "this" 值。
如果这个参数为空, "undefined" 会传递给 "this" 值

技术细节

返回值: undefined
JavaScript 版本: ECMAScript 3

更多实例

实例

计算数组所有元素相加的总和:

<button onclick="numbers.forEach(myFunction)">点我</button>

<p>数组元素总和:<span id="demo"></span></p>

<script>
var sum = 0;
var numbers = [65, 44, 12, 4];

function myFunction(item) {
sum += item;
demo.innerHTML = sum;
}
</script>

尝试一下 »

实例

将数组中的所有值乘以特定数字:

<p>乘以: <input type="number" id="multiplyWith" value="10"></p>
<button onclick="numbers.forEach(myFunction)">点我</button>

<p>计算后的值: <span id="demo"></span></p>

<script>
var numbers = [65, 44, 12, 4];

function myFunction(item,index,arr) {
arr[index] = item * document.getElementById("multiplyWith").value;
demo.innerHTML = numbers;
}
</script>

尝试一下 »

JavaScript forEach() 方法的更多相关文章

  1. JavaScript forEach方法

    最近看了一些html5和js方面的书,受益匪浅,因为看的东西比较多,却都没有怎么静心来做整理,慢慢来吧,可能最近自己有点儿小紧张.今天跟大家分享下JavaScript的forEach方法(其实是从&l ...

  2. javascript forEach方法与jQuery each区别

    1.forEach方法 语法: array.forEach(function(currentValue, index, arr), thisValue) 参数: 示例: <!DOCTYPE ht ...

  3. forEach 方法 (Array) (JavaScript)

    为数组中的每个元素执行指定操作. 语法 array1.forEach(callbackfn[, thisArg]) 参数 参数 定义 array1 必选.一个数组对象. callbackfn 必选.最 ...

  4. JavaScript数组方法--flat、forEach、map

    今天到flat了,一个第一次知道该方法还是看到一个面试题,别人给了个答案,用到了flat才知道的方法. 前面也写过关于这道面试题的文章,<一道关于数组的前端面试题>. 这里再来说说吧! f ...

  5. JavaScript数组方法的兼容性写法 汇总:indexOf()、forEach()、map()、filter()、some()、every()

    ECMA Script5中数组方法如indexOf().forEach().map().filter().some()并不支持IE6-8,但是国内依然有一大部分用户使用IE6-8,而以上数组方法又确实 ...

  6. JavaScript 数组方法总结

    最近公司没项目.所以所幸学学JS.毕竟很多人和我一样.属于培训机构出来的.JS基础也很差. 面试的时候面试官问你 .你会JS不.你会毫不犹豫的回答会.因为你确实用过.但是真正会的或许只是以前项目中需要 ...

  7. 【译】你应该了解的JavaScript数组方法

    让我们来做一个大胆的声明:for循环通常是无用的,而且还导致代码难以理解.当涉及迭代数组.查找元素.或对其排序或者你想到的任何东西,都可能有一个你可以使用的数组方法. 然而,尽管这些方法很有用,但是其 ...

  8. JavaScript数组方法大全(推荐)

    原网址:http://www.jb51.net/article/87930.htm 数组在笔试中经常会出现的面试题,javascript中的数组与其他语言中的数组有些不同,为了方便之后数组的方法学习, ...

  9. javascript遍历方法总结

    forEach 循环 JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组的方法是这样的: for (var index = 0; index < myArray.lengt ...

随机推荐

  1. PHP 的异步并行和协程 C 扩展 Swoole (附链接)

    PHP的异步.并行.高性能网络通信引擎,使用纯C语言编写,提供了PHP语言的异步多线程服务器,异步TCP/UDP网络客户端,异步MySQL,异步Redis,数据库连接池,AsyncTask,消息队列, ...

  2. python学习第一天第二天总结

    变量赋值 1, 变量由字⺟, 数字,下划线搭配组合⽽成 2, 不可以⽤数字开头,更不能是全数字 3,不能是pythond的关键字, 这些符号和字⺟已经被python占⽤, 不可以更改 4,不要⽤中⽂ ...

  3. 制作windows安装包的工具

    https://nsis.sourceforge.io/Download https://www.installaware.com/ https://www.advancedinstaller.com ...

  4. Java开发桌面程序学习(一)——JavaFx+Jfoenix初始以及搭建

    Java开发桌面程序学习(一)--JavaFx+Jfoenix初始以及搭建 前言 想做一个Java的桌面程序,但是,使用原生的Swing感觉又十分麻烦,那个布局都是拿代码设置,看着十分的乱,偶然的情况 ...

  5. JavaFx出现错误Caused by: java.lang.NullPointerException: Location is required的解决方法

    问题截图: "C:\Program Files\Java\jdk1.8.0_131\bin\java.exe" "-javaagent:I:\IntelliJ IDEA ...

  6. MySQL学习——操作表里的数据

    MySQL学习——操作表里的数据 摘要:本文主要学习了使用DML语句操作表里数据的方法. 插入数据 语法 通过传入数据插入: insert into 表名 [(列名1, …, 列名n)] values ...

  7. JS基础语法---分支语句之:switch-case语句---3个练习

    switch-case语句---分支语句---多分支语句 语法: switch(表达式){ case 值1:代码1;break; case 值2:代码2;break; case 值3:代码3;brea ...

  8. Django—常见问题解决

    让Django项目运行允许外部访问 1.将python manage.py runserver 改为 python manage.py runserver 0.0.0.0:80 或者 python m ...

  9. 5-1可视化库Seabon-整体布局风格设置

    In [1]: import seaborn as sns import numpy as np import matplotlib as mpl import matplotlib.pyplot a ...

  10. Java面试题-基础篇二(干货)

    11.是否可以从一个static方法内部发出对非static方法的调用? 不可以.因为非static方法是要与对象关联在一起的,必须创建一个对象后,才可以在该对象上进行方法调用,而static方法调用 ...