uTools-Manuals/docs/javascript/Reference/Global_Objects/Array/forEach.html

<article id="wikiArticle">
<div></div>
<p><code><strong>forEach()</strong></code> 方法对数组的每个元素执行一次提供的函数。</p>
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
<p><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/array-foreach.html" width="100%"></iframe></p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox"><var>arr</var>.forEach(<var>callback</var>[, <var>thisArg</var>]);</pre>
<h3 id="参数">参数</h3>
<dl>
<dt><code>callback</code></dt>
<dd>为数组中每个元素执行的函数，该函数接收三个参数：
 <dl>
<dt><code>currentValue</code></dt>
<dd>数组中正在处理的当前元素。</dd>
<dt><code>index</code><span class="inlineIndicator optional optionalInline">可选</span></dt>
<dd>数组中正在处理的当前元素的索引。</dd>
<dt><code>array</code><span class="inlineIndicator optional optionalInline">可选</span></dt>
<dd><code>forEach()</code> 方法正在操作的数组。</dd>
</dl>
</dd>
<dt><code>thisArg</code><span class="inlineIndicator optional optionalInline">可选</span></dt>
<dd>可选参数。当执行回调函数时用作 <code>this</code> 的值(参考对象)。</dd>
</dl>
<h3 id="返回值">返回值</h3>
<p><a href="Reference/Global_Objects/undefined" title="undefined是全局对象的一个属性。也就是说，它是全局作用域的一个变量。undefined的最初值就是原始数据类型undefined。"><code>undefined</code></a>.</p>
<h2 id="描述">描述</h2>
<p><code>forEach</code> 方法按升序为数组中含有效值的每一项执行一次<code>callback</code> 函数，那些已删除或者未初始化的项将被跳过（例如在稀疏数组上）。</p>
<p><code>callback</code> 函数会被依次传入三个参数：</p>
<ul>
<li><strong>数组当前项的值</strong></li>
<li><strong>数组当前项的索引</strong></li>
<li><strong>数组对象本身</strong></li>
</ul>
<p>如果给 <code>forEach()</code> 传递了 <code>thisArg</code> 参数，当调用时，它将被传给 <code>callback</code> 函数，作为它的 <code>this</code> 值。否则，将会传入 <a href="Reference/Global_Objects/undefined" title="undefined是全局对象的一个属性。也就是说，它是全局作用域的一个变量。undefined的最初值就是原始数据类型undefined。"><code>undefined</code></a> 作为它的 <code>this</code> 值。<code>callback</code> 函数最终可观察到 <code>this</code> 值，这取决于<a href="Reference/Operators/this">函数观察到 <code>this</code> 的常用规则</a>。</p>
<p><code>forEach</code> 遍历的范围在第一次调用 <code>callback</code> 前就会确定。调用 <code>forEach</code> 后添加到数组中的项不会被 <code>callback</code> 访问到。如果已经存在的值被改变，则传递给 <code>callback</code> 的值是 <code>forEach</code> 遍历到他们那一刻的值。已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了（例如使用 <a href="Reference/Global_Objects/Array/shift" title="shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。"><code>shift()</code></a>），之后的元素将被跳过 - 参见下面的示例。</p>
<p><code>forEach()</code> 为每个数组元素执行callback函数；不像 <a href="Reference/Global_Objects/Array/map" title="map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。"><code>map()</code></a> 或者 <a href="Reference/Global_Objects/Array/reduce" title="reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。"><code>reduce()</code></a>，它总是返回 <a href="Reference/Global_Objects/undefined" title="undefined是全局对象的一个属性。也就是说，它是全局作用域的一个变量。undefined的最初值就是原始数据类型undefined。"><code>undefined</code></a> 值，并且不可链式调用。典型用例是在一个链的最后执行副作用。</p>
<p><code>forEach()</code> does not mutate the array on which it is called (although <code>callback</code>, if invoked, may do so).</p>
<div class="note">
<p><strong>注意：</strong> 没有办法中止或者跳出 <code>forEach()</code> 循环，除了抛出一个异常。如果你需要这样，使用 <code>forEach()</code> 方法是错误的。</p>
<p>若你需要提前终止循环，你可以使用：</p>
<ul>
<li>简单循环</li>
<li><a href="Reference/Statements/for...of">for...of</a> 循环</li>
<li><a href="Reference/Global_Objects/Array/every" title="every() 方法测试数组的所有元素是否都通过了指定函数的测试。"><code>Array.prototype.every()</code></a></li>
<li><a href="Reference/Global_Objects/Array/some" title="some() 方法测试是否至少有一个元素通过由提供的函数实现的测试。"><code>Array.prototype.some()</code></a></li>
<li><a href="Reference/Global_Objects/Array/find" title="find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。"><code>Array.prototype.find()</code></a></li>
<li><a href="Reference/Global_Objects/Array/findIndex" title="findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。"><code>Array.prototype.findIndex()</code></a></li>
</ul>
<p>这些数组方法可以对数组元素判断，以便确定是否需要继续遍历：<a href="Reference/Global_Objects/Array/every" title="every() 方法测试数组的所有元素是否都通过了指定函数的测试。"><code>every()</code></a>，<a href="Reference/Global_Objects/Array/some" title="some() 方法测试是否至少有一个元素通过由提供的函数实现的测试。"><code>some()</code></a>，<a href="Reference/Global_Objects/Array/find" title="find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。"><code>find()</code></a>，<a href="Reference/Global_Objects/Array/findIndex" title="findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。"><code>findIndex()</code></a></p>
<p>译者注：若条件允许，也可以使用 <a href="Reference/Global_Objects/Array/filter" title="filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。"><code>filter()</code></a> 提前过滤出需要遍历的部分，再用 <code>forEach()</code> 处理。</p>
</div>
<h2 id="示例">示例</h2>
<h3 id="for_循环转换为_forEach">for 循环转换为 forEach</h3>
<pre class="brush:js">const items = ['item1', 'item2', 'item3'];
const copy = [];

