每种语言都有自己的怪癖,最常用的编程语言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-of
andFor-in
循环是迭代array
or的好方法,object
无需手动跟踪的索引。keys
object
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>
这就是所有的人!🎉