JS array forEach()

🌙
手机阅读
本文目录结构

forEach() 方法对数组的每个元素执行一次提供的函数。

  1. var array1 = ['a', 'b', 'c'];
  2. array1.forEach(function(element) {
  3. console.log(element);
  4. });
  5. // expected output: "a"
  6. // expected output: "b"
  7. // expected output: "c"

语法

  1. arr.forEach(callback[, thisArg]);

参数

callback

为数组中每个元素执行的函数,该函数接收三个参数:

currentValue

数组中正在处理的当前元素。

index可选

数组中正在处理的当前元素的索引。

array可选

forEach() 方法正在操作的数组。

thisArg可选

可选参数。当执行回调函数时用作 this 的值(参考对象)。

返回值

undefined.

描述

forEach 方法按升序为数组中含有效值的每一项执行一次callback 函数,那些已删除或者未初始化的项将被跳过(例如在稀疏数组上)。

callback 函数会被依次传入三个参数:

  • 数组当前项的值
  • 数组当前项的索引
  • 数组对象本身

如果 thisArg 参数有值,则每次 callback 函数被调用的时候,this 都会指向 thisArg 参数上的这个对象。如果省略了 thisArg ``参数,``或者赋值为 nullundefined,则 this 指向全局对象。callback 函数最终可观察到 this 值,这取决于函数观察到 this 的常用规则

forEach 遍历的范围在第一次调用 callback 前就会确定。调用 forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变,则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了(例如使用 shift()),之后的元素将被跳过 - 参见下面的示例。

forEach() 为每个数组元素执行callback函数;不像 map() 或者 reduce(),它总是返回 undefined 值,并且不可链式调用。典型用例是在一个链的最后执行副作用。

forEach() 被调用时,不会改变原数组(即调用它的数组),即使传递的参数里的 callback被调用时可能会改变原数组。(译注:此处说法似不够准确,可参考EMCA语言规范:’forEach does not directly mutate the object on which it is called but the object may be mutated by the calls to callbackfn.’,即forEach不直接改变调用它的对象,但是对象可能会被callback改变。)

注意: 没有办法中止或者跳出 forEach() 循环,除了抛出一个异常。如果你需要这样,使用 forEach() 方法是错误的。

若你需要提前终止循环,你可以使用:

这些数组方法可以对数组元素判断,以便确定是否需要继续遍历:every()some()find()findIndex()

译者注:若条件允许,也可以使用 filter() 提前过滤出需要遍历的部分,再用 forEach() 处理。

示例

