path: root/files/zh-cn/web/javascript/reference/statements/for...of/index.html

---
title: for...of
slug: Web/JavaScript/Reference/Statements/for...of
tags:
  - ECMAScript 2015
  - JavaScript
  - Reference
  - Statement
translation_of: Web/JavaScript/Reference/Statements/for...of
---
<div>
<div>{{jsSidebar("Statements")}}</div>
</div>

<p><strong><code>for...of</code>语句</strong>在<a href="/zh-CN/docs/Web/JavaScript/Guide/iterable">可迭代对象</a>（包括 {{jsxref("Array")}}，{{jsxref("Map")}}，{{jsxref("Set")}}，{{jsxref("String")}}，{{jsxref("TypedArray")}}，<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a> 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句</p>

<div>{{EmbedInteractiveExample("pages/js/statement-forof.html")}}</div>



<h2 id="语法">语法</h2>

<pre class="syntaxbox">for (variable of iterable) {
    //<em>statements</em>
}
</pre>

<dl>
 <dt><code>variable</code></dt>
 <dd>在每次迭代中，将不同属性的值分配给变量。</dd>
 <dt><code>iterable</code></dt>
 <dd>被迭代枚举其属性的对象。</dd>
</dl>

<h2 id="示例">示例</h2>

<h3 id="迭代jsxrefArray">迭代{{jsxref("Array")}}</h3>

<pre class="brush: js">let iterable = [10, 20, 30];

for (let value of iterable) {
    value += 1;
    console.log(value);
}
// 11
// 21
// 31
</pre>

<p>如果你不想修改语句块中的变量 , 也可以使用<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a>代替<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code>。</p>

<pre class="brush: js">let iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// 10
// 20
// 30</pre>

<h3 id="迭代jsxrefString">迭代{{jsxref("String")}}</h3>

<pre class="brush: js">let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"</pre>

<h3 id="迭代_jsxrefTypedArray">迭代 {{jsxref("TypedArray")}}</h3>

<pre class="brush: js">let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);
}
// 0
// 255
</pre>

<h3 id="迭代jsxrefMap">迭代{{jsxref("Map")}}</h3>

