feat: add autolink headings. 617a46c1a5

This commit is contained in:
jaywcjlove
2022-09-30 15:18:53 +00:00
parent 98f8b9cdb7
commit a108b1e838
24 changed files with 690 additions and 683 deletions

View File

@ -15,17 +15,17 @@
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="currentColor"></path>
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="currentColor"></path>
</svg>
<span class="title">Quick Reference</span></a><div class="menu"><a href="https://github.com/jaywcjlove/reference/blob/main/docs/javascript.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap max-container"><header class="wrap-header h1wrap"><h1>JavaScript 备忘清单</h1><div class="wrap-body">
<span class="title">Quick Reference</span></a><div class="menu"><a href="https://github.com/jaywcjlove/reference/blob/main/docs/javascript.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap max-container"><header class="wrap-header h1wrap"><h1 id="javascript-备忘清单"><a aria-hidden="true" tabindex="-1" href="#javascript-备忘清单"><span class="icon icon-link"></span></a>JavaScript 备忘清单</h1><div class="wrap-body">
<p>包含最重要概念、函数、方法等的 JavaScript 备忘单。 初学者的完整快速参考。</p>
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2>入门</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>介绍</h3><div class="wrap-body">
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="介绍"><a aria-hidden="true" tabindex="-1" href="#介绍"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
<p>JavaScript 是一种轻量级的解释型编程语言。</p>
<ul>
<li><a href="json.html">JSON 备忘清单</a></li>
<li><a href="/regex#regex-in-javascript">JavaScript 中的正则表达式</a></li>
<li><a href="./typescript.html">TypeScript 备忘清单</a></li>
</ul>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>打印调试</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="打印调试"><a aria-hidden="true" tabindex="-1" href="#打印调试"><span class="icon icon-link"></span></a>打印调试</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// => Hello world!</span>
</span><span class="code-line line-number" line="2"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Hello world!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token comment">// => Hello QuickReference</span>
@ -33,31 +33,31 @@
</span><span class="code-line line-number" line="5"><span class="token comment">// 将错误消息打印到 stderr</span>
</span><span class="code-line line-number" line="6"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Oops!'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>断点调试</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="断点调试"><a aria-hidden="true" tabindex="-1" href="#断点调试"><span class="icon icon-link"></span></a>断点调试</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">potentiallyBuggyCode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword">debugger</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"> <span class="token comment">// 做可能有问题的东西来检查,逐步通过等。</span>
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
</span></code></pre>
<p><strong>debugger</strong> 语句调用任何可用的调试功能。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>数字</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="数字"><a aria-hidden="true" tabindex="-1" href="#数字"><span class="icon icon-link"></span></a>数字</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> amount <span class="token operator">=</span> <span class="token number">6</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">let</span> price <span class="token operator">=</span> <span class="token number">4.99</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token keyword">let</span> home <span class="token operator">=</span> <span class="token number">1e2</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="4"><span class="token keyword">let</span> m <span class="token operator">=</span> <span class="token number">0644</span><span class="token punctuation">;</span> <span class="token comment">// 八进制数字 420</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>let 关键字</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="let-关键字"><a aria-hidden="true" tabindex="-1" href="#let-关键字"><span class="icon icon-link"></span></a>let 关键字</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> count<span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => undefined</span>
</span><span class="code-line line-number" line="3">count <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="4"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => 10</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>const 关键字</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="const-关键字"><a aria-hidden="true" tabindex="-1" href="#const-关键字"><span class="icon icon-link"></span></a>const 关键字</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> numberOfColumns <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token comment">// TypeError: Assignment to constant...</span>
</span><span class="code-line line-number" line="3">numberOfColumns <span class="token operator">=</span> <span class="token number">8</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>变量</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="变量"><a aria-hidden="true" tabindex="-1" href="#变量"><span class="icon icon-link"></span></a>变量</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token keyword null nil">null</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">"Tammy"</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> found <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
@ -66,20 +66,20 @@
</span><span class="code-line line-number" line="6"><span class="token keyword">var</span> a<span class="token punctuation">;</span>
</span><span class="code-line line-number" line="7"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => undefined</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>字符串</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="字符串"><a aria-hidden="true" tabindex="-1" href="#字符串"><span class="icon icon-link"></span></a>字符串</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> single <span class="token operator">=</span> <span class="token string">'Wheres my bandit hat?'</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">let</span> double <span class="token operator">=</span> <span class="token string">"Wheres my bandit hat?"</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token comment">// => 21</span>
</span><span class="code-line line-number" line="4"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>single<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>算术运算符</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="算术运算符"><a aria-hidden="true" tabindex="-1" href="#算术运算符"><span class="icon icon-link"></span></a>算术运算符</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token number">5</span> <span class="token operator">+</span> <span class="token number">5</span> <span class="token operator">=</span> <span class="token number">10</span> <span class="token comment">// 加法 Addition</span>
</span><span class="code-line line-number" line="2"><span class="token number">10</span> <span class="token operator">-</span> <span class="token number">5</span> <span class="token operator">=</span> <span class="token number">5</span> <span class="token comment">// 加法 Subtraction</span>
</span><span class="code-line line-number" line="3"><span class="token number">5</span> <span class="token operator">*</span> <span class="token number">10</span> <span class="token operator">=</span> <span class="token number">50</span> <span class="token comment">// 乘法 Multiplication</span>
</span><span class="code-line line-number" line="4"><span class="token number">10</span> <span class="token operator">/</span> <span class="token number">5</span> <span class="token operator">=</span> <span class="token number">2</span> <span class="token comment">// 除法 Division</span>
</span><span class="code-line line-number" line="5"><span class="token number">10</span> <span class="token operator">%</span> <span class="token number">5</span> <span class="token operator">=</span> <span class="token number">0</span> <span class="token comment">// 取模 Modulo</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>注释</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="注释"><a aria-hidden="true" tabindex="-1" href="#注释"><span class="icon icon-link"></span></a>注释</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 此行将表示注释</span>
</span><span class="code-line line-number" line="2"><span class="token comment">/*
</span></span><span class="code-line line-number" line="3"><span class="token comment">多行配置
@ -87,7 +87,7 @@
</span></span><span class="code-line line-number" line="5"><span class="token comment">以下配置。
</span></span><span class="code-line line-number" line="6"><span class="token comment">*/</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>赋值运算符</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="赋值运算符"><a aria-hidden="true" tabindex="-1" href="#赋值运算符"><span class="icon icon-link"></span></a>赋值运算符</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> number <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token comment">// 两个语句都会加 10</span>
</span><span class="code-line line-number" line="3">number <span class="token operator">=</span> number <span class="token operator">+</span> <span class="token number">10</span><span class="token punctuation">;</span>
@ -95,14 +95,14 @@
</span><span class="code-line line-number" line="5"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="6"><span class="token comment">// => 120</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>字符串插值</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="字符串插值"><a aria-hidden="true" tabindex="-1" href="#字符串插值"><span class="icon icon-link"></span></a>字符串插值</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> age <span class="token operator">=</span> <span class="token number">7</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token comment">// 字符串拼接</span>
</span><span class="code-line line-number" line="3"><span class="token string">'Tommy is '</span> <span class="token operator">+</span> age <span class="token operator">+</span> <span class="token string">' years old.'</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="4"><span class="token comment">// 字符串插值</span>
</span><span class="code-line line-number" line="5"><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Tommy is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>age<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> years old.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>字符串</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="字符串-1"><a aria-hidden="true" tabindex="-1" href="#字符串-1"><span class="icon icon-link"></span></a>字符串</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">var</span> abc <span class="token operator">=</span> <span class="token string">"abcdefghijklmnopqrstuvwxyz"</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">var</span> esc <span class="token operator">=</span> <span class="token string">'I don\'t \n know'</span><span class="token punctuation">;</span> <span class="token comment">// \n 换行</span>
</span><span class="code-line line-number" line="3"><span class="token keyword">var</span> len <span class="token operator">=</span> abc<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">;</span> <span class="token comment">// 字符串长度</span>
@ -124,7 +124,7 @@
</span><span class="code-line line-number" line="19"><span class="token comment">// 数字转为十六进制 (16)、八进制 (8) 或二进制 (2)</span>
</span><span class="code-line line-number" line="20"><span class="token number">128.</span><span class="token method function property-access">toString</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>数字</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="数字-1"><a aria-hidden="true" tabindex="-1" href="#数字-1"><span class="icon icon-link"></span></a>数字</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">var</span> pi <span class="token operator">=</span> <span class="token number">3.141</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2">pi<span class="token punctuation">.</span><span class="token method function property-access">toFixed</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 返回 3 </span>
</span><span class="code-line line-number" line="3">pi<span class="token punctuation">.</span><span class="token method function property-access">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 返回 3.14 - 使用金钱</span>
@ -146,7 +146,7 @@
</span><span class="code-line line-number" line="19"><span class="token comment">// 无穷</span>
</span><span class="code-line line-number" line="20"><span class="token known-class-name class-name">Number</span><span class="token punctuation">.</span><span class="token constant">POSITIVE_INFINITY</span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>Math</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="math"><a aria-hidden="true" tabindex="-1" href="#math"><span class="icon icon-link"></span></a>Math</h4><div class="wrap-body">
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> pi <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">;</span> <span class="token comment">// 3.141592653589793</span>
</span><span class="code-line line-number" line="2">Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span><span class="token number">4.4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 4 - 数字四舍五入</span>
</span><span class="code-line line-number" line="3">Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span><span class="token number">4.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 5</span>
@ -173,7 +173,7 @@
</span><span class="code-line line-number" line="24"><span class="token comment">// 随机整数,从 1</span>
</span><span class="code-line line-number" line="25">Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>全局函数</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
</div></div></div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="全局函数"><a aria-hidden="true" tabindex="-1" href="#全局函数"><span class="icon icon-link"></span></a>全局函数</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 像脚本代码一样执行字符串</span>
</span><span class="code-line line-number" line="2"><span class="token function">eval</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token comment">// 从数字返回字符串</span>
@ -199,20 +199,20 @@
</span><span class="code-line line-number" line="23"><span class="token comment">// 解析一个字符串并返回一个整数</span>
</span><span class="code-line line-number" line="24"><span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 条件</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3>操作符</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3-->
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="javascript-条件"><a aria-hidden="true" tabindex="-1" href="#javascript-条件"><span class="icon icon-link"></span></a>JavaScript 条件</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3 id="操作符"><a aria-hidden="true" tabindex="-1" href="#操作符"><span class="icon icon-link"></span></a>操作符</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3-->
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token boolean">true</span> <span class="token operator">||</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</span><span class="code-line line-number" line="2"><span class="token number">10</span> <span class="token operator">></span> <span class="token number">5</span> <span class="token operator">||</span> <span class="token number">10</span> <span class="token operator">></span> <span class="token number">20</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</span><span class="code-line line-number" line="3"><span class="token boolean">false</span> <span class="token operator">||</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
</span><span class="code-line line-number" line="4"><span class="token number">10</span> <span class="token operator">></span> <span class="token number">100</span> <span class="token operator">||</span> <span class="token number">10</span> <span class="token operator">></span> <span class="token number">20</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>逻辑运算符 &#x26;&#x26;</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="逻辑运算符-"><a aria-hidden="true" tabindex="-1" href="#逻辑运算符-"><span class="icon icon-link"></span></a>逻辑运算符 &#x26;&#x26;</h4><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token boolean">true</span> <span class="token operator">&#x26;&#x26;</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</span><span class="code-line line-number" line="2"><span class="token number">1</span> <span class="token operator">></span> <span class="token number">2</span> <span class="token operator">&#x26;&#x26;</span> <span class="token number">2</span> <span class="token operator">></span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
</span><span class="code-line line-number" line="3"><span class="token boolean">true</span> <span class="token operator">&#x26;&#x26;</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
</span><span class="code-line line-number" line="4"><span class="token number">4</span> <span class="token operator">===</span> <span class="token number">4</span> <span class="token operator">&#x26;&#x26;</span> <span class="token number">3</span> <span class="token operator">></span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>比较运算符</h4><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="比较运算符"><a aria-hidden="true" tabindex="-1" href="#比较运算符"><span class="icon icon-link"></span></a>比较运算符</h4><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token number">1</span> <span class="token operator">></span> <span class="token number">3</span> <span class="token comment">// false</span>
</span><span class="code-line line-number" line="2"><span class="token number">3</span> <span class="token operator">></span> <span class="token number">1</span> <span class="token comment">// true</span>
</span><span class="code-line line-number" line="3"><span class="token number">250</span> <span class="token operator">>=</span> <span class="token number">250</span> <span class="token comment">// true</span>
@ -220,32 +220,32 @@
</span><span class="code-line line-number" line="5"><span class="token number">1</span> <span class="token operator">===</span> <span class="token number">2</span> <span class="token comment">// false</span>
</span><span class="code-line line-number" line="6"><span class="token number">1</span> <span class="token operator">===</span> <span class="token string">'1'</span> <span class="token comment">// false</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>逻辑运算符 !</h4><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="逻辑运算符--1"><a aria-hidden="true" tabindex="-1" href="#逻辑运算符--1"><span class="icon icon-link"></span></a>逻辑运算符 !</h4><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> lateToWork <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">let</span> oppositeValue <span class="token operator">=</span> <span class="token operator">!</span>lateToWork<span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token comment">// => false</span>
</span><span class="code-line line-number" line="4"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>oppositeValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>空值合并运算符 ??</h4><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="空值合并运算符-"><a aria-hidden="true" tabindex="-1" href="#空值合并运算符-"><span class="icon icon-link"></span></a>空值合并运算符 ??</h4><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword null nil">null</span> <span class="token operator">??</span> <span class="token string">'I win'</span><span class="token punctuation">;</span> <span class="token comment">// 'I win'</span>
</span><span class="code-line line-number" line="2"><span class="token keyword nil">undefined</span> <span class="token operator">??</span> <span class="token string">'Me too'</span><span class="token punctuation">;</span> <span class="token comment">// 'Me too'</span>
</span><span class="code-line line-number" line="3"><span class="token boolean">false</span> <span class="token operator">??</span> <span class="token string">'I lose'</span> <span class="token comment">// false</span>
</span><span class="code-line line-number" line="4"><span class="token number">0</span> <span class="token operator">??</span> <span class="token string">'I lose again'</span> <span class="token comment">// 0</span>
</span><span class="code-line line-number" line="5"><span class="token string">''</span> <span class="token operator">??</span> <span class="token string">'Damn it'</span> <span class="token comment">// ''</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>if Statement (if 语句)</h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="if-statement-if-语句"><a aria-hidden="true" tabindex="-1" href="#if-statement-if-语句"><span class="icon icon-link"></span></a>if Statement (if 语句)</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> isMailSent <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>isMailSent<span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Mail sent to recipient'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Ternary Operator (三元运算符)</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="ternary-operator-三元运算符"><a aria-hidden="true" tabindex="-1" href="#ternary-operator-三元运算符"><span class="icon icon-link"></span></a>Ternary Operator (三元运算符)</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">var</span> age <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2">
</span><span class="code-line line-number" line="3"><span class="token comment">// => true</span>
</span><span class="code-line line-number" line="4"><span class="token keyword">var</span> status <span class="token operator">=</span> <span class="token punctuation">(</span>age <span class="token operator">>=</span> <span class="token number">18</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token boolean">true</span> <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>else if</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="else-if"><a aria-hidden="true" tabindex="-1" href="#else-if"><span class="icon icon-link"></span></a>else if</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> size <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>size <span class="token operator">></span> <span class="token number">20</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Medium'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@ -256,7 +256,7 @@
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="9"><span class="token comment">// Print: Small</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>== vs ===</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="-vs-"><a aria-hidden="true" tabindex="-1" href="#-vs-"><span class="icon icon-link"></span></a>== vs ===</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token number">0</span> <span class="token operator">==</span> <span class="token boolean">false</span> <span class="token comment">// true</span>
</span><span class="code-line line-number" line="2"><span class="token number">0</span> <span class="token operator">===</span> <span class="token boolean">false</span> <span class="token comment">// false, 不同类型</span>
</span><span class="code-line line-number" line="3"><span class="token number">1</span> <span class="token operator">==</span> <span class="token string">"1"</span> <span class="token comment">// true, 自动类型转换</span>
@ -267,7 +267,7 @@
</span><span class="code-line line-number" line="8"><span class="token string">'0'</span> <span class="token operator">===</span> <span class="token boolean">false</span> <span class="token comment">// false</span>
</span></code></pre>
<p><code>==</code> 只检查值,<code>===</code> 检查值和类型。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>switch 语句</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="switch-语句"><a aria-hidden="true" tabindex="-1" href="#switch-语句"><span class="icon icon-link"></span></a>switch 语句</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> food <span class="token operator">=</span> <span class="token string">'salad'</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2">
</span><span class="code-line line-number" line="3"><span class="token keyword control-flow">switch</span> <span class="token punctuation">(</span>food<span class="token punctuation">)</span> <span class="token punctuation">{</span>
@ -279,7 +279,7 @@
</span><span class="code-line line-number" line="9"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'请您用餐'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>switch 多 case - 单一操作</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="switch-多-case---单一操作"><a aria-hidden="true" tabindex="-1" href="#switch-多-case---单一操作"><span class="icon icon-link"></span></a>switch 多 case - 单一操作</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> food <span class="token operator">=</span> <span class="token string">'salad'</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2">
</span><span class="code-line line-number" line="3"><span class="token keyword control-flow">switch</span> <span class="token punctuation">(</span>food<span class="token punctuation">)</span> <span class="token punctuation">{</span>
@ -291,8 +291,8 @@
</span><span class="code-line line-number" line="9"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'请您用餐'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript Functions 函数</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>函数</h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="javascript-functions-函数"><a aria-hidden="true" tabindex="-1" href="#javascript-functions-函数"><span class="icon icon-link"></span></a>JavaScript Functions 函数</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="函数"><a aria-hidden="true" tabindex="-1" href="#函数"><span class="icon icon-link"></span></a>函数</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 定义函数:</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> num1 <span class="token operator">+</span> num2<span class="token punctuation">;</span>
@ -300,7 +300,7 @@
</span><span class="code-line line-number" line="5"><span class="token comment">// 调用函数:</span>
</span><span class="code-line line-number" line="6"><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 9</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>匿名函数</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="匿名函数"><a aria-hidden="true" tabindex="-1" href="#匿名函数"><span class="icon icon-link"></span></a>匿名函数</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// Named function</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">function</span> <span class="token function">rocketToMars</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> <span class="token string">'BOOM!'</span><span class="token punctuation">;</span>
@ -310,32 +310,32 @@
</span><span class="code-line line-number" line="7"> <span class="token keyword control-flow">return</span> <span class="token string">'BOOM!'</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>箭头函数 (ES6)</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>有两个参数</h4><div class="wrap-body">
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="箭头函数-es6"><a aria-hidden="true" tabindex="-1" href="#箭头函数-es6"><span class="icon icon-link"></span></a>箭头函数 (ES6)</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="有两个参数"><a aria-hidden="true" tabindex="-1" href="#有两个参数"><span class="icon icon-link"></span></a>有两个参数</h4><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">sum</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">param1<span class="token punctuation">,</span> param2</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> param1 <span class="token operator">+</span> param2<span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="4"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => 7 </span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>没有参数</h4><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="没有参数"><a aria-hidden="true" tabindex="-1" href="#没有参数"><span class="icon icon-link"></span></a>没有参数</h4><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">printHello</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="4"><span class="token function">printHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => hello</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>只有一个参数</h4><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="只有一个参数"><a aria-hidden="true" tabindex="-1" href="#只有一个参数"><span class="icon icon-link"></span></a>只有一个参数</h4><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">checkWeight</span> <span class="token operator">=</span> <span class="token parameter">weight</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Weight : </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>weight<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="4"><span class="token function">checkWeight</span><span class="token punctuation">(</span><span class="token number">25</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => Weight : 25 </span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>简洁箭头函数</h4><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="简洁箭头函数"><a aria-hidden="true" tabindex="-1" href="#简洁箭头函数"><span class="icon icon-link"></span></a>简洁箭头函数</h4><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">multiply</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> a <span class="token operator">*</span> b<span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token comment">// => 60 </span>
</span><span class="code-line line-number" line="3"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token function">multiply</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
<p>从 ES2015 开始提供<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">箭头函数</a></p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>返回关键字</h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="返回关键字"><a aria-hidden="true" tabindex="-1" href="#返回关键字"><span class="icon icon-link"></span></a>返回关键字</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 有 return</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> num1 <span class="token operator">+</span> num2<span class="token punctuation">;</span>
@ -345,7 +345,7 @@
</span><span class="code-line line-number" line="7"> num1 <span class="token operator">+</span> num2<span class="token punctuation">;</span>
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>调用函数</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="调用函数"><a aria-hidden="true" tabindex="-1" href="#调用函数"><span class="icon icon-link"></span></a>调用函数</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 定义函数</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> num1 <span class="token operator">+</span> num2<span class="token punctuation">;</span>
@ -353,24 +353,24 @@
</span><span class="code-line line-number" line="5"><span class="token comment">// 调用函数</span>
</span><span class="code-line line-number" line="6"><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 6</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>函数表达式</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="函数表达式"><a aria-hidden="true" tabindex="-1" href="#函数表达式"><span class="icon icon-link"></span></a>函数表达式</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">dog</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> <span class="token string">'Woof!'</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>函数参数</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="函数参数"><a aria-hidden="true" tabindex="-1" href="#函数参数"><span class="icon icon-link"></span></a>函数参数</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 参数是 name</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">function</span> <span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hello, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">!</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>函数声明</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="函数声明"><a aria-hidden="true" tabindex="-1" href="#函数声明"><span class="icon icon-link"></span></a>函数声明</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> num1 <span class="token operator">+</span> num2<span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 范围</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>范围</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="javascript-范围"><a aria-hidden="true" tabindex="-1" href="#javascript-范围"><span class="icon icon-link"></span></a>JavaScript 范围</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="范围"><a aria-hidden="true" tabindex="-1" href="#范围"><span class="icon icon-link"></span></a>范围</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword">var</span> pizzaName <span class="token operator">=</span> <span class="token string">"Margarita"</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"> <span class="token comment">// 这里的代码可以使用 PizzaName</span>
@ -394,7 +394,7 @@
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> x <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token comment">// Global scope</span>
</span></code></pre>
<p>ES6 引入了两个重要的新 JavaScript 关键字let 和 const。这两个关键字在 JavaScript 中提供了块作用域。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>块作用域变量</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="块作用域变量"><a aria-hidden="true" tabindex="-1" href="#块作用域变量"><span class="icon icon-link"></span></a>块作用域变量</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> isLoggedIn <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>isLoggedIn <span class="token operator">==</span> <span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword">const</span> statusMessage <span class="token operator">=</span> <span class="token string">'Logged in.'</span><span class="token punctuation">;</span>
@ -403,7 +403,7 @@
</span><span class="code-line line-number" line="6"><span class="token comment">// 未捕获的引用错误...</span>
</span><span class="code-line line-number" line="7"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>statusMessage<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>全局变量</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="全局变量"><a aria-hidden="true" tabindex="-1" href="#全局变量"><span class="icon icon-link"></span></a>全局变量</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 全局声明的变量</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> color <span class="token operator">=</span> <span class="token string">'blue'</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token keyword">function</span> <span class="token function">printColor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
@ -412,7 +412,7 @@
</span><span class="code-line line-number" line="6">
</span><span class="code-line line-number" line="7"><span class="token function">printColor</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => blue</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3><code>let</code> vs <code>var</code></h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="let-vs-var"><a aria-hidden="true" tabindex="-1" href="#let-vs-var"><span class="icon icon-link"></span></a><code>let</code> vs <code>var</code></h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&#x3C;</span> <span class="token number">3</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token comment">// 这是“let”的最大范围</span>
</span><span class="code-line line-number" line="3"> <span class="token comment">// i 可以访问 ✔️</span>
@ -426,7 +426,7 @@
</span><span class="code-line line-number" line="4"><span class="token comment">// i 可以访问 ✔️</span>
</span></code></pre>
<p><code>var</code> 的范围是最近的函数块,而 <code>let</code> 的范围是最近的封闭块。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>带闭包的循环</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="带闭包的循环"><a aria-hidden="true" tabindex="-1" href="#带闭包的循环"><span class="icon icon-link"></span></a>带闭包的循环</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 打印三次,不是我们的意思。</span>
</span><span class="code-line line-number" line="2"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&#x3C;</span> <span class="token number">3</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token parameter">_</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@ -439,23 +439,23 @@
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
</span></code></pre>
<p>变量使用 <code>let</code> 有自己的副本,变量有使用 <code>var</code> 的共享副本。</p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript Arrays</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>数组</h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="javascript-arrays"><a aria-hidden="true" tabindex="-1" href="#javascript-arrays"><span class="icon icon-link"></span></a>JavaScript Arrays</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="数组"><a aria-hidden="true" tabindex="-1" href="#数组"><span class="icon icon-link"></span></a>数组</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> fruits <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"apple"</span><span class="token punctuation">,</span> <span class="token string">"dew"</span><span class="token punctuation">,</span> <span class="token string">"banana"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token comment">// 不同的数据类型</span>
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'chicken'</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>属性 .length</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="属性-length"><a aria-hidden="true" tabindex="-1" href="#属性-length"><span class="icon icon-link"></span></a>属性 .length</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2">numbers<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token comment">// 4</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>索引</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="索引"><a aria-hidden="true" tabindex="-1" href="#索引"><span class="icon icon-link"></span></a>索引</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 访问数组元素</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> myArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>myArray<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 100</span>
</span><span class="code-line line-number" line="4"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>myArray<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 200</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>可变图表</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="可变图表"><a aria-hidden="true" tabindex="-1" href="#可变图表"><span class="icon icon-link"></span></a>可变图表</h3><div class="wrap-body">
<table class="show-header">
<thead>
<tr>
@ -497,7 +497,7 @@
</tr>
</tbody>
</table><!--rehype:className=show-header-->
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>方法 .push()</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="方法-push"><a aria-hidden="true" tabindex="-1" href="#方法-push"><span class="icon icon-link"></span></a>方法 .push()</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 添加单个元素:</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> cart <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'apple'</span><span class="token punctuation">,</span> <span class="token string">'orange'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3">cart<span class="token punctuation">.</span><span class="token method function property-access">push</span><span class="token punctuation">(</span><span class="token string">'pear'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@ -506,19 +506,19 @@
</span><span class="code-line line-number" line="6">numbers<span class="token punctuation">.</span><span class="token method function property-access">push</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
<p>将项目<strong>添加到末尾</strong>并返回新的数组长度。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>方法 .pop()</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="方法-pop"><a aria-hidden="true" tabindex="-1" href="#方法-pop"><span class="icon icon-link"></span></a>方法 .pop()</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> fruits <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"apple"</span><span class="token punctuation">,</span> <span class="token string">"dew"</span><span class="token punctuation">,</span> <span class="token string">"banana"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> fruit <span class="token operator">=</span> fruits<span class="token punctuation">.</span><span class="token method function property-access">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'banana'</span>
</span><span class="code-line line-number" line="3">
</span><span class="code-line line-number" line="4"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>fruits<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ["apple", "dew"]</span>
</span></code></pre>
<p><strong>末尾删除</strong>一个项目并返回已删除的项目。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>方法 .shift()</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="方法-shift"><a aria-hidden="true" tabindex="-1" href="#方法-shift"><span class="icon icon-link"></span></a>方法 .shift()</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> cats <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'Bob'</span><span class="token punctuation">,</span> <span class="token string">'Willy'</span><span class="token punctuation">,</span> <span class="token string">'Mini'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2">cats<span class="token punctuation">.</span><span class="token method function property-access">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['Willy', 'Mini']</span>
</span></code></pre>
<p><strong>从头删除</strong>一个项目并返回已删除的项目。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>方法 .unshift()</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="方法-unshift"><a aria-hidden="true" tabindex="-1" href="#方法-unshift"><span class="icon icon-link"></span></a>方法 .unshift()</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> cats <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'Bob'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token comment">// => ['Willy', 'Bob']</span>
</span><span class="code-line line-number" line="3">cats<span class="token punctuation">.</span><span class="token method function property-access">unshift</span><span class="token punctuation">(</span><span class="token string">'Willy'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@ -526,7 +526,7 @@
</span><span class="code-line line-number" line="5">cats<span class="token punctuation">.</span><span class="token method function property-access">unshift</span><span class="token punctuation">(</span><span class="token string">'Puff'</span><span class="token punctuation">,</span> <span class="token string">'George'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
<p>将项目<strong>添加到开头</strong>并返回新的数组长度。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>方法 .concat()</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="方法-concat"><a aria-hidden="true" tabindex="-1" href="#方法-concat"><span class="icon icon-link"></span></a>方法 .concat()</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> newFirstNumber <span class="token operator">=</span> <span class="token number">4</span>
</span><span class="code-line line-number" line="3">
@ -537,8 +537,8 @@
</span><span class="code-line line-number" line="8">numbers<span class="token punctuation">.</span><span class="token method function property-access">concat</span><span class="token punctuation">(</span>newFirstNumber<span class="token punctuation">)</span>
</span></code></pre>
<p>如果你想避免改变你的原始数组,你可以使用 concat。</p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 循环</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>While 循环</h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="javascript-循环"><a aria-hidden="true" tabindex="-1" href="#javascript-循环"><span class="icon icon-link"></span></a>JavaScript 循环</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="while-循环"><a aria-hidden="true" tabindex="-1" href="#while-循环"><span class="icon icon-link"></span></a>While 循环</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword control-flow">while</span> <span class="token punctuation">(</span>condition<span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token comment">// 要执行的代码块</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
@ -548,7 +548,7 @@
</span><span class="code-line line-number" line="7"> i<span class="token operator">++</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>反向循环</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="反向循环"><a aria-hidden="true" tabindex="-1" href="#反向循环"><span class="icon icon-link"></span></a>反向循环</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> fruits <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"apple"</span><span class="token punctuation">,</span> <span class="token string">"dew"</span><span class="token punctuation">,</span> <span class="token string">"berry"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> fruits<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">>=</span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">--</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">. </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>fruits<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@ -557,7 +557,7 @@
</span><span class="code-line line-number" line="6"><span class="token comment">// => 1. dew</span>
</span><span class="code-line line-number" line="7"><span class="token comment">// => 0. apple</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Do...While 语句</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="dowhile-语句"><a aria-hidden="true" tabindex="-1" href="#dowhile-语句"><span class="icon icon-link"></span></a>Do...While 语句</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1">x <span class="token operator">=</span> <span class="token number">0</span>
</span><span class="code-line line-number" line="2">i <span class="token operator">=</span> <span class="token number">0</span>
</span><span class="code-line line-number" line="3"><span class="token keyword control-flow">do</span> <span class="token punctuation">{</span>
@ -567,26 +567,26 @@
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span> <span class="token keyword control-flow">while</span> <span class="token punctuation">(</span>i <span class="token operator">&#x3C;</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="8"><span class="token comment">// => 0 1 3 6 10</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>For 循环</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="for-循环"><a aria-hidden="true" tabindex="-1" href="#for-循环"><span class="icon icon-link"></span></a>For 循环</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&#x3C;</span> <span class="token number">4</span><span class="token punctuation">;</span> i <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="4"><span class="token comment">// => 0, 1, 2, 3</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>遍历数组</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="遍历数组"><a aria-hidden="true" tabindex="-1" href="#遍历数组"><span class="icon icon-link"></span></a>遍历数组</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&#x3C;</span> array<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>array<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="4"><span class="token comment">// => 数组中的每一项</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Break</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="break"><a aria-hidden="true" tabindex="-1" href="#break"><span class="icon icon-link"></span></a>Break</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&#x3C;</span> <span class="token number">99</span><span class="token punctuation">;</span> i <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>i <span class="token operator">></span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span>
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="5"><span class="token comment">// => 0 1 2 3 4 5</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Continue</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="continue"><a aria-hidden="true" tabindex="-1" href="#continue"><span class="icon icon-link"></span></a>Continue</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&#x3C;</span> <span class="token number">10</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>i <span class="token operator">===</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">continue</span><span class="token punctuation">;</span>
@ -594,14 +594,14 @@
</span><span class="code-line line-number" line="5"> text <span class="token operator">+=</span> <span class="token string">"The number is "</span> <span class="token operator">+</span> i <span class="token operator">+</span> <span class="token string">"&#x3C;br>"</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>嵌套循环</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="嵌套循环"><a aria-hidden="true" tabindex="-1" href="#嵌套循环"><span class="icon icon-link"></span></a>嵌套循环</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&#x3C;</span> <span class="token number">2</span><span class="token punctuation">;</span> i <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator">&#x3C;</span> <span class="token number">3</span><span class="token punctuation">;</span> j <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>j<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="4"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>for...in 循环</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="forin-循环"><a aria-hidden="true" tabindex="-1" href="#forin-循环"><span class="icon icon-link"></span></a>for...in 循环</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> fruits <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"apple"</span><span class="token punctuation">,</span> <span class="token string">"orange"</span><span class="token punctuation">,</span> <span class="token string">"banana"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> index <span class="token keyword">in</span> fruits<span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span>
@ -610,7 +610,7 @@
</span><span class="code-line line-number" line="6"><span class="token comment">// => 1</span>
</span><span class="code-line line-number" line="7"><span class="token comment">// => 2</span>
</span></code></pre>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>label 语句</h3><div class="wrap-body"><!--rehype:wrap-class= row-span-2-->
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="label-语句"><a aria-hidden="true" tabindex="-1" href="#label-语句"><span class="icon icon-link"></span></a>label 语句</h3><div class="wrap-body"><!--rehype:wrap-class= row-span-2-->
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">var</span> num <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2">
</span><span class="code-line line-number" line="3"><span class="token literal-property property">outPoint</span><span class="token operator">:</span>
@ -626,7 +626,7 @@
</span><span class="code-line line-number" line="13"><span class="token function">alert</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 95</span>
</span></code></pre>
<p><code>alert(num)</code> 的值可以看出,<code>continue outPoint;</code> 语句的作用是跳出当前循环,并跳转到 <code>outPoint</code>(标签)下的 <code>for</code> 循环继续执行。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>for...of 循环</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="forof-循环"><a aria-hidden="true" tabindex="-1" href="#forof-循环"><span class="icon icon-link"></span></a>for...of 循环</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> fruits <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"apple"</span><span class="token punctuation">,</span> <span class="token string">"orange"</span><span class="token punctuation">,</span> <span class="token string">"banana"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> fruit <span class="token keyword">of</span> fruits<span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>fruit<span class="token punctuation">)</span><span class="token punctuation">;</span>
@ -635,7 +635,7 @@
</span><span class="code-line line-number" line="6"><span class="token comment">// => orange</span>
</span><span class="code-line line-number" line="7"><span class="token comment">// => banana</span>
</span></code></pre>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>for await...of</h3><div class="wrap-body"><!--rehype:wrap-class= row-span-2-->
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="for-awaitof"><a aria-hidden="true" tabindex="-1" href="#for-awaitof"><span class="icon icon-link"></span></a>for await...of</h3><div class="wrap-body"><!--rehype:wrap-class= row-span-2-->
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">async</span> <span class="token keyword">function</span><span class="token operator">*</span> <span class="token function">asyncGenerator</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">while</span> <span class="token punctuation">(</span>i <span class="token operator">&#x3C;</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
@ -653,7 +653,7 @@
</span><span class="code-line line-number" line="15"><span class="token comment">// 1</span>
</span><span class="code-line line-number" line="16"><span class="token comment">// 2</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>可选的 for 表达式</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="可选的-for-表达式"><a aria-hidden="true" tabindex="-1" href="#可选的-for-表达式"><span class="icon icon-link"></span></a>可选的 for 表达式</h3><div class="wrap-body">
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2">
</span><span class="code-line line-number" line="3"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token punctuation">;</span><span class="token punctuation">;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
@ -662,8 +662,8 @@
</span><span class="code-line line-number" line="6"> i<span class="token operator">++</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 迭代器(Iterators)</h2><div class="wrap-body"><!--rehype:body-class=cols-2-->
</div></div><div class="h2wrap-body cols-2"><div class="wrap"><div class="wrap-header h3wrap"><h3>分配给变量的函数</h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="javascript-迭代器iterators"><a aria-hidden="true" tabindex="-1" href="#javascript-迭代器iterators"><span class="icon icon-link"></span></a>JavaScript 迭代器(Iterators)</h2><div class="wrap-body"><!--rehype:body-class=cols-2-->
</div></div><div class="h2wrap-body cols-2"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="分配给变量的函数"><a aria-hidden="true" tabindex="-1" href="#分配给变量的函数"><span class="icon icon-link"></span></a>分配给变量的函数</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> <span class="token function-variable function">plusFive</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">number</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> number <span class="token operator">+</span> <span class="token number">5</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
@ -673,7 +673,7 @@
</span><span class="code-line line-number" line="7"><span class="token comment">// 由于 f 具有函数值,因此可以调用它。</span>
</span><span class="code-line line-number" line="8"><span class="token function">f</span><span class="token punctuation">(</span><span class="token number">9</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 14</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>回调函数</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="回调函数"><a aria-hidden="true" tabindex="-1" href="#回调函数"><span class="icon icon-link"></span></a>回调函数</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">isEven</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> n <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
@ -685,34 +685,34 @@
</span><span class="code-line line-number" line="9"><span class="token function">printMsg</span><span class="token punctuation">(</span>isEven<span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="10"><span class="token comment">// => The number 4 is an even number: True.</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>数组方法 .reduce()</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="数组方法-reduce"><a aria-hidden="true" tabindex="-1" href="#数组方法-reduce"><span class="icon icon-link"></span></a>数组方法 .reduce()</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> sum <span class="token operator">=</span> numbers<span class="token punctuation">.</span><span class="token method function property-access">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">accumulator<span class="token punctuation">,</span> curVal</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> accumulator <span class="token operator">+</span> curVal<span class="token punctuation">;</span>
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="5"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>sum<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 10</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>数组方法 .map()</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="数组方法-map"><a aria-hidden="true" tabindex="-1" href="#数组方法-map"><span class="icon icon-link"></span></a>数组方法 .map()</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> members <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Taylor"</span><span class="token punctuation">,</span> <span class="token string">"Donald"</span><span class="token punctuation">,</span> <span class="token string">"Don"</span><span class="token punctuation">,</span> <span class="token string">"Natasha"</span><span class="token punctuation">,</span> <span class="token string">"Bobby"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> announcements <span class="token operator">=</span> members<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">member</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> member <span class="token operator">+</span> <span class="token string">" joined the contest."</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="5"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>announcements<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>数组方法 .forEach()</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="数组方法-foreach"><a aria-hidden="true" tabindex="-1" href="#数组方法-foreach"><span class="icon icon-link"></span></a>数组方法 .forEach()</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">77</span><span class="token punctuation">,</span> <span class="token number">45</span><span class="token punctuation">,</span> <span class="token number">99</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2">numbers<span class="token punctuation">.</span><span class="token method function property-access">forEach</span><span class="token punctuation">(</span><span class="token parameter">number</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>数组方法 .filter()</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="数组方法-filter"><a aria-hidden="true" tabindex="-1" href="#数组方法-filter"><span class="icon icon-link"></span></a>数组方法 .filter()</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> randomNumbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">42</span><span class="token punctuation">,</span> <span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">39</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> filteredArray <span class="token operator">=</span> randomNumbers<span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span><span class="token parameter">n</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> n <span class="token operator">></span> <span class="token number">5</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 对象(Objects)</h2><div class="wrap-body"><!--rehype:body-class=cols-2-->
</div></div><div class="h2wrap-body cols-2"><div class="wrap"><div class="wrap-header h3wrap"><h3>访问属性</h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="javascript-对象objects"><a aria-hidden="true" tabindex="-1" href="#javascript-对象objects"><span class="icon icon-link"></span></a>JavaScript 对象(Objects)</h2><div class="wrap-body"><!--rehype:body-class=cols-2-->
</div></div><div class="h2wrap-body cols-2"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="访问属性"><a aria-hidden="true" tabindex="-1" href="#访问属性"><span class="icon icon-link"></span></a>访问属性</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> apple <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'Green'</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">price</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">bulk</span><span class="token operator">:</span> <span class="token string">'$3/kg'</span><span class="token punctuation">,</span> <span class="token literal-property property">smallQty</span><span class="token operator">:</span> <span class="token string">'$4/kg'</span> <span class="token punctuation">}</span>
@ -720,7 +720,7 @@
</span><span class="code-line line-number" line="5"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>apple<span class="token punctuation">.</span><span class="token property-access">color</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => Green</span>
</span><span class="code-line line-number" line="6"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>apple<span class="token punctuation">.</span><span class="token property-access">price</span><span class="token punctuation">.</span><span class="token property-access">bulk</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => $3/kg</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>命名属性</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="命名属性"><a aria-hidden="true" tabindex="-1" href="#命名属性"><span class="icon icon-link"></span></a>命名属性</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 无效键名示例</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> trainSchedule <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token comment">// 由于单词之间的空格而无效。</span>
@ -731,13 +731,13 @@
</span><span class="code-line line-number" line="8"> <span class="token operator">+</span>compartment<span class="token operator">:</span> <span class="token string">'C'</span>
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>不存在的属性</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="不存在的属性"><a aria-hidden="true" tabindex="-1" href="#不存在的属性"><span class="icon icon-link"></span></a>不存在的属性</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> classElection <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">'January 12'</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="4"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>classElection<span class="token punctuation">.</span><span class="token property-access">place</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined</span>
</span></code></pre>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>可变的</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="可变的"><a aria-hidden="true" tabindex="-1" href="#可变的"><span class="icon icon-link"></span></a>可变的</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> student <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Sheldon'</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">score</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
@ -752,7 +752,7 @@
</span><span class="code-line line-number" line="12">student <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="13"><span class="token comment">// TypeError: TypeError分配给常量变量。</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>赋值简写语法</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="赋值简写语法"><a aria-hidden="true" tabindex="-1" href="#赋值简写语法"><span class="icon icon-link"></span></a>赋值简写语法</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Tom'</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token string">'22'</span><span class="token punctuation">,</span>
@ -761,7 +761,7 @@
</span><span class="code-line line-number" line="6"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'Tom'</span>
</span><span class="code-line line-number" line="7"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// '22'</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>删除运算符</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="删除运算符"><a aria-hidden="true" tabindex="-1" href="#删除运算符"><span class="icon icon-link"></span></a>删除运算符</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">"Matilda"</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">27</span><span class="token punctuation">,</span>
@ -778,7 +778,7 @@
</span></span><span class="code-line line-number" line="14"><span class="token comment">}
</span></span><span class="code-line line-number" line="15"><span class="token comment">*/</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>对象作为参数</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="对象作为参数"><a aria-hidden="true" tabindex="-1" href="#对象作为参数"><span class="icon icon-link"></span></a>对象作为参数</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> origNum <span class="token operator">=</span> <span class="token number">8</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> origObj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> <span class="token function-variable function">changeItUp</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">num<span class="token punctuation">,</span> obj</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
@ -792,7 +792,7 @@
</span><span class="code-line line-number" line="11"><span class="token comment">// 通过引用,因此是可变的。</span>
</span><span class="code-line line-number" line="12"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>origObj<span class="token punctuation">.</span><span class="token property-access">color</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>工厂函数</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="工厂函数"><a aria-hidden="true" tabindex="-1" href="#工厂函数"><span class="icon icon-link"></span></a>工厂函数</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 一个接受 'name''age' 和 'breed' 的工厂函数,</span>
</span><span class="code-line line-number" line="2"><span class="token comment">// 参数返回一个自定义的 dog 对象。</span>
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> <span class="token function-variable function">dogFactory</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age<span class="token punctuation">,</span> breed</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
@ -806,12 +806,12 @@
</span><span class="code-line line-number" line="11"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="12"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>速记对象创建</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="速记对象创建"><a aria-hidden="true" tabindex="-1" href="#速记对象创建"><span class="icon icon-link"></span></a>速记对象创建</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> activity <span class="token operator">=</span> <span class="token string">'Surfing'</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> beach <span class="token operator">=</span> <span class="token punctuation">{</span> activity <span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>beach<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { activity: 'Surfing' }</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>this 关键字</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="this-关键字"><a aria-hidden="true" tabindex="-1" href="#this-关键字"><span class="icon icon-link"></span></a>this 关键字</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> cat <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Pipey'</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
@ -821,7 +821,7 @@
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="8"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>cat<span class="token punctuation">.</span><span class="token method function property-access">whatName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => Pipey</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>方法</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="方法"><a aria-hidden="true" tabindex="-1" href="#方法"><span class="icon icon-link"></span></a>方法</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> engine <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token comment">// 方法简写,有一个参数</span>
</span><span class="code-line line-number" line="3"> <span class="token function">start</span><span class="token punctuation">(</span><span class="token parameter">adverb</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
@ -835,7 +835,7 @@
</span><span class="code-line line-number" line="11">engine<span class="token punctuation">.</span><span class="token method function property-access">start</span><span class="token punctuation">(</span><span class="token string">'noisily'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="12">engine<span class="token punctuation">.</span><span class="token method function property-access">sputter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Getters 和 setters</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="getters-和-setters"><a aria-hidden="true" tabindex="-1" href="#getters-和-setters"><span class="icon icon-link"></span></a>Getters 和 setters</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> myCat <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token literal-property property">_name</span><span class="token operator">:</span> <span class="token string">'Dottie'</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword">get</span> <span class="token function">name</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
@ -850,8 +850,8 @@
</span><span class="code-line line-number" line="12"><span class="token comment">// 赋值调用 setter</span>
</span><span class="code-line line-number" line="13">myCat<span class="token punctuation">.</span><span class="token property-access">name</span> <span class="token operator">=</span> <span class="token string">'Yankee'</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript Classes</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>静态方法/字段</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="javascript-classes"><a aria-hidden="true" tabindex="-1" href="#javascript-classes"><span class="icon icon-link"></span></a>JavaScript Classes</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="静态方法字段"><a aria-hidden="true" tabindex="-1" href="#静态方法字段"><span class="icon icon-link"></span></a>静态方法/字段</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Dog</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">_name</span> <span class="token operator">=</span> name<span class="token punctuation">;</span>
@ -877,7 +877,7 @@
</span><span class="code-line line-number" line="23"><span class="token comment">// 调用静态方法</span>
</span><span class="code-line line-number" line="24"><span class="token maybe-class-name">Dog</span><span class="token punctuation">.</span><span class="token method function property-access">bark</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>公有静态字段</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="公有静态字段"><a aria-hidden="true" tabindex="-1" href="#公有静态字段"><span class="icon icon-link"></span></a>公有静态字段</h4><div class="wrap-body">
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">ClassStaticField</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword">static</span> staticField <span class="token operator">=</span> <span class="token string">'static field'</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
@ -885,7 +885,7 @@
</span><span class="code-line line-number" line="5"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token maybe-class-name">ClassStaticField</span><span class="token punctuation">.</span><span class="token property-access">staticField</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="6"><span class="token comment">// 预期输出值:"static field" </span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Class</h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="class"><a aria-hidden="true" tabindex="-1" href="#class"><span class="icon icon-link"></span></a>Class</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Song</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">;</span>
@ -900,7 +900,7 @@
</span><span class="code-line line-number" line="12"><span class="token keyword">const</span> mySong <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Song</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="13">mySong<span class="token punctuation">.</span><span class="token method function property-access">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>extends</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="extends"><a aria-hidden="true" tabindex="-1" href="#extends"><span class="icon icon-link"></span></a>extends</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// Parent class</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">class</span> <span class="token class-name">Media</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">info</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
@ -921,7 +921,7 @@
</span><span class="code-line line-number" line="18"> <span class="token literal-property property">publishDate</span><span class="token operator">:</span> <span class="token number">1975</span>
</span><span class="code-line line-number" line="19"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Class Constructor</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="class-constructor"><a aria-hidden="true" tabindex="-1" href="#class-constructor"><span class="icon icon-link"></span></a>Class Constructor</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Song</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">title<span class="token punctuation">,</span> artist</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">title</span> <span class="token operator">=</span> title<span class="token punctuation">;</span>
@ -931,7 +931,7 @@
</span><span class="code-line line-number" line="7"><span class="token keyword">const</span> mySong <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Song</span><span class="token punctuation">(</span><span class="token string">'Bohemian Rhapsody'</span><span class="token punctuation">,</span> <span class="token string">'Queen'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="8"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>mySong<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Class Methods</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="class-methods"><a aria-hidden="true" tabindex="-1" href="#class-methods"><span class="icon icon-link"></span></a>Class Methods</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Song</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Playing!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@ -942,8 +942,8 @@
</span><span class="code-line line-number" line="8"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript Modules</h2><div class="wrap-body"><!--rehype:body-class=cols-2-->
</div></div><div class="h2wrap-body cols-2"><div class="wrap"><div class="wrap-header h3wrap"><h3>Export / Import</h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="javascript-modules"><a aria-hidden="true" tabindex="-1" href="#javascript-modules"><span class="icon icon-link"></span></a>JavaScript Modules</h2><div class="wrap-body"><!--rehype:body-class=cols-2-->
</div></div><div class="h2wrap-body cols-2"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="export--import"><a aria-hidden="true" tabindex="-1" href="#export--import"><span class="icon icon-link"></span></a>Export / Import</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// myMath.js</span>
</span><span class="code-line line-number" line="2"><span class="token comment">// 默认导出 Default export</span>
</span><span class="code-line line-number" line="3"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span>y</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
@ -964,7 +964,7 @@
</span></span><span class="code-line line-number" line="18"><span class="token exports"> multiply<span class="token punctuation">,</span> duplicate
</span></span><span class="code-line line-number" line="19"><span class="token exports"><span class="token punctuation">}</span></span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>import 加载模块</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="import-加载模块"><a aria-hidden="true" tabindex="-1" href="#import-加载模块"><span class="icon icon-link"></span></a>import 加载模块</h4><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// main.js</span>
</span><span class="code-line line-number" line="2"><span class="token keyword module">import</span> <span class="token imports">add<span class="token punctuation">,</span> <span class="token punctuation">{</span> subtract<span class="token punctuation">,</span> multiply<span class="token punctuation">,</span> duplicate <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'./myMath.js'</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 8 </span>
@ -974,7 +974,7 @@
</span><span class="code-line line-number" line="7"><span class="token comment">// index.html</span>
</span><span class="code-line line-number" line="8"><span class="token operator">&#x3C;</span>script type<span class="token operator">=</span><span class="token string">"module"</span> src<span class="token operator">=</span><span class="token string">"main.js"</span><span class="token operator">></span><span class="token operator">&#x3C;</span><span class="token operator">/</span>script<span class="token operator">></span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Export Module</h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="export-module"><a aria-hidden="true" tabindex="-1" href="#export-module"><span class="icon icon-link"></span></a>Export Module</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// myMath.js</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span>y</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> x <span class="token operator">+</span> y
@ -996,7 +996,7 @@
</span><span class="code-line line-number" line="19"> duplicate
</span><span class="code-line line-number" line="20"><span class="token punctuation">}</span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>require 加载模块</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="require-加载模块"><a aria-hidden="true" tabindex="-1" href="#require-加载模块"><span class="icon icon-link"></span></a>require 加载模块</h4><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// main.js</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> myMath <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./myMath.js'</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="3"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>myMath<span class="token punctuation">.</span><span class="token method function property-access">add</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 8 </span>
@ -1004,8 +1004,8 @@
</span><span class="code-line line-number" line="5"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>myMath<span class="token punctuation">.</span><span class="token method function property-access">multiply</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 12</span>
</span><span class="code-line line-number" line="6"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>myMath<span class="token punctuation">.</span><span class="token method function property-access">duplicate</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 10</span>
</span></code></pre>
</div></div></div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript Promises</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>Promise</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
</div></div></div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="javascript-promises"><a aria-hidden="true" tabindex="-1" href="#javascript-promises"><span class="icon icon-link"></span></a>JavaScript Promises</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="promise"><a aria-hidden="true" tabindex="-1" href="#promise"><span class="icon icon-link"></span></a>Promise</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
<p>创建 promises</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
@ -1015,30 +1015,30 @@
</span><span class="code-line line-number" line="6"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></code></pre>
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>使用 promises</h4><div class="wrap-body">
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="使用-promises"><a aria-hidden="true" tabindex="-1" href="#使用-promises"><span class="icon icon-link"></span></a>使用 promises</h4><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1">promise
</span><span class="code-line line-number" line="2"> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> ··· <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="3"> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> ··· <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>Promise 方法</h4><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="promise-方法"><a aria-hidden="true" tabindex="-1" href="#promise-方法"><span class="icon icon-link"></span></a>Promise 方法</h4><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">all</span><span class="token punctuation">(</span>···<span class="token punctuation">)</span>
</span><span class="code-line line-number" line="2"><span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">race</span><span class="token punctuation">(</span>···<span class="token punctuation">)</span>
</span><span class="code-line line-number" line="3"><span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">reject</span><span class="token punctuation">(</span>···<span class="token punctuation">)</span>
</span><span class="code-line line-number" line="4"><span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">resolve</span><span class="token punctuation">(</span>···<span class="token punctuation">)</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>执行器函数</h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="执行器函数"><a aria-hidden="true" tabindex="-1" href="#执行器函数"><span class="icon icon-link"></span></a>执行器函数</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">executorFn</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'Resolved!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="4"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span>executorFn<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>setTimeout()</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="settimeout"><a aria-hidden="true" tabindex="-1" href="#settimeout"><span class="icon icon-link"></span></a>setTimeout()</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">loginAlert</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Login'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="4"><span class="token function">setTimeout</span><span class="token punctuation">(</span>loginAlert<span class="token punctuation">,</span> <span class="token number">6000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Promise 状态</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="promise-状态"><a aria-hidden="true" tabindex="-1" href="#promise-状态"><span class="icon icon-link"></span></a>Promise 状态</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"> <span class="token comment">// 一个异步操作。</span>
@ -1054,7 +1054,7 @@
</span><span class="code-line line-number" line="13"> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
</span><span class="code-line line-number" line="14"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>.then() 方法</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="then-方法"><a aria-hidden="true" tabindex="-1" href="#then-方法"><span class="icon icon-link"></span></a>.then() 方法</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'Result'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@ -1067,7 +1067,7 @@
</span><span class="code-line line-number" line="10"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="11"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>.catch() 方法</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="catch-方法"><a aria-hidden="true" tabindex="-1" href="#catch-方法"><span class="icon icon-link"></span></a>.catch() 方法</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span>
</span><span class="code-line line-number" line="2"> <span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
@ -1083,7 +1083,7 @@
</span><span class="code-line line-number" line="13"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="14"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>Promise.all()</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="promiseall"><a aria-hidden="true" tabindex="-1" href="#promiseall"><span class="icon icon-link"></span></a>Promise.all()</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> promise1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@ -1099,7 +1099,7 @@
</span><span class="code-line line-number" line="13"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>res<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="14"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>链接多个 .then()</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="链接多个-then"><a aria-hidden="true" tabindex="-1" href="#链接多个-then"><span class="icon icon-link"></span></a>链接多个 .then()</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span>
</span><span class="code-line line-number" line="2"> <span class="token parameter">resolve</span> <span class="token arrow operator">=></span>
</span><span class="code-line line-number" line="3"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'dAlan'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">)</span>
@ -1116,7 +1116,7 @@
</span><span class="code-line line-number" line="14"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
</span><span class="code-line line-number" line="15"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>避免嵌套的 Promise 和 .then()</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="避免嵌套的-promise-和-then"><a aria-hidden="true" tabindex="-1" href="#避免嵌套的-promise-和-then"><span class="icon icon-link"></span></a>避免嵌套的 Promise 和 .then()</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'*'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@ -1134,8 +1134,8 @@
</span><span class="code-line line-number" line="15"><span class="token comment">// 将它们链接在一起</span>
</span><span class="code-line line-number" line="16">promise<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span>twoStars<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span>oneDot<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span>print<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript Async-Await</h2><div class="wrap-body"><!--rehype:body-class=cols-2-->
</div></div><div class="h2wrap-body cols-2"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>异步</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="javascript-async-await"><a aria-hidden="true" tabindex="-1" href="#javascript-async-await"><span class="icon icon-link"></span></a>JavaScript Async-Await</h2><div class="wrap-body"><!--rehype:body-class=cols-2-->
</div></div><div class="h2wrap-body cols-2"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="异步"><a aria-hidden="true" tabindex="-1" href="#异步"><span class="icon icon-link"></span></a>异步</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">helloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token parameter">resolve</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
@ -1159,7 +1159,7 @@
</span><span class="code-line line-number" line="21"><span class="token function">msg</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Message: Hello World! &#x3C;-- 2 秒后</span>
</span><span class="code-line line-number" line="22"><span class="token function">msg1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Message: Hello World! &#x3C;-- 2 秒后</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>解决 Promises</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="解决-promises"><a aria-hidden="true" tabindex="-1" href="#解决-promises"><span class="icon icon-link"></span></a>解决 Promises</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> pro1 <span class="token operator">=</span> <span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">resolve</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">let</span> pro2 <span class="token operator">=</span> <span class="token number">44</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token keyword">let</span> pro3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
@ -1170,7 +1170,7 @@
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="9"><span class="token comment">// expected => Array [5, 44, "foo"]</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>异步等待 Promises</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="异步等待-promises"><a aria-hidden="true" tabindex="-1" href="#异步等待-promises"><span class="icon icon-link"></span></a>异步等待 Promises</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">helloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token parameter">resolve</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
@ -1184,7 +1184,7 @@
</span><span class="code-line line-number" line="11"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="12"><span class="token function">msg</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Message: Hello World! &#x3C;-- 2 秒后</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>错误处理</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="错误处理"><a aria-hidden="true" tabindex="-1" href="#错误处理"><span class="icon icon-link"></span></a>错误处理</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 数据不完整</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">let</span> json <span class="token operator">=</span> <span class="token string">'{ "age": 30 }'</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3">
@ -1195,7 +1195,7 @@
</span><span class="code-line line-number" line="8"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span> <span class="token string">"Invalid JSON data!"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>异步等待运算符</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="异步等待运算符"><a aria-hidden="true" tabindex="-1" href="#异步等待运算符"><span class="icon icon-link"></span></a>异步等待运算符</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">helloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token parameter">resolve</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
@ -1209,8 +1209,8 @@
</span><span class="code-line line-number" line="11"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="12"><span class="token function">msg</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Message: Hello World! &#x3C;-- 2 秒后</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 请求</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>JSON</h3><div class="wrap-body">
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="javascript-请求"><a aria-hidden="true" tabindex="-1" href="#javascript-请求"><span class="icon icon-link"></span></a>JavaScript 请求</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="json"><a aria-hidden="true" tabindex="-1" href="#json"><span class="icon icon-link"></span></a>JSON</h3><div class="wrap-body">
<pre class="language-js"><code class="language-JS code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> jsonObj <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"Rick"</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="3"> <span class="token string-property property">"id"</span><span class="token operator">:</span> <span class="token string">"11A"</span><span class="token punctuation">,</span>
@ -1218,12 +1218,12 @@
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></code></pre>
<p>另见:<a href="./json.html">JSON 备忘单</a></p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>XMLHttpRequest</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="xmlhttprequest"><a aria-hidden="true" tabindex="-1" href="#xmlhttprequest"><span class="icon icon-link"></span></a>XMLHttpRequest</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2">xhr<span class="token punctuation">.</span><span class="token method function property-access">open</span><span class="token punctuation">(</span><span class="token string">'GET'</span><span class="token punctuation">,</span> <span class="token string">'mysite.com/getjson'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
<p><code>XMLHttpRequest</code> 是一个浏览器级别的 API它使客户端能够通过 JavaScript 编写数据传输脚本,而不是 JavaScript 语言的一部分。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>GET</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="get"><a aria-hidden="true" tabindex="-1" href="#get"><span class="icon icon-link"></span></a>GET</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> req <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2">req<span class="token punctuation">.</span><span class="token property-access">responseType</span> <span class="token operator">=</span> <span class="token string">'json'</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3">req<span class="token punctuation">.</span><span class="token method function property-access">open</span><span class="token punctuation">(</span><span class="token string">'GET'</span><span class="token punctuation">,</span> <span class="token string">'/getdata?id=65'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@ -1232,7 +1232,7 @@
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="7">req<span class="token punctuation">.</span><span class="token method function property-access">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>POST</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="post"><a aria-hidden="true" tabindex="-1" href="#post"><span class="icon icon-link"></span></a>POST</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">weight</span><span class="token operator">:</span> <span class="token string">'1.5 KG'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"><span class="token comment">// 初始化一个请求。</span>
@ -1250,7 +1250,7 @@
</span><span class="code-line line-number" line="15"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span><span class="token property-access">response</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="16"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>fetch api</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="fetch-api"><a aria-hidden="true" tabindex="-1" href="#fetch-api"><span class="icon icon-link"></span></a>fetch api</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span>
@ -1267,14 +1267,14 @@
</span><span class="code-line line-number" line="14"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>networkError<span class="token punctuation">.</span><span class="token property-access">message</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="15"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>JSON 格式</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="json-格式"><a aria-hidden="true" tabindex="-1" href="#json-格式"><span class="icon icon-link"></span></a>JSON 格式</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'url-that-returns-JSON'</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="2"> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> response<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="3"> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">jsonResponse</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="4"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>jsonResponse<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="5"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>promise url 参数获取 API</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="promise-url-参数获取-api"><a aria-hidden="true" tabindex="-1" href="#promise-url-参数获取-api"><span class="icon icon-link"></span></a>promise url 参数获取 API</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'url'</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="2"> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
@ -1282,7 +1282,7 @@
</span><span class="code-line line-number" line="5"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>rejection<span class="token punctuation">.</span><span class="token property-access">message</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="6"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Fetch API 函数</h3><div class="wrap-body">
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="fetch-api-函数"><a aria-hidden="true" tabindex="-1" href="#fetch-api-函数"><span class="icon icon-link"></span></a>Fetch API 函数</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'https://api-xxx.com/endpoint'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">body</span><span class="token operator">:</span> <span class="token known-class-name class-name">JSON</span><span class="token punctuation">.</span><span class="token method function property-access">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">"200"</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
@ -1297,7 +1297,7 @@
</span><span class="code-line line-number" line="12"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>jsonResponse<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="13"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>async await 语法</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="async-await-语法"><a aria-hidden="true" tabindex="-1" href="#async-await-语法"><span class="icon icon-link"></span></a>async await 语法</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2-->
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">getSuggestions</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="2"> <span class="token keyword">const</span> wordQuery <span class="token operator">=</span> inputField<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword">const</span> endpoint <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>queryParams<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>wordQuery<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>