// before
for (let i=0; i&lt;items.length; i++) {
  copy.push(items[i]);
}

// after
items.forEach(function(item){
  copy.push(item);
});
</pre>
<h3 id="打印出数组的内容">打印出数组的内容</h3>
<div class="blockIndicator note">
<p><strong>注意：</strong>为了在控制台中显示数组的内容，你可以使用 <code><a href="/zh-CN/docs/Web/API/Console/table">console.table()</a></code> 来展示经过格式化的数组。下面的例子则是另一种使用 <code>forEach()</code> 的格式化的方法。</p>
</div>
<p>下面的代码会为每一个数组元素输出一行记录：</p>
<pre class="brush:js">function logArrayElements(element, index, array) {
  console.log('a[' + index + '] = ' + element);
}

// 注意索引 2 被跳过了，因为在数组的这个位置没有项
[2, 5, , 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[3] = 9
</pre>
<h3 id="使用_thisArg">使用 <code>thisArg</code></h3>
<p>举个勉强的例子，从每个数组中的元素值中更新一个对象的属性：</p>
<pre class="brush:js">function Counter() {
    this.sum = 0;
    this.count = 0;
}

Counter.prototype.add = function(array) {
    array.forEach(function(entry) {
        this.sum += entry;
        ++this.count;
    }, this);
    //console.log(this);
};

var obj = new Counter();
obj.add([1, 3, 5, 7]);

obj.count; 
// 4 === (1+1+1+1)
obj.sum;
// 16 === (1+3+5+7)
</pre>
<p>因为 <code>thisArg</code> 参数（<code>this</code>）传给了 <code>forEach()</code>，每次调用时，它都被传给 <code>callback</code> 函数，作为它的 <code>this</code> 值。</p>
<div>
<div class="note"><strong>注意：</strong>如果使用<a href="Reference/Functions/Arrow_functions">箭头函数表达式</a>来传入函数参数，<code>thisArg</code> 参数会被忽略，因为箭头函数在词法上绑定了 <a href="Reference/Operators/this" title="与其他语言相比，函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。"><code>this</code></a> 值。</div>
</div>
<h3 id="对象复制函数">对象复制函数</h3>
<p>下面的代码会创建一个给定对象的副本。 创建对象的副本有不同的方法，以下是只是一种方法，并解释了 <code>Array.prototype.forEach()</code> 是如何使用 ECMAScript 5 <code>Object.*</code> 元属性（meta property ）函数工作的。</p>
<pre class="brush: js">function copy(obj) {
  var copy = Object.create(Object.getPrototypeOf(obj));
  var propNames = Object.getOwnPropertyNames(obj);

  propNames.forEach(function(name) {
    var desc = Object.getOwnPropertyDescriptor(obj, name);
    Object.defineProperty(copy, name, desc);
  });

  return copy;
}

var obj1 = { a: 1, b: 2 };
var obj2 = copy(obj1); // obj2 looks like obj1 now
</pre>
<h3 id="如果数组在迭代时被修改了，则其他元素会被跳过。">如果数组在迭代时被修改了，则其他元素会被跳过。</h3>
<p>下面的例子会输出"one", "two", "four"。当到达包含值"two"的项时，整个数组的第一个项被移除了，这导致所有剩下的项上移一个位置。因为元素 "four"现在在数组更前的位置，"three"会被跳过。 <code>forEach()</code>不会在迭代之前创建数组的副本。</p>
<pre class="brush:js">var words = ['one', 'two', 'three', 'four'];
words.forEach(function(word) {
  console.log(word);
  if (word === 'two') {
    words.shift();
  }
});
// one
// two
// four
</pre>
<h2 id="Polyfill">Polyfill</h2>
<p><code>forEach</code> 是在第五版本里被添加到 ECMA-262 标准的；这样它可能在标准的其他实现中不存在，你可以在你调用 <code>forEach</code> 之前 插入下面的代码，在本地不支持的情况下使用 <code>forEach()</code>。该算法是 ECMA-262 第5版中指定的算法。算法假定 <a href="Reference/Global_Objects/Object" title="Object 构造函数创建一个对象包装器。"><code>Object</code></a> 和 <a href="Reference/Global_Objects/TypeError" title="TypeError（类型错误） 对象用来表示值的类型非预期类型时发生的错误。"><code>TypeError</code></a> 拥有它们的初始值。<code>callback.call</code> 等价于 <a href="Reference/Global_Objects/Function/call" title="call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。"><code>Function.prototype.call()</code></a>。</p>
<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: http://es5.github.io/#x15.4.4.18
if (!Array.prototype.forEach) {

  Array.prototype.forEach = function(callback, thisArg) {

    var T, k;

    if (this == null) {
      throw new TypeError(' this is null or not defined');
    }

    // 1. Let O be the result of calling toObject() passing the
    // |this| value as the argument.
    var O = Object(this);

    // 2. Let lenValue be the result of calling the Get() internal
    // method of O with the argument "length".
    // 3. Let len be toUint32(lenValue).
    var len = O.length &gt;&gt;&gt; 0;

    // 4. If isCallable(callback) is false, throw a TypeError exception. 
    // See: http://es5.github.com/#x9.11
    if (typeof callback !== "function") {
      throw new TypeError(callback + ' is not a function');
    }

    // 5. If thisArg was supplied, let T be thisArg; else let
    // T be undefined.
    if (arguments.length &gt; 1) {
      T = thisArg;
    }

    // 6. Let k be 0
    k = 0;

    // 7. Repeat, while k &lt; len
    while (k &lt; len) {

      var kValue;

      // a. Let Pk be ToString(k).
      //    This is implicit for LHS operands of the in operator
      // b. Let kPresent be the result of calling the HasProperty
      //    internal method of O with argument Pk.
      //    This step can be combined with c
      // c. If kPresent is true, then
      if (k in O) {

        // i. Let kValue be the result of calling the Get internal
        // method of O with argument Pk.
        kValue = O[k];

        // ii. Call the Call internal method of callback with T as
        // the this value and argument list containing kValue, k, and O.
        callback.call(T, kValue, k, O);
      }
      // d. Increase k by 1.
      k++;
    }
    // 8. return undefined
  };
}
</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
<tr>
<td><a class="external" href="https://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.18" hreflang="en" lang="en" rel="noopener">ECMAScript 5.1 (ECMA-262)<br/><small lang="zh-CN">Array.prototype.forEach</small></a></td>
<td><span class="spec-Standard">Standard</span></td>
<td>Initial definition. Implemented in JavaScript 1.6.</td>
</tr>
<tr>
<td><a class="external" href="https://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype.foreach" hreflang="en" lang="en" rel="noopener">ECMAScript 2015 (6th Edition, ECMA-262)<br/><small lang="zh-CN">Array.prototype.forEach</small></a></td>
<td><span class="spec-Standard">Standard</span></td>
<td> </td>
</tr>
<tr>
<td><a class="external" href="https://tc39.github.io/ecma262/#sec-array.prototype.foreach" hreflang="en" lang="en" rel="noopener">ECMAScript Latest Draft (ECMA-262)<br/><small lang="zh-CN">Array.prototype.forEach</small></a></td>
<td><span class="spec-Draft">Draft</span></td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>
<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data" rel="noopener">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
<p></p><div class="bc-data"><a class="bc-github-link external" href="https://github.com/mdn/browser-compat-data" rel="noopener">Update compatibility data on GitHub</a><table class="bc-table bc-table-js"><thead><tr class="bc-platforms"><td></td><th class="bc-platform-desktop" colspan="6"><span>Desktop</span></th><th class="bc-platform-mobile" colspan="7"><span>Mobile</span></th><th class="bc-platform-server" colspan="1"><span>Server</span></th></tr><tr class="bc-browsers"><td></td><th class="bc-browser-chrome"><span class="bc-head-txt-label bc-head-icon-chrome">Chrome</span></th><th class="bc-browser-edge"><span class="bc-head-txt-label bc-head-icon-edge">Edge</span></th><th class="bc-browser-firefox"><span class="bc-head-txt-label bc-head-icon-firefox">Firefox</span></th><th class="bc-browser-ie"><span class="bc-head-txt-label bc-head-icon-ie">Internet Explorer</span></th><th class="bc-browser-opera"><span class="bc-head-txt-label bc-head-icon-opera">Opera</span></th><th class="bc-browser-safari"><span class="bc-head-txt-label bc-head-icon-safari">Safari</span></th><th class="bc-browser-webview_android"><span class="bc-head-txt-label bc-head-icon-webview_android">Android webview</span></th><th class="bc-browser-chrome_android"><span class="bc-head-txt-label bc-head-icon-chrome_android">Chrome for Android</span></th><th class="bc-browser-edge_mobile"><span class="bc-head-txt-label bc-head-icon-edge_mobile">Edge Mobile</span></th><th class="bc-browser-firefox_android"><span class="bc-head-txt-label bc-head-icon-firefox_android">Firefox for Android</span></th><th class="bc-browser-opera_android"><span class="bc-head-txt-label bc-head-icon-opera_android">Opera for Android</span></th><th class="bc-browser-safari_ios"><span class="bc-head-txt-label bc-head-icon-safari_ios">Safari on iOS</span></th><th class="bc-browser-samsunginternet_android"><span class="bc-head-txt-label bc-head-icon-samsunginternet_android">Samsung Internet</span></th><th class="bc-browser-nodejs"><span class="bc-head-txt-label bc-head-icon-nodejs">Node.js</span></th></tr></thead><tbody><tr><th scope="row"><code>forEach</code></th><td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              12</td><td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              1.5</td><td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              9</td><td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-edge_mobile"><span class="bc-browser-name">Edge Mobile</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              4</td><td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-nodejs"><span class="bc-browser-name">nodejs</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td></tr></tbody></table><section class="bc-legend" id="sect1"><h3 class="offscreen" id="Legend">Legend</h3><dl><dt><span class="bc-supports-yes bc-supports">
<abbr class="bc-level bc-level-yes only-icon" title="Full support">
<span>Full support</span>
                  
                </abbr></span></dt><dd>Full support</dd></dl></section></div><p></p>
</div>
<h2 id="参见">参见</h2>
<ul>
<li><a href="Reference/Global_Objects/Array/find" title="find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。"><code>Array.prototype.find()</code></a></li>
<li><a href="Reference/Global_Objects/Array/findIndex" title="findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。"><code>Array.prototype.findIndex()</code></a></li>
<li><a href="Reference/Global_Objects/Array/map" title="map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。"><code>Array.prototype.map()</code></a></li>
<li><a href="Reference/Global_Objects/Array/filter" title="filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。"><code>Array.prototype.filter()</code></a></li>
<li><a href="Reference/Global_Objects/Array/every" title="every() 方法测试数组的所有元素是否都通过了指定函数的测试。"><code>Array.prototype.every()</code></a></li>
<li><a href="Reference/Global_Objects/Array/some" title="some() 方法测试是否至少有一个元素通过由提供的函数实现的测试。"><code>Array.prototype.some()</code></a></li>
<li><a href="Reference/Global_Objects/Map/forEach" title="forEach() 方法将会以插入顺序对 Map 对象中的每一个键值对执行一次参数中提供的回调函数。"><code>Map.prototype.forEach()</code></a></li>
<li><a href="Reference/Global_Objects/Set/forEach" title="forEach 方法根据集合中元素的顺序，对每个元素都执行提供的 callback 函数一次。"><code>Set.prototype.forEach()</code></a></li>
</ul>
</article>