每个 JavaScript 开发人员都应该知道的 7 个速记优化技巧

本文链接：https://blog.csdn.net/u010291330/article/details/128081891

每种语言都有自己的怪癖，最常用的编程语言JavaScript也不例外。本文将介绍大量JavaScript 速记优化技巧，这些技巧可以帮助您编写更好的代码，并确保您在遇到它们时不会做出以下反应：

1. 多字符串检查

通常您可能需要检查 astring是否等于多个值之一，并且很快就会变得很累。幸运的是，JavaScript有一个内置方法可以帮助您完成此操作。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">// Long-hand</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">isVowel</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">letter</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span>
    <span style="color:var(--syntax-name-color)">letter</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">a</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-error-color)">||</span>
    <span style="color:var(--syntax-name-color)">letter</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">e</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-error-color)">||</span>
    <span style="color:var(--syntax-name-color)">letter</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">i</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-error-color)">||</span>
    <span style="color:var(--syntax-name-color)">letter</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">o</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-error-color)">||</span>
    <span style="color:var(--syntax-name-color)">letter</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">u</span><span style="color:var(--syntax-string-color)">"</span>
  <span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-declaration-color)">true</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-declaration-color)">false</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">};</span>

<span style="color:var(--syntax-comment-color)">// Short-hand</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">isVowel</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">letter</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span>
  <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">a</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">e</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">i</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">o</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">u</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">].</span><span style="color:var(--syntax-name-color)">includes</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">letter</span><span style="color:var(--syntax-text-color)">);</span>
</code></span></span>

2.`For-of`和`For-in`循环

For-ofandFor-in循环是迭代arrayor的好方法，object无需手动跟踪的索引。keysobject

`For-of`

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">arr</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-literal-color)">1</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">3</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">4</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">5</span><span style="color:var(--syntax-text-color)">];</span>

<span style="color:var(--syntax-comment-color)">// Long-hand</span>
<span style="color:var(--syntax-declaration-color)">for</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">let</span> <span style="color:var(--syntax-name-color)">i</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">;</span> <span style="color:var(--syntax-name-color)">i</span> <span style="color:var(--syntax-error-color)"><</span> <span style="color:var(--syntax-name-color)">arr</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">length</span><span style="color:var(--syntax-text-color)">;</span> <span style="color:var(--syntax-name-color)">i</span><span style="color:var(--syntax-error-color)">++</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">element</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">arr</span><span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">i</span><span style="color:var(--syntax-text-color)">];</span>
  <span style="color:var(--syntax-comment-color)">// ...</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-comment-color)">// Short-hand</span>
<span style="color:var(--syntax-declaration-color)">for</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">element</span> <span style="color:var(--syntax-declaration-color)">of</span> <span style="color:var(--syntax-name-color)">arr</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-comment-color)">// ...</span>
<span style="color:var(--syntax-text-color)">}</span>
</code></span></span>

`For-in`

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">obj</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">a</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-name-color)">b</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-name-color)">c</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">3</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">};</span>

<span style="color:var(--syntax-comment-color)">// Long-hand</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">keys</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">Object</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">keys</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">obj</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-declaration-color)">for</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">let</span> <span style="color:var(--syntax-name-color)">i</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">;</span> <span style="color:var(--syntax-name-color)">i</span> <span style="color:var(--syntax-error-color)"><</span> <span style="color:var(--syntax-name-color)">keys</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">length</span><span style="color:var(--syntax-text-color)">;</span> <span style="color:var(--syntax-name-color)">i</span><span style="color:var(--syntax-error-color)">++</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">key</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">keys</span><span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">i</span><span style="color:var(--syntax-text-color)">];</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">value</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">obj</span><span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">key</span><span style="color:var(--syntax-text-color)">];</span>
  <span style="color:var(--syntax-comment-color)">// ...</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-comment-color)">// Short-hand</span>
<span style="color:var(--syntax-declaration-color)">for</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">key</span> <span style="color:var(--syntax-declaration-color)">in</span> <span style="color:var(--syntax-name-color)">obj</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">value</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">obj</span><span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">key</span><span style="color:var(--syntax-text-color)">];</span>
  <span style="color:var(--syntax-comment-color)">// ...</span>
<span style="color:var(--syntax-text-color)">}</span>
</code></span></span>

3.虚假检查

如果要检查变量是null, undefined, 0, false,NaN还是空的string，可以使用逻辑非( !) 运算符一次检查所有变量，而不必编写多个条件。这使得检查变量是否包含有效数据变得容易。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">// Long-hand</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">isFalsey</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span>
    <span style="color:var(--syntax-name-color)">value</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-declaration-color)">null</span> <span style="color:var(--syntax-error-color)">||</span>
    <span style="color:var(--syntax-name-color)">value</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-declaration-color)">undefined</span> <span style="color:var(--syntax-error-color)">||</span>
    <span style="color:var(--syntax-name-color)">value</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-literal-color)">0</span> <span style="color:var(--syntax-error-color)">||</span>
    <span style="color:var(--syntax-name-color)">value</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-declaration-color)">false</span> <span style="color:var(--syntax-error-color)">||</span>
    <span style="color:var(--syntax-name-color)">value</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-declaration-color)">NaN</span> <span style="color:var(--syntax-error-color)">||</span>
    <span style="color:var(--syntax-name-color)">value</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-string-color)">""</span>
  <span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-declaration-color)">true</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-declaration-color)">false</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">};</span>

