1 files changed, 313 insertions, 0 deletions
diff --git a/files/zh-cn/web/javascript/reference/statements/for...of/index.html b/files/zh-cn/web/javascript/reference/statements/for...of/index.html
new file mode 100644
index 0000000000..49152b716f
--- /dev/null
+++ b/files/zh-cn/web/javascript/reference/statements/for...of/index.html
@@ -0,0 +1,313 @@
+---
+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>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("javascript.statements.for_of")}}</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Map.prototype.forEach()")}}</li>
+</ul>