https://amatsuzero.github.io/LastStand/tags/generator/Recent content in Generator on Last StandHugozh-cnWed, 08 Jan 2025 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/es6/generator/Wed, 02 Oct 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/es6/generator/<h2 id="聊聊-for-of">聊聊 <code>for of</code></h2> <p>说起 <code>for of</code> 相信每个写过 <code>JavaScript</code> 的人都用过 <code>for of</code> ，平时我们用它做什么呢？大多数情况应该就是遍历数组了，当然，更多时候，我们也会用 <code>map()</code> 或者 <code>filer()</code> 来遍历一个数组。 但是就像我们标题里面说的，它跟 <code>Generator</code> 能扯上什么关系呢？</p> <p>首先我们想一个问题，为什么使用 <code>for of</code> 或者 <code>map()</code>/<code>filer()</code> 方法就可以遍历一个数组 (或者类数组对象: <code>Strings</code> , <code>Maps</code> , <code>Sets</code> , <code>arguments</code> ) 呢？ 为什么不能用他们来遍历一个对象呢？</p> <h2 id="你能学到什么">你能学到什么</h2> <ul> <li>对 <code>for of</code> 更深入的理解</li> <li><code>iterator</code> 到底是何方神圣?</li> <li>数组也是对象，为什么不能用 <code>for of</code> 来遍历对象呢？</li> <li>如何实现对象的 <code>for of</code>?</li> <li><code>Generator</code> 又是何方神圣？他有什么用呢？</li> </ul> <h2 id="类数组对象的玄机">类数组对象的玄机</h2> <p>在真正揭开谜底之前，站在 <code>for of</code> 的角度想一下，现在让你去遍历一个数组，你需要知道什么信息呢？</p> <ul> <li>对应下标的值</li> <li>是否遍历结束的标志</li> </ul> <p>带着这样的思考，我们打印一个数组来看看这里面的玄机：</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">numbersArray</span> <span style="color:#f92672">=</span> [<span style="color:#ae81ff">1</span>, <span style="color:#ae81ff">2</span>, <span style="color:#ae81ff">3</span>]; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">dir</span>(<span style="color:#a6e22e">numbersArray</span>); </span></span></code></pre></div><p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/es6/generator/image-01.png"></p> <p>数组 (或者类数组对象: <code>Strings</code> , <code>Maps</code> , <code>Sets</code> , <code>arguments</code> ) 的原型中都实现了一个方法 <code>Symbol.iterator</code>，问题来了，那么这个 <code>Symbol.iterator</code> 又有什么用呢？ 拿出来试一下就知道了：</p>