<span style="color:var(--syntax-comment-color)">// Short-hand</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">isFalsey</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-error-color)">!</span><span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>

4.三元运算符

作为一名JavaScript开发者，你一定遇到过ternary operator. 这是编写简洁if-else语句的好方法。但是，您也可以使用它来编写简洁的代码，甚至可以将它们链接起来以检查多个条件。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">// Long-hand</span>
<span style="color:var(--syntax-declaration-color)">let</span> <span style="color:var(--syntax-name-color)">info</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">value</span> <span style="color:var(--syntax-error-color)"><</span> <span style="color:var(--syntax-name-color)">minValue</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">info</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Value is too small</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">else</span> <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">value</span> <span style="color:var(--syntax-error-color)">></span> <span style="color:var(--syntax-name-color)">maxValue</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">info</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Value is too large</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">else</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">info</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Value is in range</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-comment-color)">// Short-hand</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">info</span> <span style="color:var(--syntax-error-color)">=</span>
  <span style="color:var(--syntax-name-color)">value</span> <span style="color:var(--syntax-error-color)"><</span> <span style="color:var(--syntax-name-color)">minValue</span>
    <span style="color:var(--syntax-text-color)">?</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Value is too small</span><span style="color:var(--syntax-string-color)">"</span>
    <span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">value</span> <span style="color:var(--syntax-error-color)">></span> <span style="color:var(--syntax-name-color)">maxValue</span> <span style="color:var(--syntax-text-color)">?</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Value is too large</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Value is in range</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>

5.函数调用

借助ternary operator，您还可以根据条件确定调用哪个函数。

重要旁注：功能必须相同，否则您可能会遇到call signature错误

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">f1</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-comment-color)">// ...</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">f2</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-comment-color)">// ...</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-comment-color)">// Long-hand</span>
<span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">condition</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">f1</span><span style="color:var(--syntax-text-color)">();</span>
<span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">else</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">f2</span><span style="color:var(--syntax-text-color)">();</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-comment-color)">// Short-hand</span>
<span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">condition</span> <span style="color:var(--syntax-text-color)">?</span> <span style="color:var(--syntax-name-color)">f1</span> <span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">f2</span><span style="color:var(--syntax-text-color)">)();</span>
</code></span></span>

6.切换速记

较长的switch case通常可以通过使用以键作为开关、以值作为返回值的对象来优化。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">dayNumber</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-text-color)">Date</span><span style="color:var(--syntax-text-color)">().</span><span style="color:var(--syntax-name-color)">getDay</span><span style="color:var(--syntax-text-color)">();</span>

<span style="color:var(--syntax-comment-color)">// Long-hand</span>
<span style="color:var(--syntax-declaration-color)">let</span> <span style="color:var(--syntax-name-color)">day</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">switch</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">dayNumber</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">case</span> <span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">:</span>
    <span style="color:var(--syntax-name-color)">day</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Sunday</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-declaration-color)">break</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-declaration-color)">case</span> <span style="color:var(--syntax-literal-color)">1</span><span style="color:var(--syntax-text-color)">:</span>
    <span style="color:var(--syntax-name-color)">day</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Monday</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-declaration-color)">break</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-declaration-color)">case</span> <span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-text-color)">:</span>
    <span style="color:var(--syntax-name-color)">day</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Tuesday</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-declaration-color)">break</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-declaration-color)">case</span> <span style="color:var(--syntax-literal-color)">3</span><span style="color:var(--syntax-text-color)">:</span>
    <span style="color:var(--syntax-name-color)">day</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Wednesday</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-declaration-color)">break</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-declaration-color)">case</span> <span style="color:var(--syntax-literal-color)">4</span><span style="color:var(--syntax-text-color)">:</span>
    <span style="color:var(--syntax-name-color)">day</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Thursday</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-declaration-color)">break</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-declaration-color)">case</span> <span style="color:var(--syntax-literal-color)">5</span><span style="color:var(--syntax-text-color)">:</span>
    <span style="color:var(--syntax-name-color)">day</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Friday</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-declaration-color)">break</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-declaration-color)">case</span> <span style="color:var(--syntax-literal-color)">6</span><span style="color:var(--syntax-text-color)">:</span>
    <span style="color:var(--syntax-name-color)">day</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Saturday</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-comment-color)">// Short-hand</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">days</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Sunday</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-literal-color)">1</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Monday</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Tuesday</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-literal-color)">3</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Wednesday</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-literal-color)">4</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Thursday</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-literal-color)">5</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Friday</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-literal-color)">6</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Saturday</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">};</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">day</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">days</span><span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">dayNumber</span><span style="color:var(--syntax-text-color)">];</span>
</code></span></span>

7. 后备值

||操作员可以为变量设置回退值。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">// Long-hand</span>
<span style="color:var(--syntax-declaration-color)">let</span> <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">user</span><span style="color:var(--syntax-text-color)">?.</span><span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">name</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">user</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">else</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">name</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Anonymous</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-comment-color)">// Short-hand</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">name</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">user</span><span style="color:var(--syntax-text-color)">?.</span><span style="color:var(--syntax-name-color)">name</span> <span style="color:var(--syntax-error-color)">||</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Anonymous</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>

这就是所有的人！🎉