<pre class="brush: js">let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let entry of iterable) {
  console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3
</pre>

<h3 id="迭代_jsxrefSet">迭代 {{jsxref("Set")}}</h3>

<pre class="brush: js">let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3</pre>

<h3 id="迭代_jsxrefarguments_对象">迭代 {{jsxref("arguments")}} 对象</h3>

<pre class="brush: js">(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);

// 1
// 2
// 3</pre>

<h3 id="迭代_DOM_集合">迭代 DOM 集合</h3>

<p>迭代 DOM 元素集合，比如一个{{domxref("NodeList")}}对象：下面的例子演示给每一个 article 标签内的 p 标签添加一个 "<code>read</code>" 类。</p>

<pre class="brush:js">//注意：这只能在实现了NodeList.prototype[Symbol.iterator]的平台上运行
let articleParagraphs = document.querySelectorAll("article &gt; p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}
</pre>

<h3 id="关闭迭代器">关闭迭代器</h3>

<p>对于<code>for...of</code>的循环，可以由<code>break</code>, <code>throw  continue </code>   或<code>return</code>终止。在这些情况下，迭代器关闭。</p>

<pre class="brush: js">function* foo(){
  yield 1;
  yield 2;
  yield 3;
};

for (let o of foo()) {
  console.log(o);
  break; // closes iterator, triggers return
}
</pre>

<h3 id="迭代生成器">迭代生成器</h3>

<p><span><span>你还可以</span></span>迭代<span><span>一个</span></span><a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/function*">生成器</a>：</p>

<pre class="brush:js">function* fibonacci() { // 一个生成器函数
    let [prev, curr] = [0, 1];
    for (;;) { // while (true) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
    }
}

for (let n of fibonacci()) {
     console.log(n);
    // 当n大于1000时跳出循环
    if (n &gt;= 1000)
        break;
}</pre>

<h4 id="不要重用生成器">不要重用生成器</h4>

<p>生成器不应该重用，即使<code>for...of</code>循环的提前终止，例如通过{{jsxref("Statements/break", "break")}}关键字。在退出循环后，生成器关闭，并尝试再次迭代，不会产生任何进一步的结果。</p>

<pre class="brush: js">var gen = (function *(){
    yield 1;
    yield 2;
    yield 3;
})();
for (let o of gen) {
    console.log(o);
    break;//关闭生成器
}

//生成器不应该重用，以下没有意义！
for (let o of gen) {
    console.log(o);
}

</pre>

<h3 id="迭代其他可迭代对象">迭代其他可迭代对象</h3>

<p>你还可以迭代显式实现<a href="/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">可迭代</a>协议的对象：</p>

<pre class="brush: js">var iterable = {
  [Symbol.iterator]() {
    return {
      i: 0,
      next() {
        if (this.i &lt; 3) {
          return { value: this.i++, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

for (var value of iterable) {
  console.log(value);
}
// 0
// 1
// 2</pre>

<h3 id="for...of与for...in的区别"><code>for...of</code>与<code>for...in</code>的区别</h3>

<p>无论是<code>for...in</code>还是<code>for...of</code>语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。</p>

<p>{{jsxref("Statements/for...in", "for...in")}} 语句以任意顺序迭代对象的<a href="/zh-CN/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">可枚举属性</a>。</p>

<p><code>for...of</code> 语句遍历<a href="/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">可迭代对象</a>定义要迭代的数据。</p>

<p>以下示例显示了与{{jsxref("Array")}}一起使用时，<code>for...of</code>循环和<code>for...in</code>循环之间的区别。</p>

<pre class="brush: js">Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = 'hello';

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs 0, 1, 2, "foo"
  }
}

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}</pre>

<pre class="brush: js">Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = 'hello';
</pre>

<p>每个对象将继承<code>objCustom</code>属性，并且作为{{jsxref("Array")}}的每个对象将继承<code>arrCustom</code>属性，因为将这些属性添加到{{jsxref("Object.prototype")}}和{{jsxref("Array.prototype")}}。由于<a href="/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">继承和原型链</a>，对象<code>iterable</code>继承属性<code>objCustom</code>和<code>arrCustom</code>。</p>

<pre class="brush: js">for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}
</pre>

<p>此循环仅以原始插入顺序记录<code>iterable</code> 对象的<a href="/zh-CN/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">可枚举属性</a>。它不记录数组<strong>元素</strong><code>3</code>, <code>5</code>, <code>7</code> 或<code>hello</code>，因为这些<strong>不是</strong>枚举属性。但是它记录了数组<strong>索引</strong>以及<code>arrCustom</code>和<code>objCustom</code>。如果你不知道为什么这些属性被迭代，{{jsxref("Statements/for...in", "array iteration and for...in", "#Array_iteration_and_for...in")}}中有更多解释。</p>

<pre class="brush: js">for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs 0, 1, 2, "foo"
  }
}
</pre>

<p>这个循环类似于第一个，但是它使用{{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}} 来检查，如果找到的枚举属性是对象自己的（不是继承的）。如果是，该属性被记录。记录的属性是<code>0</code>, <code>1</code>, <code>2</code>和<code>foo</code>，因为它们是自身的属性（<strong>不是继承的</strong>）。属性<code>arrCustom</code>和<code>objCustom</code>不会被记录，因为它们<strong>是继承的</strong>。</p>

<pre class="brush: js">for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}
</pre>

<p>该循环迭代并记录<code>iterable</code>作为<a href="/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">可迭代对象</a>定义的迭代值，这些是数组元素 <code>3</code>, <code>5</code>, <code>7</code>，而不是任何对象的<strong>属性</strong>。</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('ES2015', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td>
   <td>{{Spec2('ES2015')}}</td>
   <td>Initial definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容">浏览器兼容</h2>

<p>{{Compat("javascript.statements.for_of")}}</p>

<h2 id="相关链接">相关链接</h2>

<ul>
 <li>{{jsxref("Array.prototype.forEach()")}}</li>
 <li>{{jsxref("Map.prototype.forEach()")}}</li>
</ul>