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. python接口自动化10-excel设计模式实战

    前言 一.简介 1.环境准备:python+requests+excel+unittest+ddt,主要安装以下环境,其它一般都有了,没有自行安装: pip install xlrd pip inst ...

  2. 实例调用(__call__())

    任何类,只需要定义一个__call__()方法,就可直接对实例进行调用 对实例进行直接调用就好比对一个函数进行调用一样 __call__()还可定义参数,所以调用完全可以把对象看成函数,把函数看成对象 ...

  3. php laravel请求处理管道(装饰者模式)

    laravel的中间件使用了装饰者模式.比如,验证维护模式,cookie加密,开启会话等等.这些处理有些在响应前,有些在响应之后,使用装饰者模式动态减少或增加功能,使得框架可扩展性大大增强. 接下来简 ...

  4. CSAPP lab3 bufbomb-缓冲区溢出攻击实验(下)bang boom kaboom

    CSAPP lab3 bufbomb-缓冲区溢出攻击实验(上)smoke fizz CSAPP lab3 bufbomb-缓冲区溢出攻击实验(下)bang boom kaboom 栈结构镇楼 这里先给 ...

  5. 2018-12-25-win10-uwp-通知列表

    原文:2018-12-25-win10-uwp-通知列表 title author date CreateTime categories win10 uwp 通知列表 lindexi 2018-12- ...

  6. C# MediaPlayer

    using System.Windows.Media; using Newtonsoft.Json; using System.ComponentModel; namespace ConsoleApp ...

  7. .net ajax跨域请求问题

    </system.codedom>     <system.webServer>         <defaultDocument>             < ...

  8. vue-品牌管理案例

    品牌管理 分析 获取到 id 和 name ,直接从 data 上面获取 组织出一个对象 把这个对象,调用 数组的 相关方法,添加到 当前 data 上的 list 中 注意:在Vue中,已经实现了数 ...

  9. 1.springMVC Controller配置方式

    一.手动配置方式 1.web.xml中DispatcherServlet控制器的的配置 SpringMVC也是一种基于请求驱动的WEB框架,并且使用了前端控制器的设计模式.前端控制器就是Dispatc ...

  10. java核心技术第五篇之事务和MVC模式

    第一部分:事务1.事务的简介: 1.1 在一组操作中(比如增加操作,修改操作),只有增加和修改操作都成功之后,这两个操作才能真正的成功. ,如果这两个操作中,有一个失败了,这两个操作都失败了. 1.2 ...