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. SpringMVC拦截器和数据校验

    1.什么是拦截器 Spring MVC中的拦截器(Interceptor)类似于Servlet中的过滤器(Filter),它主要用于拦截用户请求并作相应的处理.例如通过拦截器可以进行权限验证.记录请求 ...

  2. spring cloud 2.x版本 Gateway路由网关教程

    前言 本文采用Spring cloud本文为2.1.8RELEASE,version=Greenwich.SR3 本文基于前两篇文章eureka-server.eureka-client.eureka ...

  3. SpringBoot系列之日志框架介绍及其原理简介

    SpringBoot系列之日志框架介绍及其原理简介 1.常用日志框架简介 市面上常用日志框架:JUL.JCL.jboss-logging.logback.log4j.log4j2.slf4j.etc. ...

  4. selenium元素定位方法之轴定位

    一.轴运算名称 ancestor:祖先结点(包括父结点) parent:父结点 preceding:当前元素节点标签之前的所有结点(html页面先后顺序) preceding-sibling:当前元素 ...

  5. 基于 HTML5 WebGL 的 3D 科幻风机

    前言 许多世纪以来,风力机同水力机械一样,作为动力源替代人力.畜力,对生产力的发展发挥过重要作用.近代机电动力的广泛应用以及二十世纪50年代中东油田的发现,使风机发电机的发展缓慢下来. 70年代初期, ...

  6. .net core入门-跨域访问配置

    Asp.net Core 跨域配置   一般情况WebApi都是跨域请求,没有设置跨域一般会报以下错误 No 'Access-Control-Allow-Origin' header is prese ...

  7. C#/WPF 仅启动一个进程实例

    如何实现仅启动一个 WPF 进程实例,并在打开第二个时,自动唤起之前打开的进程. 1 代码入口 在 App.xaml.cs 文件中,重写 OnStartup 方法,并添加 Mutex 进程锁. /// ...

  8. Ajax的快速入门

    1.什么是ajax ajax是技术名词的缩写: Asynchronous:异步: JavaScript:JavaScript语言: And:和.与: XML:数据传输格式 ajax是客户端通过HTTP ...

  9. django7-cookie与session

    1.有状态服务与无状态服务 服务实例存储了客户端的数据 ,那么这就是个有状态服务 服务实例不存储客户端数据 ,让其他缓存存储客户端数据 ,这就是无状态服务 ,http就是无状态的 2.什么是cooki ...

  10. C和C++中的struct的不同

    C和C++中的struct的不同: (1)定义变量:  C语言中: struct stu { ...... }; struct stu student;  C++语言中: struct stu { . ...