buyfakett/reference
1
0
Fork 0
mirror of https://github.com/jaywcjlove/reference.git synced 2025-06-18 05:01:21 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
e5a1707604719c6ef6f96a4f4cec20e9239aea9e
reference/docs/javascript.html
jaywcjlove e5a1707604 feat: add sketch cheatsheet. 29b891613d
2022-09-27 18:13:06 +00:00

1261 lines
266 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" data-color-mode="dark">
<head>
<meta charset="utf-8">
<title>JavaScript 备忘清单
&#x26; javascript cheatsheet &#x26; Quick Reference</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta description="包含最重要概念、函数、方法等的 JavaScript 备忘单。 初学者的完整快速参考。为开发人员分享快速参考备忘单。">
<meta keywords="Quick,Reference,cheatsheet,javascript">
<link rel="stylesheet" href="../style/style.css">
</head>
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em"><path opacity=".5" d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="white"></path><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="#cbd5e1"></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="#292D32"></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="warp max-container"><header class="warp-header h1warp"><h1>JavaScript 备忘清单</h1><div class="warp-body">
<p>包含最重要概念、函数、方法等的 JavaScript 备忘单。 初学者的完整快速参考。</p>
</div></header><div class="h1warp-body"><div class="warp"><div class="warp-header h2warp"><h2>入门</h2><div class="warp-body">
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>介绍</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>打印调试</h3><div class="warp-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>
</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">warn</span><span class="token punctuation">(</span><span class="token string">'hello %s'</span><span class="token punctuation">,</span> <span class="token string">'QuickReference'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</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="warp"><div class="warp-header h3warp"><h3>断点调试</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>数字</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>let 关键字</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>const 关键字</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>变量</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"><span class="token comment">// => Tammy, false, null</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>name<span class="token punctuation">,</span> found<span class="token punctuation">,</span> x<span class="token punctuation">)</span><span class="token punctuation">;</span>
</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="warp"><div class="warp-header h3warp"><h3>字符串</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>算术运算符</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>注释</h3><div class="warp-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">多行配置
</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 comment">以下配置。
</span></span><span class="code-line line-number" line="6"><span class="token comment">*/</span>
</span></code></pre>
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>赋值运算符</h3><div class="warp-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>
</span><span class="code-line line-number" line="4">number <span class="token operator">+=</span> <span class="token number">10</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>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="warp"><div class="warp-header h3warp"><h3>字符串插值</h3><div class="warp-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="warp col-span-2"><div class="warp-header h3warp"><h3>字符串</h3><div class="warp-body"><!--rehype:warp-class=col-span-2--><!--rehype:-->
<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>
</span><span class="code-line line-number" line="4">abc<span class="token punctuation">.</span><span class="token method function property-access">indexOf</span><span class="token punctuation">(</span><span class="token string">"lmno"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 查找子字符串，如果不包含则 -1</span>
</span><span class="code-line line-number" line="5">abc<span class="token punctuation">.</span><span class="token method function property-access">lastIndexOf</span><span class="token punctuation">(</span><span class="token string">"lmno"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 最后一次出现</span>
</span><span class="code-line line-number" line="6">abc<span class="token punctuation">.</span><span class="token method function property-access">slice</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">// 去掉“def”，负值从后面计算</span>
</span><span class="code-line line-number" line="7">abc<span class="token punctuation">.</span><span class="token method function property-access">replace</span><span class="token punctuation">(</span><span class="token string">"abc"</span><span class="token punctuation">,</span><span class="token string">"123"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 查找和替换，接受正则表达式</span>
</span><span class="code-line line-number" line="8">abc<span class="token punctuation">.</span><span class="token method function property-access">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 转换为大写</span>
</span><span class="code-line line-number" line="9">abc<span class="token punctuation">.</span><span class="token method function property-access">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 转换为小写</span>
</span><span class="code-line line-number" line="10">abc<span class="token punctuation">.</span><span class="token method function property-access">concat</span><span class="token punctuation">(</span><span class="token string">" "</span><span class="token punctuation">,</span> str2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// abc + " " + str2</span>
</span><span class="code-line line-number" line="11">abc<span class="token punctuation">.</span><span class="token method function property-access">charAt</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">// 索引处的字符：“c”</span>
</span><span class="code-line line-number" line="12">abc<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">// 不安全，abc[2] = "C" 不起作用</span>
</span><span class="code-line line-number" line="13"><span class="token comment">// 索引处的字符代码：“c”-> 99</span>
</span><span class="code-line line-number" line="14">abc<span class="token punctuation">.</span><span class="token method function property-access">charCodeAt</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="15"><span class="token comment">// 用逗号分割字符串给出一个数组</span>
</span><span class="code-line line-number" line="16">abc<span class="token punctuation">.</span><span class="token method function property-access">split</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="17"><span class="token comment">// 分割字符</span>
</span><span class="code-line line-number" line="18">abc<span class="token punctuation">.</span><span class="token method function property-access">split</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="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="warp row-span-2"><div class="warp-header h3warp"><h3>数字</h3><div class="warp-body"><!--rehype:warp-class=row-span-2--><!--rehype:-->
<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>
</span><span class="code-line line-number" line="4">pi<span class="token punctuation">.</span><span class="token method function property-access">toPrecision</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token comment">// 返回 3.1</span>
</span><span class="code-line line-number" line="5">pi<span class="token punctuation">.</span><span class="token method function property-access">valueOf</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 返回号码</span>
</span><span class="code-line line-number" line="6"><span class="token known-class-name class-name">Number</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 转换为数字</span>
</span><span class="code-line line-number" line="7"><span class="token comment">// 自 1970 年以来的毫秒数</span>
</span><span class="code-line line-number" line="8"><span class="token known-class-name class-name">Number</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><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">// 返回第一个数字：3</span>
</span><span class="code-line line-number" line="10"><span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token string">"3 months"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="11"><span class="token comment">// 返回 3.5</span>
</span><span class="code-line line-number" line="12"><span class="token function">parseFloat</span><span class="token punctuation">(</span><span class="token string">"3.5 days"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="13"><span class="token comment">// 最大可能的 JS 数</span>
</span><span class="code-line line-number" line="14"><span class="token known-class-name class-name">Number</span><span class="token punctuation">.</span><span class="token constant">MAX_VALUE</span>
</span><span class="code-line line-number" line="15"><span class="token comment">// 最小可能的 JS 编号</span>
</span><span class="code-line line-number" line="16"><span class="token known-class-name class-name">Number</span><span class="token punctuation">.</span><span class="token constant">MIN_VALUE</span>
</span><span class="code-line line-number" line="17"><span class="token comment">// -无穷</span>
</span><span class="code-line line-number" line="18"><span class="token known-class-name class-name">Number</span><span class="token punctuation">.</span><span class="token constant">NEGATIVE_INFINITY</span>
</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="h3warp-body"><div class="warp"><div class="warp-header h4warp"><h4>Math</h4><div class="warp-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>
</span><span class="code-line line-number" line="4">Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 256 - 2 的 8 次方 </span>
</span><span class="code-line line-number" line="5">Math<span class="token punctuation">.</span><span class="token function">sqrt</span><span class="token punctuation">(</span><span class="token number">49</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 7 - 平方根</span>
</span><span class="code-line line-number" line="6">Math<span class="token punctuation">.</span><span class="token function">abs</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">3.14</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 3.14 - 绝对，正值</span>
</span><span class="code-line line-number" line="7">Math<span class="token punctuation">.</span><span class="token function">ceil</span><span class="token punctuation">(</span><span class="token number">3.14</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="8"><span class="token comment">// = 3 - 返回 &#x3C;= 最大整数</span>
</span><span class="code-line line-number" line="9">Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token number">3.99</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="10"><span class="token comment">// = 0 - 正弦</span>
</span><span class="code-line line-number" line="11">Math<span class="token punctuation">.</span><span class="token function">sin</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="12"><span class="token comment">// OTHERS: tan,atan,asin,acos,余弦值</span>
</span><span class="code-line line-number" line="13">Math<span class="token punctuation">.</span><span class="token function">cos</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="14"><span class="token comment">// = -2 - 最低值</span>
</span><span class="code-line line-number" line="15">Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="16"><span class="token comment">// = 3 - 最高值</span>
</span><span class="code-line line-number" line="17">Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="18"><span class="token comment">// = 0 自然对数</span>
</span><span class="code-line line-number" line="19">Math<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</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="20"><span class="token comment">// = 2.7182pow(E,x) 自然对数的底数</span>
</span><span class="code-line line-number" line="21">Math<span class="token punctuation">.</span><span class="token function">exp</span><span class="token punctuation">(</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="22"><span class="token comment">// 0 到 1 之间的随机数</span>
</span><span class="code-line line-number" line="23">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 punctuation">;</span>
</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="warp col-span-2"><div class="warp-header h3warp"><h3>全局函数</h3><div class="warp-body"><!--rehype:warp-class=col-span-2--><!--rehype:-->
<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>
</span><span class="code-line line-number" line="4"><span class="token known-class-name class-name">String</span><span class="token punctuation">(</span><span class="token number">23</span><span class="token punctuation">)</span><span class="token punctuation">;</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 punctuation">(</span><span class="token number">23</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="7"><span class="token comment">// 从字符串返回数字</span>
</span><span class="code-line line-number" line="8"><span class="token known-class-name class-name">Number</span><span class="token punctuation">(</span><span class="token string">"23"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="9"><span class="token comment">// 解码 URI。 结果：“我的 page.asp”</span>
</span><span class="code-line line-number" line="10"><span class="token function">decodeURI</span><span class="token punctuation">(</span>enc<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="11"><span class="token comment">// 编码 URI。 结果：“my%page.asp”</span>
</span><span class="code-line line-number" line="12"><span class="token function">encodeURI</span><span class="token punctuation">(</span>uri<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="13"><span class="token comment">// 解码 URI 组件</span>
</span><span class="code-line line-number" line="14"><span class="token function">decodeURIComponent</span><span class="token punctuation">(</span>enc<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="15"><span class="token comment">// 对 URI 组件进行编码</span>
</span><span class="code-line line-number" line="16"><span class="token function">encodeURIComponent</span><span class="token punctuation">(</span>uri<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="17"><span class="token comment">// 是一个有限的合法数</span>
</span><span class="code-line line-number" line="18"><span class="token function">isFinite</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</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 function">isNaN</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="21"><span class="token comment">// 返回字符串的浮点数</span>
</span><span class="code-line line-number" line="22"><span class="token function">parseFloat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</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="warp"><div class="warp-header h2warp"><h2>JavaScript 条件</h2><div class="warp-body">
</div></div><div class="h2warp-body"><div class="warp row-span-3"><div class="warp-header h3warp"><h3>操作符</h3><div class="warp-body"><!--rehype:warp-class=row-span-3--><!--rehype:-->
<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="h3warp-body"><div class="warp"><div class="warp-header h4warp"><h4>逻辑运算符 &#x26;&#x26;</h4><div class="warp-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="warp"><div class="warp-header h4warp"><h4>比较运算符</h4><div class="warp-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>
</span><span class="code-line line-number" line="4"><span class="token number">1</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="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="warp"><div class="warp-header h4warp"><h4>逻辑运算符 !</h4><div class="warp-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="warp"><div class="warp-header h4warp"><h4>空值合并运算符 ??</h4><div class="warp-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="warp"><div class="warp-header h3warp"><h3>if Statement (if 语句)</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>Ternary Operator (三元运算符)</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>else if</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>size <span class="token operator">></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="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 string">'Small'</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 keyword control-flow">else</span> <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><span class="token string">'Tiny'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</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="warp"><div class="warp-header h3warp"><h3>== vs ===</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"><span class="token number">1</span> <span class="token operator">===</span> <span class="token string">"1"</span> <span class="token comment">// false, 不同类型</span>
</span><span class="code-line line-number" line="5"><span class="token keyword null nil">null</span> <span class="token operator">==</span> <span class="token keyword nil">undefined</span> <span class="token comment">// true</span>
</span><span class="code-line line-number" line="6"><span class="token keyword null nil">null</span> <span class="token operator">===</span> <span class="token keyword nil">undefined</span> <span class="token comment">// false</span>
</span><span class="code-line line-number" line="7"><span class="token string">'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="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="warp"><div class="warp-header h3warp"><h3>switch 语句</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"> <span class="token keyword">case</span> <span class="token string">'oyster'</span><span class="token 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><span class="token string">'海的味道'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="5"> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="6"> <span class="token keyword">case</span> <span class="token string">'pizza'</span><span class="token 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><span class="token string">'美味的馅饼'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="7"> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="8"> <span class="token keyword module">default</span><span class="token operator">:</span>
</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="warp"><div class="warp-header h3warp"><h3>switch 多 case - 单一操作</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"> <span class="token keyword">case</span> <span class="token string">'oyster'</span><span class="token operator">:</span>
</span><span class="code-line line-number" line="5"> <span class="token keyword">case</span> <span class="token string">'pizza'</span><span class="token operator">:</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><span class="token string">'美味的馅饼'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="7"> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="8"> <span class="token keyword module">default</span><span class="token operator">:</span>
</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="warp"><div class="warp-header h2warp"><h2>JavaScript Functions 函数</h2><div class="warp-body">
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>函数</h3><div class="warp-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>
</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">// 调用函数：</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="warp"><div class="warp-header h3warp"><h3>匿名函数</h3><div class="warp-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>
</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">// Anonymous function</span>
</span><span class="code-line line-number" line="6"><span class="token keyword">const</span> <span class="token function-variable function">rocketToMars</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="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="warp row-span-2"><div class="warp-header h3warp"><h3>箭头函数 (ES6)</h3><div class="warp-body"><!--rehype:warp-class=row-span-2--><!--rehype:-->
</div></div><div class="h3warp-body"><div class="warp"><div class="warp-header h4warp"><h4>有两个参数</h4><div class="warp-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="warp"><div class="warp-header h4warp"><h4>没有参数</h4><div class="warp-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="warp"><div class="warp-header h4warp"><h4>只有一个参数</h4><div class="warp-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="warp"><div class="warp-header h4warp"><h4>简洁箭头函数</h4><div class="warp-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="warp"><div class="warp-header h3warp"><h3>返回关键字</h3><div class="warp-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>
</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">// 该函数不输出总和</span>
</span><span class="code-line line-number" line="6"><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="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="warp"><div class="warp-header h3warp"><h3>调用函数</h3><div class="warp-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>
</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">// 调用函数</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="warp"><div class="warp-header h3warp"><h3>函数表达式</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>函数参数</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>函数声明</h3><div class="warp-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="warp"><div class="warp-header h2warp"><h2>JavaScript 范围</h2><div class="warp-body">
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>范围</h3><div class="warp-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">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><span class="code-line line-number" line="3"> <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="4"> <span class="token comment">// 这里的代码可以使用 PizzaName</span>
</span><span class="code-line line-number" line="5">
</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 comment">// 这里的代码不能使用 PizzaName</span>
</span></code></pre>
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Block Scoped Variables</h3><div class="warp-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>
</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">// Uncaught ReferenceError...</span>
</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="warp"><div class="warp-header h3warp"><h3>全局变量</h3><div class="warp-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>
</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>color<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><span class="code-line line-number" line="6"><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="warp"><div class="warp-header h3warp"><h3><code>let</code> vs <code>var</code></h3><div class="warp-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>
</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">// i 不能访问 ❌</span>
</span></code></pre>
<hr>
<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">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="2"> <span class="token comment">// i 可以访问 ✔️</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">// i 可以访问 ✔️</span>
</span></code></pre>
<p><code>var</code> 的范围是最近的函数块，而 <code>let</code> 的范围是最近的封闭块。</p>
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>带闭包的循环</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
</span></code></pre>
<hr>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 按预期打印 0、1 和 2。</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 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>j<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>
</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="warp"><div class="warp-header h2warp"><h2>JavaScript Arrays</h2><div class="warp-body">
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>数组</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>属性 .length</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>索引</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>可变图表</h3><div class="warp-body">
<table>
<thead>
<tr>
<th align="left"></th>
<th align="center">添加</th>
<th align="center">删除</th>
<th align="center">开始</th>
<th align="center">结束</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"><code>push</code></td>
<td align="center">✅</td>
<td align="center"></td>
<td align="center"></td>
<td align="center">✅</td>
</tr>
<tr>
<td align="left"><code>pop</code></td>
<td align="center"></td>
<td align="center">✅</td>
<td align="center"></td>
<td align="center">✅</td>
</tr>
<tr>
<td align="left"><code>unshift</code></td>
<td align="center">✅</td>
<td align="center"></td>
<td align="center">✅</td>
<td align="center"></td>
</tr>
<tr>
<td align="left"><code>shift</code></td>
<td align="center"></td>
<td align="center">✅</td>
<td align="center">✅</td>
<td align="center"></td>
</tr>
</tbody>
</table>
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>方法 .push()</h3><div class="warp-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>
</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 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 punctuation">;</span>
</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="warp"><div class="warp-header h3warp"><h3>方法 .pop()</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>方法 .shift()</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>方法 .unshift()</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"><span class="token comment">// => ['Puff', 'George', 'Willy', 'Bob']</span>
</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="warp"><div class="warp-header h3warp"><h3>方法 .concat()</h3><div class="warp-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">
</span><span class="code-line line-number" line="4"><span class="token comment">// => [ 4, 3, 2, 1 ]</span>
</span><span class="code-line line-number" line="5"><span class="token punctuation">[</span>newFirstNumber<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token method function property-access">concat</span><span class="token punctuation">(</span>numbers<span class="token punctuation">)</span>
</span><span class="code-line line-number" line="6">
</span><span class="code-line line-number" line="7"><span class="token comment">// => [ 3, 2, 1, 4 ]</span>
</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="warp"><div class="warp-header h2warp"><h2>JavaScript 循环</h2><div class="warp-body">
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>While 循环</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"><span class="token keyword">let</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="5"><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="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>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
</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="warp"><div class="warp-header h3warp"><h3>反向循环</h3><div class="warp-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>
</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">// => 2. berry</span>
</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="warp"><div class="warp-header h3warp"><h3>Do...While 语句</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"> x <span class="token operator">=</span> x <span class="token operator">+</span> i<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>x<span class="token punctuation">)</span>
</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 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="warp"><div class="warp-header h3warp"><h3>For 循环</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>遍历数组</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>Break</h3><div class="warp-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 punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">break</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 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="6"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="7"><span class="token comment">// => 0 1 2 3 4 5</span>
</span></code></pre>
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Continue</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"> <span class="token punctuation">}</span>
</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="warp"><div class="warp-header h3warp"><h3>嵌套循环</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>for...in 循环</h3><div class="warp-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>
</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</span>
</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="warp row-span-2"><div class="warp-header h3warp"><h3>label 语句</h3><div class="warp-body"><!--rehype:warp-class= row-span-2--><!--rehype:-->
<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>
</span><span class="code-line line-number" line="4"><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">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="5"> <span class="token keyword control-flow">for</span><span class="token punctuation">(</span><span class="token keyword">var</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">10</span><span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="6"> <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 operator">&#x26;&#x26;</span> j <span class="token operator">==</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="7"> <span class="token keyword control-flow">continue</span> outPoint<span class="token punctuation">;</span>
</span><span class="code-line line-number" line="8"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="9"> num<span class="token operator">++</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="10"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="11"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="12">
</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="warp"><div class="warp-header h3warp"><h3>for...of 循环</h3><div class="warp-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>
</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">// => apple</span>
</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="warp row-span-2"><div class="warp-header h3warp"><h3>for await...of</h3><div class="warp-body"><!--rehype:warp-class= row-span-2--><!--rehype:-->
<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>
</span><span class="code-line line-number" line="4"> <span class="token keyword control-flow">yield</span> i<span class="token operator">++</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="5"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="7">
</span><span class="code-line line-number" line="8"><span class="token punctuation">(</span><span class="token keyword">async</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="9"> <span class="token keyword control-flow">for</span> <span class="token keyword control-flow">await</span> <span class="token punctuation">(</span>num <span class="token keyword">of</span> <span class="token function">asyncGenerator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</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">log</span><span class="token punctuation">(</span>num<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><span class="code-line line-number" line="12"><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>
</span><span class="code-line line-number" line="13">
</span><span class="code-line line-number" line="14"><span class="token comment">// 0</span>
</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="warp"><div class="warp-header h3warp"><h3>可选的 for 表达式</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"> <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 keyword control-flow">break</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>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
</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="warp"><div class="warp-header h2warp"><h2>JavaScript 迭代器(Iterators)</h2><div class="warp-body"><!--rehype:body-class=cols-2--><!--rehype:-->
</div></div><div class="h2warp-body cols-2"><div class="warp"><div class="warp-header h3warp"><h3>分配给变量的函数</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"><span class="token comment">// f 被赋值为 plusFive</span>
</span><span class="code-line line-number" line="5"><span class="token keyword">let</span> f <span class="token operator">=</span> plusFive<span class="token punctuation">;</span>
</span><span class="code-line line-number" line="6"><span class="token function">plusFive</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 8</span>
</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="warp"><div class="warp-header h3warp"><h3>回调函数</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"><span class="token keyword">let</span> <span class="token function-variable function">printMsg</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">evenFunc<span class="token punctuation">,</span> num</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="5"> <span class="token keyword">const</span> isNumEven <span class="token operator">=</span> <span class="token function">evenFunc</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">;</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><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>num<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> is an even number: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>isNumEven<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="7"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="8"><span class="token comment">// Pass in isEven as the callback function</span>
</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="warp"><div class="warp-header h3warp"><h3>数组方法 .reduce()</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>数组方法 .map()</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>数组方法 .forEach()</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>数组方法 .filter()</h3><div class="warp-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="warp"><div class="warp-header h2warp"><h2>JavaScript 对象(Objects)</h2><div class="warp-body"><!--rehype:body-class=cols-2--><!--rehype:-->
</div></div><div class="h2warp-body cols-2"><div class="warp"><div class="warp-header h3warp"><h3>访问属性</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"><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>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="warp"><div class="warp-header h3warp"><h3>命名属性</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"> platform num<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</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 number">40</span> <span class="token operator">-</span> <span class="token number">10</span> <span class="token operator">+</span> <span class="token number">2</span><span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="7"> <span class="token comment">// 除非用引号括起来，否则 + 号无效。</span>
</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="warp"><div class="warp-header h3warp"><h3>不存在的属性</h3><div class="warp-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="warp row-span-2"><div class="warp-header h3warp"><h3>可变的</h3><div class="warp-body"><!--rehype:warp-class=row-span-2--><!--rehype:-->
<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>
</span><span class="code-line line-number" line="4"> <span class="token literal-property property">grade</span><span class="token operator">:</span> <span class="token string">'A'</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</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>student<span class="token punctuation">)</span>
</span><span class="code-line line-number" line="7"><span class="token comment">// { name: 'Sheldon', score: 100, grade: 'A' }</span>
</span><span class="code-line line-number" line="8"><span class="token keyword">delete</span> student<span class="token punctuation">.</span><span class="token property-access">score</span>
</span><span class="code-line line-number" line="9">student<span class="token punctuation">.</span><span class="token property-access">grade</span> <span class="token operator">=</span> <span class="token string">'F'</span>
</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">log</span><span class="token punctuation">(</span>student<span class="token punctuation">)</span>
</span><span class="code-line line-number" line="11"><span class="token comment">// { name: 'Sheldon', grade: 'F' }</span>
</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="warp"><div class="warp-header h3warp"><h3>赋值简写语法</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="5"><span class="token keyword">const</span> <span class="token punctuation">{</span>name<span class="token punctuation">,</span> age<span class="token punctuation">}</span> <span class="token operator">=</span> person<span class="token punctuation">;</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>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="warp"><div class="warp-header h3warp"><h3>删除运算符</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"> <span class="token literal-property property">hobby</span><span class="token operator">:</span> <span class="token string">"knitting"</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="5"> <span class="token literal-property property">goal</span><span class="token operator">:</span> <span class="token string">"learning JavaScript"</span>
</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"><span class="token keyword">delete</span> person<span class="token punctuation">.</span><span class="token property-access">hobby</span><span class="token punctuation">;</span> <span class="token comment">// or delete person[hobby];</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>person<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="9"><span class="token comment">/*
</span></span><span class="code-line line-number" line="10"><span class="token comment">{
</span></span><span class="code-line line-number" line="11"><span class="token comment"> firstName: "Matilda"
</span></span><span class="code-line line-number" line="12"><span class="token comment"> age: 27
</span></span><span class="code-line line-number" line="13"><span class="token comment"> goal: "learning JavaScript"
</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="warp"><div class="warp-header h3warp"><h3>对象作为参数</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"> num <span class="token operator">=</span> <span class="token number">7</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="5"> obj<span class="token punctuation">.</span><span class="token property-access">color</span> <span class="token operator">=</span> <span class="token string">'red'</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><span class="code-line line-number" line="7"><span class="token function">changeItUp</span><span class="token punctuation">(</span>origNum<span class="token punctuation">,</span> origObj<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="8"><span class="token comment">// 将输出 8，因为整数是按值传递的。</span>
</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>origNum<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="10"><span class="token comment">// 由于传递了对象，将输出“red”</span>
</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="warp row-span-2"><div class="warp-header h3warp"><h3>工厂函数</h3><div class="warp-body"><!--rehype:warp-class=row-span-2--><!--rehype:-->
<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>
</span><span class="code-line line-number" line="4"> <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="5"> <span class="token literal-property property">name</span><span class="token operator">:</span> name<span class="token punctuation">,</span>
</span><span class="code-line line-number" line="6"> <span class="token literal-property property">age</span><span class="token operator">:</span> age<span class="token punctuation">,</span>
</span><span class="code-line line-number" line="7"> <span class="token literal-property property">breed</span><span class="token operator">:</span> breed<span class="token punctuation">,</span>
</span><span class="code-line line-number" line="8"> <span class="token function">bark</span><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 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">'Woof!'</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><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="warp"><div class="warp-header h3warp"><h3>速记对象创建</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>this 关键字</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"> <span class="token function">whatName</span><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 keyword control-flow">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">name</span>
</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><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="warp"><div class="warp-header h3warp"><h3>方法</h3><div class="warp-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>
</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 template-string"><span class="token template-punctuation string">`</span><span class="token string">The engine starts up </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>adverb<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 class="token punctuation">;</span>
</span><span class="code-line line-number" line="5"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</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 function-variable function">sputter</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="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><span class="token string">'The engine sputters...'</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 class="token punctuation">,</span>
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</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="warp"><div class="warp-header h3warp"><h3>Getters 和 setters</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"> <span class="token keyword control-flow">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">_name</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><span class="code-line line-number" line="6"> <span class="token keyword">set</span> <span class="token function">name</span><span class="token punctuation">(</span><span class="token parameter">newName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="7"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">_name</span> <span class="token operator">=</span> newName<span class="token punctuation">;</span>
</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 class="token punctuation">;</span>
</span><span class="code-line line-number" line="10"><span class="token comment">// 引用调用 getter</span>
</span><span class="code-line line-number" line="11"><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>myCat<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</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="warp"><div class="warp-header h2warp"><h2>JavaScript Classes</h2><div class="warp-body">
</div></div><div class="h2warp-body"><div class="warp row-span-2"><div class="warp-header h3warp"><h3>静态方法/字段</h3><div class="warp-body"><!--rehype:warp-class=row-span-2--><!--rehype:-->
<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>
</span><span class="code-line line-number" line="4"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="5">
</span><span class="code-line line-number" line="6"> <span class="token function">introduce</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <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><span class="token string">'This is '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">_name</span> <span class="token operator">+</span> <span class="token string">' !'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="8"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="9">
</span><span class="code-line line-number" line="10"> <span class="token comment">// 静态方法</span>
</span><span class="code-line line-number" line="11"> <span class="token keyword">static</span> <span class="token function">bark</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</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><span class="token string">'Woof!'</span><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><span class="code-line line-number" line="14">
</span><span class="code-line line-number" line="15"> <span class="token keyword">static</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="16"> <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="17"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="18"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="19">
</span><span class="code-line line-number" line="20"><span class="token keyword">const</span> myDog <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Dog</span><span class="token punctuation">(</span><span class="token string">'Buster'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="21">myDog<span class="token punctuation">.</span><span class="token method function property-access">introduce</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="22">
</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="h3warp-body"><div class="warp"><div class="warp-header h4warp"><h4>公有静态字段</h4><div class="warp-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>
</span><span class="code-line line-number" line="4">
</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="warp"><div class="warp-header h3warp"><h3>Class</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">author</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="5"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="6">
</span><span class="code-line line-number" line="7"> <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="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><span class="token string">'Song playing!'</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><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="11">
</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="warp"><div class="warp-header h3warp"><h3>extends</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">publishDate</span> <span class="token operator">=</span> info<span class="token punctuation">.</span><span class="token property-access">publishDate</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="5"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">name</span> <span class="token operator">=</span> info<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">;</span>
</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><span class="code-line line-number" line="8"><span class="token comment">// Child class</span>
</span><span class="code-line line-number" line="9"><span class="token keyword">class</span> <span class="token class-name">Song</span> <span class="token keyword">extends</span> <span class="token class-name">Media</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="10"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">songData</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="11"> <span class="token keyword">super</span><span class="token punctuation">(</span>songData<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="12"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">artist</span> <span class="token operator">=</span> songData<span class="token punctuation">.</span><span class="token property-access">artist</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="13"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="14"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="15"><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><span class="code-line line-number" line="16"> <span class="token literal-property property">artist</span><span class="token operator">:</span> <span class="token string">'Queen'</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="17"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Bohemian Rhapsody'</span><span class="token punctuation">,</span>
</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="warp"><div class="warp-header h3warp"><h3>Class Constructor</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">artist</span> <span class="token operator">=</span> artist<span class="token punctuation">;</span>
</span><span class="code-line line-number" line="5"> <span class="token punctuation">}</span>
</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 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="warp"><div class="warp-header h3warp"><h3>Class Methods</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="5">
</span><span class="code-line line-number" line="6"> <span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <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><span class="token string">'Stopping!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</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="warp"><div class="warp-header h2warp"><h2>JavaScript Modules</h2><div class="warp-body"><!--rehype:body-class=cols-2-->
</div></div><div class="h2warp-body cols-2"><div class="warp"><div class="warp-header h3warp"><h3>Export / Import</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"> <span class="token keyword control-flow">return</span> x <span class="token operator">+</span> y
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="6"><span class="token comment">// 正常导出 Normal export</span>
</span><span class="code-line line-number" line="7"><span class="token keyword module">export</span> <span class="token keyword">function</span> <span class="token function">subtract</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="8"> <span class="token keyword control-flow">return</span> x <span class="token operator">-</span> y
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="10"><span class="token comment">// 多重导出 Multiple exports</span>
</span><span class="code-line line-number" line="11"><span class="token keyword">function</span> <span class="token function">multiply</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="12"> <span class="token keyword control-flow">return</span> x <span class="token operator">*</span> y
</span><span class="code-line line-number" line="13"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="14"><span class="token keyword">function</span> <span class="token function">duplicate</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
</span><span class="code-line line-number" line="15"> <span class="token keyword control-flow">return</span> x <span class="token operator">*</span> <span class="token number">2</span>
</span><span class="code-line line-number" line="16"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="17"><span class="token keyword module">export</span> <span class="token exports"><span class="token punctuation">{</span>
</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="h3warp-body"><div class="warp"><div class="warp-header h4warp"><h4>import 加载模块</h4><div class="warp-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>
</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">subtract</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 comment">// 4</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><span class="token function">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><span class="token function">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><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="warp"><div class="warp-header h3warp"><h3>Export Module</h3><div class="warp-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
</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 keyword">function</span> <span class="token function">subtract</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="6"> <span class="token keyword control-flow">return</span> x <span class="token operator">-</span> y
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="8"><span class="token keyword">function</span> <span class="token function">multiply</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="9"> <span class="token keyword control-flow">return</span> x <span class="token operator">*</span> y
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="11"><span class="token keyword">function</span> <span class="token function">duplicate</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
</span><span class="code-line line-number" line="12"> <span class="token keyword control-flow">return</span> x <span class="token operator">*</span> <span class="token number">2</span>
</span><span class="code-line line-number" line="13"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="14"><span class="token comment">// node.js 中的多个导出</span>
</span><span class="code-line line-number" line="15">module<span class="token punctuation">.</span><span class="token property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="16"> add<span class="token punctuation">,</span>
</span><span class="code-line line-number" line="17"> subtract<span class="token punctuation">,</span>
</span><span class="code-line line-number" line="18"> multiply<span class="token punctuation">,</span>
</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="h3warp-body"><div class="warp"><div class="warp-header h4warp"><h4>require 加载模块</h4><div class="warp-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>
</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>myMath<span class="token punctuation">.</span><span class="token method function property-access">subtract</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 comment">// 4</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>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="warp"><div class="warp-header h2warp"><h2>JavaScript Promises</h2><div class="warp-body"><!--rehype:body-class=cols-2-->
</div></div><div class="h2warp-body cols-2"><div class="warp row-span-2"><div class="warp-header h3warp"><h3>Promise 状态</h3><div class="warp-body"><!--rehype:warp-class=row-span-2--><!--rehype:-->
<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">// An asynchronous operation.</span>
</span><span class="code-line line-number" line="4"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="5"> <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="6"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="7"> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="8"> <span class="token function">reject</span><span class="token punctuation">(</span><span class="token known-class-name class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Error'</span><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 punctuation">}</span>
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="11">promise<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">res</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">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">,</span> <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 class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>执行器函数</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>setTimeout()</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>.then() 方法</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">200</span><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><span class="code-line line-number" line="6">promise<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">res</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="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>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
</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 class="token parameter">err</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="9"> <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="10"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>.catch() 方法</h3><div class="warp-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">reject</span><span class="token punctuation">(</span><span class="token known-class-name class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Promise Rejected Unconditionally.'</span><span class="token punctuation">)</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 class="token punctuation">,</span> <span class="token number">1000</span><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><span class="code-line line-number" line="6">promise<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">res</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="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>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
</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">promise<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">err</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="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="warp"><div class="warp-header h3warp"><h3>Promise.all()</h3><div class="warp-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> 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>
</span><span class="code-line line-number" line="4"> <span class="token punctuation">}</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="5"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="6"><span class="token keyword">const</span> promise2 <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="7"> <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="8"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token number">2</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 class="token punctuation">,</span> <span class="token number">200</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 class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="11"><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>promise1<span class="token punctuation">,</span> promise2<span class="token punctuation">]</span><span class="token punctuation">)</span><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">res</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="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>res<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><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="warp"><div class="warp-header h3warp"><h3>避免嵌套的 Promise 和 .then()</h3><div class="warp-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">'*'</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 class="token punctuation">,</span> <span class="token number">1000</span><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><span class="code-line line-number" line="6"><span class="token keyword">const</span> <span class="token function-variable function">twoStars</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">star</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="7"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>star <span class="token operator">+</span> star<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="9"><span class="token keyword">const</span> <span class="token function-variable function">oneDot</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">star</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="10"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>star <span class="token operator">+</span> <span class="token string">'.'</span><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><span class="code-line line-number" line="12"><span class="token keyword">const</span> <span class="token function-variable function">print</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">val</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="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>val<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><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 class="warp"><div class="warp-header h3warp"><h3>创建</h3><div class="warp-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 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">'The executor function of the promise!'</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="warp"><div class="warp-header h3warp"><h3>链接多个 .then()</h3><div class="warp-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 parameter">resolve</span> <span class="token arrow operator">=></span> <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><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2">promise<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">res</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> res <span class="token operator">===</span> <span class="token string">'Alan'</span> <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 string">'Hey Alan!'</span><span class="token punctuation">)</span> <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">reject</span><span class="token punctuation">(</span><span class="token string">'Who are you?'</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 class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</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="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>res<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 class="token parameter">err</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="7"> <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="8"><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="warp"><div class="warp-header h2warp"><h2>JavaScript Async-Await</h2><div class="warp-body"><!--rehype:body-class=cols-2-->
</div></div><div class="h2warp-body cols-2"><div class="warp"><div class="warp-header h3warp"><h3>异步</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"> <span class="token function">resolve</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="5"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</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><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="8"><span class="token keyword">const</span> <span class="token function-variable function">msg</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 异步函数表达式</span>
</span><span class="code-line line-number" line="9"> <span class="token keyword">const</span> msg <span class="token operator">=</span> <span class="token keyword control-flow">await</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="10"> <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">'Message:'</span><span class="token punctuation">,</span> msg<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><span class="code-line line-number" line="12"><span class="token keyword">const</span> <span class="token function-variable function">msg1</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 class="token comment">// 异步箭头函数</span>
</span><span class="code-line line-number" line="13"> <span class="token keyword">const</span> msg <span class="token operator">=</span> <span class="token keyword control-flow">await</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="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><span class="token string">'Message:'</span><span class="token punctuation">,</span> msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="15"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="16"><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="17"><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="warp"><div class="warp-header h3warp"><h3>解决 Promises</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"> <span class="token function">setTimeout</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token string">'foo'</span><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><span class="code-line line-number" line="6"><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>pro1<span class="token punctuation">,</span> pro2<span class="token punctuation">,</span> pro3<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">values</span><span class="token punctuation">)</span> <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>values<span class="token punctuation">)</span><span class="token punctuation">;</span>
</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="warp"><div class="warp-header h3warp"><h3>异步等待 Promises</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"> <span class="token function">resolve</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="5"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</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><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="8"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">msg</span><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 keyword">const</span> msg <span class="token operator">=</span> <span class="token keyword control-flow">await</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="10"> <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">'Message:'</span><span class="token punctuation">,</span> msg<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><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="warp"><div class="warp-header h3warp"><h3>错误处理</h3><div class="warp-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> json <span class="token operator">=</span> <span class="token string">'{ "age": 30 }'</span><span class="token punctuation">;</span> <span class="token comment">// 数据不完整</span>
</span><span class="code-line line-number" line="2"><span class="token keyword control-flow">try</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="3"> <span class="token keyword">let</span> user <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">parse</span><span class="token punctuation">(</span>json<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &#x3C;-- 没有错误</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> user<span class="token punctuation">.</span><span class="token property-access">name</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// no name!</span>
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span> <span class="token keyword control-flow">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</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 string">"Invalid JSON data!"</span> <span class="token punctuation">)</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 class="warp"><div class="warp-header h3warp"><h3>异步等待运算符</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"> <span class="token function">resolve</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="5"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</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><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
</span><span class="code-line line-number" line="8"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">msg</span><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 keyword">const</span> msg <span class="token operator">=</span> <span class="token keyword control-flow">await</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="10"> <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">'Message:'</span><span class="token punctuation">,</span> msg<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><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="warp"><div class="warp-header h2warp"><h2>JavaScript 请求</h2><div class="warp-body">
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>JSON</h3><div class="warp-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>
</span><span class="code-line line-number" line="4"> <span class="token string-property property">"level"</span><span class="token operator">:</span> <span class="token number">4</span>
</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="warp"><div class="warp-header h3warp"><h3>XMLHttpRequest</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>GET</h3><div class="warp-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>
</span><span class="code-line line-number" line="4">req<span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onload</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="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>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="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="warp" style="grid-row: span 2/span 2;"><div class="warp-header h3warp"><h3>POST</h3><div class="warp-body"><!--rehype:data-warp-style=grid-row: span 2/span 2;--><!--rehype:-->
<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><span class="code-line line-number" line="2"> <span class="token literal-property property">fish</span><span class="token operator">:</span> <span class="token string">'Salmon'</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="3"> <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><span class="code-line line-number" line="4"> <span class="token literal-property property">units</span><span class="token operator">:</span> <span class="token number">5</span>
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="6"><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="7">xhr<span class="token punctuation">.</span><span class="token method function property-access">open</span><span class="token punctuation">(</span><span class="token string">'POST'</span><span class="token punctuation">,</span> <span class="token string">'/inventory/add'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="8">xhr<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="9">xhr<span class="token punctuation">.</span><span class="token method function property-access">send</span><span class="token punctuation">(</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>data<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="10">xhr<span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onload</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="11"> <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="12"><span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="warp" style="grid-row: span 2/span 2;"><div class="warp-header h3warp"><h3>fetch api</h3><div class="warp-body"><!--rehype:data-warp-style=grid-row: span 2/span 2;--><!--rehype:-->
<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>
</span><span class="code-line line-number" line="4"> <span class="token string-property property">'Content-type'</span><span class="token operator">:</span> <span class="token string">'application/json'</span><span class="token punctuation">,</span>
</span><span class="code-line line-number" line="5"> <span class="token string-property property">'apikey'</span><span class="token operator">:</span> apiKey
</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"> <span class="token literal-property property">body</span><span class="token operator">:</span> data
</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 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="9"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>response<span class="token punctuation">.</span><span class="token property-access">ok</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line line-number" line="10"> <span class="token keyword control-flow">return</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="11"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="12"> <span class="token keyword control-flow">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Request failed!'</span><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 class="token parameter">networkError</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</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><span class="code-line line-number" line="16"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>JSON 格式</h3><div class="warp-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="warp"><div class="warp-header h3warp"><h3>promise url 参数获取 API</h3><div class="warp-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><span class="code-line line-number" line="3"> <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="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>response<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><span class="code-line line-number" line="6"> <span class="token parameter">rejection</span> <span class="token arrow operator">=></span> <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">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="8"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Fetch API 函数</h3><div class="warp-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>
</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 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="5"> <span class="token keyword control-flow">if</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span><span class="token property-access">ok</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
</span><span class="code-line line-number" line="6"> <span class="token keyword control-flow">return</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="7"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="8"> <span class="token keyword control-flow">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Request failed!'</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 class="token punctuation">,</span> <span class="token parameter">networkError</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</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">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 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 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="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="warp" style="grid-column: span 2/span 2;"><div class="warp-header h3warp"><h3>async await 语法</h3><div class="warp-body"><!--rehype:data-warp-style=grid-column: span 2/span 2;--><!--rehype:-->
<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>
</span><span class="code-line line-number" line="4"> <span class="token keyword control-flow">try</span><span class="token punctuation">{</span>
</span><span class="code-line line-number" line="5"> <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span>endpoint<span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">cache</span><span class="token operator">:</span> <span class="token string">'no-cache'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="6"> <span class="token keyword control-flow">if</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span><span class="token property-access">ok</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
</span><span class="code-line line-number" line="7"> <span class="token keyword">const</span> jsonResponse <span class="token operator">=</span> <span class="token keyword control-flow">await</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><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><span class="code-line line-number" line="10"> <span class="token keyword control-flow">catch</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">{</span>
</span><span class="code-line line-number" line="11"> <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>error<span class="token punctuation">)</span>
</span><span class="code-line line-number" line="12"> <span class="token punctuation">}</span>
</span><span class="code-line line-number" line="13"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div></div></div></div></div><footer class="footer-warp"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer></body>
</html>
Reference in New Issue View Git Blame Copy Permalink