mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-18 13:11:20 +08:00
feat: add package.json cheatsheet. 7ab9ddf766
This commit is contained in:
jaywcjlove
@ -9,17 +9,17 @@
|
||||
<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">
|
||||
<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="wrap max-container"><header class="wrap-header h1wrap"><h1>JavaScript 备忘清单</h1><div class="wrap-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">
|
||||
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2>入门</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>介绍</h3><div class="wrap-body">
|
||||
<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">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>打印调试</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// => Hello world!</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Hello world!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token comment">// => Hello QuickReference</span>
|
||||
@ -27,31 +27,31 @@
|
||||
</span><span class="code-line line-number" line="5"><span class="token comment">// 将错误消息打印到 stderr</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Oops!'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>断点调试</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>断点调试</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">potentiallyBuggyCode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword">debugger</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token comment">// 做可能有问题的东西来检查，逐步通过等。</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
<p><strong>debugger</strong> 语句调用任何可用的调试功能。</p>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>数字</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>数字</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> amount <span class="token operator">=</span> <span class="token number">6</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">let</span> price <span class="token operator">=</span> <span class="token number">4.99</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token keyword">let</span> home <span class="token operator">=</span> <span class="token number">1e2</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token keyword">let</span> m <span class="token operator">=</span> <span class="token number">0644</span><span class="token punctuation">;</span> <span class="token comment">// 八进制数字 420</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>let 关键字</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>let 关键字</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> count<span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => undefined</span>
|
||||
</span><span class="code-line line-number" line="3">count <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>count<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => 10</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>const 关键字</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>const 关键字</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> numberOfColumns <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token comment">// TypeError: Assignment to constant...</span>
|
||||
</span><span class="code-line line-number" line="3">numberOfColumns <span class="token operator">=</span> <span class="token number">8</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>变量</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>变量</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token keyword null nil">null</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">"Tammy"</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> found <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
|
||||
@ -60,20 +60,20 @@
|
||||
</span><span class="code-line line-number" line="6"><span class="token keyword">var</span> a<span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="7"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => undefined</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>字符串</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>字符串</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> single <span class="token operator">=</span> <span class="token string">'Wheres my bandit hat?'</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">let</span> double <span class="token operator">=</span> <span class="token string">"Wheres my bandit hat?"</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token comment">// => 21</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>single<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>算术运算符</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>算术运算符</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token number">5</span> <span class="token operator">+</span> <span class="token number">5</span> <span class="token operator">=</span> <span class="token number">10</span> <span class="token comment">// 加法 Addition</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token number">10</span> <span class="token operator">-</span> <span class="token number">5</span> <span class="token operator">=</span> <span class="token number">5</span> <span class="token comment">// 加法 Subtraction</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token number">5</span> <span class="token operator">*</span> <span class="token number">10</span> <span class="token operator">=</span> <span class="token number">50</span> <span class="token comment">// 乘法 Multiplication</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token number">10</span> <span class="token operator">/</span> <span class="token number">5</span> <span class="token operator">=</span> <span class="token number">2</span> <span class="token comment">// 除法 Division</span>
|
||||
</span><span class="code-line line-number" line="5"><span class="token number">10</span> <span class="token operator">%</span> <span class="token number">5</span> <span class="token operator">=</span> <span class="token number">0</span> <span class="token comment">// 取模 Modulo</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>注释</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>注释</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 此行将表示注释</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token comment">/*
|
||||
</span></span><span class="code-line line-number" line="3"><span class="token comment">多行配置
|
||||
@ -81,7 +81,7 @@
|
||||
</span></span><span class="code-line line-number" line="5"><span class="token comment">以下配置。
|
||||
</span></span><span class="code-line line-number" line="6"><span class="token comment">*/</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>赋值运算符</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>赋值运算符</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> number <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token comment">// 两个语句都会加 10</span>
|
||||
</span><span class="code-line line-number" line="3">number <span class="token operator">=</span> number <span class="token operator">+</span> <span class="token number">10</span><span class="token punctuation">;</span>
|
||||
@ -89,14 +89,14 @@
|
||||
</span><span class="code-line line-number" line="5"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token comment">// => 120</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>字符串插值</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>字符串插值</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> age <span class="token operator">=</span> <span class="token number">7</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token comment">// 字符串拼接</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token string">'Tommy is '</span> <span class="token operator">+</span> age <span class="token operator">+</span> <span class="token string">' years old.'</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token comment">// 字符串插值</span>
|
||||
</span><span class="code-line line-number" line="5"><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Tommy is </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>age<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> years old.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp col-span-2"><div class="warp-header h3warp"><h3>字符串</h3><div class="warp-body"><!--rehype:warp-class=col-span-2--><!--rehype:-->
|
||||
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>字符串</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--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>
|
||||
@ -118,7 +118,7 @@
|
||||
</span><span class="code-line line-number" line="19"><span class="token comment">// 数字转为十六进制 (16)、八进制 (8) 或二进制 (2)</span>
|
||||
</span><span class="code-line line-number" line="20"><span class="token number">128.</span><span class="token method function property-access">toString</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp row-span-2"><div class="warp-header h3warp"><h3>数字</h3><div class="warp-body"><!--rehype:warp-class=row-span-2--><!--rehype:-->
|
||||
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>数字</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--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>
|
||||
@ -140,7 +140,7 @@
|
||||
</span><span class="code-line line-number" line="19"><span class="token comment">// 无穷</span>
|
||||
</span><span class="code-line line-number" line="20"><span class="token known-class-name class-name">Number</span><span class="token punctuation">.</span><span class="token constant">POSITIVE_INFINITY</span>
|
||||
</span></code></pre>
|
||||
</div></div><div class="h3warp-body"><div class="warp"><div class="warp-header h4warp"><h4>Math</h4><div class="warp-body">
|
||||
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>Math</h4><div class="wrap-body">
|
||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> pi <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">;</span> <span class="token comment">// 3.141592653589793</span>
|
||||
</span><span class="code-line line-number" line="2">Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span><span class="token number">4.4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 4 - 数字四舍五入</span>
|
||||
</span><span class="code-line line-number" line="3">Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span><span class="token number">4.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 5</span>
|
||||
@ -167,7 +167,7 @@
|
||||
</span><span class="code-line line-number" line="24"><span class="token comment">// 随机整数，从 1</span>
|
||||
</span><span class="code-line line-number" line="25">Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="warp col-span-2"><div class="warp-header h3warp"><h3>全局函数</h3><div class="warp-body"><!--rehype:warp-class=col-span-2--><!--rehype:-->
|
||||
</div></div></div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>全局函数</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--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>
|
||||
@ -193,20 +193,20 @@
|
||||
</span><span class="code-line line-number" line="23"><span class="token comment">// 解析一个字符串并返回一个整数</span>
|
||||
</span><span class="code-line line-number" line="24"><span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="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:-->
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 条件</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3>操作符</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3--><!--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>逻辑运算符 &&</h4><div class="warp-body">
|
||||
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>逻辑运算符 &&</h4><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token boolean">true</span> <span class="token operator">&&</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">&&</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">&&</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">&&</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">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>比较运算符</h4><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token number">1</span> <span class="token operator">></span> <span class="token number">3</span> <span class="token comment">// false</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token number">3</span> <span class="token operator">></span> <span class="token number">1</span> <span class="token comment">// true</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token number">250</span> <span class="token operator">>=</span> <span class="token number">250</span> <span class="token comment">// true</span>
|
||||
@ -214,32 +214,32 @@
|
||||
</span><span class="code-line line-number" line="5"><span class="token number">1</span> <span class="token operator">===</span> <span class="token number">2</span> <span class="token comment">// false</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token number">1</span> <span class="token operator">===</span> <span class="token string">'1'</span> <span class="token comment">// false</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h4warp"><h4>逻辑运算符 !</h4><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>逻辑运算符 !</h4><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> lateToWork <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">let</span> oppositeValue <span class="token operator">=</span> <span class="token operator">!</span>lateToWork<span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token comment">// => false</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>oppositeValue<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h4warp"><h4>空值合并运算符 ??</h4><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>空值合并运算符 ??</h4><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword null nil">null</span> <span class="token operator">??</span> <span class="token string">'I win'</span><span class="token punctuation">;</span> <span class="token comment">// 'I win'</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword nil">undefined</span> <span class="token operator">??</span> <span class="token string">'Me too'</span><span class="token punctuation">;</span> <span class="token comment">// 'Me too'</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token boolean">false</span> <span class="token operator">??</span> <span class="token string">'I lose'</span> <span class="token comment">// false</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token number">0</span> <span class="token operator">??</span> <span class="token string">'I lose again'</span> <span class="token comment">// 0</span>
|
||||
</span><span class="code-line line-number" line="5"><span class="token string">''</span> <span class="token operator">??</span> <span class="token string">'Damn it'</span> <span class="token comment">// ''</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="warp"><div class="warp-header h3warp"><h3>if Statement (if 语句)</h3><div class="warp-body">
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>if Statement (if 语句)</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> isMailSent <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>isMailSent<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Mail sent to recipient'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Ternary Operator (三元运算符)</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Ternary Operator (三元运算符)</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">var</span> age <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2">
|
||||
</span><span class="code-line line-number" line="3"><span class="token comment">// => true</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token keyword">var</span> status <span class="token operator">=</span> <span class="token punctuation">(</span>age <span class="token operator">>=</span> <span class="token number">18</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token boolean">true</span> <span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>else if</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>else if</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> size <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>size <span class="token operator">></span> <span class="token number">20</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Medium'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@ -250,7 +250,7 @@
|
||||
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="9"><span class="token comment">// Print: Small</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>== vs ===</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>== vs ===</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token number">0</span> <span class="token operator">==</span> <span class="token boolean">false</span> <span class="token comment">// true</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token number">0</span> <span class="token operator">===</span> <span class="token boolean">false</span> <span class="token comment">// false, 不同类型</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token number">1</span> <span class="token operator">==</span> <span class="token string">"1"</span> <span class="token comment">// true, 自动类型转换</span>
|
||||
@ -261,7 +261,7 @@
|
||||
</span><span class="code-line line-number" line="8"><span class="token string">'0'</span> <span class="token operator">===</span> <span class="token boolean">false</span> <span class="token comment">// false</span>
|
||||
</span></code></pre>
|
||||
<p><code>==</code> 只检查值，<code>===</code> 检查值和类型。</p>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>switch 语句</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>switch 语句</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> food <span class="token operator">=</span> <span class="token string">'salad'</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2">
|
||||
</span><span class="code-line line-number" line="3"><span class="token keyword control-flow">switch</span> <span class="token punctuation">(</span>food<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@ -273,7 +273,7 @@
|
||||
</span><span class="code-line line-number" line="9"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'请您用餐'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>switch 多 case - 单一操作</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>switch 多 case - 单一操作</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> food <span class="token operator">=</span> <span class="token string">'salad'</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2">
|
||||
</span><span class="code-line line-number" line="3"><span class="token keyword control-flow">switch</span> <span class="token punctuation">(</span>food<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@ -285,8 +285,8 @@
|
||||
</span><span class="code-line line-number" line="9"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'请您用餐'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="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">
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript Functions 函数</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>函数</h3><div class="wrap-body">
|
||||
<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>
|
||||
@ -294,7 +294,7 @@
|
||||
</span><span class="code-line line-number" line="5"><span class="token comment">// 调用函数：</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 9</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>匿名函数</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>匿名函数</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// Named function</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">function</span> <span class="token function">rocketToMars</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> <span class="token string">'BOOM!'</span><span class="token punctuation">;</span>
|
||||
@ -304,32 +304,32 @@
|
||||
</span><span class="code-line line-number" line="7"> <span class="token keyword control-flow">return</span> <span class="token string">'BOOM!'</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="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">
|
||||
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>箭头函数 (ES6)</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
|
||||
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>有两个参数</h4><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">sum</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">param1<span class="token punctuation">,</span> param2</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> param1 <span class="token operator">+</span> param2<span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => 7 </span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h4warp"><h4>没有参数</h4><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>没有参数</h4><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">printHello</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token function">printHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => hello</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h4warp"><h4>只有一个参数</h4><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>只有一个参数</h4><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">checkWeight</span> <span class="token operator">=</span> <span class="token parameter">weight</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Weight : </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>weight<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token function">checkWeight</span><span class="token punctuation">(</span><span class="token number">25</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => Weight : 25 </span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h4warp"><h4>简洁箭头函数</h4><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>简洁箭头函数</h4><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">multiply</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> a <span class="token operator">*</span> b<span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token comment">// => 60 </span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token function">multiply</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
<p>从 ES2015 开始提供<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">箭头函数</a></p>
|
||||
</div></div></div></div></div><div class="warp"><div class="warp-header h3warp"><h3>返回关键字</h3><div class="warp-body">
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>返回关键字</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 有 return</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> num1 <span class="token operator">+</span> num2<span class="token punctuation">;</span>
|
||||
@ -339,7 +339,7 @@
|
||||
</span><span class="code-line line-number" line="7"> num1 <span class="token operator">+</span> num2<span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>调用函数</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>调用函数</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 定义函数</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> num1 <span class="token operator">+</span> num2<span class="token punctuation">;</span>
|
||||
@ -347,24 +347,24 @@
|
||||
</span><span class="code-line line-number" line="5"><span class="token comment">// 调用函数</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 6</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>函数表达式</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>函数表达式</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">dog</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> <span class="token string">'Woof!'</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>函数参数</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>函数参数</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 参数是 name</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">function</span> <span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hello, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">!</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>函数声明</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>函数声明</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> num1 <span class="token operator">+</span> num2<span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>JavaScript 范围</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:-->
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 范围</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>范围</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword">var</span> pizzaName <span class="token operator">=</span> <span class="token string">"Margarita"</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token comment">// 这里的代码可以使用 PizzaName</span>
|
||||
@ -388,7 +388,7 @@
|
||||
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> x <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token comment">// Global scope</span>
|
||||
</span></code></pre>
|
||||
<p>ES6 引入了两个重要的新 JavaScript 关键字：let 和 const。这两个关键字在 JavaScript 中提供了块作用域。</p>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>块作用域变量</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>块作用域变量</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> isLoggedIn <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>isLoggedIn <span class="token operator">==</span> <span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token keyword">const</span> statusMessage <span class="token operator">=</span> <span class="token string">'Logged in.'</span><span class="token punctuation">;</span>
|
||||
@ -397,7 +397,7 @@
|
||||
</span><span class="code-line line-number" line="6"><span class="token comment">// 未捕获的引用错误...</span>
|
||||
</span><span class="code-line line-number" line="7"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>statusMessage<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>全局变量</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>全局变量</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 全局声明的变量</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> color <span class="token operator">=</span> <span class="token string">'blue'</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token keyword">function</span> <span class="token function">printColor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@ -406,7 +406,7 @@
|
||||
</span><span class="code-line line-number" line="6">
|
||||
</span><span class="code-line line-number" line="7"><span class="token function">printColor</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => blue</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3><code>let</code> vs <code>var</code></h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3><code>let</code> vs <code>var</code></h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</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>
|
||||
@ -420,7 +420,7 @@
|
||||
</span><span class="code-line line-number" line="4"><span class="token comment">// i 可以访问 ✔️</span>
|
||||
</span></code></pre>
|
||||
<p><code>var</code> 的范围是最近的函数块，而 <code>let</code> 的范围是最近的封闭块。</p>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>带闭包的循环</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>带闭包的循环</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 打印三次，不是我们的意思。</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</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>
|
||||
@ -433,23 +433,23 @@
|
||||
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
<p>变量使用 <code>let</code> 有自己的副本，变量有使用 <code>var</code> 的共享副本。</p>
|
||||
</div></div></div></div></div><div class="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">
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript Arrays</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>数组</h3><div class="wrap-body">
|
||||
<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">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>属性 .length</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2">numbers<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token comment">// 4</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>索引</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>索引</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 访问数组元素</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> myArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>myArray<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 100</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>myArray<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 200</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>可变图表</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>可变图表</h3><div class="wrap-body">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@ -491,7 +491,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>方法 .push()</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>方法 .push()</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 添加单个元素：</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> cart <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'apple'</span><span class="token punctuation">,</span> <span class="token string">'orange'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3">cart<span class="token punctuation">.</span><span class="token method function property-access">push</span><span class="token punctuation">(</span><span class="token string">'pear'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@ -500,19 +500,19 @@
|
||||
</span><span class="code-line line-number" line="6">numbers<span class="token punctuation">.</span><span class="token method function property-access">push</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
<p>将项目<strong>添加到末尾</strong>并返回新的数组长度。</p>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>方法 .pop()</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>方法 .pop()</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> fruits <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"apple"</span><span class="token punctuation">,</span> <span class="token string">"dew"</span><span class="token punctuation">,</span> <span class="token string">"banana"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> fruit <span class="token operator">=</span> fruits<span class="token punctuation">.</span><span class="token method function property-access">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'banana'</span>
|
||||
</span><span class="code-line line-number" line="3">
|
||||
</span><span class="code-line line-number" line="4"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>fruits<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ["apple", "dew"]</span>
|
||||
</span></code></pre>
|
||||
<p>从<strong>末尾删除</strong>一个项目并返回已删除的项目。</p>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>方法 .shift()</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>方法 .shift()</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> cats <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'Bob'</span><span class="token punctuation">,</span> <span class="token string">'Willy'</span><span class="token punctuation">,</span> <span class="token string">'Mini'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2">cats<span class="token punctuation">.</span><span class="token method function property-access">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['Willy', 'Mini']</span>
|
||||
</span></code></pre>
|
||||
<p><strong>从头删除</strong>一个项目并返回已删除的项目。</p>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>方法 .unshift()</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>方法 .unshift()</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> cats <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'Bob'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token comment">// => ['Willy', 'Bob']</span>
|
||||
</span><span class="code-line line-number" line="3">cats<span class="token punctuation">.</span><span class="token method function property-access">unshift</span><span class="token punctuation">(</span><span class="token string">'Willy'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@ -520,7 +520,7 @@
|
||||
</span><span class="code-line line-number" line="5">cats<span class="token punctuation">.</span><span class="token method function property-access">unshift</span><span class="token punctuation">(</span><span class="token string">'Puff'</span><span class="token punctuation">,</span> <span class="token string">'George'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
<p>将项目<strong>添加到开头</strong>并返回新的数组长度。</p>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>方法 .concat()</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>方法 .concat()</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> newFirstNumber <span class="token operator">=</span> <span class="token number">4</span>
|
||||
</span><span class="code-line line-number" line="3">
|
||||
@ -531,8 +531,8 @@
|
||||
</span><span class="code-line line-number" line="8">numbers<span class="token punctuation">.</span><span class="token method function property-access">concat</span><span class="token punctuation">(</span>newFirstNumber<span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
<p>如果你想避免改变你的原始数组，你可以使用 concat。</p>
|
||||
</div></div></div></div></div><div class="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">
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 循环</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>While 循环</h3><div class="wrap-body">
|
||||
<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>
|
||||
@ -542,7 +542,7 @@
|
||||
</span><span class="code-line line-number" line="7"> i<span class="token operator">++</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>反向循环</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>反向循环</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> fruits <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"apple"</span><span class="token punctuation">,</span> <span class="token string">"dew"</span><span class="token punctuation">,</span> <span class="token string">"berry"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> fruits<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">>=</span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">--</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">. </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>fruits<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@ -551,7 +551,7 @@
|
||||
</span><span class="code-line line-number" line="6"><span class="token comment">// => 1. dew</span>
|
||||
</span><span class="code-line line-number" line="7"><span class="token comment">// => 0. apple</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Do...While 语句</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Do...While 语句</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1">x <span class="token operator">=</span> <span class="token number">0</span>
|
||||
</span><span class="code-line line-number" line="2">i <span class="token operator">=</span> <span class="token number">0</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token keyword control-flow">do</span> <span class="token punctuation">{</span>
|
||||
@ -561,26 +561,26 @@
|
||||
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span> <span class="token keyword control-flow">while</span> <span class="token punctuation">(</span>i <span class="token operator"><</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">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>For 循环</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</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">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>遍历数组</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</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">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Break</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">99</span><span class="token punctuation">;</span> i <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>i <span class="token operator">></span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="5"><span class="token comment">// => 0 1 2 3 4 5</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Continue</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Continue</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</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>
|
||||
@ -588,14 +588,14 @@
|
||||
</span><span class="code-line line-number" line="5"> text <span class="token operator">+=</span> <span class="token string">"The number is "</span> <span class="token operator">+</span> i <span class="token operator">+</span> <span class="token string">"<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">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>嵌套循环</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</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"><</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">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>for...in 循环</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> fruits <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"apple"</span><span class="token punctuation">,</span> <span class="token string">"orange"</span><span class="token punctuation">,</span> <span class="token string">"banana"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> index <span class="token keyword">in</span> fruits<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@ -604,7 +604,7 @@
|
||||
</span><span class="code-line line-number" line="6"><span class="token comment">// => 1</span>
|
||||
</span><span class="code-line line-number" line="7"><span class="token comment">// => 2</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp row-span-2"><div class="warp-header h3warp"><h3>label 语句</h3><div class="warp-body"><!--rehype:warp-class= row-span-2--><!--rehype:-->
|
||||
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>label 语句</h3><div class="wrap-body"><!--rehype:wrap-class= row-span-2--><!--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>
|
||||
@ -620,7 +620,7 @@
|
||||
</span><span class="code-line line-number" line="13"><span class="token function">alert</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 95</span>
|
||||
</span></code></pre>
|
||||
<p>从 <code>alert(num)</code> 的值可以看出，<code>continue outPoint;</code> 语句的作用是跳出当前循环，并跳转到 <code>outPoint</code>（标签）下的 <code>for</code> 循环继续执行。</p>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>for...of 循环</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>for...of 循环</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> fruits <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"apple"</span><span class="token punctuation">,</span> <span class="token string">"orange"</span><span class="token punctuation">,</span> <span class="token string">"banana"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> fruit <span class="token keyword">of</span> fruits<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>fruit<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@ -629,7 +629,7 @@
|
||||
</span><span class="code-line line-number" line="6"><span class="token comment">// => orange</span>
|
||||
</span><span class="code-line line-number" line="7"><span class="token comment">// => banana</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="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:-->
|
||||
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>for await...of</h3><div class="wrap-body"><!--rehype:wrap-class= row-span-2--><!--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"><</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@ -647,7 +647,7 @@
|
||||
</span><span class="code-line line-number" line="15"><span class="token comment">// 1</span>
|
||||
</span><span class="code-line line-number" line="16"><span class="token comment">// 2</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>可选的 for 表达式</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>可选的 for 表达式</h3><div class="wrap-body">
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2">
|
||||
</span><span class="code-line line-number" line="3"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token punctuation">;</span><span class="token punctuation">;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@ -656,8 +656,8 @@
|
||||
</span><span class="code-line line-number" line="6"> i<span class="token operator">++</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="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">
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 迭代器(Iterators)</h2><div class="wrap-body"><!--rehype:body-class=cols-2--><!--rehype:-->
|
||||
</div></div><div class="h2wrap-body cols-2"><div class="wrap"><div class="wrap-header h3wrap"><h3>分配给变量的函数</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> <span class="token function-variable function">plusFive</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">number</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> number <span class="token operator">+</span> <span class="token number">5</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
@ -667,7 +667,7 @@
|
||||
</span><span class="code-line line-number" line="7"><span class="token comment">// 由于 f 具有函数值，因此可以调用它。</span>
|
||||
</span><span class="code-line line-number" line="8"><span class="token function">f</span><span class="token punctuation">(</span><span class="token number">9</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 14</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>回调函数</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>回调函数</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">isEven</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> n <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||
@ -679,34 +679,34 @@
|
||||
</span><span class="code-line line-number" line="9"><span class="token function">printMsg</span><span class="token punctuation">(</span>isEven<span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="10"><span class="token comment">// => The number 4 is an even number: True.</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>数组方法 .reduce()</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>数组方法 .reduce()</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> sum <span class="token operator">=</span> numbers<span class="token punctuation">.</span><span class="token method function property-access">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">accumulator<span class="token punctuation">,</span> curVal</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> accumulator <span class="token operator">+</span> curVal<span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="5"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>sum<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 10</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>数组方法 .map()</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>数组方法 .map()</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> members <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Taylor"</span><span class="token punctuation">,</span> <span class="token string">"Donald"</span><span class="token punctuation">,</span> <span class="token string">"Don"</span><span class="token punctuation">,</span> <span class="token string">"Natasha"</span><span class="token punctuation">,</span> <span class="token string">"Bobby"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> announcements <span class="token operator">=</span> members<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">member</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> member <span class="token operator">+</span> <span class="token string">" joined the contest."</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="5"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>announcements<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>数组方法 .forEach()</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>数组方法 .forEach()</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">77</span><span class="token punctuation">,</span> <span class="token number">45</span><span class="token punctuation">,</span> <span class="token number">99</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2">numbers<span class="token punctuation">.</span><span class="token method function property-access">forEach</span><span class="token punctuation">(</span><span class="token parameter">number</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>数组方法 .filter()</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>数组方法 .filter()</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> randomNumbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">42</span><span class="token punctuation">,</span> <span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">39</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> filteredArray <span class="token operator">=</span> randomNumbers<span class="token punctuation">.</span><span class="token method function property-access">filter</span><span class="token punctuation">(</span><span class="token parameter">n</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> n <span class="token operator">></span> <span class="token number">5</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="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">
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 对象(Objects)</h2><div class="wrap-body"><!--rehype:body-class=cols-2--><!--rehype:-->
|
||||
</div></div><div class="h2wrap-body cols-2"><div class="wrap"><div class="wrap-header h3wrap"><h3>访问属性</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> apple <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'Green'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">price</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">bulk</span><span class="token operator">:</span> <span class="token string">'$3/kg'</span><span class="token punctuation">,</span> <span class="token literal-property property">smallQty</span><span class="token operator">:</span> <span class="token string">'$4/kg'</span> <span class="token punctuation">}</span>
|
||||
@ -714,7 +714,7 @@
|
||||
</span><span class="code-line line-number" line="5"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>apple<span class="token punctuation">.</span><span class="token property-access">color</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => Green</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>apple<span class="token punctuation">.</span><span class="token property-access">price</span><span class="token punctuation">.</span><span class="token property-access">bulk</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => $3/kg</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>命名属性</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>命名属性</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 无效键名示例</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> trainSchedule <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token comment">// 由于单词之间的空格而无效。</span>
|
||||
@ -725,13 +725,13 @@
|
||||
</span><span class="code-line line-number" line="8"> <span class="token operator">+</span>compartment<span class="token operator">:</span> <span class="token string">'C'</span>
|
||||
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>不存在的属性</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>不存在的属性</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> classElection <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">'January 12'</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>classElection<span class="token punctuation">.</span><span class="token property-access">place</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp row-span-2"><div class="warp-header h3warp"><h3>可变的</h3><div class="warp-body"><!--rehype:warp-class=row-span-2--><!--rehype:-->
|
||||
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>可变的</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--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>
|
||||
@ -746,7 +746,7 @@
|
||||
</span><span class="code-line line-number" line="12">student <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="13"><span class="token comment">// TypeError: TypeError：分配给常量变量。</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>赋值简写语法</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>赋值简写语法</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Tom'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token string">'22'</span><span class="token punctuation">,</span>
|
||||
@ -755,7 +755,7 @@
|
||||
</span><span class="code-line line-number" line="6"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'Tom'</span>
|
||||
</span><span class="code-line line-number" line="7"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// '22'</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>删除运算符</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>删除运算符</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">"Matilda"</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">27</span><span class="token punctuation">,</span>
|
||||
@ -772,7 +772,7 @@
|
||||
</span></span><span class="code-line line-number" line="14"><span class="token comment">}
|
||||
</span></span><span class="code-line line-number" line="15"><span class="token comment">*/</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>对象作为参数</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>对象作为参数</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> origNum <span class="token operator">=</span> <span class="token number">8</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> origObj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> <span class="token function-variable function">changeItUp</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">num<span class="token punctuation">,</span> obj</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
@ -786,7 +786,7 @@
|
||||
</span><span class="code-line line-number" line="11"><span class="token comment">// 通过引用，因此是可变的。</span>
|
||||
</span><span class="code-line line-number" line="12"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>origObj<span class="token punctuation">.</span><span class="token property-access">color</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp row-span-2"><div class="warp-header h3warp"><h3>工厂函数</h3><div class="warp-body"><!--rehype:warp-class=row-span-2--><!--rehype:-->
|
||||
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>工厂函数</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--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>
|
||||
@ -800,12 +800,12 @@
|
||||
</span><span class="code-line line-number" line="11"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="12"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>速记对象创建</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>速记对象创建</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> activity <span class="token operator">=</span> <span class="token string">'Surfing'</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> beach <span class="token operator">=</span> <span class="token punctuation">{</span> activity <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>beach<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// { activity: 'Surfing' }</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>this 关键字</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>this 关键字</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> cat <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Pipey'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
|
||||
@ -815,7 +815,7 @@
|
||||
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="8"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>cat<span class="token punctuation">.</span><span class="token method function property-access">whatName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => Pipey</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>方法</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>方法</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> engine <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token comment">// 方法简写，有一个参数</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token function">start</span><span class="token punctuation">(</span><span class="token parameter">adverb</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@ -829,7 +829,7 @@
|
||||
</span><span class="code-line line-number" line="11">engine<span class="token punctuation">.</span><span class="token method function property-access">start</span><span class="token punctuation">(</span><span class="token string">'noisily'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="12">engine<span class="token punctuation">.</span><span class="token method function property-access">sputter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Getters 和 setters</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Getters 和 setters</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> myCat <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token literal-property property">_name</span><span class="token operator">:</span> <span class="token string">'Dottie'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token keyword">get</span> <span class="token function">name</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@ -844,8 +844,8 @@
|
||||
</span><span class="code-line line-number" line="12"><span class="token comment">// 赋值调用 setter</span>
|
||||
</span><span class="code-line line-number" line="13">myCat<span class="token punctuation">.</span><span class="token property-access">name</span> <span class="token operator">=</span> <span class="token string">'Yankee'</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="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:-->
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript Classes</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>静态方法/字段</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--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>
|
||||
@ -871,7 +871,7 @@
|
||||
</span><span class="code-line line-number" line="23"><span class="token comment">// 调用静态方法</span>
|
||||
</span><span class="code-line line-number" line="24"><span class="token maybe-class-name">Dog</span><span class="token punctuation">.</span><span class="token method function property-access">bark</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div><div class="h3warp-body"><div class="warp"><div class="warp-header h4warp"><h4>公有静态字段</h4><div class="warp-body">
|
||||
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>公有静态字段</h4><div class="wrap-body">
|
||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">ClassStaticField</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword">static</span> staticField <span class="token operator">=</span> <span class="token string">'static field'</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||
@ -879,7 +879,7 @@
|
||||
</span><span class="code-line line-number" line="5"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token maybe-class-name">ClassStaticField</span><span class="token punctuation">.</span><span class="token property-access">staticField</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token comment">// 预期输出值："static field" </span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Class</h3><div class="warp-body">
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Class</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Song</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">;</span>
|
||||
@ -894,7 +894,7 @@
|
||||
</span><span class="code-line line-number" line="12"><span class="token keyword">const</span> mySong <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Song</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="13">mySong<span class="token punctuation">.</span><span class="token method function property-access">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>extends</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>extends</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// Parent class</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">class</span> <span class="token class-name">Media</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">info</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@ -915,7 +915,7 @@
|
||||
</span><span class="code-line line-number" line="18"> <span class="token literal-property property">publishDate</span><span class="token operator">:</span> <span class="token number">1975</span>
|
||||
</span><span class="code-line line-number" line="19"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Class Constructor</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Class Constructor</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Song</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">title<span class="token punctuation">,</span> artist</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">title</span> <span class="token operator">=</span> title<span class="token punctuation">;</span>
|
||||
@ -925,7 +925,7 @@
|
||||
</span><span class="code-line line-number" line="7"><span class="token keyword">const</span> mySong <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Song</span><span class="token punctuation">(</span><span class="token string">'Bohemian Rhapsody'</span><span class="token punctuation">,</span> <span class="token string">'Queen'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="8"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>mySong<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Class Methods</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Class Methods</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Song</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Playing!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@ -936,8 +936,8 @@
|
||||
</span><span class="code-line line-number" line="8"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="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">
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript Modules</h2><div class="wrap-body"><!--rehype:body-class=cols-2-->
|
||||
</div></div><div class="h2wrap-body cols-2"><div class="wrap"><div class="wrap-header h3wrap"><h3>Export / Import</h3><div class="wrap-body">
|
||||
<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>
|
||||
@ -958,7 +958,7 @@
|
||||
</span></span><span class="code-line line-number" line="18"><span class="token exports"> multiply<span class="token punctuation">,</span> duplicate
|
||||
</span></span><span class="code-line line-number" line="19"><span class="token exports"><span class="token punctuation">}</span></span>
|
||||
</span></code></pre>
|
||||
</div></div><div class="h3warp-body"><div class="warp"><div class="warp-header h4warp"><h4>import 加载模块</h4><div class="warp-body">
|
||||
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>import 加载模块</h4><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// main.js</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword module">import</span> <span class="token imports">add<span class="token punctuation">,</span> <span class="token punctuation">{</span> subtract<span class="token punctuation">,</span> multiply<span class="token punctuation">,</span> duplicate <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'./myMath.js'</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 8 </span>
|
||||
@ -968,7 +968,7 @@
|
||||
</span><span class="code-line line-number" line="7"><span class="token comment">// index.html</span>
|
||||
</span><span class="code-line line-number" line="8"><span class="token operator"><</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"><</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">
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Export Module</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// myMath.js</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span>y</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> x <span class="token operator">+</span> y
|
||||
@ -990,7 +990,7 @@
|
||||
</span><span class="code-line line-number" line="19"> duplicate
|
||||
</span><span class="code-line line-number" line="20"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div><div class="h3warp-body"><div class="warp"><div class="warp-header h4warp"><h4>require 加载模块</h4><div class="warp-body">
|
||||
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>require 加载模块</h4><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// main.js</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> myMath <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./myMath.js'</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>myMath<span class="token punctuation">.</span><span class="token method function property-access">add</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 8 </span>
|
||||
@ -998,8 +998,8 @@
|
||||
</span><span class="code-line line-number" line="5"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>myMath<span class="token punctuation">.</span><span class="token method function property-access">multiply</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 12</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>myMath<span class="token punctuation">.</span><span class="token method function property-access">duplicate</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 10</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>JavaScript Promises</h2><div class="warp-body">
|
||||
</div></div><div class="h2warp-body"><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:-->
|
||||
</div></div></div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript Promises</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>Promise</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
|
||||
<p>创建 promises</p>
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@ -1009,30 +1009,30 @@
|
||||
</span><span class="code-line line-number" line="6"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div><div class="h3warp-body"><div class="warp"><div class="warp-header h4warp"><h4>使用 promises</h4><div class="warp-body">
|
||||
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>使用 promises</h4><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1">promise
|
||||
</span><span class="code-line line-number" line="2"> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> ··· <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> ··· <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h4warp"><h4>Promise 方法</h4><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>Promise 方法</h4><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">all</span><span class="token punctuation">(</span>···<span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">race</span><span class="token punctuation">(</span>···<span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">reject</span><span class="token punctuation">(</span>···<span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">resolve</span><span class="token punctuation">(</span>···<span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="warp"><div class="warp-header h3warp"><h3>执行器函数</h3><div class="warp-body">
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>执行器函数</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">executorFn</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'Resolved!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span>executorFn<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>setTimeout()</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>setTimeout()</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">loginAlert</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Login'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token function">setTimeout</span><span class="token punctuation">(</span>loginAlert<span class="token punctuation">,</span> <span class="token number">6000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Promise 状态</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Promise 状态</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token comment">// 一个异步操作。</span>
|
||||
@ -1048,7 +1048,7 @@
|
||||
</span><span class="code-line line-number" line="13"> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="14"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>.then() 方法</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>.then() 方法</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'Result'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@ -1061,7 +1061,7 @@
|
||||
</span><span class="code-line line-number" line="10"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="11"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>.catch() 方法</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>.catch() 方法</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
@ -1077,7 +1077,7 @@
|
||||
</span><span class="code-line line-number" line="13"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="14"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp col-span-2"><div class="warp-header h3warp"><h3>Promise.all()</h3><div class="warp-body"><!--rehype:warp-class=col-span-2--><!--rehype:-->
|
||||
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>Promise.all()</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--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> 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>
|
||||
@ -1093,7 +1093,7 @@
|
||||
</span><span class="code-line line-number" line="13"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>res<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="14"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>链接多个 .then()</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>链接多个 .then()</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token parameter">resolve</span> <span class="token arrow operator">=></span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'dAlan'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">)</span>
|
||||
@ -1110,7 +1110,7 @@
|
||||
</span><span class="code-line line-number" line="14"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="15"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp col-span-2"><div class="warp-header h3warp"><h3>避免嵌套的 Promise 和 .then()</h3><div class="warp-body"><!--rehype:warp-class=col-span-2--><!--rehype:-->
|
||||
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>避免嵌套的 Promise 和 .then()</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--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 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>
|
||||
@ -1128,8 +1128,8 @@
|
||||
</span><span class="code-line line-number" line="15"><span class="token comment">// 将它们链接在一起</span>
|
||||
</span><span class="code-line line-number" line="16">promise<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span>twoStars<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span>oneDot<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span>print<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="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 row-span-2"><div class="warp-header h3warp"><h3>异步</h3><div class="warp-body"><!--rehype:warp-class=row-span-2--><!--rehype:-->
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript Async-Await</h2><div class="wrap-body"><!--rehype:body-class=cols-2-->
|
||||
</div></div><div class="h2wrap-body cols-2"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>异步</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--rehype:-->
|
||||
<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>
|
||||
@ -1153,7 +1153,7 @@
|
||||
</span><span class="code-line line-number" line="21"><span class="token function">msg</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Message: Hello World! <-- 2 秒后</span>
|
||||
</span><span class="code-line line-number" line="22"><span class="token function">msg1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Message: Hello World! <-- 2 秒后</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>解决 Promises</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>解决 Promises</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> pro1 <span class="token operator">=</span> <span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">resolve</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">let</span> pro2 <span class="token operator">=</span> <span class="token number">44</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token keyword">let</span> pro3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@ -1164,7 +1164,7 @@
|
||||
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="9"><span class="token comment">// expected => Array [5, 44, "foo"]</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>异步等待 Promises</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>异步等待 Promises</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">helloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token parameter">resolve</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
@ -1178,7 +1178,7 @@
|
||||
</span><span class="code-line line-number" line="11"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="12"><span class="token function">msg</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Message: Hello World! <-- 2 秒后</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>错误处理</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>错误处理</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 数据不完整</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">let</span> json <span class="token operator">=</span> <span class="token string">'{ "age": 30 }'</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3">
|
||||
@ -1189,7 +1189,7 @@
|
||||
</span><span class="code-line line-number" line="8"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span> <span class="token string">"Invalid JSON data!"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>异步等待运算符</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>异步等待运算符</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">helloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token parameter">resolve</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
@ -1203,8 +1203,8 @@
|
||||
</span><span class="code-line line-number" line="11"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="12"><span class="token function">msg</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Message: Hello World! <-- 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">
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 请求</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>JSON</h3><div class="wrap-body">
|
||||
<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>
|
||||
@ -1212,12 +1212,12 @@
|
||||
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
<p>另见：<a href="./json.html">JSON 备忘单</a></p>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>XMLHttpRequest</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>XMLHttpRequest</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2">xhr<span class="token punctuation">.</span><span class="token method function property-access">open</span><span class="token punctuation">(</span><span class="token string">'GET'</span><span class="token punctuation">,</span> <span class="token string">'mysite.com/getjson'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
<p><code>XMLHttpRequest</code> 是一个浏览器级别的 API，它使客户端能够通过 JavaScript 编写数据传输脚本，而不是 JavaScript 语言的一部分。</p>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>GET</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>GET</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> req <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2">req<span class="token punctuation">.</span><span class="token property-access">responseType</span> <span class="token operator">=</span> <span class="token string">'json'</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3">req<span class="token punctuation">.</span><span class="token method function property-access">open</span><span class="token punctuation">(</span><span class="token string">'GET'</span><span class="token punctuation">,</span> <span class="token string">'/getdata?id=65'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@ -1226,7 +1226,7 @@
|
||||
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="7">req<span class="token punctuation">.</span><span class="token method function property-access">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp row-span-2"><div class="warp-header h3warp"><h3>POST</h3><div class="warp-body"><!--rehype:warp-class=row-span-2--><!--rehype:-->
|
||||
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>POST</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--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 class="token literal-property property">weight</span><span class="token operator">:</span> <span class="token string">'1.5 KG'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token comment">// 初始化一个请求。</span>
|
||||
@ -1244,7 +1244,7 @@
|
||||
</span><span class="code-line line-number" line="15"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span><span class="token property-access">response</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="16"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp row-span-2"><div class="warp-header h3warp"><h3>fetch api</h3><div class="warp-body"><!--rehype:warp-class=row-span-2--><!--rehype:-->
|
||||
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>fetch api</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2--><!--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>
|
||||
@ -1261,14 +1261,14 @@
|
||||
</span><span class="code-line line-number" line="14"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>networkError<span class="token punctuation">.</span><span class="token property-access">message</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="15"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>JSON 格式</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>JSON 格式</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'url-that-returns-JSON'</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> response<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">jsonResponse</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="4"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>jsonResponse<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="5"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>promise url 参数获取 API</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>promise url 参数获取 API</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'url'</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@ -1276,7 +1276,7 @@
|
||||
</span><span class="code-line line-number" line="5"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>rejection<span class="token punctuation">.</span><span class="token property-access">message</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="6"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Fetch API 函数</h3><div class="warp-body">
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Fetch API 函数</h3><div class="wrap-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'https://api-xxx.com/endpoint'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">body</span><span class="token operator">:</span> <span class="token known-class-name class-name">JSON</span><span class="token punctuation">.</span><span class="token method function property-access">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">"200"</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
@ -1291,7 +1291,7 @@
|
||||
</span><span class="code-line line-number" line="12"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>jsonResponse<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="13"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp col-span-2"><div class="warp-header h3warp"><h3>async await 语法</h3><div class="warp-body"><!--rehype:warp-class=col-span-2--><!--rehype:-->
|
||||
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>async await 语法</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--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>
|
||||
@ -1307,5 +1307,5 @@
|
||||
</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>
|
||||
</div></div></div></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer></body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user