for 循环转换为 forEach

  1. const items = ['item1', 'item2', 'item3'];
  2. const copy = [];
  3. // before
  4. for (let i=0; i
  5. 打印出数组的内容
  6. 注意:为了在控制台中显示数组的内容,你可以使用 console.table() 来展示经过格式化的数组。下面的例子则是另一种使用 forEach() 的格式化的方法。
  7. 下面的代码会为每一个数组元素输出一行记录:
  8. function logArrayElements(element, index, array) {
  9. console.log('a[' + index + '] = ' + element);
  10. }
  11. // 注意索引 2 被跳过了,因为在数组的这个位置没有项
  12. [2, 5, , 9].forEach(logArrayElements);
  13. // logs:
  14. // a[0] = 2
  15. // a[1] = 5
  16. // a[3] = 9
  17. 使用 thisArg
  18. 举个勉强的例子,从每个数组中的元素值中更新一个对象的属性:
  19. function Counter() {
  20. this.sum = 0;
  21. this.count = 0;
  22. }
  23. Counter.prototype.add = function(array) {
  24. array.forEach(function(entry) {
  25. this.sum += entry;
  26. ++this.count;
  27. }, this);
  28. //console.log(this);
  29. };
  30. var obj = new Counter();
  31. obj.add([1, 3, 5, 7]);
  32. obj.count;
  33. // 4 === (1+1+1+1)
  34. obj.sum;
  35. // 16 === (1+3+5+7)
  36. 因为 thisArg 参数(this)传给了 forEach(),每次调用时,它都被传给 callback 函数,作为它的 this 值。
  37. 注意:如果使用箭头函数表达式来传入函数参数,thisArg 参数会被忽略,因为箭头函数在词法上绑定了 this 值。
  38. 对象复制函数
  39. 下面的代码会创建一个给定对象的副本。 创建对象的副本有不同的方法,以下是只是一种方法,并解释了 Array.prototype.forEach() 是如何使用 ECMAScript 5 Object.* 元属性(meta property )函数工作的。
  40. function copy(obj) {
  41. var copy = Object.create(Object.getPrototypeOf(obj));
  42. var propNames = Object.getOwnPropertyNames(obj);
  43. propNames.forEach(function(name) {
  44. var desc = Object.getOwnPropertyDescriptor(obj, name);
  45. Object.defineProperty(copy, name, desc);
  46. });
  47. return copy;
  48. }
  49. var obj1 = { a: 1, b: 2 };
  50. var obj2 = copy(obj1); // obj2 looks like obj1 now
  51. 如果数组在迭代时被修改了,则其他元素会被跳过。
  52. 下面的例子会输出"one", "two", "four"。当到达包含值"two"的项时,整个数组的第一个项被移除了,这导致所有剩下的项上移一个位置。因为元素 "four"现在在数组更前的位置,"three"会被跳过。 forEach()不会在迭代之前创建数组的副本。
  53. var words = ['one', 'two', 'three', 'four'];
  54. words.forEach(function(word) {
  55. console.log(word);
  56. if (word === 'two') {
  57. words.shift();
  58. }
  59. });
  60. // one
  61. // two
  62. // four
  63. Polyfill
  64. forEach 是在第五版本里被添加到 ECMA-262 标准的;这样它可能在标准的其他实现中不存在,你可以在你调用 forEach 之前 插入下面的代码,在本地不支持的情况下使用 forEach()。该算法是 ECMA-262 5版中指定的算法。算法假定 Object TypeError 拥有它们的初始值。callback.call 等价于 Function.prototype.call()。
  65. // Production steps of ECMA-262, Edition 5, 15.4.4.18
  66. // Reference: http://es5.github.io/#x15.4.4.18
  67. if (!Array.prototype.forEach) {
  68. Array.prototype.forEach = function(callback, thisArg) {
  69. var T, k;
  70. if (this == null) {
  71. throw new TypeError(' this is null or not defined');
  72. }
  73. // 1. Let O be the result of calling toObject() passing the
  74. // |this| value as the argument.
  75. var O = Object(this);
  76. // 2. Let lenValue be the result of calling the Get() internal
  77. // method of O with the argument "length".
  78. // 3. Let len be toUint32(lenValue).
  79. var len = O.length >>> 0;
  80. // 4. If isCallable(callback) is false, throw a TypeError exception.
  81. // See: http://es5.github.com/#x9.11
  82. if (typeof callback !== "function") {
  83. throw new TypeError(callback + ' is not a function');
  84. }
  85. // 5. If thisArg was supplied, let T be thisArg; else let
  86. // T be undefined.
  87. if (arguments.length > 1) {
  88. T = thisArg;
  89. }
  90. // 6. Let k be 0
  91. k = 0;
  92. // 7. Repeat, while k < len
  93. while (k < len) {
  94. var kValue;
  95. // a. Let Pk be ToString(k).
  96. // This is implicit for LHS operands of the in operator
  97. // b. Let kPresent be the result of calling the HasProperty
  98. // internal method of O with argument Pk.
  99. // This step can be combined with c
  100. // c. If kPresent is true, then
  101. if (k in O) {
  102. // i. Let kValue be the result of calling the Get internal
  103. // method of O with argument Pk.
  104. kValue = O[k];
  105. // ii. Call the Call internal method of callback with T as
  106. // the this value and argument list containing kValue, k, and O.
  107. callback.call(T, kValue, k, O);
  108. }
  109. // d. Increase k by 1.
  110. k++;
  111. }
  112. // 8. return undefined
  113. };
  114. }
  115. 规范
  116. 规范
  117. 状态
  118. 备注
  119. ECMAScript 5.1 (ECMA-262)Array.prototype.forEach
  120. Standard
  121. Initial definition. Implemented in JavaScript 1.6.
  122. ECMAScript 2015 (6th Edition, ECMA-262)Array.prototype.forEach
  123. Standard
  124. ECMAScript Latest Draft (ECMA-262)Array.prototype.forEach
  125. Draft
  126. 参见
  127. Array.prototype.find()
  128. Array.prototype.findIndex()
  129. Array.prototype.map()
  130. Array.prototype.filter()
  131. Array.prototype.every()
  132. Array.prototype.some()
  133. Map.prototype.forEach()
  134. Set.prototype.forEach()

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了