mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-18 21:21:21 +08:00
feat: add package.json cheatsheet. 7ab9ddf766
This commit is contained in:
jaywcjlove
@ -9,10 +9,10 @@
|
|||||||
<meta keywords="Quick,Reference,cheatsheet,cron">
|
<meta keywords="Quick,Reference,cheatsheet,cron">
|
||||||
<link rel="stylesheet" href="../style/style.css">
|
<link rel="stylesheet" href="../style/style.css">
|
||||||
</head>
|
</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/cron.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>Cron 备忘清单</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/cron.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>Cron 备忘清单</h1><div class="wrap-body">
|
||||||
<p><a href="https://en.wikipedia.org/wiki/Cron">Cron</a> 最适合安排重复性任务。 可以使用关联的 at 实用程序来完成一次性任务的调度。</p>
|
<p><a href="https://en.wikipedia.org/wiki/Cron">Cron</a> 最适合安排重复性任务。 可以使用关联的 at 实用程序来完成一次性任务的调度。</p>
|
||||||
</div></header><div class="h1warp-body"><div class="warp"><div class="warp-header h2warp"><h2>Crontab 格式</h2><div class="warp-body"><!--rehype:body-class=cols-2-->
|
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2>Crontab 格式</h2><div class="wrap-body"><!--rehype:body-class=cols-2-->
|
||||||
</div></div><div class="h2warp-body cols-2"><div class="warp"><div class="warp-header h3warp"><h3>格式</h3><div class="warp-body">
|
</div></div><div class="h2wrap-body cols-2"><div class="wrap"><div class="wrap-header h3wrap"><h3>格式</h3><div class="wrap-body">
|
||||||
<pre><code class="code-highlight"><span class="code-line line-number" line="1">Min Hour Day Mon Weekday
|
<pre><code class="code-highlight"><span class="code-line line-number" line="1">Min Hour Day Mon Weekday
|
||||||
</span><span class="code-line line-number" line="2">分钟 小时 天 月 周
|
</span><span class="code-line line-number" line="2">分钟 小时 天 月 周
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
@ -62,7 +62,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</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 class="table-thead-hide">
|
<table class="table-thead-hide">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -121,7 +121,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</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>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -164,7 +164,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Crontab 命令</h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Crontab 命令</h3><div class="wrap-body">
|
||||||
<table class="table-thead-hide">
|
<table class="table-thead-hide">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -195,7 +195,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</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:-->
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -234,12 +234,12 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>Also see</h2><div class="warp-body">
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>Also see</h2><div class="wrap-body">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://devhints.io/cron">Devhints</a> <em>(devhints.io)</em></li>
|
<li><a href="https://devhints.io/cron">Devhints</a> <em>(devhints.io)</em></li>
|
||||||
<li><a href="https://crontab-generator.org/">Crontab Generator</a> <em>(crontab-generator.org)</em></li>
|
<li><a href="https://crontab-generator.org/">Crontab Generator</a> <em>(crontab-generator.org)</em></li>
|
||||||
<li><a href="https://crontab.guru/">Crontab guru</a> <em>(crontab.guru)</em></li>
|
<li><a href="https://crontab.guru/">Crontab guru</a> <em>(crontab.guru)</em></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</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><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer></body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -9,10 +9,10 @@
|
|||||||
<meta keywords="Quick,Reference,cheatsheet,git">
|
<meta keywords="Quick,Reference,cheatsheet,git">
|
||||||
<link rel="stylesheet" href="../style/style.css">
|
<link rel="stylesheet" href="../style/style.css">
|
||||||
</head>
|
</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/git.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>Git 备忘清单</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/git.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>Git 备忘清单</h1><div class="wrap-body">
|
||||||
<p>本备忘单总结了常用的 Git 命令行指令，以供快速参考。</p>
|
<p>本备忘单总结了常用的 Git 命令行指令，以供快速参考。</p>
|
||||||
</div></header><div class="h1warp-body"><div class="warp"><div class="warp-header h2warp"><h2>入门</h2><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="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>创建存储库</h3><div class="warp-body">
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>创建存储库</h3><div class="wrap-body">
|
||||||
<p>创建一个新的本地存储库</p>
|
<p>创建一个新的本地存储库</p>
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> init <span class="token punctuation">[</span>project name<span class="token punctuation">]</span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> init <span class="token punctuation">[</span>project name<span class="token punctuation">]</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
@ -22,7 +22,7 @@
|
|||||||
<p>将存储库克隆到指定目录</p>
|
<p>将存储库克隆到指定目录</p>
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> clone git_url 指定目录
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> clone git_url 指定目录
|
||||||
</span></code></pre>
|
</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:-->
|
||||||
<p>在工作目录中<strong>显示</strong>修改后的文件，为您的下一次提交暂存</p>
|
<p>在工作目录中<strong>显示</strong>修改后的文件，为您的下一次提交暂存</p>
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> status
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> status
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
@ -53,7 +53,7 @@
|
|||||||
<p>在指定分支之前应用当前分支的任何提交</p>
|
<p>在指定分支之前应用当前分支的任何提交</p>
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> rebase <span class="token punctuation">[</span>branch<span class="token punctuation">]</span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> rebase <span class="token punctuation">[</span>branch<span class="token punctuation">]</span>
|
||||||
</span></code></pre>
|
</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">
|
||||||
<p>设置将附加到您的提交和标签的名称</p>
|
<p>设置将附加到您的提交和标签的名称</p>
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> config <span class="token parameter variable">--global</span> user.name <span class="token string">"name"</span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> config <span class="token parameter variable">--global</span> user.name <span class="token string">"name"</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
@ -66,7 +66,7 @@
|
|||||||
<p>在文本编辑器中编辑全局配置文件</p>
|
<p>在文本编辑器中编辑全局配置文件</p>
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> config <span class="token parameter variable">--global</span> <span class="token parameter variable">--edit</span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> config <span class="token parameter variable">--global</span> <span class="token parameter variable">--edit</span>
|
||||||
</span></code></pre>
|
</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">
|
||||||
<p>列出所有本地分支</p>
|
<p>列出所有本地分支</p>
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> branch
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> branch
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
@ -89,7 +89,7 @@
|
|||||||
<p>标记当前提交</p>
|
<p>标记当前提交</p>
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> tag my_tag
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> tag my_tag
|
||||||
</span></code></pre>
|
</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">
|
||||||
<p>显示当前活动分支的提交历史</p>
|
<p>显示当前活动分支的提交历史</p>
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> log
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> log
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
@ -105,7 +105,7 @@
|
|||||||
<p>以人类可读的格式显示 Git 中的任何对象</p>
|
<p>以人类可读的格式显示 Git 中的任何对象</p>
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> show <span class="token punctuation">[</span>SHA<span class="token punctuation">]</span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> show <span class="token punctuation">[</span>SHA<span class="token punctuation">]</span>
|
||||||
</span></code></pre>
|
</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">
|
||||||
<p>从该 Git 远程获取所有分支</p>
|
<p>从该 Git 远程获取所有分支</p>
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> fetch <span class="token punctuation">[</span>alias<span class="token punctuation">]</span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> fetch <span class="token punctuation">[</span>alias<span class="token punctuation">]</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
@ -125,7 +125,7 @@
|
|||||||
<p>将另一个分支的一个特定提交合并到当前分支</p>
|
<p>将另一个分支的一个特定提交合并到当前分支</p>
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> cherry-pick <span class="token punctuation">[</span>commit_id<span class="token punctuation">]</span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> cherry-pick <span class="token punctuation">[</span>commit_id<span class="token punctuation">]</span>
|
||||||
</span></code></pre>
|
</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">
|
||||||
<p>添加一个 git URL 作为别名</p>
|
<p>添加一个 git URL 作为别名</p>
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> remote <span class="token function">add</span> <span class="token punctuation">[</span>alias<span class="token punctuation">]</span> <span class="token punctuation">[</span>url<span class="token punctuation">]</span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> remote <span class="token function">add</span> <span class="token punctuation">[</span>alias<span class="token punctuation">]</span> <span class="token punctuation">[</span>url<span class="token punctuation">]</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
@ -141,7 +141,7 @@
|
|||||||
<p>更改 git repo 的 URL</p>
|
<p>更改 git repo 的 URL</p>
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> remote set-url origin <span class="token punctuation">[</span>git_url<span class="token punctuation">]</span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> remote set-url origin <span class="token punctuation">[</span>git_url<span class="token punctuation">]</span>
|
||||||
</span></code></pre>
|
</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">
|
||||||
<p>保存已修改和分阶段的更改</p>
|
<p>保存已修改和分阶段的更改</p>
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> stash
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> stash
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
@ -154,7 +154,7 @@
|
|||||||
<p>丢弃存储堆栈顶部的更改</p>
|
<p>丢弃存储堆栈顶部的更改</p>
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> stash drop
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> stash drop
|
||||||
</span></code></pre>
|
</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">
|
||||||
<p>从项目中删除文件并暂存删除以进行提交</p>
|
<p>从项目中删除文件并暂存删除以进行提交</p>
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> <span class="token function">rm</span> <span class="token punctuation">[</span>file<span class="token punctuation">]</span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> <span class="token function">rm</span> <span class="token punctuation">[</span>file<span class="token punctuation">]</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
@ -164,7 +164,7 @@
|
|||||||
<p>显示所有提交日志，并指示任何移动的路径</p>
|
<p>显示所有提交日志，并指示任何移动的路径</p>
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> log <span class="token parameter variable">--stat</span> <span class="token parameter variable">-M</span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> log <span class="token parameter variable">--stat</span> <span class="token parameter variable">-M</span>
|
||||||
</span></code></pre>
|
</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-gitignore"><code class="language-gitignore code-highlight"><span class="code-line line-number" line="1"><span class="token entry string"><span class="token punctuation">/</span>logs<span class="token punctuation">/</span><span class="token operator">*</span></span>
|
<pre class="language-gitignore"><code class="language-gitignore code-highlight"><span class="code-line line-number" line="1"><span class="token entry string"><span class="token punctuation">/</span>logs<span class="token punctuation">/</span><span class="token operator">*</span></span>
|
||||||
</span><span class="code-line line-number" line="2"><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 entry string"><span class="token operator">!</span>logs<span class="token punctuation">/</span>.gitkeep</span>
|
</span><span class="code-line line-number" line="3"><span class="token entry string"><span class="token operator">!</span>logs<span class="token punctuation">/</span>.gitkeep</span>
|
||||||
@ -176,20 +176,20 @@
|
|||||||
</span><span class="code-line line-number" line="9"><span class="token entry string">.sass-cache</span>
|
</span><span class="code-line line-number" line="9"><span class="token entry string">.sass-cache</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p><code>.gitignore</code> 文件指定了 Git 应该忽略的未跟踪的文件</p>
|
<p><code>.gitignore</code> 文件指定了 Git 应该忽略的未跟踪的文件</p>
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>Git 技巧</h2><div class="warp-body">
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>Git 技巧</h2><div class="wrap-body">
|
||||||
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>重命名分支</h3><div class="warp-body">
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>重命名分支</h3><div class="wrap-body">
|
||||||
</div></div><div class="h3warp-body"><div class="warp"><div class="warp-header h4warp"><h4><strong>重命名</strong>为<code>new</code></h4><div class="warp-body">
|
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4><strong>重命名</strong>为<code>new</code></h4><div class="wrap-body">
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> branch <span class="token parameter variable">-m</span> <span class="token operator"><</span>new<span class="token operator">></span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> branch <span class="token parameter variable">-m</span> <span class="token operator"><</span>new<span class="token operator">></span>
|
||||||
</span><span class="code-line line-number" line="2">$ <span class="token function">git</span> branch <span class="token parameter variable">-m</span> <span class="token operator"><</span>old<span class="token operator">></span> <span class="token operator"><</span>new<span class="token operator">></span> <span class="token comment"># 重命名分支 </span>
|
</span><span class="code-line line-number" line="2">$ <span class="token function">git</span> branch <span class="token parameter variable">-m</span> <span class="token operator"><</span>old<span class="token operator">></span> <span class="token operator"><</span>new<span class="token operator">></span> <span class="token comment"># 重命名分支 </span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h4warp"><h4><strong>推送</strong>并重置</h4><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4><strong>推送</strong>并重置</h4><div class="wrap-body">
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> push origin <span class="token parameter variable">-u</span> <span class="token operator"><</span>new<span class="token operator">></span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> push origin <span class="token parameter variable">-u</span> <span class="token operator"><</span>new<span class="token operator">></span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h4warp"><h4><strong>删除</strong>远程分支</h4><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4><strong>删除</strong>远程分支</h4><div class="wrap-body">
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> push origin <span class="token parameter variable">--delete</span> <span class="token operator"><</span>old<span class="token operator">></span> <span class="token comment"># 方法1</span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> push origin <span class="token parameter variable">--delete</span> <span class="token operator"><</span>old<span class="token operator">></span> <span class="token comment"># 方法1</span>
|
||||||
</span><span class="code-line line-number" line="2">$ <span class="token function">git</span> push origin :oldBranchName <span class="token comment"># 方法2</span>
|
</span><span class="code-line line-number" line="2">$ <span class="token function">git</span> push origin :oldBranchName <span class="token comment"># 方法2</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Log</h3><div class="warp-body">
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Log</h3><div class="wrap-body">
|
||||||
<p>按内容搜索更改</p>
|
<p>按内容搜索更改</p>
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> log -S<span class="token string">'<a term in the source>'</span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> log -S<span class="token string">'<a term in the source>'</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
@ -197,9 +197,9 @@
|
|||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> log <span class="token parameter variable">-p</span> <span class="token operator"><</span>file_name<span class="token operator">></span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> log <span class="token parameter variable">-p</span> <span class="token operator"><</span>file_name<span class="token operator">></span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>打印出很酷的日志可视化</p>
|
<p>打印出很酷的日志可视化</p>
|
||||||
<pre class="wrap"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> log <span class="token parameter variable">--pretty</span><span class="token operator">=</span>oneline <span class="token parameter variable">--graph</span> <span class="token parameter variable">--decorate</span> <span class="token parameter variable">--all</span>
|
<pre class="wrap-text"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> log <span class="token parameter variable">--pretty</span><span class="token operator">=</span>oneline <span class="token parameter variable">--graph</span> <span class="token parameter variable">--decorate</span> <span class="token parameter variable">--all</span>
|
||||||
</span></code></pre><!--rehype:className=wrap-->
|
</span></code></pre><!--rehype:className=wrap-text-->
|
||||||
</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-->
|
</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-->
|
||||||
<p>列出所有分支及其上游</p>
|
<p>列出所有分支及其上游</p>
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> branch <span class="token parameter variable">-vv</span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> branch <span class="token parameter variable">-vv</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
@ -215,22 +215,22 @@
|
|||||||
<p>删除本地存在远程不存在的分支</p>
|
<p>删除本地存在远程不存在的分支</p>
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1"><span class="token function">git</span> remote prune origin
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1"><span class="token function">git</span> remote prune origin
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Commit</h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Commit</h3><div class="wrap-body">
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> commit <span class="token parameter variable">-v</span> <span class="token parameter variable">--amend</span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> commit <span class="token parameter variable">-v</span> <span class="token parameter variable">--amend</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>重写最后的提交信息</p>
|
<p>重写最后的提交信息</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-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1"><span class="token function">git</span> config core.fileMode <span class="token boolean">false</span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1"><span class="token function">git</span> config core.fileMode <span class="token boolean">false</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>不再将文件的权限变化视作改动</p>
|
<p>不再将文件的权限变化视作改动</p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Git 别名</h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Git 别名</h3><div class="wrap-body">
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> config <span class="token parameter variable">--global</span> alias.co checkout
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> config <span class="token parameter variable">--global</span> alias.co checkout
|
||||||
</span><span class="code-line line-number" line="2">$ <span class="token function">git</span> config <span class="token parameter variable">--global</span> alias.br branch
|
</span><span class="code-line line-number" line="2">$ <span class="token function">git</span> config <span class="token parameter variable">--global</span> alias.br branch
|
||||||
</span><span class="code-line line-number" line="3">$ <span class="token function">git</span> config <span class="token parameter variable">--global</span> alias.ci commit
|
</span><span class="code-line line-number" line="3">$ <span class="token function">git</span> config <span class="token parameter variable">--global</span> alias.ci commit
|
||||||
</span><span class="code-line line-number" line="4">$ <span class="token function">git</span> config <span class="token parameter variable">--global</span> alias.st status
|
</span><span class="code-line line-number" line="4">$ <span class="token function">git</span> config <span class="token parameter variable">--global</span> alias.st status
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>也可以看看：<a href="https://gist.github.com/johnpolacek/69604a1f6861129ef088">More Aliases</a></p>
|
<p>也可以看看：<a href="https://gist.github.com/johnpolacek/69604a1f6861129ef088">More Aliases</a></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-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1"><span class="token comment"># 查看git 的设置</span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1"><span class="token comment"># 查看git 的设置</span>
|
||||||
</span><span class="code-line line-number" line="2">$ <span class="token function">git</span> config <span class="token parameter variable">--get</span> core.ignorecase
|
</span><span class="code-line line-number" line="2">$ <span class="token function">git</span> config <span class="token parameter variable">--get</span> core.ignorecase
|
||||||
</span><span class="code-line line-number" line="3"><span class="token comment"># 设置大小写敏感</span>
|
</span><span class="code-line line-number" line="3"><span class="token comment"># 设置大小写敏感</span>
|
||||||
@ -238,7 +238,7 @@
|
|||||||
</span><span class="code-line line-number" line="5"><span class="token comment"># 远程有俩相同目录，通过这种方式清除掉，然后提交记录</span>
|
</span><span class="code-line line-number" line="5"><span class="token comment"># 远程有俩相同目录，通过这种方式清除掉，然后提交记录</span>
|
||||||
</span><span class="code-line line-number" line="6">$ <span class="token function">git</span> <span class="token function">rm</span> <span class="token parameter variable">-r</span> <span class="token parameter variable">--cached</span> <span class="token operator"><</span>目录/文件<span class="token operator">></span>
|
</span><span class="code-line line-number" line="6">$ <span class="token function">git</span> <span class="token function">rm</span> <span class="token parameter variable">-r</span> <span class="token parameter variable">--cached</span> <span class="token operator"><</span>目录/文件<span class="token operator">></span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><div class="warp row-span-4"><div class="warp-header h3warp"><h3>修改远程 Commit 记录</h3><div class="warp-body"><!--rehype:warp-class=row-span-4--><!--rehype:-->
|
</div></div></div><div class="wrap row-span-4"><div class="wrap-header h3wrap"><h3>修改远程 Commit 记录</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-4--><!--rehype:-->
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> rebase <span class="token parameter variable">-i</span> HEAD~3
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> rebase <span class="token parameter variable">-i</span> HEAD~3
|
||||||
</span><span class="code-line line-number" line="2"><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"># 将要更改的记录行首单词 pick 改为 edit</span>
|
</span><span class="code-line line-number" line="3"><span class="token comment"># 将要更改的记录行首单词 pick 改为 edit</span>
|
||||||
@ -275,13 +275,13 @@
|
|||||||
</span><span class="code-line line-number" line="15"><span class="token comment"># 最后，确保没有人提交进行推送，最好不要加 -f 强制推送</span>
|
</span><span class="code-line line-number" line="15"><span class="token comment"># 最后，确保没有人提交进行推送，最好不要加 -f 强制推送</span>
|
||||||
</span><span class="code-line line-number" line="16">$ <span class="token function">git</span> push <span class="token parameter variable">-f</span> origin master
|
</span><span class="code-line line-number" line="16">$ <span class="token function">git</span> push <span class="token parameter variable">-f</span> origin master
|
||||||
</span></code></pre>
|
</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-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1"><span class="token comment"># 撤销一条记录 </span>
|
<pre class="language-shell"><code class="language-shell 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">git</span> reset <span class="token parameter variable">--hard</span> HEAD~1
|
</span><span class="code-line line-number" line="2">$ <span class="token function">git</span> reset <span class="token parameter variable">--hard</span> HEAD~1
|
||||||
</span><span class="code-line line-number" line="3"><span class="token comment"># 强制同步到远程仓库 </span>
|
</span><span class="code-line line-number" line="3"><span class="token comment"># 强制同步到远程仓库 </span>
|
||||||
</span><span class="code-line line-number" line="4">$ <span class="token function">git</span> push <span class="token parameter variable">-f</span> origin HEAD:master
|
</span><span class="code-line line-number" line="4">$ <span class="token function">git</span> push <span class="token parameter variable">-f</span> origin HEAD:master
|
||||||
</span></code></pre>
|
</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-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1"><span class="token comment"># 如果有的修改以及加入暂存区的话</span>
|
<pre class="language-shell"><code class="language-shell 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">git</span> reset <span class="token parameter variable">--hard</span>
|
</span><span class="code-line line-number" line="2">$ <span class="token function">git</span> reset <span class="token parameter variable">--hard</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token comment"># 还原所有修改，不会删除新增的文件</span>
|
</span><span class="code-line line-number" line="3"><span class="token comment"># 还原所有修改，不会删除新增的文件</span>
|
||||||
@ -289,23 +289,23 @@
|
|||||||
</span><span class="code-line line-number" line="5"><span class="token comment"># 下面命令会删除新增的文件</span>
|
</span><span class="code-line line-number" line="5"><span class="token comment"># 下面命令会删除新增的文件</span>
|
||||||
</span><span class="code-line line-number" line="6">$ <span class="token function">git</span> clean <span class="token parameter variable">-xdf</span>
|
</span><span class="code-line line-number" line="6">$ <span class="token function">git</span> clean <span class="token parameter variable">-xdf</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>获取最近一次提交的 Hash</h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>获取最近一次提交的 Hash</h3><div class="wrap-body">
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> rev-parse HEAD <span class="token comment"># e10721cb8859b2c</span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> rev-parse HEAD <span class="token comment"># e10721cb8859b2c</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token comment"># 获取短 hash</span>
|
</span><span class="code-line line-number" line="2"><span class="token comment"># 获取短 hash</span>
|
||||||
</span><span class="code-line line-number" line="3">$ <span class="token function">git</span> rev-parse <span class="token parameter variable">--short</span> HEAD <span class="token comment"># e10721c</span>
|
</span><span class="code-line line-number" line="3">$ <span class="token function">git</span> rev-parse <span class="token parameter variable">--short</span> HEAD <span class="token comment"># e10721c</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>删除已经合并到 master 的分支</h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>删除已经合并到 master 的分支</h3><div class="wrap-body">
|
||||||
<pre class="wrap"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> branch <span class="token parameter variable">--merged</span> master <span class="token operator">|</span> <span class="token function">grep</span> <span class="token parameter variable">-v</span> <span class="token string">'^\*\| master'</span> <span class="token operator">|</span> <span class="token function">xargs</span> <span class="token parameter variable">-n</span> <span class="token number">1</span> <span class="token function">git</span> branch <span class="token parameter variable">-d</span>
|
<pre class="wrap-text"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> branch <span class="token parameter variable">--merged</span> master <span class="token operator">|</span> <span class="token function">grep</span> <span class="token parameter variable">-v</span> <span class="token string">'^\*\| master'</span> <span class="token operator">|</span> <span class="token function">xargs</span> <span class="token parameter variable">-n</span> <span class="token number">1</span> <span class="token function">git</span> branch <span class="token parameter variable">-d</span>
|
||||||
</span></code></pre><!--rehype:className=wrap-->
|
</span></code></pre><!--rehype:className=wrap-text-->
|
||||||
</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-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> config <span class="token parameter variable">--global</span> core.quotepath <span class="token boolean">false</span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">$ <span class="token function">git</span> config <span class="token parameter variable">--global</span> core.quotepath <span class="token boolean">false</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>把 A 分支的某一个 commit，放到 B 分支上</h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>把 A 分支的某一个 commit，放到 B 分支上</h3><div class="wrap-body">
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1"><span class="token comment"># 切换到 B 分支</span>
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1"><span class="token comment"># 切换到 B 分支</span>
|
||||||
</span><span class="code-line line-number" line="2">$ <span class="token function">git</span> checkout <span class="token operator"><</span>B<span class="token operator">></span>
|
</span><span class="code-line line-number" line="2">$ <span class="token function">git</span> checkout <span class="token operator"><</span>B<span class="token operator">></span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token comment"># 将 A 分支 <hash-id> 的内容 pick 到 B 分支</span>
|
</span><span class="code-line line-number" line="3"><span class="token comment"># 将 A 分支 <hash-id> 的内容 pick 到 B 分支</span>
|
||||||
</span><span class="code-line line-number" line="4">$ <span class="token function">git</span> cherry-pick <span class="token operator"><</span>hash-id<span class="token operator">></span>
|
</span><span class="code-line line-number" line="4">$ <span class="token function">git</span> cherry-pick <span class="token operator"><</span>hash-id<span class="token operator">></span>
|
||||||
</span></code></pre>
|
</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>
|
</html>
|
||||||
|
|||||||
@ -9,17 +9,17 @@
|
|||||||
<meta keywords="Quick,Reference,cheatsheet,javascript">
|
<meta keywords="Quick,Reference,cheatsheet,javascript">
|
||||||
<link rel="stylesheet" href="../style/style.css">
|
<link rel="stylesheet" href="../style/style.css">
|
||||||
</head>
|
</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>
|
<p>包含最重要概念、函数、方法等的 JavaScript 备忘单。 初学者的完整快速参考。</p>
|
||||||
</div></header><div class="h1warp-body"><div class="warp"><div class="warp-header h2warp"><h2>入门</h2><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="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>介绍</h3><div class="warp-body">
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>介绍</h3><div class="wrap-body">
|
||||||
<p>JavaScript 是一种轻量级的解释型编程语言。</p>
|
<p>JavaScript 是一种轻量级的解释型编程语言。</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="json.html">JSON 备忘清单</a></li>
|
<li><a href="json.html">JSON 备忘清单</a></li>
|
||||||
<li><a href="/regex#regex-in-javascript">JavaScript 中的正则表达式</a></li>
|
<li><a href="/regex#regex-in-javascript">JavaScript 中的正则表达式</a></li>
|
||||||
<li><a href="./typescript.html">TypeScript 备忘清单</a></li>
|
<li><a href="./typescript.html">TypeScript 备忘清单</a></li>
|
||||||
</ul>
|
</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>
|
<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="2"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Hello world!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token comment">// => Hello QuickReference</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="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="3"> <span class="token comment">// 做可能有问题的东西来检查，逐步通过等。</span>
|
||||||
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p><strong>debugger</strong> 语句调用任何可用的调试功能。</p>
|
<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>
|
<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="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="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><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>
|
</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>
|
<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="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="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><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>
|
</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>
|
<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="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><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>
|
</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>
|
<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="2"><span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">"Tammy"</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> found <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="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="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><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>
|
</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>
|
<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="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="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="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><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>
|
</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>
|
<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 class="code-line line-number" line="2"><span class="token comment">/*
|
||||||
</span></span><span class="code-line line-number" line="3"><span class="token comment">多行配置
|
</span></span><span class="code-line line-number" line="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="5"><span class="token comment">以下配置。
|
||||||
</span></span><span class="code-line line-number" line="6"><span class="token comment">*/</span>
|
</span></span><span class="code-line line-number" line="6"><span class="token comment">*/</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="2"><span class="token comment">// 两个语句都会加 10</span>
|
||||||
</span><span class="code-line line-number" line="3">number <span class="token operator">=</span> number <span class="token operator">+</span> <span class="token number">10</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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="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><span class="code-line line-number" line="6"><span class="token comment">// => 120</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="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="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="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><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>
|
</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>
|
<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="2"><span class="token keyword">var</span> esc <span class="token operator">=</span> <span class="token string">'I don\'t \n know'</span><span class="token punctuation">;</span> <span class="token comment">// \n 换行</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token keyword">var</span> len <span class="token operator">=</span> abc<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">;</span> <span class="token comment">// 字符串长度</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="2">pi<span class="token punctuation">.</span><span class="token method function property-access">toFixed</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 返回 3 </span>
|
||||||
</span><span class="code-line line-number" line="3">pi<span class="token punctuation">.</span><span class="token method function property-access">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 返回 3.14 - 使用金钱</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="2">Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span><span class="token number">4.4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 4 - 数字四舍五入</span>
|
||||||
</span><span class="code-line line-number" line="3">Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span><span class="token number">4.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 5</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="2"><span class="token function">eval</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token comment">// 从数字返回字符串</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 条件</h2><div class="wrap-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 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>
|
<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="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="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><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>
|
</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>
|
<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="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="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><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>
|
</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>
|
<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="2"><span class="token number">3</span> <span class="token operator">></span> <span class="token number">1</span> <span class="token comment">// true</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token number">250</span> <span class="token operator">>=</span> <span class="token number">250</span> <span class="token comment">// true</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="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="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><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>
|
</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>
|
<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="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="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="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><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>
|
</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>
|
<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="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="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><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="2">
|
||||||
</span><span class="code-line line-number" line="3"><span class="token comment">// => true</span>
|
</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><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>
|
</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>
|
<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="2"><span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>size <span class="token operator">></span> <span class="token number">20</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Medium'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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="8"><span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="9"><span class="token comment">// Print: Small</span>
|
</span><span class="code-line line-number" line="9"><span class="token comment">// Print: Small</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="2"><span class="token number">0</span> <span class="token operator">===</span> <span class="token boolean">false</span> <span class="token comment">// false, 不同类型</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token number">1</span> <span class="token operator">==</span> <span class="token string">"1"</span> <span class="token comment">// true, 自动类型转换</span>
|
</span><span class="code-line line-number" line="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><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>
|
</span></code></pre>
|
||||||
<p><code>==</code> 只检查值，<code>===</code> 检查值和类型。</p>
|
<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>
|
<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="2">
|
||||||
</span><span class="code-line line-number" line="3"><span class="token keyword control-flow">switch</span> <span class="token punctuation">(</span>food<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="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="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><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="2">
|
||||||
</span><span class="code-line line-number" line="3"><span class="token keyword control-flow">switch</span> <span class="token punctuation">(</span>food<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="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="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><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript Functions 函数</h2><div class="wrap-body">
|
||||||
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>函数</h3><div class="warp-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>
|
<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="2"><span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> num1 <span class="token operator">+</span> num2<span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="2"><span class="token keyword">function</span> <span class="token function">rocketToMars</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> <span class="token string">'BOOM!'</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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="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><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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><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="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 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>
|
<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="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="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><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>
|
</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>
|
<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="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="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><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>
|
</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>
|
<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="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="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><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>
|
</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>
|
<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="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><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>
|
</span></code></pre>
|
||||||
<p>从 ES2015 开始提供<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">箭头函数</a></p>
|
<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>
|
<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="2"><span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> num1 <span class="token operator">+</span> num2<span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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="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><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="2"><span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> num1 <span class="token operator">+</span> num2<span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="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><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="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="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><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="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><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 范围</h2><div class="wrap-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 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>
|
<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="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>
|
</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><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>
|
</span></code></pre>
|
||||||
<p>ES6 引入了两个重要的新 JavaScript 关键字：let 和 const。这两个关键字在 JavaScript 中提供了块作用域。</p>
|
<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>
|
<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="2"><span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>isLoggedIn <span class="token operator">==</span> <span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token keyword">const</span> statusMessage <span class="token operator">=</span> <span class="token string">'Logged in.'</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="2"><span class="token keyword">const</span> color <span class="token operator">=</span> <span class="token string">'blue'</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token keyword">function</span> <span class="token function">printColor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="2"> <span class="token comment">// 这是“let”的最大范围</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token comment">// i 可以访问 ✔️</span>
|
</span><span class="code-line line-number" line="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><span class="code-line line-number" line="4"><span class="token comment">// i 可以访问 ✔️</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p><code>var</code> 的范围是最近的函数块，而 <code>let</code> 的范围是最近的封闭块。</p>
|
<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>
|
<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="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>
|
</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><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>变量使用 <code>let</code> 有自己的副本，变量有使用 <code>var</code> 的共享副本。</p>
|
<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></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript Arrays</h2><div class="wrap-body">
|
||||||
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>数组</h3><div class="warp-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>
|
<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="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><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>
|
</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>
|
<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><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>
|
</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>
|
<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="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="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><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>
|
</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>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -491,7 +491,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</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>
|
<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="2"><span class="token keyword">const</span> cart <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'apple'</span><span class="token punctuation">,</span> <span class="token string">'orange'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3">cart<span class="token punctuation">.</span><span class="token method function property-access">push</span><span class="token punctuation">(</span><span class="token string">'pear'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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><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>
|
</span></code></pre>
|
||||||
<p>将项目<strong>添加到末尾</strong>并返回新的数组长度。</p>
|
<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>
|
<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="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="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><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>
|
</span></code></pre>
|
||||||
<p>从<strong>末尾删除</strong>一个项目并返回已删除的项目。</p>
|
<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>
|
<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><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>
|
</span></code></pre>
|
||||||
<p><strong>从头删除</strong>一个项目并返回已删除的项目。</p>
|
<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>
|
<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="2"><span class="token comment">// => ['Willy', 'Bob']</span>
|
||||||
</span><span class="code-line line-number" line="3">cats<span class="token punctuation">.</span><span class="token method function property-access">unshift</span><span class="token punctuation">(</span><span class="token string">'Willy'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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><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>
|
</span></code></pre>
|
||||||
<p>将项目<strong>添加到开头</strong>并返回新的数组长度。</p>
|
<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>
|
<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="2"><span class="token keyword">const</span> newFirstNumber <span class="token operator">=</span> <span class="token number">4</span>
|
||||||
</span><span class="code-line line-number" line="3">
|
</span><span class="code-line line-number" line="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><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>
|
</span></code></pre>
|
||||||
<p>如果你想避免改变你的原始数组，你可以使用 concat。</p>
|
<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></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 循环</h2><div class="wrap-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 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>
|
<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="2"> <span class="token comment">// 要执行的代码块</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="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="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><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="2"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> fruits<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">>=</span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">--</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">. </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>fruits<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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="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><span class="code-line line-number" line="7"><span class="token comment">// => 0. apple</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="2">i <span class="token operator">=</span> <span class="token number">0</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token keyword control-flow">do</span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="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="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><span class="code-line line-number" line="8"><span class="token comment">// => 0 1 3 6 10</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="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="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><span class="code-line line-number" line="4"><span class="token comment">// => 0, 1, 2, 3</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="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="3"><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="4"><span class="token comment">// => 数组中的每一项</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="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="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="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><span class="code-line line-number" line="5"><span class="token comment">// => 0 1 2 3 4 5</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="2"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>i <span class="token operator">===</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">continue</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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="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><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="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="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="4"> <span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="2"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> index <span class="token keyword">in</span> fruits<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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="6"><span class="token comment">// => 1</span>
|
||||||
</span><span class="code-line line-number" line="7"><span class="token comment">// => 2</span>
|
</span><span class="code-line line-number" line="7"><span class="token comment">// => 2</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="2">
|
||||||
</span><span class="code-line line-number" line="3"><span class="token literal-property property">outPoint</span><span class="token operator">:</span>
|
</span><span class="code-line line-number" line="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><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>
|
</span></code></pre>
|
||||||
<p>从 <code>alert(num)</code> 的值可以看出，<code>continue outPoint;</code> 语句的作用是跳出当前循环，并跳转到 <code>outPoint</code>（标签）下的 <code>for</code> 循环继续执行。</p>
|
<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>
|
<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="2"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> fruit <span class="token keyword">of</span> fruits<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>fruit<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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="6"><span class="token comment">// => orange</span>
|
||||||
</span><span class="code-line line-number" line="7"><span class="token comment">// => banana</span>
|
</span><span class="code-line line-number" line="7"><span class="token comment">// => banana</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="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>
|
</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="15"><span class="token comment">// 1</span>
|
||||||
</span><span class="code-line line-number" line="16"><span class="token comment">// 2</span>
|
</span><span class="code-line line-number" line="16"><span class="token comment">// 2</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="2">
|
||||||
</span><span class="code-line line-number" line="3"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token punctuation">;</span><span class="token punctuation">;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="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="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><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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></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="h2warp-body cols-2"><div class="warp"><div class="warp-header h3warp"><h3>分配给变量的函数</h3><div class="warp-body">
|
</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>
|
<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="2"> <span class="token keyword control-flow">return</span> number <span class="token operator">+</span> <span class="token number">5</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="2"> <span class="token keyword control-flow">return</span> n <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="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="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><span class="code-line line-number" line="10"><span class="token comment">// => The number 4 is an even number: True.</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="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="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="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><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>
|
</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>
|
<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="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="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="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><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>
|
</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>
|
<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="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="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><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>
|
</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>
|
<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="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="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><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>
|
</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></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="h2warp-body cols-2"><div class="warp"><div class="warp-header h3warp"><h3>访问属性</h3><div class="warp-body">
|
</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>
|
<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="2"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'Green'</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">price</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">bulk</span><span class="token operator">:</span> <span class="token string">'$3/kg'</span><span class="token punctuation">,</span> <span class="token literal-property property">smallQty</span><span class="token operator">:</span> <span class="token string">'$4/kg'</span> <span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="2"><span class="token keyword">const</span> trainSchedule <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token comment">// 由于单词之间的空格而无效。</span>
|
</span><span class="code-line line-number" line="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="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><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="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="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><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>
|
</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>
|
<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="2"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Sheldon'</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">score</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="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="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><span class="code-line line-number" line="13"><span class="token comment">// TypeError: TypeError：分配给常量变量。</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="2"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Tom'</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token string">'22'</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="2"> <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">"Matilda"</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">27</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="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="14"><span class="token comment">}
|
||||||
</span></span><span class="code-line line-number" line="15"><span class="token comment">*/</span>
|
</span></span><span class="code-line line-number" line="15"><span class="token comment">*/</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="2"><span class="token keyword">const</span> origObj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> <span class="token function-variable function">changeItUp</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">num<span class="token punctuation">,</span> obj</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="2"><span class="token comment">// 参数返回一个自定义的 dog 对象。</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> <span class="token function-variable function">dogFactory</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age<span class="token punctuation">,</span> breed</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="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="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><span class="code-line line-number" line="12"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="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><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>
|
</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>
|
<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="2"> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Pipey'</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="2"> <span class="token comment">// 方法简写，有一个参数</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token function">start</span><span class="token punctuation">(</span><span class="token parameter">adverb</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="2"> <span class="token literal-property property">_name</span><span class="token operator">:</span> <span class="token string">'Dottie'</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token keyword">get</span> <span class="token function">name</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript Classes</h2><div class="wrap-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 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>
|
<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="2"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">_name</span> <span class="token operator">=</span> name<span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="2"> <span class="token keyword">static</span> staticField <span class="token operator">=</span> <span class="token string">'static field'</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="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="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><span class="code-line line-number" line="6"><span class="token comment">// 预期输出值："static field" </span>
|
||||||
</span></code></pre>
|
</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>
|
<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="2"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="2"><span class="token keyword">class</span> <span class="token class-name">Media</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">info</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="2"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">title<span class="token punctuation">,</span> artist</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">title</span> <span class="token operator">=</span> title<span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="2"> <span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Playing!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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="8"> <span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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></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="h2warp-body cols-2"><div class="warp"><div class="warp-header h3warp"><h3>Export / Import</h3><div class="warp-body">
|
</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>
|
<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="2"><span class="token comment">// 默认导出 Default export</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span>y</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="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="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></span><span class="code-line line-number" line="19"><span class="token exports"><span class="token punctuation">}</span></span>
|
||||||
</span></code></pre>
|
</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>
|
<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="2"><span class="token keyword module">import</span> <span class="token imports">add<span class="token punctuation">,</span> <span class="token punctuation">{</span> subtract<span class="token punctuation">,</span> multiply<span class="token punctuation">,</span> duplicate <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'./myMath.js'</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 8 </span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="2"><span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span>y</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> x <span class="token operator">+</span> y
|
</span><span class="code-line line-number" line="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="19"> duplicate
|
||||||
</span><span class="code-line line-number" line="20"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="20"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="2"><span class="token keyword">const</span> myMath <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./myMath.js'</span><span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>myMath<span class="token punctuation">.</span><span class="token method function property-access">add</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 8 </span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript Promises</h2><div class="wrap-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 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>
|
<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>
|
<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>
|
</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="6"> <span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</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
|
<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="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><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>
|
</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>
|
<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="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="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><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>
|
</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>
|
<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="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="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><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>
|
</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>
|
<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="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="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><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>
|
</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>
|
<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="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>
|
</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="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><span class="code-line line-number" line="14"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="2"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'Result'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="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>
|
</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="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><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>
|
</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>
|
<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="2"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="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>
|
</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="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><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>
|
</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>
|
<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="2"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'*'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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></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="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 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>
|
<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="2"> <span class="token keyword control-flow">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token parameter">resolve</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="2"><span class="token keyword">let</span> pro2 <span class="token operator">=</span> <span class="token number">44</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token keyword">let</span> pro3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="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="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><span class="code-line line-number" line="9"><span class="token comment">// expected => Array [5, 44, "foo"]</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="2"> <span class="token keyword control-flow">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token parameter">resolve</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="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">
|
</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="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><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="2"> <span class="token keyword control-flow">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token parameter">resolve</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JavaScript 请求</h2><div class="wrap-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 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>
|
<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="2"> <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"Rick"</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token string-property property">"id"</span><span class="token operator">:</span> <span class="token string">"11A"</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="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><span class="code-line line-number" line="5"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>另见：<a href="./json.html">JSON 备忘单</a></p>
|
<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>
|
<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><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>
|
</span></code></pre>
|
||||||
<p><code>XMLHttpRequest</code> 是一个浏览器级别的 API，它使客户端能够通过 JavaScript 编写数据传输脚本，而不是 JavaScript 语言的一部分。</p>
|
<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>
|
<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="2">req<span class="token punctuation">.</span><span class="token property-access">responseType</span> <span class="token operator">=</span> <span class="token string">'json'</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3">req<span class="token punctuation">.</span><span class="token method function property-access">open</span><span class="token punctuation">(</span><span class="token string">'GET'</span><span class="token punctuation">,</span> <span class="token string">'/getdata?id=65'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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="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><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>
|
</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>
|
<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="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>
|
</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="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><span class="code-line line-number" line="16"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="2"> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="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="14"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>networkError<span class="token punctuation">.</span><span class="token property-access">message</span><span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="15"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="15"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="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="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="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><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>
|
</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>
|
<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="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>
|
</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="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><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>
|
</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>
|
<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="2"> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">body</span><span class="token operator">:</span> <span class="token known-class-name class-name">JSON</span><span class="token punctuation">.</span><span class="token method function property-access">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">"200"</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="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="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><span class="code-line line-number" line="13"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</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>
|
<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="2"> <span class="token keyword">const</span> wordQuery <span class="token operator">=</span> inputField<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token keyword">const</span> endpoint <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>queryParams<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>wordQuery<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="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><span class="code-line line-number" line="13"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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>
|
</html>
|
||||||
|
|||||||
@ -9,10 +9,10 @@
|
|||||||
<meta keywords="Quick,Reference,cheatsheet,jest">
|
<meta keywords="Quick,Reference,cheatsheet,jest">
|
||||||
<link rel="stylesheet" href="../style/style.css">
|
<link rel="stylesheet" href="../style/style.css">
|
||||||
</head>
|
</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/jest.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>Jest 备忘清单</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/jest.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>Jest 备忘清单</h1><div class="wrap-body">
|
||||||
<p>Jest 是一款优雅、简洁的 JavaScript 测试框架。</p>
|
<p>Jest 是一款优雅、简洁的 JavaScript 测试框架。</p>
|
||||||
</div></header><div class="h1warp-body"><div class="warp"><div class="warp-header h2warp"><h2>入门</h2><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="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>介绍</h3><div class="warp-body">
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>介绍</h3><div class="wrap-body">
|
||||||
<p><a href="https://jestjs.io/">Jest</a> 是一款优雅、简洁的 JavaScript 测试框架。</p>
|
<p><a href="https://jestjs.io/">Jest</a> 是一款优雅、简洁的 JavaScript 测试框架。</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>无需配置，大多数 JS 项目中即装即用，无需配置</li>
|
<li>无需配置，大多数 JS 项目中即装即用，无需配置</li>
|
||||||
@ -21,7 +21,7 @@
|
|||||||
<li>快照， 轻松编写持续追踪大型对象的测试，并在测试旁或代码内显示实时快照。</li>
|
<li>快照， 轻松编写持续追踪大型对象的测试，并在测试旁或代码内显示实时快照。</li>
|
||||||
<li>代码覆盖， 无需其他操作，您仅需添加 --coverage 参数来生成代码覆盖率报告。</li>
|
<li>代码覆盖， 无需其他操作，您仅需添加 --coverage 参数来生成代码覆盖率报告。</li>
|
||||||
</ul>
|
</ul>
|
||||||
</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 function">describe</span><span class="token punctuation">(</span><span class="token string">'makePoniesPink'</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>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">'makePoniesPink'</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="2"> <span class="token function">beforeAll</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="2"> <span class="token function">beforeAll</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 comment">/* 在所有测试之前运行 */</span>
|
</span><span class="code-line line-number" line="3"> <span class="token comment">/* 在所有测试之前运行 */</span>
|
||||||
@ -41,8 +41,8 @@
|
|||||||
</span><span class="code-line line-number" line="17"> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="17"> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="18"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="18"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>匹配器</h2><div class="warp-body">
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>匹配器</h2><div class="wrap-body">
|
||||||
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>基本匹配器</h3><div class="warp-body">
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>基本匹配器</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 function">expect</span><span class="token punctuation">(</span><span class="token number">42</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBe</span><span class="token punctuation">(</span><span class="token number">42</span><span class="token punctuation">)</span> <span class="token comment">// 严格相等 (===)</span>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token number">42</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBe</span><span class="token punctuation">(</span><span class="token number">42</span><span class="token punctuation">)</span> <span class="token comment">// 严格相等 (===)</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token number">42</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access">not</span><span class="token punctuation">.</span><span class="token method function property-access">toBe</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// 严格相等 (!==)</span>
|
</span><span class="code-line line-number" line="2"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token number">42</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access">not</span><span class="token punctuation">.</span><span class="token method function property-access">toBe</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span> <span class="token comment">// 严格相等 (!==)</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toEqual</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 深度相等</span>
|
</span><span class="code-line line-number" line="3"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toEqual</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 深度相等</span>
|
||||||
@ -56,7 +56,7 @@
|
|||||||
</span><span class="code-line line-number" line="11"> <span class="token punctuation">.</span><span class="token property-access">not</span><span class="token punctuation">.</span><span class="token method function property-access">toStrictEqual</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="11"> <span class="token punctuation">.</span><span class="token property-access">not</span><span class="token punctuation">.</span><span class="token method function property-access">toStrictEqual</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p><a href="http://jestjs.io/docs/en/using-matchers">Using matchers</a>, <a href="https://jestjs.io/docs/en/expect">matchers docs</a></p>
|
<p><a href="http://jestjs.io/docs/en/using-matchers">Using matchers</a>, <a href="https://jestjs.io/docs/en/expect">matchers docs</a></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-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 匹配 if 语句视为 true 的任何内容</span>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 匹配 if 语句视为 true 的任何内容</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token comment">// （not false、0、''、null、undefined、NaN）</span>
|
</span><span class="code-line line-number" line="2"><span class="token comment">// （not false、0、''、null、undefined、NaN）</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBeTruthy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="3"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBeTruthy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||||
@ -72,7 +72,7 @@
|
|||||||
</span><span class="code-line line-number" line="13"><span class="token comment">// 匹配真假</span>
|
</span><span class="code-line line-number" line="13"><span class="token comment">// 匹配真假</span>
|
||||||
</span><span class="code-line line-number" line="14"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toEqual</span><span class="token punctuation">(</span>expect<span class="token punctuation">.</span><span class="token method function property-access">any</span><span class="token punctuation">(</span><span class="token known-class-name class-name">Boolean</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="14"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toEqual</span><span class="token punctuation">(</span>expect<span class="token punctuation">.</span><span class="token method function property-access">any</span><span class="token punctuation">(</span><span class="token known-class-name class-name">Boolean</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</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-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 大于</span>
|
<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">expect</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 method function property-access">toBeGreaterThan</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 function">expect</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 method function property-access">toBeGreaterThan</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="3"><span class="token comment">// 大于或等于</span>
|
</span><span class="code-line line-number" line="3"><span class="token comment">// 大于或等于</span>
|
||||||
@ -86,7 +86,7 @@
|
|||||||
</span><span class="code-line line-number" line="11"><span class="token comment">// 原始值的传递类型</span>
|
</span><span class="code-line line-number" line="11"><span class="token comment">// 原始值的传递类型</span>
|
||||||
</span><span class="code-line line-number" line="12"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token number">NaN</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toEqual</span><span class="token punctuation">(</span>expect<span class="token punctuation">.</span><span class="token method function property-access">any</span><span class="token punctuation">(</span><span class="token known-class-name class-name">Number</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="12"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token number">NaN</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toEqual</span><span class="token punctuation">(</span>expect<span class="token punctuation">.</span><span class="token method function property-access">any</span><span class="token punctuation">(</span><span class="token known-class-name class-name">Number</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</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-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 检查字符串是否与正则表达式匹配。</span>
|
<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">expect</span><span class="token punctuation">(</span><span class="token string">'long string'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toMatch</span><span class="token punctuation">(</span><span class="token string">'str'</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="2"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token string">'long string'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toMatch</span><span class="token punctuation">(</span><span class="token string">'str'</span><span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token string">'string'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toEqual</span><span class="token punctuation">(</span>expect<span class="token punctuation">.</span><span class="token method function property-access">any</span><span class="token punctuation">(</span><span class="token known-class-name class-name">String</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="3"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token string">'string'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toEqual</span><span class="token punctuation">(</span>expect<span class="token punctuation">.</span><span class="token method function property-access">any</span><span class="token punctuation">(</span><span class="token known-class-name class-name">String</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||||
@ -99,7 +99,7 @@
|
|||||||
</span><span class="code-line line-number" line="10"> <span class="token punctuation">]</span>
|
</span><span class="code-line line-number" line="10"> <span class="token punctuation">]</span>
|
||||||
</span><span class="code-line line-number" line="11"><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="11"><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</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-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toEqual</span><span class="token punctuation">(</span>expect<span class="token punctuation">.</span><span class="token method function property-access">any</span><span class="token punctuation">(</span><span class="token known-class-name class-name">Array</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toEqual</span><span class="token punctuation">(</span>expect<span class="token punctuation">.</span><span class="token method function property-access">any</span><span class="token punctuation">(</span><span class="token known-class-name class-name">Array</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> exampleArray <span class="token operator">=</span> <span class="token punctuation">[</span>
|
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> exampleArray <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token string">'Alice'</span><span class="token punctuation">,</span> <span class="token string">'Bob'</span><span class="token punctuation">,</span> <span class="token string">'Eve'</span>
|
</span><span class="code-line line-number" line="3"> <span class="token string">'Alice'</span><span class="token punctuation">,</span> <span class="token string">'Bob'</span><span class="token punctuation">,</span> <span class="token string">'Eve'</span>
|
||||||
@ -112,7 +112,7 @@
|
|||||||
</span><span class="code-line line-number" line="10"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</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 literal-property property">a</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="10"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</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 literal-property property">a</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="11"> <span class="token punctuation">.</span><span class="token method function property-access">toContainEqual</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// 包含相等</span>
|
</span><span class="code-line line-number" line="11"> <span class="token punctuation">.</span><span class="token method function property-access">toContainEqual</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// 包含相等</span>
|
||||||
</span></code></pre>
|
</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-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</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 method function property-access">toHaveProperty</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</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 method function property-access">toHaveProperty</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</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 method function property-access">toHaveProperty</span><span class="token punctuation">(</span><span class="token string">'a'</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 function">expect</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</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 method function property-access">toHaveProperty</span><span class="token punctuation">(</span><span class="token string">'a'</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="3"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">b</span><span class="token operator">:</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 punctuation">.</span><span class="token method function property-access">toHaveProperty</span><span class="token punctuation">(</span><span class="token string">'a.b'</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="3"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">b</span><span class="token operator">:</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 punctuation">.</span><span class="token method function property-access">toHaveProperty</span><span class="token punctuation">(</span><span class="token string">'a.b'</span><span class="token punctuation">)</span>
|
||||||
@ -128,7 +128,7 @@
|
|||||||
</span><span class="code-line line-number" line="13"> expect<span class="token punctuation">.</span><span class="token method function property-access">anything</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"> expect<span class="token punctuation">.</span><span class="token method function property-access">anything</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><span class="code-line line-number" line="14"><span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</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 comment">// const fn = jest.fn()</span>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// const fn = jest.fn()</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token comment">// const fn = jest.fn().mockName('Unicorn') -- 命名为 mock, Jest 22+</span>
|
</span><span class="code-line line-number" line="2"><span class="token comment">// const fn = jest.fn().mockName('Unicorn') -- 命名为 mock, Jest 22+</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token comment">// 函数被调用</span>
|
</span><span class="code-line line-number" line="3"><span class="token comment">// 函数被调用</span>
|
||||||
@ -158,7 +158,7 @@
|
|||||||
</span><span class="code-line line-number" line="27"><span class="token comment">// fn.mock.calls[0][0] — 第一次调用的第一个参数</span>
|
</span><span class="code-line line-number" line="27"><span class="token comment">// fn.mock.calls[0][0] — 第一次调用的第一个参数</span>
|
||||||
</span><span class="code-line line-number" line="28"><span class="token function">expect</span><span class="token punctuation">(</span>fn<span class="token punctuation">.</span><span class="token property-access">mock</span><span class="token punctuation">.</span><span class="token property-access">calls</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 number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBe</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="28"><span class="token function">expect</span><span class="token punctuation">(</span>fn<span class="token punctuation">.</span><span class="token property-access">mock</span><span class="token punctuation">.</span><span class="token property-access">calls</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 number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBe</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</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">
|
||||||
<ul>
|
<ul>
|
||||||
<li><code>toBeCalled</code> → <code>toHaveBeenCalled</code></li>
|
<li><code>toBeCalled</code> → <code>toHaveBeenCalled</code></li>
|
||||||
<li><code>toBeCalledWith</code> → <code>toHaveBeenCalledWith</code></li>
|
<li><code>toBeCalledWith</code> → <code>toHaveBeenCalledWith</code></li>
|
||||||
@ -169,7 +169,7 @@
|
|||||||
<li><code>lastReturnedWith</code> → <code>toHaveLastReturnedWith</code></li>
|
<li><code>lastReturnedWith</code> → <code>toHaveLastReturnedWith</code></li>
|
||||||
<li><code>nthReturnedWith</code> → <code>toHaveNthReturnedWith</code></li>
|
<li><code>nthReturnedWith</code> → <code>toHaveNthReturnedWith</code></li>
|
||||||
</ul>
|
</ul>
|
||||||
</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-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 检查对象是否是类的实例。</span>
|
<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">expect</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">A</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBeInstanceOf</span><span class="token punctuation">(</span><span class="token constant">A</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="2"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">A</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBeInstanceOf</span><span class="token punctuation">(</span><span class="token constant">A</span><span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="3">
|
</span><span class="code-line line-number" line="3">
|
||||||
@ -181,7 +181,7 @@
|
|||||||
</span><span class="code-line line-number" line="9"><span class="token comment">// 匹配除 null 或 undefined 之外的任何内容</span>
|
</span><span class="code-line line-number" line="9"><span class="token comment">// 匹配除 null 或 undefined 之外的任何内容</span>
|
||||||
</span><span class="code-line line-number" line="10"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token string">'pizza'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toEqual</span><span class="token punctuation">(</span>expect<span class="token punctuation">.</span><span class="token method function property-access">anything</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="10"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token string">'pizza'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toEqual</span><span class="token punctuation">(</span>expect<span class="token punctuation">.</span><span class="token method function property-access">anything</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</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-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 这可确保某个值与最近的快照匹配。</span>
|
<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">expect</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toMatchSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="2"><span class="token function">expect</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toMatchSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="3">
|
</span><span class="code-line line-number" line="3">
|
||||||
@ -193,7 +193,7 @@
|
|||||||
</span><span class="code-line line-number" line="9"><span class="token comment">// 确保值与最近的快照匹配。</span>
|
</span><span class="code-line line-number" line="9"><span class="token comment">// 确保值与最近的快照匹配。</span>
|
||||||
</span><span class="code-line line-number" line="10"><span class="token function">expect</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toMatchInlineSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="10"><span class="token function">expect</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toMatchInlineSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Promise 匹配器（Jest 20+）</h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Promise 匹配器（Jest 20+）</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 function">test</span><span class="token punctuation">(</span><span class="token string">'resolve to lemon'</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>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'resolve to lemon'</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="2"> <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"> expect<span class="token punctuation">.</span><span class="token method function property-access">assertions</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="3"> expect<span class="token punctuation">.</span><span class="token method function property-access">assertions</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
|
||||||
@ -220,7 +220,7 @@
|
|||||||
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p><a href="https://jestjs.io/docs/en/expect#resolves">resolves 文档</a></p>
|
<p><a href="https://jestjs.io/docs/en/expect#resolves">resolves 文档</a></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-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// const fn = () => {</span>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// const fn = () => {</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token comment">// throw new Error('Out of cheese!')</span>
|
</span><span class="code-line line-number" line="2"><span class="token comment">// throw new Error('Out of cheese!')</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token comment">// }</span>
|
</span><span class="code-line line-number" line="3"><span class="token comment">// }</span>
|
||||||
@ -243,12 +243,12 @@
|
|||||||
</span><span class="code-line line-number" line="20"><span class="token comment">// 测试函数在调用时是否抛出与最新快照匹配的错误。</span>
|
</span><span class="code-line line-number" line="20"><span class="token comment">// 测试函数在调用时是否抛出与最新快照匹配的错误。</span>
|
||||||
</span><span class="code-line line-number" line="21"><span class="token function">expect</span><span class="token punctuation">(</span>fn<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toThrowErrorMatchingSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="21"><span class="token function">expect</span><span class="token punctuation">(</span>fn<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toThrowErrorMatchingSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</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">
|
||||||
<ul>
|
<ul>
|
||||||
<li><code>toThrowError</code> → <code>toThrow</code></li>
|
<li><code>toThrowError</code> → <code>toThrow</code></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div></div></div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>异步测试</h2><div class="warp-body">
|
</div></div></div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>异步测试</h2><div class="wrap-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 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:-->
|
||||||
<p>请参阅 Jest 文档中的 <a href="https://jestjs.io/docs/en/tutorial-async">更多示例</a>。</p>
|
<p>请参阅 Jest 文档中的 <a href="https://jestjs.io/docs/en/tutorial-async">更多示例</a>。</p>
|
||||||
<p>在异步测试中指定一些预期的断言是一个很好的做法，所以如果你的断言根本没有被调用，测试将会失败。</p>
|
<p>在异步测试中指定一些预期的断言是一个很好的做法，所以如果你的断言根本没有被调用，测试将会失败。</p>
|
||||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'async test'</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>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'async test'</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>
|
||||||
@ -263,7 +263,7 @@
|
|||||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">beforeEach</span><span class="token punctuation">(</span>expect<span class="token punctuation">.</span><span class="token property-access">hasAssertions</span><span class="token punctuation">)</span>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">beforeEach</span><span class="token punctuation">(</span>expect<span class="token punctuation">.</span><span class="token property-access">hasAssertions</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>这将验证每个测试用例至少存在一个断言。 它还可以与更具体的 <code>expect.assertions(3)</code> 声明配合使用。</p>
|
<p>这将验证每个测试用例至少存在一个断言。 它还可以与更具体的 <code>expect.assertions(3)</code> 声明配合使用。</p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>async/await</h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>async/await</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 function">test</span><span class="token punctuation">(</span><span class="token string">'async test'</span><span class="token punctuation">,</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>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'async test'</span><span class="token punctuation">,</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"> expect<span class="token punctuation">.</span><span class="token method function property-access">assertions</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"> expect<span class="token punctuation">.</span><span class="token method function property-access">assertions</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="3">
|
</span><span class="code-line line-number" line="3">
|
||||||
@ -271,7 +271,7 @@
|
|||||||
</span><span class="code-line line-number" line="5"> <span class="token function">expect</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBe</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="5"> <span class="token function">expect</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBe</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><div class="warp row-span-2"><div class="warp-header h3warp"><h3>done() 回调</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>done() 回调</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 function">test</span><span class="token punctuation">(</span><span class="token string">'async test'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">done</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'async test'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">done</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"> expect<span class="token punctuation">.</span><span class="token method function property-access">assertions</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"> expect<span class="token punctuation">.</span><span class="token method function property-access">assertions</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="3">
|
</span><span class="code-line line-number" line="3">
|
||||||
@ -289,7 +289,7 @@
|
|||||||
</span><span class="code-line line-number" line="15"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="15"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>将断言包装在 try/catch 块中，否则 Jest 将忽略失败</p>
|
<p>将断言包装在 try/catch 块中，否则 Jest 将忽略失败</p>
|
||||||
</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-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'async test'</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>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'async test'</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="2"> expect<span class="token punctuation">.</span><span class="token method function property-access">assertions</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"> expect<span class="token punctuation">.</span><span class="token method function property-access">assertions</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="3">
|
</span><span class="code-line line-number" line="3">
|
||||||
@ -299,8 +299,8 @@
|
|||||||
</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="7"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>从你的测试中 <em>返回</em> 一个 Promise</p>
|
<p>从你的测试中 <em>返回</em> 一个 Promise</p>
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>模拟</h2><div class="warp-body">
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>模拟</h2><div class="wrap-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 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-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'call the callback'</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>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'call the callback'</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="2"> <span class="token keyword">const</span> callback <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token method function property-access">fn</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> callback <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token method function property-access">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token function">fn</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="3"> <span class="token function">fn</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span>
|
||||||
@ -326,7 +326,7 @@
|
|||||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> callback <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token method function property-access">fn</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 boolean">true</span><span class="token punctuation">)</span>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> callback <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token method function property-access">fn</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 boolean">true</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p><a href="https://jestjs.io/docs/en/mock-function-api">模拟函数文档</a></p>
|
<p><a href="https://jestjs.io/docs/en/mock-function-api">模拟函数文档</a></p>
|
||||||
</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-->
|
</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-->
|
||||||
<p>您的模拟可以返回值：</p>
|
<p>您的模拟可以返回值：</p>
|
||||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> callback
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> callback
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token method function property-access">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">mockReturnValue</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="2"> <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token method function property-access">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">mockReturnValue</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
|
||||||
@ -352,7 +352,7 @@
|
|||||||
</span><span class="code-line line-number" line="4"><span class="token comment">// call 1: false</span>
|
</span><span class="code-line line-number" line="4"><span class="token comment">// call 1: false</span>
|
||||||
</span><span class="code-line line-number" line="5"><span class="token comment">// call 2+: true</span>
|
</span><span class="code-line line-number" line="5"><span class="token comment">// call 2+: true</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>使用 <code>jest.mock</code> 方法模拟模块</h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>使用 <code>jest.mock</code> 方法模拟模块</h3><div class="wrap-body">
|
||||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1">jest<span class="token punctuation">.</span><span class="token method function property-access">mock</span><span class="token punctuation">(</span><span class="token string">'lodash/memoize'</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 class="token parameter">a</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> a<span class="token punctuation">)</span> <span class="token comment">// The original lodash/memoize should exist</span>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1">jest<span class="token punctuation">.</span><span class="token method function property-access">mock</span><span class="token punctuation">(</span><span class="token string">'lodash/memoize'</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 class="token parameter">a</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> a<span class="token punctuation">)</span> <span class="token comment">// The original lodash/memoize should exist</span>
|
||||||
</span><span class="code-line line-number" line="2">jest<span class="token punctuation">.</span><span class="token method function property-access">mock</span><span class="token punctuation">(</span><span class="token string">'lodash/memoize'</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 class="token parameter">a</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> a<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">virtual</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// The original lodash/memoize isn’t required</span>
|
</span><span class="code-line line-number" line="2">jest<span class="token punctuation">.</span><span class="token method function property-access">mock</span><span class="token punctuation">(</span><span class="token string">'lodash/memoize'</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 class="token parameter">a</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> a<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">virtual</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// The original lodash/memoize isn’t required</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
@ -360,7 +360,7 @@
|
|||||||
<blockquote>
|
<blockquote>
|
||||||
<p>注意：当使用 <code>babel-jest</code> 时，对 <code>jest.mock</code> 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 <code>jest.doMock</code>。</p>
|
<p>注意：当使用 <code>babel-jest</code> 时，对 <code>jest.mock</code> 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 <code>jest.doMock</code>。</p>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
</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">
|
||||||
<p>创建一个类似 <code>__mocks__/lodash/memoize.js</code> 的文件：</p>
|
<p>创建一个类似 <code>__mocks__/lodash/memoize.js</code> 的文件：</p>
|
||||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1">module<span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> a
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1">module<span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">exports</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> a
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
@ -369,7 +369,7 @@
|
|||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>注意：当使用 <code>babel-jest</code> 时，对 <code>jest.mock</code> 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 <code>jest.doMock</code>。</p>
|
<p>注意：当使用 <code>babel-jest</code> 时，对 <code>jest.mock</code> 的调用将自动提升到代码块的顶部。 如果您想明确避免这种行为，请使用 <code>jest.doMock</code>。</p>
|
||||||
<p><a href="https://jestjs.io/docs/en/manual-mocks">手动模拟文档</a></p>
|
<p><a href="https://jestjs.io/docs/en/manual-mocks">手动模拟文档</a></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-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> spy <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token method function property-access">spyOn</span><span class="token punctuation">(</span>console<span class="token punctuation">,</span> <span class="token string">'log'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">mockImplementation</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 class="token punctuation">}</span><span class="token punctuation">)</span>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> spy <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token method function property-access">spyOn</span><span class="token punctuation">(</span>console<span class="token punctuation">,</span> <span class="token string">'log'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">mockImplementation</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 class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token function">expect</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">.</span><span class="token property-access">mock</span><span class="token punctuation">.</span><span class="token property-access">calls</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toEqual</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'dope'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'nope'</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 function">expect</span><span class="token punctuation">(</span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token property-access">log</span><span class="token punctuation">.</span><span class="token property-access">mock</span><span class="token punctuation">.</span><span class="token property-access">calls</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toEqual</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'dope'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'nope'</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">spy<span class="token punctuation">.</span><span class="token method function property-access">mockRestore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="3">spy<span class="token punctuation">.</span><span class="token method function property-access">mockRestore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||||
@ -378,7 +378,7 @@
|
|||||||
</span><span class="code-line line-number" line="2"><span class="token function">expect</span><span class="token punctuation">(</span>spy<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toHaveBeenCalled</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="2"><span class="token function">expect</span><span class="token punctuation">(</span>spy<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toHaveBeenCalled</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="3">spy<span class="token punctuation">.</span><span class="token method function property-access">mockRestore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="3">spy<span class="token punctuation">.</span><span class="token method function property-access">mockRestore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>模拟 getter 和 setter (Jest 22.1.0+)</h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>模拟 getter 和 setter (Jest 22.1.0+)</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> <span class="token dom variable">location</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token dom variable">location</span> <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">const</span> getTitle <span class="token operator">=</span> jest
|
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> getTitle <span class="token operator">=</span> jest
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token punctuation">.</span><span class="token method function property-access">spyOn</span><span class="token punctuation">(</span><span class="token dom variable">location</span><span class="token punctuation">,</span> <span class="token string">'title'</span><span class="token punctuation">,</span> <span class="token string">'get'</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">spyOn</span><span class="token punctuation">(</span><span class="token dom variable">location</span><span class="token punctuation">,</span> <span class="token string">'title'</span><span class="token punctuation">,</span> <span class="token string">'get'</span><span class="token punctuation">)</span>
|
||||||
@ -387,7 +387,7 @@
|
|||||||
</span><span class="code-line line-number" line="6"> <span class="token punctuation">.</span><span class="token method function property-access">spyOn</span><span class="token punctuation">(</span><span class="token dom variable">location</span><span class="token punctuation">,</span> <span class="token string">'title'</span><span class="token punctuation">,</span> <span class="token string">'set'</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="6"> <span class="token punctuation">.</span><span class="token method function property-access">spyOn</span><span class="token punctuation">(</span><span class="token dom variable">location</span><span class="token punctuation">,</span> <span class="token string">'title'</span><span class="token punctuation">,</span> <span class="token string">'set'</span><span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="7"> <span class="token punctuation">.</span><span class="token method function property-access">mockImplementation</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 class="token punctuation">}</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="7"> <span class="token punctuation">.</span><span class="token method function property-access">mockImplementation</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 class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><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 class="wrap row-span-3"><div class="wrap-header h3wrap"><h3>定时器模拟</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3--><!--rehype:-->
|
||||||
<p>为使用本机计时器函数（<code>setTimeout</code>、<code>setInterval</code>、<code>clearTimeout</code>、<code>clearInterval</code>）的代码编写同步测试。</p>
|
<p>为使用本机计时器函数（<code>setTimeout</code>、<code>setInterval</code>、<code>clearTimeout</code>、<code>clearInterval</code>）的代码编写同步测试。</p>
|
||||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 启用假计时器</span>
|
<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">jest<span class="token punctuation">.</span><span class="token method function property-access">useFakeTimers</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="2">jest<span class="token punctuation">.</span><span class="token method function property-access">useFakeTimers</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||||
@ -416,7 +416,7 @@
|
|||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>对于特殊情况，请使用 <a href="https://jestjs.io/docs/en/timer-mocks#run-pending-timers">jest.runOnlyPendingTimers()</a>。</p>
|
<p>对于特殊情况，请使用 <a href="https://jestjs.io/docs/en/timer-mocks#run-pending-timers">jest.runOnlyPendingTimers()</a>。</p>
|
||||||
<p><strong>注意：</strong> 您应该在测试用例中调用 <code>jest.useFakeTimers()</code> 以使用其他假计时器方法。</p>
|
<p><strong>注意：</strong> 您应该在测试用例中调用 <code>jest.useFakeTimers()</code> 以使用其他假计时器方法。</p>
|
||||||
</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-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> getTitle <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token method function property-access">fn</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 string">'pizza'</span><span class="token punctuation">)</span>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> getTitle <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token method function property-access">fn</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 string">'pizza'</span><span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> setTitle <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token method function property-access">fn</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> setTitle <span class="token operator">=</span> jest<span class="token punctuation">.</span><span class="token method function property-access">fn</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 dom variable">location</span> <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 keyword">const</span> <span class="token dom variable">location</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||||||
@ -425,7 +425,7 @@
|
|||||||
</span><span class="code-line line-number" line="6"> <span class="token literal-property property">set</span><span class="token operator">:</span> setTitle<span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="6"> <span class="token literal-property property">set</span><span class="token operator">:</span> setTitle<span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</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:-->
|
||||||
<p>对于一个模拟</p>
|
<p>对于一个模拟</p>
|
||||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 清除模拟使用日期</span>
|
<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 comment">// （fn.mock.calls、fn.mock.instances）</span>
|
</span><span class="code-line line-number" line="2"><span class="token comment">// （fn.mock.calls、fn.mock.instances）</span>
|
||||||
@ -447,15 +447,15 @@
|
|||||||
</span><span class="code-line line-number" line="7"><span class="token comment">// 将所有模拟恢复到其原始值。</span>
|
</span><span class="code-line line-number" line="7"><span class="token comment">// 将所有模拟恢复到其原始值。</span>
|
||||||
</span><span class="code-line line-number" line="8">jest<span class="token punctuation">.</span><span class="token method function property-access">restoreAllMocks</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="8">jest<span class="token punctuation">.</span><span class="token method function property-access">restoreAllMocks</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</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-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1">jest<span class="token punctuation">.</span><span class="token method function property-access">mock</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1">jest<span class="token punctuation">.</span><span class="token method function property-access">mock</span><span class="token punctuation">(</span><span class="token string">'fs'</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="2"><span class="token comment">// 模拟模块</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'fs'</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="4"><span class="token comment">// 原始模块</span>
|
||||||
</span><span class="code-line line-number" line="5"><span class="token keyword">const</span> fs <span class="token operator">=</span> require<span class="token punctuation">.</span><span class="token method function property-access">requireActual</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="5"><span class="token keyword">const</span> fs <span class="token operator">=</span> require<span class="token punctuation">.</span><span class="token method function property-access">requireActual</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>数据驱动测试（Jest 23+）</h2><div class="warp-body">
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>数据驱动测试（Jest 23+）</h2><div class="wrap-body">
|
||||||
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>使用不同的数据运行相同的测试</h3><div class="warp-body">
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>使用不同的数据运行相同的测试</h3><div class="wrap-body">
|
||||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1">test<span class="token punctuation">.</span><span class="token method function property-access">each</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1">test<span class="token punctuation">.</span><span class="token method function property-access">each</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="2"> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="3"> <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 punctuation">,</span>
|
</span><span class="code-line line-number" line="3"> <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 punctuation">,</span>
|
||||||
@ -464,7 +464,7 @@
|
|||||||
</span><span class="code-line line-number" line="6"> <span class="token function">expect</span><span class="token punctuation">(</span>a <span class="token operator">+</span> b<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBe</span><span class="token punctuation">(</span>expected<span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="6"> <span class="token function">expect</span><span class="token punctuation">(</span>a <span class="token operator">+</span> b<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBe</span><span class="token punctuation">(</span>expected<span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</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-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1">test<span class="token punctuation">.</span><span class="token property-access">each</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1">test<span class="token punctuation">.</span><span class="token property-access">each</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||||
</span></span></span><span class="code-line line-number" line="2"><span class="token template-string"><span class="token string"> a | b | expected
|
</span></span></span><span class="code-line line-number" line="2"><span class="token template-string"><span class="token string"> a | b | expected
|
||||||
</span></span></span><span class="code-line line-number" line="3"><span class="token template-string"><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> | </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> | </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token number">2</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">
|
</span></span></span><span class="code-line line-number" line="3"><span class="token template-string"><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> | </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> | </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token number">2</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">
|
||||||
@ -474,7 +474,7 @@
|
|||||||
</span><span class="code-line line-number" line="7"> <span class="token function">expect</span><span class="token punctuation">(</span>a <span class="token operator">+</span> b<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBe</span><span class="token punctuation">(</span>expected<span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="7"> <span class="token function">expect</span><span class="token punctuation">(</span>a <span class="token operator">+</span> b<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBe</span><span class="token punctuation">(</span>expected<span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>或在“describe”级别</h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>或在“describe”级别</h3><div class="wrap-body">
|
||||||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1">describe<span class="token punctuation">.</span><span class="token method function property-access">each</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1">describe<span class="token punctuation">.</span><span class="token method function property-access">each</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token punctuation">[</span><span class="token string">'mobile'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'tablet'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'desktop'</span><span class="token punctuation">]</span>
|
</span><span class="code-line line-number" line="2"> <span class="token punctuation">[</span><span class="token string">'mobile'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'tablet'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'desktop'</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 class="token punctuation">(</span><span class="token string">'checkout flow on %s'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">viewport</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 punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token string">'checkout flow on %s'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">viewport</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||||
@ -484,17 +484,17 @@
|
|||||||
</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="7"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p><a href="https://jestjs.io/docs/en/api#describeeachtablename-fn-timeout">describe.each() 文档</a>、<a href="https://jestjs.io/docs/en/api#testeachtablename-fn-timeout">test.each() 文档</a>,</p>
|
<p><a href="https://jestjs.io/docs/en/api#describeeachtablename-fn-timeout">describe.each() 文档</a>、<a href="https://jestjs.io/docs/en/api#testeachtablename-fn-timeout">test.each() 文档</a>,</p>
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>跳过测试</h2><div class="warp-body"><!--rehype:body-class=cols-2-->
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>跳过测试</h2><div class="wrap-body"><!--rehype:body-class=cols-2-->
|
||||||
</div></div><div class="h2warp-body cols-2"><div class="warp"><div class="warp-header h3warp"><h3>不要运行这些测试</h3><div class="warp-body">
|
</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-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1">describe<span class="token punctuation">.</span><span class="token method function property-access">skip</span><span class="token punctuation">(</span><span class="token string">'makePoniesPink'</span><span class="token spread operator">...</span>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1">describe<span class="token punctuation">.</span><span class="token method function property-access">skip</span><span class="token punctuation">(</span><span class="token string">'makePoniesPink'</span><span class="token spread operator">...</span>
|
||||||
</span><span class="code-line line-number" line="2">tests<span class="token punctuation">.</span><span class="token method function property-access">skip</span><span class="token punctuation">(</span><span class="token string">'make each pony pink'</span><span class="token spread operator">...</span>
|
</span><span class="code-line line-number" line="2">tests<span class="token punctuation">.</span><span class="token method function property-access">skip</span><span class="token punctuation">(</span><span class="token string">'make each pony pink'</span><span class="token spread operator">...</span>
|
||||||
</span></code></pre>
|
</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-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1">describe<span class="token punctuation">.</span><span class="token method function property-access">only</span><span class="token punctuation">(</span><span class="token string">'makePoniesPink'</span><span class="token spread operator">...</span>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1">describe<span class="token punctuation">.</span><span class="token method function property-access">only</span><span class="token punctuation">(</span><span class="token string">'makePoniesPink'</span><span class="token spread operator">...</span>
|
||||||
</span><span class="code-line line-number" line="2">tests<span class="token punctuation">.</span><span class="token method function property-access">only</span><span class="token punctuation">(</span><span class="token string">'make each pony pink'</span><span class="token spread operator">...</span>
|
</span><span class="code-line line-number" line="2">tests<span class="token punctuation">.</span><span class="token method function property-access">only</span><span class="token punctuation">(</span><span class="token string">'make each pony pink'</span><span class="token spread operator">...</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>测试有副作用的模块</h2><div class="warp-body"><!--rehype:body-class=cols-1-->
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>测试有副作用的模块</h2><div class="wrap-body"><!--rehype:body-class=cols-1-->
|
||||||
</div></div><div class="h2warp-body cols-1"><div class="warp"><div class="warp-header h3warp"><h3>实例</h3><div class="warp-body">
|
</div></div><div class="h2wrap-body cols-1"><div class="wrap"><div class="wrap-header h3wrap"><h3>实例</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> modulePath <span class="token operator">=</span> <span class="token string">'../module-to-test'</span>
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> modulePath <span class="token operator">=</span> <span class="token string">'../module-to-test'</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token function">afterEach</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="2"><span class="token function">afterEach</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"> jest<span class="token punctuation">.</span><span class="token method function property-access">resetModules</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="3"> jest<span class="token punctuation">.</span><span class="token method function property-access">resetModules</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||||
@ -511,10 +511,10 @@
|
|||||||
</span><span class="code-line line-number" line="14"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="14"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>Node.js 和 Jest 会缓存你需要的模块。 要测试具有副作用的模块，您需要在测试之间重置模块注册表</p>
|
<p>Node.js 和 Jest 会缓存你需要的模块。 要测试具有副作用的模块，您需要在测试之间重置模块注册表</p>
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>另见</h2><div class="warp-body">
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>另见</h2><div class="wrap-body">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://github.com/sapegin/jest-cheat-sheet">Jest cheat sheet</a> <em>(github.com)</em></li>
|
<li><a href="https://github.com/sapegin/jest-cheat-sheet">Jest cheat sheet</a> <em>(github.com)</em></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</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><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer></body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -9,10 +9,10 @@
|
|||||||
<meta keywords="Quick,Reference,cheatsheet,json">
|
<meta keywords="Quick,Reference,cheatsheet,json">
|
||||||
<link rel="stylesheet" href="../style/style.css">
|
<link rel="stylesheet" href="../style/style.css">
|
||||||
</head>
|
</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/json.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>JSON 备忘清单</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/json.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>JSON 备忘清单</h1><div class="wrap-body">
|
||||||
<p>这是理解和编写 JSON 格式配置文件的快速参考备忘单。</p>
|
<p>这是理解和编写 JSON 格式配置文件的快速参考备忘单。</p>
|
||||||
</div></header><div class="h1warp-body"><div class="warp"><div class="warp-header h2warp"><h2>入门</h2><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="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>介绍</h3><div class="warp-body">
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>介绍</h3><div class="wrap-body">
|
||||||
<p><a href="https://json.org/">JSON</a> 是一种基于文本的轻量级开放标准，专为人类可读的数据交换而设计。</p>
|
<p><a href="https://json.org/">JSON</a> 是一种基于文本的轻量级开放标准，专为人类可读的数据交换而设计。</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>JSON 代表 JavaScript 对象表示法</li>
|
<li>JSON 代表 JavaScript 对象表示法</li>
|
||||||
@ -21,7 +21,7 @@
|
|||||||
<li>JSON 文件扩展名为 <code>.json</code></li>
|
<li>JSON 文件扩展名为 <code>.json</code></li>
|
||||||
<li>JSON Internet 媒体类型为 <code>application/json</code></li>
|
<li>JSON Internet 媒体类型为 <code>application/json</code></li>
|
||||||
</ul>
|
</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-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Jason"</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="2"> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Jason"</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token property">"age"</span><span class="token operator">:</span> <span class="token number">39</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="3"> <span class="token property">"age"</span><span class="token operator">:</span> <span class="token number">39</span><span class="token punctuation">,</span>
|
||||||
@ -35,7 +35,7 @@
|
|||||||
</span><span class="code-line line-number" line="11"> <span class="token punctuation">]</span>
|
</span><span class="code-line line-number" line="11"> <span class="token punctuation">]</span>
|
||||||
</span><span class="code-line line-number" line="12"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="12"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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 class="table-thead-hide">
|
<table class="table-thead-hide">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -74,7 +74,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</div></div></div><div class="warp" style="grid-row: span 3/span 3;"><div class="warp-header h3warp"><h3>字符串</h3><div class="warp-body"><!--rehype:data-warp-style=grid-row: span 3/span 3;--><!--rehype:-->
|
</div></div></div><div class="wrap" style="grid-row: span 3/span 3;"><div class="wrap-header h3wrap"><h3>字符串</h3><div class="wrap-body"><!--rehype:data-wrap-style=grid-row: span 3/span 3;--><!--rehype:-->
|
||||||
<table class="table-thead-hide">
|
<table class="table-thead-hide">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -121,18 +121,18 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</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-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://quickref.me"</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="2"> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://quickref.me"</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token property">"msg"</span> <span class="token operator">:</span> <span class="token string">"Hi,\n\"QuickRef.ME\""</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="3"> <span class="token property">"msg"</span> <span class="token operator">:</span> <span class="token string">"Hi,\n\"QuickRef.ME\""</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="4"> <span class="token property">"intro"</span><span class="token operator">:</span> <span class="token string">"Share quick reference and cheat sheet for developers."</span>
|
</span><span class="code-line line-number" line="4"> <span class="token property">"intro"</span><span class="token operator">:</span> <span class="token string">"Share quick reference and cheat sheet for developers."</span>
|
||||||
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span> <span class="token property">"foo"</span><span class="token operator">:</span> 'bar' <span class="token punctuation">}</span>
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span> <span class="token property">"foo"</span><span class="token operator">:</span> 'bar' <span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>Have to be delimited by double quotes</p>
|
<p>Have to be delimited by double quotes</p>
|
||||||
</div></div></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></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:-->
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -155,7 +155,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</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-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token property">"positive"</span> <span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="2"> <span class="token property">"positive"</span> <span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token property">"negative"</span> <span class="token operator">:</span> <span class="token number">-1</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="3"> <span class="token property">"negative"</span> <span class="token operator">:</span> <span class="token number">-1</span><span class="token punctuation">,</span>
|
||||||
@ -164,11 +164,11 @@
|
|||||||
</span><span class="code-line line-number" line="6"> <span class="token property">"zero"</span> <span class="token operator">:</span> <span class="token number">0</span>
|
</span><span class="code-line line-number" line="6"> <span class="token property">"zero"</span> <span class="token operator">:</span> <span class="token number">0</span>
|
||||||
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span> <span class="token property">"foo"</span><span class="token operator">:</span> 0xFF <span class="token punctuation">}</span>
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span> <span class="token property">"foo"</span><span class="token operator">:</span> 0xFF <span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>在JSON中，只能使用十进制文字</p>
|
<p>在JSON中，只能使用十进制文字</p>
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h3warp"><h3>对象 Objects</h3><div class="warp-body">
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>对象 Objects</h3><div class="wrap-body">
|
||||||
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token property">"color"</span><span class="token operator">:</span> <span class="token string">"Purple"</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="2"> <span class="token property">"color"</span><span class="token operator">:</span> <span class="token string">"Purple"</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"210"</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="3"> <span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"210"</span><span class="token punctuation">,</span>
|
||||||
@ -181,11 +181,11 @@
|
|||||||
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>用逗号分隔的多个键/值对</p>
|
<p>用逗号分隔的多个键/值对</p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>数组 Arrays</h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>数组 Arrays</h3><div class="wrap-body">
|
||||||
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><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 number">5</span><span class="token punctuation">]</span>
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><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 number">5</span><span class="token punctuation">]</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>以 <code>[</code> 开始并以 <code>]</code> 结束</p>
|
<p>以 <code>[</code> 开始并以 <code>]</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-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token property">"children"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
</span><span class="code-line line-number" line="2"> <span class="token property">"children"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token punctuation">{</span> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Jimmy Smith"</span><span class="token punctuation">,</span> <span class="token property">"age"</span><span class="token operator">:</span> <span class="token number">15</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 property">"name"</span><span class="token operator">:</span> <span class="token string">"Jimmy Smith"</span><span class="token punctuation">,</span> <span class="token property">"age"</span><span class="token operator">:</span> <span class="token number">15</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||||
@ -193,14 +193,14 @@
|
|||||||
</span><span class="code-line line-number" line="5"> <span class="token punctuation">]</span>
|
</span><span class="code-line line-number" line="5"> <span class="token punctuation">]</span>
|
||||||
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token property">"attributes"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"a1"</span><span class="token punctuation">,</span> <span class="token string">"a2"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="2"> <span class="token property">"attributes"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"a1"</span><span class="token punctuation">,</span> <span class="token string">"a2"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token property">"methods"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"getter"</span><span class="token punctuation">,</span> <span class="token string">"setter"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="3"> <span class="token property">"methods"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"getter"</span><span class="token punctuation">,</span> <span class="token string">"setter"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="4"> <span class="token property">"empty_array"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
|
</span><span class="code-line line-number" line="4"> <span class="token property">"empty_array"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
|
||||||
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token property">"my_sequences"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
</span><span class="code-line line-number" line="2"> <span class="token property">"my_sequences"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||||
</span><span class="code-line line-number" line="3"> <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 punctuation">,</span>
|
</span><span class="code-line line-number" line="3"> <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 punctuation">,</span>
|
||||||
@ -210,7 +210,7 @@
|
|||||||
</span><span class="code-line line-number" line="7"> <span class="token punctuation">]</span>
|
</span><span class="code-line line-number" line="7"> <span class="token punctuation">]</span>
|
||||||
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token property">"Mark McGwire"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="2"> <span class="token property">"Mark McGwire"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token property">"hr"</span><span class="token operator">:</span> <span class="token number">65</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="3"> <span class="token property">"hr"</span><span class="token operator">:</span> <span class="token number">65</span><span class="token punctuation">,</span>
|
||||||
@ -222,7 +222,7 @@
|
|||||||
</span><span class="code-line line-number" line="9"> <span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="9"> <span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token property">"Jack"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="2"> <span class="token property">"Jack"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token property">"id"</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="3"> <span class="token property">"id"</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||||
@ -235,8 +235,8 @@
|
|||||||
</span><span class="code-line line-number" line="10"> <span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="10"> <span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="11"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="11"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>在 JavaScript 中访问 JSON</h2><div class="warp-body">
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>在 JavaScript 中访问 JSON</h2><div class="wrap-body">
|
||||||
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>访问对象</h3><div class="warp-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">let</span> myObject <span class="token operator">=</span> <span class="token punctuation">{</span>
|
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> myObject <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">"Jason"</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">"Jason"</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token string-property property">"last"</span><span class="token operator">:</span> <span class="token string">"Doe"</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="3"> <span class="token string-property property">"last"</span><span class="token operator">:</span> <span class="token string">"Doe"</span><span class="token punctuation">,</span>
|
||||||
@ -277,7 +277,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</div></div></div><div class="warp" style="grid-row: span 2/span 2;"><div class="warp-header h3warp"><h3>访问嵌套</h3><div class="warp-body"><!--rehype:data-warp-style=grid-row: span 2/span 2;--><!--rehype:-->
|
</div></div></div><div class="wrap" style="grid-row: span 2/span 2;"><div class="wrap-header h3wrap"><h3>访问嵌套</h3><div class="wrap-body"><!--rehype:data-wrap-style=grid-row: span 2/span 2;--><!--rehype:-->
|
||||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> myObject <span class="token operator">=</span> <span class="token punctuation">{</span>
|
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> myObject <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">"ref"</span><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">"ref"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token string-property property">"name"</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 string-property property">"name"</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||||||
@ -336,7 +336,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</div></div></div><div class="warp" style="grid-row: span 2/span 2;"><div class="warp-header h3warp"><h3>访问对象数组</h3><div class="warp-body"><!--rehype:data-warp-style=grid-row: span 2/span 2;--><!--rehype:-->
|
</div></div></div><div class="wrap" style="grid-row: span 2/span 2;"><div class="wrap-header h3wrap"><h3>访问对象数组</h3><div class="wrap-body"><!--rehype:data-wrap-style=grid-row: span 2/span 2;--><!--rehype:-->
|
||||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> myArray <span class="token operator">=</span> <span class="token punctuation">[</span>
|
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> myArray <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="2"> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"Jason"</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="3"> <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"Jason"</span><span class="token punctuation">,</span>
|
||||||
@ -395,7 +395,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</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> myArray <span class="token operator">=</span> <span class="token punctuation">[</span>
|
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> myArray <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token string">"Jason"</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="2"> <span class="token string">"Jason"</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token string">"Doe"</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="3"> <span class="token string">"Doe"</span><span class="token punctuation">,</span>
|
||||||
@ -428,12 +428,12 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>另见</h2><div class="warp-body">
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>另见</h2><div class="wrap-body">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://www.json.org/json-en.html">JSON</a> <em>(json.org)</em></li>
|
<li><a href="https://www.json.org/json-en.html">JSON</a> <em>(json.org)</em></li>
|
||||||
<li><a href="http://jsoneditoronline.org/">JSON Editor Online</a> <em>(jsoneditoronline.org)</em></li>
|
<li><a href="http://jsoneditoronline.org/">JSON Editor Online</a> <em>(jsoneditoronline.org)</em></li>
|
||||||
<li><a href="https://tableconvert.com/json-to-markdown">Convert JSON Array to Markdown Table, CSV and more</a> <em>(tableconvert.com)</em></li>
|
<li><a href="https://tableconvert.com/json-to-markdown">Convert JSON Array to Markdown Table, CSV and more</a> <em>(tableconvert.com)</em></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</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><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer></body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -9,10 +9,10 @@
|
|||||||
<meta keywords="Quick,Reference,cheatsheet,markdown">
|
<meta keywords="Quick,Reference,cheatsheet,markdown">
|
||||||
<link rel="stylesheet" href="../style/style.css">
|
<link rel="stylesheet" href="../style/style.css">
|
||||||
</head>
|
</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/markdown.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>Markdown 备忘清单</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/markdown.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>Markdown 备忘清单</h1><div class="wrap-body">
|
||||||
<p>这是 Markdown 语法的快速参考备忘单。</p>
|
<p>这是 Markdown 语法的快速参考备忘单。</p>
|
||||||
</div></header><div class="h1warp-body"><div class="warp"><div class="warp-header h2warp"><h2>Markdown 快速参考</h2><div class="warp-body">
|
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2>Markdown 快速参考</h2><div class="wrap-body">
|
||||||
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>标题 (atx 风格)</h3><div class="warp-body">
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>标题 (atx 风格)</h3><div class="wrap-body">
|
||||||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">#</span> h1</span>
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important"><span class="token punctuation">#</span> h1</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token title important"><span class="token punctuation">##</span> h2</span>
|
</span><span class="code-line line-number" line="2"><span class="token title important"><span class="token punctuation">##</span> h2</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token title important"><span class="token punctuation">###</span> h3</span>
|
</span><span class="code-line line-number" line="3"><span class="token title important"><span class="token punctuation">###</span> h3</span>
|
||||||
@ -20,21 +20,21 @@
|
|||||||
</span><span class="code-line line-number" line="5"><span class="token title important"><span class="token punctuation">#####</span> h5</span>
|
</span><span class="code-line line-number" line="5"><span class="token title important"><span class="token punctuation">#####</span> h5</span>
|
||||||
</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">######</span> h6</span>
|
</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">######</span> h6</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>标题 (setext 风格)</h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>标题 (setext 风格)</h3><div class="wrap-body">
|
||||||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important">Header 1
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important">Header 1
|
||||||
</span></span><span class="code-line line-number" line="2"><span class="token title important"><span class="token punctuation">========</span></span>
|
</span></span><span class="code-line line-number" line="2"><span class="token title important"><span class="token punctuation">========</span></span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important">Header 2
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important">Header 2
|
||||||
</span></span><span class="code-line line-number" line="2"><span class="token title important"><span class="token punctuation">--------</span></span>
|
</span></span><span class="code-line line-number" line="2"><span class="token title important"><span class="token punctuation">--------</span></span>
|
||||||
</span></code></pre>
|
</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-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token blockquote punctuation">></span> 这是一个
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token blockquote punctuation">></span> 这是一个
|
||||||
</span><span class="code-line line-number" line="2"><span class="token blockquote punctuation">></span> 块引用
|
</span><span class="code-line line-number" line="2"><span class="token blockquote punctuation">></span> 块引用
|
||||||
</span><span class="code-line line-number" line="3"><span class="token blockquote punctuation">></span>
|
</span><span class="code-line line-number" line="3"><span class="token blockquote punctuation">></span>
|
||||||
</span><span class="code-line line-number" line="4"><span class="token blockquote punctuation">> ></span> 嵌套
|
</span><span class="code-line line-number" line="4"><span class="token blockquote punctuation">> ></span> 嵌套
|
||||||
</span><span class="code-line line-number" line="5"><span class="token blockquote punctuation">> ></span> 块引用
|
</span><span class="code-line line-number" line="5"><span class="token blockquote punctuation">> ></span> 块引用
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><div class="warp" style="grid-row: span 2/span 2;"><div class="warp-header h3warp"><h3>无序列表</h3><div class="warp-body"><!--rehype:data-warp-style=grid-row: span 2/span 2;--><!--rehype:-->
|
</div></div></div><div class="wrap" style="grid-row: span 2/span 2;"><div class="wrap-header h3wrap"><h3>无序列表</h3><div class="wrap-body"><!--rehype:data-wrap-style=grid-row: span 2/span 2;--><!--rehype:-->
|
||||||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token list punctuation">*</span> Item 1
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token list punctuation">*</span> Item 1
|
||||||
</span><span class="code-line line-number" line="2"><span class="token list punctuation">*</span> Item 2
|
</span><span class="code-line line-number" line="2"><span class="token list punctuation">*</span> Item 2
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token list punctuation">*</span> item 3a
|
</span><span class="code-line line-number" line="3"> <span class="token list punctuation">*</span> item 3a
|
||||||
@ -52,13 +52,13 @@
|
|||||||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token list punctuation">-</span> [ ] Checkbox off
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token list punctuation">-</span> [ ] Checkbox off
|
||||||
</span><span class="code-line line-number" line="2"><span class="token list punctuation">-</span> [x] Checkbox on
|
</span><span class="code-line line-number" line="2"><span class="token list punctuation">-</span> [x] Checkbox on
|
||||||
</span></code></pre>
|
</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-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token list punctuation">1.</span> Item 1
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token list punctuation">1.</span> Item 1
|
||||||
</span><span class="code-line line-number" line="2"><span class="token list punctuation">2.</span> Item 2
|
</span><span class="code-line line-number" line="2"><span class="token list punctuation">2.</span> Item 2
|
||||||
</span><span class="code-line line-number" line="3"> a. item 3a
|
</span><span class="code-line line-number" line="3"> a. item 3a
|
||||||
</span><span class="code-line line-number" line="4"> b. item 3b
|
</span><span class="code-line line-number" line="4"> b. item 3b
|
||||||
</span></code></pre>
|
</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-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token url">[<span class="token content">link</span>](<span class="token url">http://google.com</span>)</span>
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token url">[<span class="token content">link</span>](<span class="token url">http://google.com</span>)</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token url">[<span class="token content">link</span>][<span class="token variable">google</span>]</span>
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token url">[<span class="token content">link</span>][<span class="token variable">google</span>]</span>
|
||||||
@ -66,7 +66,7 @@
|
|||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><http://google.com>
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><http://google.com>
|
||||||
</span></code></pre>
|
</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-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token italic"><span class="token punctuation">*</span><span class="token content">斜体</span><span class="token punctuation">*</span></span>
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token italic"><span class="token punctuation">*</span><span class="token content">斜体</span><span class="token punctuation">*</span></span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token italic"><span class="token punctuation">_</span><span class="token content">斜体</span><span class="token punctuation">_</span></span>
|
</span><span class="code-line line-number" line="2"><span class="token italic"><span class="token punctuation">_</span><span class="token content">斜体</span><span class="token punctuation">_</span></span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
@ -76,7 +76,7 @@
|
|||||||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token code-snippet code keyword">`内联代码`</span>
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token code-snippet code keyword">`内联代码`</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token strike"><span class="token punctuation">~~</span><span class="token content">删除</span><span class="token punctuation">~~</span></span>
|
</span><span class="code-line line-number" line="2"><span class="token strike"><span class="token punctuation">~~</span><span class="token content">删除</span><span class="token punctuation">~~</span></span>
|
||||||
</span></code></pre>
|
</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">
|
||||||
<p>连字符</p>
|
<p>连字符</p>
|
||||||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token hr punctuation">---</span>
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token hr punctuation">---</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
@ -86,7 +86,7 @@
|
|||||||
<p>下划线</p>
|
<p>下划线</p>
|
||||||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1">___
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1">___
|
||||||
</span></code></pre>
|
</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-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">javascript</span>
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">javascript</span>
|
||||||
</span></span><span class="code-line line-number" line="2"><span class="token code"><span class="token code-block language-javascript"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">"This is a block code"</span><span class="token punctuation">)</span></span>
|
</span></span><span class="code-line line-number" line="2"><span class="token code"><span class="token code-block language-javascript"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">"This is a block code"</span><span class="token punctuation">)</span></span>
|
||||||
</span></span><span class="code-line line-number" line="3"><span class="token code"><span class="token punctuation">```</span></span>
|
</span></span><span class="code-line line-number" line="3"><span class="token code"><span class="token punctuation">```</span></span>
|
||||||
@ -97,10 +97,10 @@
|
|||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"> 4 空格缩进做一个代码块
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"> 4 空格缩进做一个代码块
|
||||||
</span></code></pre>
|
</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-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token code-snippet code keyword">`Inline code`</span> 周围有反引号
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token code-snippet code keyword">`Inline code`</span> 周围有反引号
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div></div></div><div class="warp" style="grid-column: span 2/span 2;"><div class="warp-header h3warp"><h3>表格</h3><div class="warp-body"><!--rehype:data-warp-style=grid-column: span 2/span 2;--><!--rehype:-->
|
</div></div></div></div></div><div class="wrap" style="grid-column: span 2/span 2;"><div class="wrap-header h3wrap"><h3>表格</h3><div class="wrap-body"><!--rehype:data-wrap-style=grid-column: span 2/span 2;--><!--rehype:-->
|
||||||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token table"><span class="token table-header-row"><span class="token punctuation">|</span><span class="token table-header important"> 左栏 </span><span class="token punctuation">|</span><span class="token table-header important"> 中间栏 </span><span class="token punctuation">|</span><span class="token table-header important"> 右栏 </span><span class="token punctuation">|</span>
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token table"><span class="token table-header-row"><span class="token punctuation">|</span><span class="token table-header important"> 左栏 </span><span class="token punctuation">|</span><span class="token table-header important"> 中间栏 </span><span class="token punctuation">|</span><span class="token table-header important"> 右栏 </span><span class="token punctuation">|</span>
|
||||||
</span></span></span><span class="code-line line-number" line="2"><span class="token table"><span class="token table-header-row"></span><span class="token table-line"><span class="token punctuation">|</span><span class="token punctuation">:------------</span><span class="token punctuation">|</span><span class="token punctuation">:-------------:</span><span class="token punctuation">|</span><span class="token punctuation">-------------:</span><span class="token punctuation">|</span>
|
</span></span></span><span class="code-line line-number" line="2"><span class="token table"><span class="token table-header-row"></span><span class="token table-line"><span class="token punctuation">|</span><span class="token punctuation">:------------</span><span class="token punctuation">|</span><span class="token punctuation">:-------------:</span><span class="token punctuation">|</span><span class="token punctuation">-------------:</span><span class="token punctuation">|</span>
|
||||||
</span></span></span><span class="code-line line-number" line="3"><span class="token table"><span class="token table-line"></span><span class="token table-data-rows"><span class="token punctuation">|</span><span class="token table-data"> 单元格 1 </span><span class="token punctuation">|</span><span class="token table-data"> 居中 </span><span class="token punctuation">|</span><span class="token table-data"> $1600 </span><span class="token punctuation">|</span>
|
</span></span></span><span class="code-line line-number" line="3"><span class="token table"><span class="token table-line"></span><span class="token table-data-rows"><span class="token punctuation">|</span><span class="token table-data"> 单元格 1 </span><span class="token punctuation">|</span><span class="token table-data"> 居中 </span><span class="token punctuation">|</span><span class="token table-data"> $1600 </span><span class="token punctuation">|</span>
|
||||||
@ -113,22 +113,22 @@
|
|||||||
</span></span></span><span class="code-line line-number" line="4"><span class="token table"><span class="token table-data-rows"><span class="token table-data"> 单元格 2 </span><span class="token punctuation">|</span><span class="token table-data"> 单元格 3 </span><span class="token punctuation">|</span><span class="token table-data"> $12</span>
|
</span></span></span><span class="code-line line-number" line="4"><span class="token table"><span class="token table-data-rows"><span class="token table-data"> 单元格 2 </span><span class="token punctuation">|</span><span class="token table-data"> 单元格 3 </span><span class="token punctuation">|</span><span class="token table-data"> $12</span>
|
||||||
</span></span></span></code></pre>
|
</span></span></span></code></pre>
|
||||||
<p>Markdown 表格生成器：<a href="https://tableconvert.com/">tableconvert.com</a></p>
|
<p>Markdown 表格生成器：<a href="https://tableconvert.com/">tableconvert.com</a></p>
|
||||||
</div></div></div><div class="warp" style="grid-column: span 2/span 2;"><div class="warp-header h3warp"><h3>图片</h3><div class="warp-body"><!--rehype:data-warp-style=grid-column: span 2/span 2;--><!--rehype:-->
|
</div></div></div><div class="wrap" style="grid-column: span 2/span 2;"><div class="wrap-header h3wrap"><h3>图片</h3><div class="wrap-body"><!--rehype:data-wrap-style=grid-column: span 2/span 2;--><!--rehype:-->
|
||||||
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token url"><span class="token operator">!</span>[<span class="token content">GitHub Logo</span>](<span class="token url">/images/logo.png</span>)</span>
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token url"><span class="token operator">!</span>[<span class="token content">GitHub Logo</span>](<span class="token url">/images/logo.png</span>)</span>
|
||||||
</span><span class="code-line line-number" line="2">
|
</span><span class="code-line line-number" line="2">
|
||||||
</span><span class="code-line line-number" line="3"><span class="token url"><span class="token operator">!</span>[<span class="token content">Alt Text</span>](<span class="token url">url</span>)</span>
|
</span><span class="code-line line-number" line="3"><span class="token url"><span class="token operator">!</span>[<span class="token content">Alt Text</span>](<span class="token url">url</span>)</span>
|
||||||
</span></code></pre>
|
</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-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token url">[<span class="token content">![GitHub Logo</span>](<span class="token url">/images/logo.png</span>)</span>](https://github.com/)
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token url">[<span class="token content">![GitHub Logo</span>](<span class="token url">/images/logo.png</span>)</span>](https://github.com/)
|
||||||
</span><span class="code-line line-number" line="2">
|
</span><span class="code-line line-number" line="2">
|
||||||
</span><span class="code-line line-number" line="3"><span class="token url">[<span class="token content">![Alt Text</span>](<span class="token url">image_url</span>)</span>](link_url)
|
</span><span class="code-line line-number" line="3"><span class="token url">[<span class="token content">![Alt Text</span>](<span class="token url">image_url</span>)</span>](link_url)
|
||||||
</span></code></pre>
|
</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-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token url"><span class="token operator">!</span>[<span class="token content">alt text</span>][<span class="token variable">logo</span>]</span>
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token url"><span class="token operator">!</span>[<span class="token content">alt text</span>][<span class="token variable">logo</span>]</span>
|
||||||
</span><span class="code-line line-number" line="2">
|
</span><span class="code-line line-number" line="2">
|
||||||
</span><span class="code-line line-number" line="3"><span class="token url-reference url"><span class="token punctuation">[</span><span class="token variable">logo</span><span class="token punctuation">]</span><span class="token punctuation">:</span> /images/logo.png <span class="token string">"Logo Title"</span></span>
|
</span><span class="code-line line-number" line="3"><span class="token url-reference url"><span class="token punctuation">[</span><span class="token variable">logo</span><span class="token punctuation">]</span><span class="token punctuation">:</span> /images/logo.png <span class="token string">"Logo Title"</span></span>
|
||||||
</span></code></pre>
|
</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">
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -201,5 +201,5 @@
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
</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>
|
</html>
|
||||||
|
|||||||
@ -9,10 +9,10 @@
|
|||||||
<meta keywords="Quick,Reference,cheatsheet,npm">
|
<meta keywords="Quick,Reference,cheatsheet,npm">
|
||||||
<link rel="stylesheet" href="../style/style.css">
|
<link rel="stylesheet" href="../style/style.css">
|
||||||
</head>
|
</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/npm.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>npm 备忘清单</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/npm.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>npm 备忘清单</h1><div class="wrap-body">
|
||||||
<p>这个 npm 快速参考备忘单显示了它的常用命令使用清单。</p>
|
<p>这个 npm 快速参考备忘单显示了它的常用命令使用清单。</p>
|
||||||
</div></header><div class="h1warp-body"><div class="warp"><div class="warp-header h2warp"><h2>常用命令</h2><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="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>包管理</h3><div class="warp-body">
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>包管理</h3><div class="wrap-body">
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -48,7 +48,7 @@
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<p><code>--save</code> 是 npm@5 的默认值。 以前，使用不带 <code>--save</code> 的 <code>npm install</code> 不会更新 package.json。</p>
|
<p><code>--save</code> 是 npm@5 的默认值。 以前，使用不带 <code>--save</code> 的 <code>npm install</code> 不会更新 package.json。</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">
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -107,7 +107,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</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>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -134,7 +134,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</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>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -161,7 +161,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</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-->
|
</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-->
|
||||||
<p>将某人添加为所有者</p>
|
<p>将某人添加为所有者</p>
|
||||||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1"><span class="token function">npm</span> owner <span class="token function">add</span> USERNAME PACKAGENAME
|
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1"><span class="token function">npm</span> owner <span class="token function">add</span> USERNAME PACKAGENAME
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
@ -178,5 +178,5 @@
|
|||||||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1"><span class="token function">npm</span> outdated <span class="token punctuation">[</span>PACKAGE<span class="token punctuation">]</span>
|
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1"><span class="token function">npm</span> outdated <span class="token punctuation">[</span>PACKAGE<span class="token punctuation">]</span>
|
||||||
</span></code></pre>
|
</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>
|
</html>
|
||||||
|
|||||||
406
docs/package.json.html
Normal file
406
docs/package.json.html
Normal file
@ -0,0 +1,406 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en" data-color-mode="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>package.json 备忘清单
|
||||||
|
& package.json cheatsheet & Quick Reference</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta description="这个快速参考备忘清单，显示了关于 package.json 文件中所需内容的全部内容。为开发人员分享快速参考备忘单。">
|
||||||
|
<meta keywords="Quick,Reference,cheatsheet,package.json">
|
||||||
|
<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/package.json.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>package.json 备忘清单</h1><div class="wrap-body">
|
||||||
|
<p>这个快速参考备忘清单，显示了关于 package.json 文件中所需内容的全部内容。</p>
|
||||||
|
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2>重要字段</h2><div class="wrap-body">
|
||||||
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>介绍</h3><div class="wrap-body">
|
||||||
|
<p>本快速参考备忘清单是您需要了解的关于 package.json 文件中所需内容的全部内容。 它必须是实际的 JSON，而不仅仅是 JavaScript 对象字面量。</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://docs.npmjs.com/files/package.json">npm 文档</a> <em>(npmjs.com)</em></li>
|
||||||
|
<li><a href="https://classic.yarnpkg.com/en/docs/package-json">yarnpkg 文档</a> <em>(yarnpkg.com)</em></li>
|
||||||
|
</ul>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3><code>name</code></h3><div class="wrap-body">
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"my-awesome-package"</span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p><strong>规则</strong></p>
|
||||||
|
<ul>
|
||||||
|
<li>必须小于或等于214个字符(包括 <code>@scope/</code> 范围包)</li>
|
||||||
|
<li>不能以点（<code>.</code>）或下划线（<code>_</code>）开头</li>
|
||||||
|
<li>名称中不得包含大写字母</li>
|
||||||
|
<li>必须仅使用URL安全字符</li>
|
||||||
|
</ul>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3><code>version</code></h3><div class="wrap-body">
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"version"</span><span class="token operator">:</span> <span class="token string">"1.0.0"</span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>包的当前版本，严格遵循 <a href="http://semver.org/lang/zh-CN/">Semantic Versioning 2.0.0</a> 语义化版本规范。</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Tips</h3><div class="wrap-body">
|
||||||
|
<ul>
|
||||||
|
<li>不要使用和 <code>Node.js</code> 核心模块相同的名字。</li>
|
||||||
|
<li>不要在名字里包含 <code>js</code> 或者 <code>node</code> 单词。</li>
|
||||||
|
<li>短小精悍，让人看到名字就大概了解包的功能，记住它也会被用在 <code>require()</code> 调用里。</li>
|
||||||
|
<li>保证名字在 <a href="https://www.npmjs.com/">npm registry</a> 里是唯一的。</li>
|
||||||
|
<li>name 和 version 字段一起用于创建唯一ID</li>
|
||||||
|
</ul>
|
||||||
|
<p>如果没有 <code>name</code> 和<code>version</code> 字段，您的包将无法安装</p>
|
||||||
|
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3>安装 <code>name</code> 包</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
|
||||||
|
<pre class="language-sh"><code class="language-sh code-highlight"><span class="code-line line-number" line="1"><span class="token function">yarn</span> <span class="token function">add</span> <span class="token punctuation">[</span>包名<span class="token punctuation">]</span>
|
||||||
|
</span><span class="code-line line-number" line="2"><span class="token comment"># or</span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token function">npm</span> <span class="token function">install</span> <span class="token punctuation">[</span>包名<span class="token punctuation">]</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>安装后存放位置</p>
|
||||||
|
<pre><code class="code-highlight"><span class="code-line line-number" line="1">node_modules/[包名]
|
||||||
|
</span></code></pre>
|
||||||
|
<p>npmjs 下载地址</p>
|
||||||
|
<pre class="wrap-text"><code class="code-highlight"><span class="code-line line-number" line="1">https://registry.npmjs.org/[包名]/-/[包名]-[version].tgz
|
||||||
|
</span></code></pre><!--rehype:className=wrap-text-->
|
||||||
|
<p>这是您的 <code>包</code> 的名称。 它在URL中使用，作为参数命令行，以及 <code>node_modules</code> 中的目录名。</p>
|
||||||
|
</div></div></div></div></div><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><code>description</code></h3><div class="wrap-body">
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"我的包的概要简短描述"</span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>帮助使用者了解包的功能的字符串，包管理器也会把这个字符串作为搜索关键词。</p>
|
||||||
|
</div></div></div><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3><code>license</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2 row-span-2--><!--rehype:-->
|
||||||
|
<p>所有包都应该指定许可证，以便让用户了解他们是在什么授权下使用此包，以及此包还有哪些附加限制。</p>
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"license"</span><span class="token operator">:</span> <span class="token string">"MIT"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token property">"license"</span><span class="token operator">:</span> <span class="token string">"(MIT or GPL-3.0)"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token property">"license"</span><span class="token operator">:</span> <span class="token string">"SEE LICENSE IN LICENSE_FILENAME.txt"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token property">"license"</span><span class="token operator">:</span> <span class="token string">"UNLICENSED"</span>
|
||||||
|
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>鼓励使用开源 <a href="https://opensource.org/licenses/alphabetical">(OSI-approved)</a> 许可证，除非你有特别的原因不用它。 如果你开发的包是你工作的一部分，最好和公司讨论后再做决定。</p>
|
||||||
|
<p><strong>license字段必须是以下之一:</strong></p>
|
||||||
|
<ul>
|
||||||
|
<li>如果你使用标准的许可证，需要一个有效地 <a href="https://spdx.org/licenses/">SPDX 许可证标识</a>。</li>
|
||||||
|
<li>如果你用多种标准许可证，需要有效的 <a href="https://www.npmjs.com/package/spdx">SPDX 许可证表达式2.0语法表达式</a>。</li>
|
||||||
|
<li>如果你使用非标准的许可证，一个 <code>SEE LICENSE IN <文件名></code> 字符串指向你的包里顶级目录的一个 <文件名>。</li>
|
||||||
|
<li>如果你不想在任何条款下授权其他人使用你的私有或未公开的包，一个 <code>UNLICENSED</code> 字符串。</li>
|
||||||
|
</ul>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3><code>keywords</code></h3><div class="wrap-body">
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"keywords"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token string">"short"</span><span class="token punctuation">,</span> <span class="token string">"relevant"</span><span class="token punctuation">,</span> <span class="token string">"keywords"</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>
|
||||||
|
<p>一个字符串数组，当在包管理器里搜索包时很有用。</p>
|
||||||
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>链接类字段</h2><div class="wrap-body">
|
||||||
|
<p>各种指向项目文档、issues 上报，以及代码托管网站的链接字段。</p>
|
||||||
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3><code>homepage</code></h3><div class="wrap-body">
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"homepage"</span><span class="token operator">:</span> <span class="token string">"https://your-package.org"</span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>是包的项目主页或者文档首页。</p>
|
||||||
|
</div></div></div><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3><code>repository</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2 row-span-2--><!--rehype:-->
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"repository"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"git"</span><span class="token punctuation">,</span> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://github.com/user/repo.git"</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token property">"repository"</span><span class="token operator">:</span> <span class="token string">"github:user/repo"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token property">"repository"</span><span class="token operator">:</span> <span class="token string">"gitlab:user/repo"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="7"> <span class="token property">"repository"</span><span class="token operator">:</span> <span class="token string">"bitbucket:user/repo"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="8"> <span class="token property">"repository"</span><span class="token operator">:</span> <span class="token string">"gist:a1b2c3d4e5f"</span>
|
||||||
|
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>包的实际代码所在的位置。</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3><code>bugs</code></h3><div class="wrap-body">
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"bugs"</span><span class="token operator">:</span> <span class="token string">"https://github.com/user/repo/issues"</span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>问题反馈系统的 URL，或者是 email 地址之类的链接。用户通过该途径向你反馈问题。</p>
|
||||||
|
</div></div></div></div></div><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><code>author</code></h3><div class="wrap-body">
|
||||||
|
<p>项目的维护者。</p>
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"author"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Your Name"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token property">"email"</span><span class="token operator">:</span> <span class="token string">"you@xxx.com"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"http://your-x.com"</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="7"> <span class="token property">"author"</span><span class="token operator">:</span> <span class="token string">"Your Name <you@xxx.com> (http://your-x.com)"</span>
|
||||||
|
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>作者信息，一个人。</p>
|
||||||
|
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3><code>contributors</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"contributors"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token punctuation">{</span> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Your Friend"</span><span class="token punctuation">,</span> <span class="token property">"email"</span><span class="token operator">:</span> <span class="token string">"friend@xxx.com"</span><span class="token punctuation">,</span> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"http://friends-xx.com"</span> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token punctuation">{</span> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Other Friend"</span><span class="token punctuation">,</span> <span class="token property">"email"</span><span class="token operator">:</span> <span class="token string">"other@xxx.com"</span><span class="token punctuation">,</span> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"http://other-xx.com"</span> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token property">"contributors"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||||
|
</span><span class="code-line line-number" line="7"> <span class="token string">"Your Friend <friend@xxx.com> (http://friends-xx.com)"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="8"> <span class="token string">"Other Friend <other@xxx.com> (http://other-xx.com)"</span>
|
||||||
|
</span><span class="code-line line-number" line="9"> <span class="token punctuation">]</span>
|
||||||
|
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>贡献者信息，可能很多人。</p>
|
||||||
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>文件类信息</h2><div class="wrap-body">
|
||||||
|
<p>指定包含在项目中的文件，以及项目的入口文件。</p>
|
||||||
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3><code>files</code></h3><div class="wrap-body">
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"files"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token string">"filename.js"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token string">"directory/"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token string">"glob/*.{js,json}"</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token punctuation">]</span>
|
||||||
|
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>项目包含的文件，可以是单独的文件、整个文件夹，或者通配符匹配到的文件。</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3><code>main</code></h3><div class="wrap-body">
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"main"</span><span class="token operator">:</span> <span class="token string">"filename.js"</span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>项目的入口文件。</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3><code>man</code></h3><div class="wrap-body">
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"man"</span><span class="token operator">:</span> <span class="token string">"./man/doc.1"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token property">"man"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"./man/doc.1"</span><span class="token punctuation">,</span> <span class="token string">"./man/doc.2"</span><span class="token punctuation">]</span>
|
||||||
|
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>项目的入口文件。</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3><code>directories</code></h3><div class="wrap-body">
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"directories"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token property">"lib"</span><span class="token operator">:</span> <span class="token string">"path/to/lib/"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token property">"bin"</span><span class="token operator">:</span> <span class="token string">"path/to/bin/"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token property">"man"</span><span class="token operator">:</span> <span class="token string">"path/to/man/"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token property">"doc"</span><span class="token operator">:</span> <span class="token string">"path/to/doc/"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="7"> <span class="token property">"example"</span><span class="token operator">:</span> <span class="token string">"path/to/example/"</span>
|
||||||
|
</span><span class="code-line line-number" line="8"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>当你的包安装时，你可以指定确切的位置来放二进制文件、man pages、文档、例子等。</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3><code>bin</code></h3><div class="wrap-body">
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"bin"</span><span class="token operator">:</span> <span class="token string">"bin.js"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token property">"bin"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token property">"命令名称"</span><span class="token operator">:</span> <span class="token string">"bin/命令路径/命令名称.js"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token property">"other-command"</span><span class="token operator">:</span> <span class="token string">"bin/other-command"</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>随着项目一起被安装的可执行文件。</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3><code>types</code></h3><div class="wrap-body">
|
||||||
|
<p>这是一个只在 <a href="https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html">TypeScript</a> 中生效的字段，如果您的包有一个 <code>main.js</code> 文件，您还需要在 <code>package.json</code> 文件中指明主声明文件。 将 <code>types</code> 属性设置为指向 <code>bundled</code> 的声明文件。 例如：</p>
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"types"</span><span class="token operator">:</span> <span class="token string">"./lib/main.d.ts"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>如果您的主声明文件名为 <code>index.d.ts</code> 并且位于包的根目录（<code>index.js</code>旁边），则不需要标记 <code>types</code> 属性，建议这样做。</p>
|
||||||
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>打包包字段</h2><div class="wrap-body">
|
||||||
|
</div></div><div class="h2wrap-body"><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3><code>esnext</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2 row-span-2--><!--rehype:-->
|
||||||
|
<p>完整的<a href="http://2ality.com/2017/04/transpiling-dependencies-babel.html">提案在这里</a>。 简短说明：</p>
|
||||||
|
<ul>
|
||||||
|
<li><code>esnext</code>：ES模块中使用阶段4功能（或更旧版本）的源代码，未编译。</li>
|
||||||
|
<li><code>main</code>：指向一个CommonJS模块（或UMD模块），其 <code>JavaScript</code> 与 <code>Node.js</code> 当前可以处理的一样现代。</li>
|
||||||
|
<li>大多数 <code>module</code> 用例应该可以通过 <code>esnext</code> 处理。</li>
|
||||||
|
<li><code>browser</code> 可以通过 <code>esnext</code> 的扩展版本来处理</li>
|
||||||
|
</ul>
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"main"</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token property">"esnext"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token property">"main"</span><span class="token operator">:</span> <span class="token string">"main-esnext.js"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token property">"browser"</span><span class="token operator">:</span> <span class="token string">"browser-specific-main-esnext.js"</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>另请参阅：<a href="http://2ality.com/2017/06/pkg-esnext.html">通过 npm 交付未编译的源代码</a></p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3><code>module</code></h3><div class="wrap-body">
|
||||||
|
<p><code>pkg.module</code> 将指向具有 <code>ES2015</code> 模块语法的模块，但仅指向目标环境支持的语法功能。 完整的描述<a href="https://github.com/rollup/rollup/wiki/pkg.module">在这里</a>。</p>
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"module"</span><span class="token operator">:</span> <span class="token string">"dist/my-package.esm.js"</span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>支持：<a href="https://github.com/rollup/rollup-plugin-node-resolve">rollup</a>, <a href="https://webpack.js.org/configuration/resolve/#resolve-mainfields">webpack</a></p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3><code>browser</code></h3><div class="wrap-body">
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token property">"browser"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"module-a"</span><span class="token operator">:</span> <span class="token string">"./shims/module-a.js"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token property">"./server/only.js"</span><span class="token operator">:</span> <span class="token string">"./shims/client-only.js"</span>
|
||||||
|
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>字段由模块作者提供，作为 <code>JavaScript</code> 包或组件工具的提示，用于打包模块以供客户端使用。 提案就<a href="https://github.com/defunctzombie/package-browser-field-spec">在这里</a>。</p>
|
||||||
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>任务类字段</h2><div class="wrap-body">
|
||||||
|
<p>包里还可以包含一些可执行脚本或者其他配置信息。</p>
|
||||||
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3><code>scripts</code></h3><div class="wrap-body">
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token property">"build-project"</span><span class="token operator">:</span> <span class="token string">"node build-project.js"</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>
|
||||||
|
<p>脚本是定义自动化开发相关任务的好方法，比如使用一些简单的构建过程或开发工具。 在 <code>scripts</code> 字段里定义的脚本，可以通过 <code>yarn run <script></code> 命令来执行。 例如，上述 <code>build-project</code> 脚本可以通过 <code>yarn run build-project</code> 调用，并执行 <code>node build-project.js</code>。</p>
|
||||||
|
<p>有一些特殊的脚本名称。 如果定义了 <code>preinstall</code> 脚本，它会在包安装前被调用。 出于兼容性考虑，<code>install</code>、<code>postinstall</code> 和 <code>prepublish</code> 脚本会在包完成安装后被调用。</p>
|
||||||
|
<p><code>start</code> 脚本的默认值为 <code>node server.js</code>。</p>
|
||||||
|
<p>参考文档：<a href="https://docs.npmjs.com/files/package.json#default-values">npm docs</a></p>
|
||||||
|
</div></div></div><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3>特定的 <code>scripts</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2 row-span-2--><!--rehype:-->
|
||||||
|
<p>对于以下脚本，<code>npm</code> 支持 <code>package.json</code> 文件的 <code>scripts</code> 默认命令字段：</p>
|
||||||
|
<ul>
|
||||||
|
<li><code>prepublish</code>: 在打包并发布包之前运行，以及在没有任何参数的本地 <code>npm</code> 安装之前运行。 （见下文）</li>
|
||||||
|
<li><code>prepare</code>: 在打包和发布包之前运行，在没有任何参数的本地 <code>npm install</code> 上运行，以及安装 git 依赖项时（见下文）。 这是在 <code>preublish</code> 之后运行，但是在 <code>preublishOnly</code> 之前运行。</li>
|
||||||
|
<li><code>prepublishOnly</code>: 在包准备和打包之前运行，仅限于npm发布。 （见下文。）</li>
|
||||||
|
<li><code>prepack</code>: 在打包 <code>tarball</code> 之前运行（在 <code>npm pack</code>，<code>npm publish</code>，以及安装 git 依赖项时）</li>
|
||||||
|
<li><code>postpack</code>: 在生成 <code>tarball</code> 之后运行并移动到其最终目标。</li>
|
||||||
|
<li><code>publish</code>, <code>postpublish</code>: 在包发布后运行。</li>
|
||||||
|
<li><code>preinstall</code>: 在安装软件包之前运行。</li>
|
||||||
|
<li><code>install</code>, <code>postinstall</code>: 安装包后运行。</li>
|
||||||
|
<li><code>preuninstall</code>, <code>uninstall</code>: 在卸载软件包之前运行。</li>
|
||||||
|
<li><code>postuninstall</code>: 在卸载软件包之后运行。</li>
|
||||||
|
<li><code>preversion</code>: 在改变包版本之前运行。</li>
|
||||||
|
<li><code>version</code>: 改变包版本后运行，但提交之前。</li>
|
||||||
|
<li><code>postversion</code>: 改变包版本后运行，然后提交。</li>
|
||||||
|
<li><code>pretest</code>, <code>test</code>, <code>posttest</code>: 由 <code>npm test</code> 命令运行。</li>
|
||||||
|
<li><code>prestop</code>, <code>stop</code>, <code>poststop</code>: 由 <code>npm stop</code> 命令运行。</li>
|
||||||
|
<li><code>prestart</code>, <code>start</code>, <code>poststart</code>: 由 <code>npm start</code> 命令运行。</li>
|
||||||
|
<li><code>prerestart</code>, <code>restart</code>, <code>postrestart</code>: 由 <code>npm restart</code> 命令运行。 注意：如果没有提供重启脚本，<code>npm restart</code> 将运行 <code>stop</code> 和<code>start</code> 脚本。</li>
|
||||||
|
<li><code>preshrinkwrap</code>, <code>shrinkwrap</code>, <code>postshrinkwrap</code>: 由 <code>npm shrinkwrap</code> 命令运行。</li>
|
||||||
|
</ul>
|
||||||
|
<p>参考文档：<a href="https://docs.npmjs.com/misc/scripts">npm docs</a>.</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3><code>config</code></h3><div class="wrap-body">
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"config"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token property">"port"</span><span class="token operator">:</span> <span class="token string">"8080"</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>
|
||||||
|
<p>配置你的脚本的选项或参数。</p>
|
||||||
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>依赖描述类字段</h2><div class="wrap-body">
|
||||||
|
<p>你的包很可能依赖其他包。你可以在你的 <code>package.json</code> 文件里指定那些依赖。</p>
|
||||||
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3><code>dependencies</code></h3><div class="wrap-body">
|
||||||
|
<p>这些是你的包的开发版和发布版都需要的依赖。</p>
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token property">"package-1"</span><span class="token operator">:</span> <span class="token string">"^3.1.4"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token property">"package-2"</span><span class="token operator">:</span> <span class="token string">"file:./path/to/dir"</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<blockquote>
|
||||||
|
<p>你可以指定一个确切的版本、一个最小的版本 (比如 <code>>=</code>) 或者一个版本范围 (比如 <code>>= ... <</code>)。<br>包也可以指向本地的一个目录文件夹。</p>
|
||||||
|
</blockquote>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3><code>devDependencies</code></h3><div class="wrap-body">
|
||||||
|
<p>这些是只在你的包开发期间需要，但是生产环境不会被安装的包。</p>
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"devDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token property">"package-2"</span><span class="token operator">:</span> <span class="token string">"^0.4.2"</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3><code>peerDependencies</code></h3><div class="wrap-body">
|
||||||
|
<p>平行依赖允许你说明你的包和其他包版本的兼容性。</p>
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"peerDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token property">"package-3"</span><span class="token operator">:</span> <span class="token string">"^2.7.18"</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3><code>peerDependenciesMeta</code></h3><div class="wrap-body">
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"peerDependenciesMeta"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token property">"node-sass"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token property">"optional"</span><span class="token operator">:</span> <span class="token boolean">true</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token property">"sass"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="7"> <span class="token property">"optional"</span><span class="token operator">:</span> <span class="token boolean">true</span>
|
||||||
|
</span><span class="code-line line-number" line="8"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="9"> <span class="token property">"fibers"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="10"> <span class="token property">"optional"</span><span class="token operator">:</span> <span class="token boolean">true</span>
|
||||||
|
</span><span class="code-line line-number" line="11"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="12"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="13"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>添加可选设置以消除丢失的对等依赖性警告，<a href="https://github.com/yarnpkg/yarn/pull/6671">#6671</a> 。</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3><code>optionalDependencies</code></h3><div class="wrap-body">
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"optionalDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token property">"package-5"</span><span class="token operator">:</span> <span class="token string">"^1.6.1"</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>
|
||||||
|
<p>可选依赖可以用于你的包，但不是必需的。如果可选包没有找到，安装还可以继续。</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3><code>bundledDependencies</code></h3><div class="wrap-body">
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"bundledDependencies"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token string">"package-4"</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>
|
||||||
|
<p>打包依赖是发布你的包时将会一起打包的一个包名数组。</p>
|
||||||
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>系统</h2><div class="wrap-body">
|
||||||
|
<p>你可以提供和你的包关联的系统级的信息，比如操作系统兼容性之类。</p>
|
||||||
|
</div></div><div class="h2wrap-body"><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3><code>engines</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2 row-span-2--><!--rehype:-->
|
||||||
|
<p>指定使用你的包客户必须使用的版本，这将检查 <code>process.versions</code> 以及当前 <code>yarn</code> 版本。</p>
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"engines"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token property">"node"</span><span class="token operator">:</span> <span class="token string">"^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token property">"node"</span><span class="token operator">:</span> <span class="token string">">=4.4.7 <7.0.0"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token property">"zlib"</span><span class="token operator">:</span> <span class="token string">"^1.2.8"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token property">"yarn"</span><span class="token operator">:</span> <span class="token string">"^0.14.0"</span>
|
||||||
|
</span><span class="code-line line-number" line="7"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>此检查遵守正常的 <a href="http://semver.org/lang/zh-CN/">semver</a> 规则，但有一个例外。 它允许预发布版本匹配未明确指定预发布的 <a href="http://semver.org/lang/zh-CN/">semver</a>。 例如，<code>1.4.0-rc.0</code> 匹配 <code>>=1.3.0</code>，但它与典型的 <code>semver</code> 检查不匹配。</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3><code>os</code></h3><div class="wrap-body">
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"os"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"darwin"</span><span class="token punctuation">,</span> <span class="token string">"linux"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token property">"os"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"!win32"</span><span class="token punctuation">]</span>
|
||||||
|
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>此选项指定你的包的操作系统兼容性，它会检查 <code>process.platform</code>。</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3><code>cpu</code></h3><div class="wrap-body">
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"cpu"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"x64"</span><span class="token punctuation">,</span> <span class="token string">"ia32"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token property">"cpu"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"!arm"</span><span class="token punctuation">,</span> <span class="token string">"!mips"</span><span class="token punctuation">]</span>
|
||||||
|
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>使用这个选项指定你的包将只能在某些 CPU 体系架构上运行，这会检查 <code>process.arch</code>。</p>
|
||||||
|
</div></div></div></div></div><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><code>private</code></h3><div class="wrap-body">
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"private"</span><span class="token operator">:</span> <span class="token boolean">true</span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>如果你不想你的包发布到包管理器(npm 或者 私有包管理)，设置为 <code>true</code>。</p>
|
||||||
|
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3><code>publishConfig</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
|
||||||
|
<p>这些配置值将在你的包发布时使用。比如，你可以给包打标签。</p>
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"publishConfig"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token property">"registry"</span><span class="token operator">:</span> <span class="token string">"https://registry.npm.taobao.org"</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>
|
||||||
|
<p>这是一组将在发布时使用的配置值。 如果要设置标记，注册表或访问权限，则特别方便，以便确保给定的包未标记为 <code>latest</code>，发布到全局公共 <code>registry</code> 或默认情况下，作用域模块(@scoped)是私有的。</p>
|
||||||
|
<p>可以覆盖任何配置值，但只有 <code>tag</code>，<code>registry</code> 和 <code>access</code> 可能对于发布而言很重要，<a href="https://docs.npmjs.com/misc/config#config-settings">npm-config</a>。</p>
|
||||||
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>Yarn</h2><div class="wrap-body">
|
||||||
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3><code>flat</code></h3><div class="wrap-body">
|
||||||
|
<p>如果你的包只允许给定依赖的一个版本，你想强制和命令行上 <a href="#">yarn install --flat</a> 相同的行为，把这个值设为 <code>true</code>。</p>
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"flat"</span><span class="token operator">:</span> <span class="token boolean">true</span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>请注意，如果你的 <code>package.json</code> 包含 <code>"flat": true</code> 并且其它包依赖你的包 (比如你在构建一个库，而不是应用)， 其它那些包也需要在它们的 <code>package.json</code> 加上 <code>"flat": true</code>，或者在命令行上用 <code>yarn install --flat</code> 安装。</p>
|
||||||
|
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3><code>resolutions</code></h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
|
||||||
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token property">"resolutions"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token property">"transitive-package-1"</span><span class="token operator">:</span> <span class="token string">"0.0.29"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token property">"transitive-package-2"</span><span class="token operator">:</span> <span class="token string">"file:./local-forks/transitive-package-2"</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token property">"dependencies-package-1/transitive-package-3"</span><span class="token operator">:</span> <span class="token string">"^2.1.1"</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>允许您覆盖特定嵌套依赖项的版本。 有关完整规范，请参见<a href="https://github.com/yarnpkg/rfcs/blob/master/implemented/0000-selective-versions-resolutions.md">选择性版本解析 RFC</a>。</p>
|
||||||
|
<p>注意，<code>yarn install --flat</code> 命令将会自动在 <code>package.json</code> 文件里加入 <code>resolutions</code> 字段。</p>
|
||||||
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>另见</h2><div class="wrap-body">
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://jaywcjlove.github.io/package.json">PACKAGE.JSON 中文说明</a> <em>(github.io)</em></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer></body>
|
||||||
|
</html>
|
||||||
@ -9,10 +9,10 @@
|
|||||||
<meta keywords="Quick,Reference,cheatsheet,sketch">
|
<meta keywords="Quick,Reference,cheatsheet,sketch">
|
||||||
<link rel="stylesheet" href="../style/style.css">
|
<link rel="stylesheet" href="../style/style.css">
|
||||||
</head>
|
</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/sketch.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>Sketch 备忘清单</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/sketch.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>Sketch 备忘清单</h1><div class="wrap-body">
|
||||||
<p>这个 Sketch 快速参考备忘单显示了它的键盘快捷键和命令。</p>
|
<p>这个 Sketch 快速参考备忘单显示了它的键盘快捷键和命令。</p>
|
||||||
</div></header><div class="h1warp-body"><div class="warp"><div class="warp-header h2warp"><h2>快捷键</h2><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="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>插入</h3><div class="warp-body">
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>插入</h3><div class="wrap-body">
|
||||||
<table class="table-thead-hide">
|
<table class="table-thead-hide">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -63,7 +63,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</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:-->
|
||||||
<table class="table-thead-hide">
|
<table class="table-thead-hide">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -126,7 +126,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</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:-->
|
||||||
<table class="table-thead-hide">
|
<table class="table-thead-hide">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -197,7 +197,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</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 class="table-thead-hide">
|
<table class="table-thead-hide">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -236,7 +236,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</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 class="table-thead-hide">
|
<table class="table-thead-hide">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -283,7 +283,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</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 class="table-thead-hide">
|
<table class="table-thead-hide">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -334,7 +334,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</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 class="table-thead-hide">
|
<table class="table-thead-hide">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -405,10 +405,10 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>另见</h2><div class="warp-body">
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>另见</h2><div class="wrap-body">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://www.sketch.com/">Sketch 官网</a> <em>(sketch.com)</em></li>
|
<li><a href="https://www.sketch.com/">Sketch 官网</a> <em>(sketch.com)</em></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</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><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer></body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -9,16 +9,16 @@
|
|||||||
<meta keywords="Quick,Reference,cheatsheet,toml">
|
<meta keywords="Quick,Reference,cheatsheet,toml">
|
||||||
<link rel="stylesheet" href="../style/style.css">
|
<link rel="stylesheet" href="../style/style.css">
|
||||||
</head>
|
</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/toml.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>TOML 备忘清单</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/toml.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>TOML 备忘清单</h1><div class="wrap-body">
|
||||||
<p>这是 TOML 格式配置文件语法的快速参考备忘单。</p>
|
<p>这是 TOML 格式配置文件语法的快速参考备忘单。</p>
|
||||||
</div></header><div class="h1warp-body"><div class="warp"><div class="warp-header h2warp"><h2>入门</h2><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="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>介绍</h3><div class="warp-body">
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>介绍</h3><div class="wrap-body">
|
||||||
<p><a href="https://toml.io/en/">TOML</a> 是一种最小的配置文件格式，由于明显的语义而易于阅读。</p>
|
<p><a href="https://toml.io/en/">TOML</a> 是一种最小的配置文件格式，由于明显的语义而易于阅读。</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://toml.io/en/latest">Document</a> <em>(toml.io)</em></li>
|
<li><a href="https://toml.io/en/latest">Document</a> <em>(toml.io)</em></li>
|
||||||
<li><a href="https://learnxinyminutes.com/docs/toml/">Learn X in Y minutes</a> <em>(learnxinyminutes.com)</em></li>
|
<li><a href="https://learnxinyminutes.com/docs/toml/">Learn X in Y minutes</a> <em>(learnxinyminutes.com)</em></li>
|
||||||
</ul>
|
</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-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">bool</span> <span class="token punctuation">=</span> <span class="token boolean">true</span>
|
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">bool</span> <span class="token punctuation">=</span> <span class="token boolean">true</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token key property">date</span> <span class="token punctuation">=</span> <span class="token date number">2006-05-27T07:32:00Z</span>
|
</span><span class="code-line line-number" line="2"><span class="token key property">date</span> <span class="token punctuation">=</span> <span class="token date number">2006-05-27T07:32:00Z</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token key property">string</span> <span class="token punctuation">=</span> <span class="token string">"hello"</span>
|
</span><span class="code-line line-number" line="3"><span class="token key property">string</span> <span class="token punctuation">=</span> <span class="token string">"hello"</span>
|
||||||
@ -26,30 +26,30 @@
|
|||||||
</span><span class="code-line line-number" line="5"><span class="token key property">float</span> <span class="token punctuation">=</span> <span class="token number">3.14</span>
|
</span><span class="code-line line-number" line="5"><span class="token key property">float</span> <span class="token punctuation">=</span> <span class="token number">3.14</span>
|
||||||
</span><span class="code-line line-number" line="6"><span class="token key property">scientificNotation</span> <span class="token punctuation">=</span> <span class="token number">1e+12</span>
|
</span><span class="code-line line-number" line="6"><span class="token key property">scientificNotation</span> <span class="token punctuation">=</span> <span class="token number">1e+12</span>
|
||||||
</span></code></pre>
|
</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-yaml"><code class="language-yaml code-highlight"><span class="code-line line-number" line="1"><span class="token comment"># A single line comment example</span>
|
<pre class="language-yaml"><code class="language-yaml code-highlight"><span class="code-line line-number" line="1"><span class="token comment"># A single line comment example</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token comment"># block level comment example</span>
|
</span><span class="code-line line-number" line="2"><span class="token comment"># block level comment example</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token comment"># 注释行 1</span>
|
</span><span class="code-line line-number" line="3"><span class="token comment"># 注释行 1</span>
|
||||||
</span><span class="code-line line-number" line="4"><span class="token comment"># 注释行 2</span>
|
</span><span class="code-line line-number" line="4"><span class="token comment"># 注释行 2</span>
|
||||||
</span><span class="code-line line-number" line="5"><span class="token comment"># 注释行 3</span>
|
</span><span class="code-line line-number" line="5"><span class="token comment"># 注释行 3</span>
|
||||||
</span></code></pre>
|
</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-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">int1</span> <span class="token punctuation">=</span> <span class="token number">+42</span>
|
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">int1</span> <span class="token punctuation">=</span> <span class="token number">+42</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token key property">int2</span> <span class="token punctuation">=</span> <span class="token number">0</span>
|
</span><span class="code-line line-number" line="2"><span class="token key property">int2</span> <span class="token punctuation">=</span> <span class="token number">0</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token key property">int3</span> <span class="token punctuation">=</span> <span class="token number">-21</span>
|
</span><span class="code-line line-number" line="3"><span class="token key property">int3</span> <span class="token punctuation">=</span> <span class="token number">-21</span>
|
||||||
</span><span class="code-line line-number" line="4"><span class="token key property">integerRange</span> <span class="token punctuation">=</span> <span class="token number">64</span>
|
</span><span class="code-line line-number" line="4"><span class="token key property">integerRange</span> <span class="token punctuation">=</span> <span class="token number">64</span>
|
||||||
</span></code></pre>
|
</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-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">float2</span> <span class="token punctuation">=</span> <span class="token number">3.1415</span>
|
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">float2</span> <span class="token punctuation">=</span> <span class="token number">3.1415</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token key property">float4</span> <span class="token punctuation">=</span> <span class="token number">5e+22</span>
|
</span><span class="code-line line-number" line="2"><span class="token key property">float4</span> <span class="token punctuation">=</span> <span class="token number">5e+22</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token key property">float7</span> <span class="token punctuation">=</span> <span class="token number">6.626e-34</span>
|
</span><span class="code-line line-number" line="3"><span class="token key property">float7</span> <span class="token punctuation">=</span> <span class="token number">6.626e-34</span>
|
||||||
</span></code></pre>
|
</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-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">bool1</span> <span class="token punctuation">=</span> <span class="token boolean">true</span>
|
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">bool1</span> <span class="token punctuation">=</span> <span class="token boolean">true</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token key property">bool2</span> <span class="token punctuation">=</span> <span class="token boolean">false</span>
|
</span><span class="code-line line-number" line="2"><span class="token key property">bool2</span> <span class="token punctuation">=</span> <span class="token boolean">false</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token key property">boolMustBeLowercase</span> <span class="token punctuation">=</span> <span class="token boolean">true</span>
|
</span><span class="code-line line-number" line="3"><span class="token key property">boolMustBeLowercase</span> <span class="token punctuation">=</span> <span class="token boolean">true</span>
|
||||||
</span></code></pre>
|
</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-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">date1</span> <span class="token punctuation">=</span> <span class="token date number">1989-05-27T07:32:00Z</span>
|
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">date1</span> <span class="token punctuation">=</span> <span class="token date number">1989-05-27T07:32:00Z</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token key property">date2</span> <span class="token punctuation">=</span> <span class="token date number">1989-05-26T15:32:00-07:00</span>
|
</span><span class="code-line line-number" line="2"><span class="token key property">date2</span> <span class="token punctuation">=</span> <span class="token date number">1989-05-26T15:32:00-07:00</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token key property">date3</span> <span class="token punctuation">=</span> <span class="token date number">1989-05-27T07:32:00</span>
|
</span><span class="code-line line-number" line="3"><span class="token key property">date3</span> <span class="token punctuation">=</span> <span class="token date number">1989-05-27T07:32:00</span>
|
||||||
@ -57,24 +57,24 @@
|
|||||||
</span><span class="code-line line-number" line="5"><span class="token key property">time1</span> <span class="token punctuation">=</span> <span class="token date number">07:32:00</span>
|
</span><span class="code-line line-number" line="5"><span class="token key property">time1</span> <span class="token punctuation">=</span> <span class="token date number">07:32:00</span>
|
||||||
</span><span class="code-line line-number" line="6"><span class="token key property">time2</span> <span class="token punctuation">=</span> <span class="token date number">00:32:00.999999</span>
|
</span><span class="code-line line-number" line="6"><span class="token key property">time2</span> <span class="token punctuation">=</span> <span class="token date number">00:32:00.999999</span>
|
||||||
</span></code></pre>
|
</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-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">str1</span> <span class="token punctuation">=</span> <span class="token string">"I'm a string."</span>
|
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">str1</span> <span class="token punctuation">=</span> <span class="token string">"I'm a string."</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token key property">str2</span> <span class="token punctuation">=</span> <span class="token string">"You can \"quote\" me."</span>
|
</span><span class="code-line line-number" line="2"><span class="token key property">str2</span> <span class="token punctuation">=</span> <span class="token string">"You can \"quote\" me."</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token key property">str3</span> <span class="token punctuation">=</span> <span class="token string">"Name\tJos\u00E9\nLoc\tSF."</span>
|
</span><span class="code-line line-number" line="3"><span class="token key property">str3</span> <span class="token punctuation">=</span> <span class="token string">"Name\tJos\u00E9\nLoc\tSF."</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>See: <a href="#toml-strings">Strings</a></p>
|
<p>See: <a href="#toml-strings">Strings</a></p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Table</h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Table</h3><div class="wrap-body">
|
||||||
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">[</span><span class="token table class-name">owner</span><span class="token punctuation">]</span>
|
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">[</span><span class="token table class-name">owner</span><span class="token punctuation">]</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token key property">name</span> <span class="token punctuation">=</span> <span class="token string">"Tom Preston-Werner"</span>
|
</span><span class="code-line line-number" line="2"><span class="token key property">name</span> <span class="token punctuation">=</span> <span class="token string">"Tom Preston-Werner"</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token key property">dob</span> <span class="token punctuation">=</span> <span class="token date number">1979-05-27T07:32:00-08:00</span>
|
</span><span class="code-line line-number" line="3"><span class="token key property">dob</span> <span class="token punctuation">=</span> <span class="token date number">1979-05-27T07:32:00-08:00</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>See: <a href="#toml-tables">Tables</a></p>
|
<p>See: <a href="#toml-tables">Tables</a></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-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">array1</span> <span class="token punctuation">=</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>
|
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">array1</span> <span class="token punctuation">=</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><span class="code-line line-number" line="2"><span class="token key property">array2</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span><span class="token string">"Commas"</span><span class="token punctuation">,</span> <span class="token string">"are"</span><span class="token punctuation">,</span> <span class="token string">"delimiter"</span><span class="token punctuation">]</span>
|
</span><span class="code-line line-number" line="2"><span class="token key property">array2</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span><span class="token string">"Commas"</span><span class="token punctuation">,</span> <span class="token string">"are"</span><span class="token punctuation">,</span> <span class="token string">"delimiter"</span><span class="token punctuation">]</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token key property">array3</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span><span class="token number">8001</span><span class="token punctuation">,</span> <span class="token number">8001</span><span class="token punctuation">,</span> <span class="token number">8002</span><span class="token punctuation">]</span>
|
</span><span class="code-line line-number" line="3"><span class="token key property">array3</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span><span class="token number">8001</span><span class="token punctuation">,</span> <span class="token number">8001</span><span class="token punctuation">,</span> <span class="token number">8002</span><span class="token punctuation">]</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><div class="warp" style="grid-column: span 2/span 2;"><div class="warp-header h3warp"><h3>友好数组</h3><div class="warp-body"><!--rehype:data-warp-style=grid-column: span 2/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-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">array1</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span> <span class="token string">"Don't mix"</span><span class="token punctuation">,</span> <span class="token string">"different"</span><span class="token punctuation">,</span> <span class="token string">"types"</span> <span class="token punctuation">]</span>
|
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">array1</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span> <span class="token string">"Don't mix"</span><span class="token punctuation">,</span> <span class="token string">"different"</span><span class="token punctuation">,</span> <span class="token string">"types"</span> <span class="token punctuation">]</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token key property">array2</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span> <span class="token number">1.2</span><span class="token punctuation">,</span> <span class="token number">2.4</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"all"</span><span class="token punctuation">,</span> <span class="token string">'strings'</span><span class="token punctuation">,</span> <span class="token string">"""are the same"""</span><span class="token punctuation">,</span> <span class="token string">'''type'''</span><span class="token punctuation">]</span> <span class="token punctuation">]</span>
|
</span><span class="code-line line-number" line="2"><span class="token key property">array2</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span> <span class="token number">1.2</span><span class="token punctuation">,</span> <span class="token number">2.4</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"all"</span><span class="token punctuation">,</span> <span class="token string">'strings'</span><span class="token punctuation">,</span> <span class="token string">"""are the same"""</span><span class="token punctuation">,</span> <span class="token string">'''type'''</span><span class="token punctuation">]</span> <span class="token punctuation">]</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token key property">array3</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span>
|
</span><span class="code-line line-number" line="3"><span class="token key property">array3</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span>
|
||||||
@ -82,22 +82,22 @@
|
|||||||
</span><span class="code-line line-number" line="5"> <span class="token string">"ignored"</span>
|
</span><span class="code-line line-number" line="5"> <span class="token string">"ignored"</span>
|
||||||
</span><span class="code-line line-number" line="6"><span class="token punctuation">]</span>
|
</span><span class="code-line line-number" line="6"><span class="token punctuation">]</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>TOML 字符串</h2><div class="warp-body">
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>TOML 字符串</h2><div class="wrap-body">
|
||||||
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>多行字符串</h3><div class="warp-body">
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>多行字符串</h3><div class="wrap-body">
|
||||||
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">multiLineString</span> <span class="token punctuation">=</span> <span class="token string">"""
|
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">multiLineString</span> <span class="token punctuation">=</span> <span class="token string">"""
|
||||||
</span></span><span class="code-line line-number" line="2"><span class="token string">Multi-line basic strings are surrounded
|
</span></span><span class="code-line line-number" line="2"><span class="token string">Multi-line basic strings are surrounded
|
||||||
</span></span><span class="code-line line-number" line="3"><span class="token string">by three quotation marks on each side
|
</span></span><span class="code-line line-number" line="3"><span class="token string">by three quotation marks on each side
|
||||||
</span></span><span class="code-line line-number" line="4"><span class="token string">and allow newlines.
|
</span></span><span class="code-line line-number" line="4"><span class="token string">and allow newlines.
|
||||||
</span></span><span class="code-line line-number" line="5"><span class="token string">"""</span>
|
</span></span><span class="code-line line-number" line="5"><span class="token string">"""</span>
|
||||||
</span></code></pre>
|
</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-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">path</span> <span class="token punctuation">=</span> <span class="token string">'C:\Users\nodejs\templates'</span>
|
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">path</span> <span class="token punctuation">=</span> <span class="token string">'C:\Users\nodejs\templates'</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token key property">path2</span> <span class="token punctuation">=</span> <span class="token string">'\\User\admin$\system32'</span>
|
</span><span class="code-line line-number" line="2"><span class="token key property">path2</span> <span class="token punctuation">=</span> <span class="token string">'\\User\admin$\system32'</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token key property">quoted</span> <span class="token punctuation">=</span> <span class="token string">'Tom "Dubs" Preston-Werner'</span>
|
</span><span class="code-line line-number" line="3"><span class="token key property">quoted</span> <span class="token punctuation">=</span> <span class="token string">'Tom "Dubs" Preston-Werner'</span>
|
||||||
</span><span class="code-line line-number" line="4"><span class="token key property">regex</span> <span class="token punctuation">=</span> <span class="token string">'<\i\c*\s*>'</span>
|
</span><span class="code-line line-number" line="4"><span class="token key property">regex</span> <span class="token punctuation">=</span> <span class="token string">'<\i\c*\s*>'</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>用单引号括起来。不允许转义。</p>
|
<p>用单引号括起来。不允许转义。</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-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">re</span> <span class="token punctuation">=</span> <span class="token string">'''\d{2} apps is t[wo]o many'''</span>
|
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">re</span> <span class="token punctuation">=</span> <span class="token string">'''\d{2} apps is t[wo]o many'''</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token key property">lines</span> <span class="token punctuation">=</span> <span class="token string">'''
|
</span><span class="code-line line-number" line="2"><span class="token key property">lines</span> <span class="token punctuation">=</span> <span class="token string">'''
|
||||||
</span></span><span class="code-line line-number" line="3"><span class="token string">The first newline is
|
</span></span><span class="code-line line-number" line="3"><span class="token string">The first newline is
|
||||||
@ -106,20 +106,20 @@
|
|||||||
</span></span><span class="code-line line-number" line="6"><span class="token string">is preserved.
|
</span></span><span class="code-line line-number" line="6"><span class="token string">is preserved.
|
||||||
</span></span><span class="code-line line-number" line="7"><span class="token string">'''</span>
|
</span></span><span class="code-line line-number" line="7"><span class="token string">'''</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>TOML Tables</h2><div class="warp-body">
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>TOML Tables</h2><div class="wrap-body">
|
||||||
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>基本的</h3><div class="warp-body">
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>基本的</h3><div class="wrap-body">
|
||||||
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">[</span><span class="token table class-name">name</span><span class="token punctuation">]</span>
|
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">[</span><span class="token table class-name">name</span><span class="token punctuation">]</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token key property">foo</span> <span class="token punctuation">=</span> <span class="token number">1</span>
|
</span><span class="code-line line-number" line="2"><span class="token key property">foo</span> <span class="token punctuation">=</span> <span class="token number">1</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token key property">bar</span> <span class="token punctuation">=</span> <span class="token number">2</span>
|
</span><span class="code-line line-number" line="3"><span class="token key property">bar</span> <span class="token punctuation">=</span> <span class="token number">2</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p><code>foo</code> 和 <code>bar</code> 是名为<code>name</code> 的表中的键</p>
|
<p><code>foo</code> 和 <code>bar</code> 是名为<code>name</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-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">[</span><span class="token table class-name">table1</span><span class="token punctuation">]</span>
|
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">[</span><span class="token table class-name">table1</span><span class="token punctuation">]</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token key property">foo</span> <span class="token punctuation">=</span> <span class="token string">"bar"</span>
|
</span><span class="code-line line-number" line="2"> <span class="token key property">foo</span> <span class="token punctuation">=</span> <span class="token string">"bar"</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">[</span><span class="token table class-name">table1.nested_table</span><span class="token punctuation">]</span>
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">[</span><span class="token table class-name">table1.nested_table</span><span class="token punctuation">]</span>
|
||||||
</span><span class="code-line line-number" line="4"> <span class="token key property">baz</span> <span class="token punctuation">=</span> <span class="token string">"bat"</span>
|
</span><span class="code-line line-number" line="4"> <span class="token key property">baz</span> <span class="token punctuation">=</span> <span class="token string">"bat"</span>
|
||||||
</span></code></pre>
|
</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-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token table class-name">comments</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
|
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token table class-name">comments</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token key property">author</span> <span class="token punctuation">=</span> <span class="token string">"Nate"</span>
|
</span><span class="code-line line-number" line="2"><span class="token key property">author</span> <span class="token punctuation">=</span> <span class="token string">"Nate"</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token key property">text</span> <span class="token punctuation">=</span> <span class="token string">"Great Article!"</span>
|
</span><span class="code-line line-number" line="3"><span class="token key property">text</span> <span class="token punctuation">=</span> <span class="token string">"Great Article!"</span>
|
||||||
@ -127,7 +127,7 @@
|
|||||||
</span><span class="code-line line-number" line="5"><span class="token key property">author</span> <span class="token punctuation">=</span> <span class="token string">"Anonymous"</span>
|
</span><span class="code-line line-number" line="5"><span class="token key property">author</span> <span class="token punctuation">=</span> <span class="token string">"Anonymous"</span>
|
||||||
</span><span class="code-line line-number" line="6"><span class="token key property">text</span> <span class="token punctuation">=</span> <span class="token string">"Love it!"</span>
|
</span><span class="code-line line-number" line="6"><span class="token key property">text</span> <span class="token punctuation">=</span> <span class="token string">"Love it!"</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div><div class="h3warp-body"><div class="warp"><div class="warp-header h4warp"><h4>↓ 等效的 JSON</h4><div class="warp-body">
|
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>↓ 等效的 JSON</h4><div class="wrap-body">
|
||||||
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token property">"comments"</span> <span class="token operator">:</span> <span class="token punctuation">[</span>
|
</span><span class="code-line line-number" line="2"> <span class="token property">"comments"</span> <span class="token operator">:</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="3"> <span class="token punctuation">{</span>
|
||||||
@ -141,11 +141,11 @@
|
|||||||
</span><span class="code-line line-number" line="11"> <span class="token punctuation">]</span>
|
</span><span class="code-line line-number" line="11"> <span class="token punctuation">]</span>
|
||||||
</span><span class="code-line line-number" line="12"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="12"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">[</span><span class="token table class-name">dog."tater.man"</span><span class="token punctuation">]</span>
|
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">[</span><span class="token table class-name">dog."tater.man"</span><span class="token punctuation">]</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token key property">type</span> <span class="token punctuation">=</span> <span class="token string">"pug"</span>
|
</span><span class="code-line line-number" line="2"><span class="token key property">type</span> <span class="token punctuation">=</span> <span class="token string">"pug"</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div><div class="h3warp-body"><div class="warp"><div class="warp-header h4warp"><h4>↓ 等效的 JSON</h4><div class="warp-body">
|
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>↓ 等效的 JSON</h4><div class="wrap-body">
|
||||||
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token property">"dog"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="2"> <span class="token property">"dog"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token property">"tater.man"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="3"> <span class="token property">"tater.man"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
@ -154,11 +154,11 @@
|
|||||||
</span><span class="code-line line-number" line="6"> <span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="6"> <span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">[</span><span class="token table class-name">foo.bar.baz</span><span class="token punctuation">]</span>
|
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">[</span><span class="token table class-name">foo.bar.baz</span><span class="token punctuation">]</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token key property">bat</span> <span class="token punctuation">=</span> <span class="token string">"hi"</span>
|
</span><span class="code-line line-number" line="2"><span class="token key property">bat</span> <span class="token punctuation">=</span> <span class="token string">"hi"</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div><div class="h3warp-body"><div class="warp"><div class="warp-header h4warp"><h4>↓ 等效的 JSON</h4><div class="warp-body">
|
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>↓ 等效的 JSON</h4><div class="wrap-body">
|
||||||
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token property">"foo"</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="2"> <span class="token property">"foo"</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token property">"bar"</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="3"> <span class="token property">"bar"</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
@ -169,17 +169,17 @@
|
|||||||
</span><span class="code-line line-number" line="8"> <span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="8"> <span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">[</span><span class="token table class-name">a.b.c</span><span class="token punctuation">]</span> <span class="token comment"># this is best practice</span>
|
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">[</span><span class="token table class-name">a.b.c</span><span class="token punctuation">]</span> <span class="token comment"># this is best practice</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token punctuation">[</span> <span class="token table class-name">d.e.f</span> <span class="token punctuation">]</span> <span class="token comment"># same as [d.e.f]</span>
|
</span><span class="code-line line-number" line="2"><span class="token punctuation">[</span> <span class="token table class-name">d.e.f</span> <span class="token punctuation">]</span> <span class="token comment"># same as [d.e.f]</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">[</span> <span class="token table class-name">g . h .i</span> <span class="token punctuation">]</span> <span class="token comment"># same as [g.h.i]</span>
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">[</span> <span class="token table class-name">g . h .i</span> <span class="token punctuation">]</span> <span class="token comment"># same as [g.h.i]</span>
|
||||||
</span><span class="code-line line-number" line="4"><span class="token punctuation">[</span> <span class="token table class-name">j . "ʞ" .'l'</span> <span class="token punctuation">]</span> <span class="token comment"># same as [j."ʞ".'l']</span>
|
</span><span class="code-line line-number" line="4"><span class="token punctuation">[</span> <span class="token table class-name">j . "ʞ" .'l'</span> <span class="token punctuation">]</span> <span class="token comment"># same as [j."ʞ".'l']</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><div class="warp col-span-2"><div class="warp-header h3warp"><h3>Inline Table</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>Inline Table</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2--><!--rehype:-->
|
||||||
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">name</span> <span class="token punctuation">=</span> <span class="token punctuation">{</span> <span class="token key property">first</span> <span class="token punctuation">=</span> <span class="token string">"Tom"</span><span class="token punctuation">,</span> <span class="token key property">last</span> <span class="token punctuation">=</span> <span class="token string">"Preston-Werner"</span> <span class="token punctuation">}</span>
|
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line line-number" line="1"><span class="token key property">name</span> <span class="token punctuation">=</span> <span class="token punctuation">{</span> <span class="token key property">first</span> <span class="token punctuation">=</span> <span class="token string">"Tom"</span><span class="token punctuation">,</span> <span class="token key property">last</span> <span class="token punctuation">=</span> <span class="token string">"Preston-Werner"</span> <span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token key property">point</span> <span class="token punctuation">=</span> <span class="token punctuation">{</span> <span class="token key property">x</span> <span class="token punctuation">=</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token key property">y</span> <span class="token punctuation">=</span> <span class="token number">2</span> <span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="2"><span class="token key property">point</span> <span class="token punctuation">=</span> <span class="token punctuation">{</span> <span class="token key property">x</span> <span class="token punctuation">=</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token key property">y</span> <span class="token punctuation">=</span> <span class="token number">2</span> <span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token key property">animal</span> <span class="token punctuation">=</span> <span class="token punctuation">{</span> <span class="token key property">type.name</span> <span class="token punctuation">=</span> <span class="token string">"pug"</span> <span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="3"><span class="token key property">animal</span> <span class="token punctuation">=</span> <span class="token punctuation">{</span> <span class="token key property">type.name</span> <span class="token punctuation">=</span> <span class="token string">"pug"</span> <span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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>
|
</html>
|
||||||
|
|||||||
@ -9,29 +9,29 @@
|
|||||||
<meta keywords="Quick,Reference,cheatsheet,typescript">
|
<meta keywords="Quick,Reference,cheatsheet,typescript">
|
||||||
<link rel="stylesheet" href="../style/style.css">
|
<link rel="stylesheet" href="../style/style.css">
|
||||||
</head>
|
</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/typescript.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>TypeScript 备忘清单</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/typescript.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>TypeScript 备忘清单</h1><div class="wrap-body">
|
||||||
<p>包含最重要基础、泛型、方法、class 等 TypeScript 强类型编程语言语法的快速参考备忘单。初学者的完整快速参考。</p>
|
<p>包含最重要基础、泛型、方法、class 等 TypeScript 强类型编程语言语法的快速参考备忘单。初学者的完整快速参考。</p>
|
||||||
</div></header><div class="h1warp-body"><div class="warp"><div class="warp-header h2warp"><h2>入门 Interface</h2><div class="warp-body">
|
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2>入门 Interface</h2><div class="wrap-body">
|
||||||
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>介绍</h3><div class="warp-body">
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>介绍</h3><div class="wrap-body">
|
||||||
<p>TypeScript 是具有类型语法的 JavaScript。Interface 是为了匹配它们的运行时行为而构建的。</p>
|
<p>TypeScript 是具有类型语法的 JavaScript。Interface 是为了匹配它们的运行时行为而构建的。</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="./javascript.html">JavaScript 备忘清单</a></li>
|
<li><a href="./javascript.html">JavaScript 备忘清单</a></li>
|
||||||
<li><a href="https://www.typescriptlang.org/">TypeScript 官网</a></li>
|
<li><a href="https://www.typescriptlang.org/">TypeScript 官网</a></li>
|
||||||
</ul>
|
</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token keyword">void</span><span class="token punctuation">,</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token keyword">void</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token builtin">boolean</span><span class="token punctuation">,</span> <span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">number</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="2"><span class="token builtin">boolean</span><span class="token punctuation">,</span> <span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">number</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token keyword">undefined</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="3"><span class="token keyword">undefined</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="4"><span class="token builtin">unknown</span><span class="token punctuation">,</span> <span class="token builtin">never</span><span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="4"><span class="token builtin">unknown</span><span class="token punctuation">,</span> <span class="token builtin">never</span><span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="5">bigint<span class="token punctuation">,</span> <span class="token builtin">symbol</span>
|
</span><span class="code-line line-number" line="5">bigint<span class="token punctuation">,</span> <span class="token builtin">symbol</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>常见的内置 JS 对象</h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>常见的内置 JS 对象</h3><div class="wrap-body">
|
||||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1">Date<span class="token punctuation">,</span> Error<span class="token punctuation">,</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1">Date<span class="token punctuation">,</span> Error<span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token builtin">Array</span><span class="token punctuation">,</span> Map<span class="token punctuation">,</span> Set<span class="token punctuation">,</span>
|
</span><span class="code-line line-number" line="2"><span class="token builtin">Array</span><span class="token punctuation">,</span> Map<span class="token punctuation">,</span> Set<span class="token punctuation">,</span>
|
||||||
</span><span class="code-line line-number" line="3">Regexp<span class="token punctuation">,</span> <span class="token builtin">Promise</span>
|
</span><span class="code-line line-number" line="3">Regexp<span class="token punctuation">,</span> <span class="token builtin">Promise</span>
|
||||||
</span></code></pre>
|
</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">
|
||||||
</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">
|
||||||
<p>Object:</p>
|
<p>Object:</p>
|
||||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span> field<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span> field<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
@ -44,10 +44,10 @@
|
|||||||
<p>Tuple:</p>
|
<p>Tuple:</p>
|
||||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">[</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">number</span><span class="token punctuation">]</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">[</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">number</span><span class="token punctuation">]</span>
|
||||||
</span></code></pre>
|
</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><code class="code-highlight"><span class="code-line line-number" line="1">Object, String, Number, Boolean
|
<pre><code class="code-highlight"><span class="code-line line-number" line="1">Object, String, Number, Boolean
|
||||||
</span></code></pre>
|
</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token comment">/** 可选择从现有接口或类型(Response, HTTPAble)中获取属性 */</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token comment">/** 可选择从现有接口或类型(Response, HTTPAble)中获取属性 */</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token keyword">interface</span> <span class="token class-name">JSONResponse</span> <span class="token keyword">extends</span> <span class="token class-name">Response</span><span class="token punctuation">,</span> HTTPAble <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="2"><span class="token keyword">interface</span> <span class="token class-name">JSONResponse</span> <span class="token keyword">extends</span> <span class="token class-name">Response</span><span class="token punctuation">,</span> HTTPAble <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> version<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="3"> version<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||||||
@ -69,13 +69,13 @@
|
|||||||
</span><span class="code-line line-number" line="19"> <span class="token keyword">readonly</span> body<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="19"> <span class="token keyword">readonly</span> body<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="20"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="20"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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-->
|
</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-->
|
||||||
<p>声明一个可以在你的 Interface 中改变的类型</p>
|
<p>声明一个可以在你的 Interface 中改变的类型</p>
|
||||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">APICall<span class="token operator"><</span>Response<span class="token operator">></span></span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">APICall<span class="token operator"><</span>Response<span class="token operator">></span></span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> data<span class="token operator">:</span> Response
|
</span><span class="code-line line-number" line="2"> data<span class="token operator">:</span> Response
|
||||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> api<span class="token operator">:</span> APICall<span class="token operator"><</span>ArtworkCall<span class="token operator">></span> <span class="token operator">=</span> <span class="token operator">...</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> api<span class="token operator">:</span> APICall<span class="token operator"><</span>ArtworkCall<span class="token operator">></span> <span class="token operator">=</span> <span class="token operator">...</span>
|
||||||
</span><span class="code-line line-number" line="2">
|
</span><span class="code-line line-number" line="2">
|
||||||
</span><span class="code-line line-number" line="3">api<span class="token punctuation">.</span>data <span class="token comment">// Artwork</span>
|
</span><span class="code-line line-number" line="3">api<span class="token punctuation">.</span>data <span class="token comment">// Artwork</span>
|
||||||
@ -89,21 +89,21 @@
|
|||||||
</span><span class="code-line line-number" line="6">
|
</span><span class="code-line line-number" line="6">
|
||||||
</span><span class="code-line line-number" line="7">api<span class="token punctuation">.</span>data<span class="token punctuation">.</span>status
|
</span><span class="code-line line-number" line="7">api<span class="token punctuation">.</span>data<span class="token punctuation">.</span>status
|
||||||
</span></code></pre>
|
</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">Expect</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">Expect</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token punctuation">(</span>matcher<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token function">string</span>
|
</span><span class="code-line line-number" line="2"> <span class="token punctuation">(</span>matcher<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token function">string</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token punctuation">(</span>matcher<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="3"> <span class="token punctuation">(</span>matcher<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">boolean</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="4"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>一个可调用 Interface 可以对不同的参数集有多个定义。</p>
|
<p>一个可调用 Interface 可以对不同的参数集有多个定义。</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">Syncable</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">Syncable</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token function">sync</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
|
</span><span class="code-line line-number" line="2"> <span class="token function">sync</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="4"><span class="token keyword">class</span> <span class="token class-name">Account</span> <span class="token keyword">implements</span> <span class="token class-name">Syncable</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="4"><span class="token keyword">class</span> <span class="token class-name">Account</span> <span class="token keyword">implements</span> <span class="token class-name">Syncable</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>您可以通过实现确保类 class 符合 Interface。</p>
|
<p>您可以通过实现确保类 class 符合 Interface。</p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Get & Set</h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Get & Set</h3><div class="wrap-body">
|
||||||
<p>对象可以有自定义的 <code>getter</code> 或 <code>setter</code>。</p>
|
<p>对象可以有自定义的 <code>getter</code> 或 <code>setter</code>。</p>
|
||||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">Ruler</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">Ruler</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token keyword">get</span> <span class="token function">size</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span>
|
</span><span class="code-line line-number" line="2"> <span class="token keyword">get</span> <span class="token function">size</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span>
|
||||||
@ -115,7 +115,7 @@
|
|||||||
</span><span class="code-line line-number" line="2">r<span class="token punctuation">.</span>size <span class="token operator">=</span> <span class="token number">12</span>
|
</span><span class="code-line line-number" line="2">r<span class="token punctuation">.</span>size <span class="token operator">=</span> <span class="token number">12</span>
|
||||||
</span><span class="code-line line-number" line="3">r<span class="token punctuation">.</span>size <span class="token operator">=</span> <span class="token string">"36"</span>
|
</span><span class="code-line line-number" line="3">r<span class="token punctuation">.</span>size <span class="token operator">=</span> <span class="token string">"36"</span>
|
||||||
</span></code></pre>
|
</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">APICall</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">APICall</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> data<span class="token operator">:</span> Response
|
</span><span class="code-line line-number" line="2"> data<span class="token operator">:</span> Response
|
||||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
@ -125,54 +125,54 @@
|
|||||||
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>Interface 被合并，多个声明将向类型定义添加新字段。</p>
|
<p>Interface 被合并，多个声明将向类型定义添加新字段。</p>
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>Type</h2><div class="warp-body">
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>Type</h2><div class="wrap-body">
|
||||||
</div></div><div class="h2warp-body"><div class="warp row-span-2"><div class="warp-header h3warp"><h3>Type vs Interface</h3><div class="warp-body"><!--rehype:warp-class=row-span-2-->
|
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3>Type vs Interface</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
|
||||||
<ul>
|
<ul>
|
||||||
<li>Interface 只能描述对象形状</li>
|
<li>Interface 只能描述对象形状</li>
|
||||||
<li>Interface 可以通过多次声明来扩展</li>
|
<li>Interface 可以通过多次声明来扩展</li>
|
||||||
<li>在性能关键 Type 中，Interface 比较检查可以更快。</li>
|
<li>在性能关键 Type 中，Interface 比较检查可以更快。</li>
|
||||||
</ul>
|
</ul>
|
||||||
</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">
|
||||||
<p>就像您如何在不同范围内创建具有相同名称的变量一样，type 具有相似的语义。</p>
|
<p>就像您如何在不同范围内创建具有相同名称的变量一样，type 具有相似的语义。</p>
|
||||||
</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">
|
||||||
<p>TypeScript 包含许多全局类型，它们将帮助您在类型系统中完成常见任务。检查他们的网站。</p>
|
<p>TypeScript 包含许多全局类型，它们将帮助您在类型系统中完成常见任务。检查他们的网站。</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">SanitizedInput</span> <span class="token operator">=</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">SanitizedInput</span> <span class="token operator">=</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">MissingNo</span> <span class="token operator">=</span> <span class="token number">404</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">MissingNo</span> <span class="token operator">=</span> <span class="token number">404</span><span class="token punctuation">;</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>主要用于文档</p>
|
<p>主要用于文档</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Location</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Location</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="2"> x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"> y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="3"> y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||||
</span></code></pre>
|
</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Size</span> <span class="token operator">=</span> <span class="token string">"small"</span> <span class="token operator">|</span> <span class="token string">"medium"</span> <span class="token operator">|</span> <span class="token string">"large"</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Size</span> <span class="token operator">=</span> <span class="token string">"small"</span> <span class="token operator">|</span> <span class="token string">"medium"</span> <span class="token operator">|</span> <span class="token string">"large"</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>描述许多选项中的一个类型，例如已知字符串的列表。</p>
|
<p>描述许多选项中的一个类型，例如已知字符串的列表。</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Location</span> <span class="token operator">=</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">}</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Location</span> <span class="token operator">=</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token operator">&</span> <span class="token punctuation">{</span> y<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="2"> <span class="token operator">&</span> <span class="token punctuation">{</span> y<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token comment">// { x: number, y: number }</span>
|
</span><span class="code-line line-number" line="3"><span class="token comment">// { x: number, y: number }</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>一种合并/扩展类型的方法</p>
|
<p>一种合并/扩展类型的方法</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-ts"><code class="language-ts 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 operator">...</span> <span class="token punctuation">}</span>
|
<pre class="language-ts"><code class="language-ts 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 operator">...</span> <span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">Data</span> <span class="token operator">=</span> <span class="token keyword">typeof</span> data
|
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">Data</span> <span class="token operator">=</span> <span class="token keyword">typeof</span> data
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>通过 typeof 运算符重用来自现有 JavaScript 运行时值的类型。</p>
|
<p>通过 typeof 运算符重用来自现有 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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">createFixtures</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">createFixtures</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">Fixtures</span> <span class="token operator">=</span> ReturnType<span class="token operator"><</span><span class="token keyword">typeof</span> createFixtures<span class="token operator">></span>
|
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">Fixtures</span> <span class="token operator">=</span> ReturnType<span class="token operator"><</span><span class="token keyword">typeof</span> createFixtures<span class="token operator">></span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span>fixture<span class="token operator">:</span> Fixtures<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">function</span> <span class="token function">test</span><span class="token punctuation">(</span>fixture<span class="token operator">:</span> Fixtures<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>将函数的返回值重新用作类型。</p>
|
<p>将函数的返回值重新用作类型。</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-ts"><code class="language-ts 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 keyword">import</span><span class="token punctuation">(</span><span class="token string">"./data"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>data
|
<pre class="language-ts"><code class="language-ts 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 keyword">import</span><span class="token punctuation">(</span><span class="token string">"./data"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>data
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>这些功能非常适合构建库、描述现有的 JavaScript 代码，您可能会发现在大多数 TypeScript 应用程序中很少使用它们。</p>
|
<p>这些功能非常适合构建库、描述现有的 JavaScript 代码，您可能会发现在大多数 TypeScript 应用程序中很少使用它们。</p>
|
||||||
</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">JSONResponse</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">JSONResponse</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> version<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> <span class="token comment">// 字段</span>
|
</span><span class="code-line line-number" line="2"> version<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> <span class="token comment">// 字段</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token comment">/** In bytes */</span> <span class="token comment">// 附加文档</span>
|
</span><span class="code-line line-number" line="3"> <span class="token comment">/** In bytes */</span> <span class="token comment">// 附加文档</span>
|
||||||
@ -187,7 +187,7 @@
|
|||||||
</span><span class="code-line line-number" line="12"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="12"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>用于节省空间的 Terser，请参阅 Interface 备忘清单了解更多信息，除了“static”匹配之外的所有内容。</p>
|
<p>用于节省空间的 Terser，请参阅 Interface 备忘清单了解更多信息，除了“static”匹配之外的所有内容。</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Artist</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Artist</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> bio<span class="token operator">:</span> <span class="token builtin">string</span>
|
</span><span class="code-line line-number" line="2"> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> bio<span class="token operator">:</span> <span class="token builtin">string</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
@ -201,7 +201,7 @@
|
|||||||
</span><span class="code-line line-number" line="11"><span class="token comment">// void, bio: (nv: string) => void }</span>
|
</span><span class="code-line line-number" line="11"><span class="token comment">// void, bio: (nv: string) => void }</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>类似于类型系统的映射语句，允许输入类型更改新类型的结构。</p>
|
<p>类似于类型系统的映射语句，允许输入类型更改新类型的结构。</p>
|
||||||
</div></div></div><div class="warp col-span-3"><div class="warp-header h3warp"><h3>模板联合类型</h3><div class="warp-body"><!--rehype:warp-class=col-span-3--><!--rehype:-->
|
</div></div></div><div class="wrap col-span-3"><div class="wrap-header h3wrap"><h3>模板联合类型</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-3--><!--rehype:-->
|
||||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">SupportedLangs</span> <span class="token operator">=</span> <span class="token string">"en"</span> <span class="token operator">|</span> <span class="token string">"pt"</span> <span class="token operator">|</span> <span class="token string">"zh"</span><span class="token punctuation">;</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">SupportedLangs</span> <span class="token operator">=</span> <span class="token string">"en"</span> <span class="token operator">|</span> <span class="token string">"pt"</span> <span class="token operator">|</span> <span class="token string">"zh"</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">FooterLocaleIDs</span> <span class="token operator">=</span> <span class="token string">"header"</span> <span class="token operator">|</span> <span class="token string">"footer"</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">FooterLocaleIDs</span> <span class="token operator">=</span> <span class="token string">"header"</span> <span class="token operator">|</span> <span class="token string">"footer"</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token keyword">type</span> <span class="token class-name">AllLocaleIDs</span> <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>SupportedLangs<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">_</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>FooterLocaleIDs<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">_id</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="3"><span class="token keyword">type</span> <span class="token class-name">AllLocaleIDs</span> <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>SupportedLangs<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">_</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>FooterLocaleIDs<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">_id</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||||
@ -210,16 +210,16 @@
|
|||||||
</span><span class="code-line line-number" line="6"><span class="token comment">// | "pt_header_id" | "pt_footer_id"</span>
|
</span><span class="code-line line-number" line="6"><span class="token comment">// | "pt_header_id" | "pt_footer_id"</span>
|
||||||
</span><span class="code-line line-number" line="7"><span class="token comment">// | "zh_header_id" | "zh_footer_id"</span>
|
</span><span class="code-line line-number" line="7"><span class="token comment">// | "zh_header_id" | "zh_footer_id"</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><div class="warp col-span-3"><div class="warp-header h3warp"><h3>条件类型</h3><div class="warp-body"><!--rehype:warp-class=col-span-3--><!--rehype:-->
|
</div></div></div><div class="wrap col-span-3"><div class="wrap-header h3wrap"><h3>条件类型</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-3--><!--rehype:-->
|
||||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">HasFourLegs<span class="token operator"><</span>Animal<span class="token operator">></span></span> <span class="token operator">=</span> Animal <span class="token keyword">extends</span> <span class="token punctuation">{</span> legs<span class="token operator">:</span> <span class="token number">4</span> <span class="token punctuation">}</span> <span class="token operator">?</span> Animal <span class="token operator">:</span> <span class="token builtin">never</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">HasFourLegs<span class="token operator"><</span>Animal<span class="token operator">></span></span> <span class="token operator">=</span> Animal <span class="token keyword">extends</span> <span class="token punctuation">{</span> legs<span class="token operator">:</span> <span class="token number">4</span> <span class="token punctuation">}</span> <span class="token operator">?</span> Animal <span class="token operator">:</span> <span class="token builtin">never</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">Animals</span> <span class="token operator">=</span> Bird <span class="token operator">|</span> Dog <span class="token operator">|</span> Ant <span class="token operator">|</span> Wolf<span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">Animals</span> <span class="token operator">=</span> Bird <span class="token operator">|</span> Dog <span class="token operator">|</span> Ant <span class="token operator">|</span> Wolf<span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token keyword">type</span> <span class="token class-name">FourLegs</span> <span class="token operator">=</span> HasFourLegs<span class="token operator"><</span>Animals<span class="token operator">></span>
|
</span><span class="code-line line-number" line="3"><span class="token keyword">type</span> <span class="token class-name">FourLegs</span> <span class="token operator">=</span> HasFourLegs<span class="token operator"><</span>Animals<span class="token operator">></span>
|
||||||
</span><span class="code-line line-number" line="4"><span class="token comment">// Dog | Wolf</span>
|
</span><span class="code-line line-number" line="4"><span class="token comment">// Dog | Wolf</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>在类型系统中充当“if 语句”。 通过泛型创建，然后通常用于减少类型联合中的选项数量。</p>
|
<p>在类型系统中充当“if 语句”。 通过泛型创建，然后通常用于减少类型联合中的选项数量。</p>
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>控制流动分析</h2><div class="warp-body">
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>控制流动分析</h2><div class="wrap-body">
|
||||||
</div></div><div class="h2warp-body"><div class="warp row-span-3"><div class="warp-header h3warp"><h3>If 声明</h3><div class="warp-body"><!--rehype:warp-class=row-span-3-->
|
</div></div><div class="h2wrap-body"><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3>If 声明</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3-->
|
||||||
</div></div><div class="h3warp-body"><div class="warp"><div class="warp-header h4warp"><h4>typeof（用于原语）</h4><div class="warp-body">
|
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>typeof（用于原语）</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> input <span class="token operator">=</span> <span class="token function">getUserInput</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> input <span class="token operator">=</span> <span class="token function">getUserInput</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="2">input <span class="token comment">// string | number</span>
|
</span><span class="code-line line-number" line="2">input <span class="token comment">// string | number</span>
|
||||||
</span><span class="code-line line-number" line="3">
|
</span><span class="code-line line-number" line="3">
|
||||||
@ -227,7 +227,7 @@
|
|||||||
</span><span class="code-line line-number" line="5"> input <span class="token comment">// string</span>
|
</span><span class="code-line line-number" line="5"> input <span class="token comment">// string</span>
|
||||||
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h4warp"><h4>对象中的“property”（对于对象）</h4><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>对象中的“property”（对于对象）</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> input <span class="token operator">=</span> <span class="token function">getUserInput</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> input <span class="token operator">=</span> <span class="token function">getUserInput</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="2">input <span class="token comment">// string | { error: ... }</span>
|
</span><span class="code-line line-number" line="2">input <span class="token comment">// string | { error: ... }</span>
|
||||||
</span><span class="code-line line-number" line="3">
|
</span><span class="code-line line-number" line="3">
|
||||||
@ -235,7 +235,7 @@
|
|||||||
</span><span class="code-line line-number" line="5"> input <span class="token comment">// { error: ... }</span>
|
</span><span class="code-line line-number" line="5"> input <span class="token comment">// { error: ... }</span>
|
||||||
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h4warp"><h4>instanceof（用于类）</h4><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>instanceof（用于类）</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> input <span class="token operator">=</span> <span class="token function">getUserInput</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> input <span class="token operator">=</span> <span class="token function">getUserInput</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="2"> input <span class="token comment">// number | number[]</span>
|
</span><span class="code-line line-number" line="2"> input <span class="token comment">// number | number[]</span>
|
||||||
</span><span class="code-line line-number" line="3">
|
</span><span class="code-line line-number" line="3">
|
||||||
@ -243,7 +243,7 @@
|
|||||||
</span><span class="code-line line-number" line="5"> input <span class="token comment">// number[]</span>
|
</span><span class="code-line line-number" line="5"> input <span class="token comment">// number[]</span>
|
||||||
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> input <span class="token operator">=</span> <span class="token function">getUserInput</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> input <span class="token operator">=</span> <span class="token function">getUserInput</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="2"> input <span class="token comment">// number | number[]</span>
|
</span><span class="code-line line-number" line="2"> input <span class="token comment">// number | number[]</span>
|
||||||
</span><span class="code-line line-number" line="3">
|
</span><span class="code-line line-number" line="3">
|
||||||
@ -251,7 +251,7 @@
|
|||||||
</span><span class="code-line line-number" line="5"> input <span class="token comment">// number[]</span>
|
</span><span class="code-line line-number" line="5"> input <span class="token comment">// number[]</span>
|
||||||
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div></div></div><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 row-span-3"><div class="wrap-header h3wrap"><h3>任务</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-3--><!--rehype:-->
|
||||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> data1 <span class="token operator">=</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> data1 <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> name<span class="token operator">:</span> <span class="token string">"Zagreus"</span>
|
</span><span class="code-line line-number" line="2"> name<span class="token operator">:</span> <span class="token string">"Zagreus"</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
@ -282,10 +282,10 @@
|
|||||||
</span><span class="code-line line-number" line="3">data <span class="token operator">=</span> <span class="token string">"Hello"</span>
|
</span><span class="code-line line-number" line="3">data <span class="token operator">=</span> <span class="token string">"Hello"</span>
|
||||||
</span><span class="code-line line-number" line="4">data <span class="token comment">// string</span>
|
</span><span class="code-line line-number" line="4">data <span class="token comment">// string</span>
|
||||||
</span></code></pre>
|
</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">
|
||||||
<p>CFA 几乎总是采用联合，并根据代码中的逻辑减少联合内的类型数量。</p>
|
<p>CFA 几乎总是采用联合，并根据代码中的逻辑减少联合内的类型数量。</p>
|
||||||
<p>大多数时候 CFA 在自然 JavaScript 布尔逻辑中工作，但是有一些方法可以定义您自己的函数，这些函数会影响 TypeScript 如何缩小类型。</p>
|
<p>大多数时候 CFA 在自然 JavaScript 布尔逻辑中工作，但是有一些方法可以定义您自己的函数，这些函数会影响 TypeScript 如何缩小类型。</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> input <span class="token operator">=</span> <span class="token function">getUserInput</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> input <span class="token operator">=</span> <span class="token function">getUserInput</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="2">input <span class="token comment">// string | number</span>
|
</span><span class="code-line line-number" line="2">input <span class="token comment">// string | number</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> inputLength <span class="token operator">=</span>
|
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> inputLength <span class="token operator">=</span>
|
||||||
@ -294,13 +294,13 @@
|
|||||||
</span><span class="code-line line-number" line="6"> <span class="token comment">// input: string</span>
|
</span><span class="code-line line-number" line="6"> <span class="token comment">// input: string</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>在进行布尔运算时，缩窄也发生在与代码相同的行上</p>
|
<p>在进行布尔运算时，缩窄也发生在与代码相同的行上</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Responses</span> <span class="token operator">=</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Responses</span> <span class="token operator">=</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token operator">|</span> <span class="token punctuation">{</span> status<span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span> data<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="2"> <span class="token operator">|</span> <span class="token punctuation">{</span> status<span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span> data<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token operator">|</span> <span class="token punctuation">{</span> status<span class="token operator">:</span> <span class="token number">301</span><span class="token punctuation">,</span> to<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="3"> <span class="token operator">|</span> <span class="token punctuation">{</span> status<span class="token operator">:</span> <span class="token number">301</span><span class="token punctuation">,</span> to<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="4"> <span class="token operator">|</span> <span class="token punctuation">{</span> status<span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> error<span class="token operator">:</span> Error <span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="4"> <span class="token operator">|</span> <span class="token punctuation">{</span> status<span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> error<span class="token operator">:</span> Error <span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token function">getResponse</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token function">getResponse</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||||
</span><span class="code-line line-number" line="2">response <span class="token comment">// Responses</span>
|
</span><span class="code-line line-number" line="2">response <span class="token comment">// Responses</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token keyword">switch</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span>status<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="3"><span class="token keyword">switch</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span>status<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
@ -309,7 +309,7 @@
|
|||||||
</span><span class="code-line line-number" line="6"> <span class="token keyword">case</span> <span class="token number">400</span><span class="token operator">:</span> <span class="token keyword">return</span> response<span class="token punctuation">.</span>error
|
</span><span class="code-line line-number" line="6"> <span class="token keyword">case</span> <span class="token number">400</span><span class="token operator">:</span> <span class="token keyword">return</span> response<span class="token punctuation">.</span>error
|
||||||
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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">
|
||||||
<p>描述影响当前范围的 CFA 更改的函数，因为它抛出而不是返回 false。</p>
|
<p>描述影响当前范围的 CFA 更改的函数，因为它抛出而不是返回 false。</p>
|
||||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">assertResponse</span><span class="token punctuation">(</span>obj<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span><span class="token operator">:</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">assertResponse</span><span class="token punctuation">(</span>obj<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span><span class="token operator">:</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token keyword">asserts</span> obj <span class="token keyword">is</span> SuccessResponse <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="2"> <span class="token keyword">asserts</span> obj <span class="token keyword">is</span> SuccessResponse <span class="token punctuation">{</span>
|
||||||
@ -318,7 +318,7 @@
|
|||||||
</span><span class="code-line line-number" line="5"> <span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="5"> <span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token function">getResponse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token function">getResponse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span>
|
||||||
</span><span class="code-line line-number" line="2">res <span class="token comment">// SuccessResponse | ErrorResponse</span>
|
</span><span class="code-line line-number" line="2">res <span class="token comment">// SuccessResponse | ErrorResponse</span>
|
||||||
</span><span class="code-line line-number" line="3">
|
</span><span class="code-line line-number" line="3">
|
||||||
@ -327,7 +327,7 @@
|
|||||||
</span><span class="code-line line-number" line="6">
|
</span><span class="code-line line-number" line="6">
|
||||||
</span><span class="code-line line-number" line="7">res <span class="token comment">// SuccessResponse</span>
|
</span><span class="code-line line-number" line="7">res <span class="token comment">// SuccessResponse</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h3warp"><h3>in 操作符</h3><div class="warp-body">
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>in 操作符</h3><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">interface</span> <span class="token class-name"><span class="token constant">A</span></span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name"><span class="token constant">A</span></span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="2"> x<span class="token operator">:</span> <span class="token builtin">number</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="3"><span class="token punctuation">}</span>
|
||||||
@ -344,13 +344,13 @@
|
|||||||
</span><span class="code-line line-number" line="14"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="14"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>操作符可以安全的检查一个对象上是否存在一个属性，它通常也被作为类型保护使用</p>
|
<p>操作符可以安全的检查一个对象上是否存在一个属性，它通常也被作为类型保护使用</p>
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>Class</h2><div class="warp-body">
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>Class</h2><div class="wrap-body">
|
||||||
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>创建类实例</h3><div class="warp-body">
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>创建类实例</h3><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">class</span> <span class="token class-name"><span class="token constant">ABC</span></span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name"><span class="token constant">ABC</span></span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> abc <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name"><span class="token constant">ABC</span></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> abc <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name"><span class="token constant">ABC</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>新 ABC 的参数来自构造函数。</p>
|
<p>新 ABC 的参数来自构造函数。</p>
|
||||||
</div></div><div class="h3warp-body"><div class="warp"><div class="warp-header h4warp"><h4>private x 与 #private</h4><div class="warp-body">
|
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>private x 与 #private</h4><div class="wrap-body">
|
||||||
<p>前缀 private 是一个仅类型的添加，在运行时没有任何影响。 在以下情况下，类之外的代码可以进入项目：</p>
|
<p>前缀 private 是一个仅类型的添加，在运行时没有任何影响。 在以下情况下，类之外的代码可以进入项目：</p>
|
||||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Bag</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Bag</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token keyword">private</span> item<span class="token operator">:</span> <span class="token builtin">any</span>
|
</span><span class="code-line line-number" line="2"> <span class="token keyword">private</span> item<span class="token operator">:</span> <span class="token builtin">any</span>
|
||||||
@ -359,17 +359,17 @@
|
|||||||
<p>Vs #private 是运行时私有的，并且在 JavaScript 引擎内部强制执行，它只能在类内部访问：</p>
|
<p>Vs #private 是运行时私有的，并且在 JavaScript 引擎内部强制执行，它只能在类内部访问：</p>
|
||||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Bag</span> <span class="token punctuation">{</span> #item<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token punctuation">}</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Bag</span> <span class="token punctuation">{</span> #item<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h4warp"><h4>Class 上的 “this”</h4><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>Class 上的 “this”</h4><div class="wrap-body">
|
||||||
<p>函数内部‘this’的值取决于函数的调用方式。 不能保证始终是您可能在其他语言中使用的类实例。</p>
|
<p>函数内部‘this’的值取决于函数的调用方式。 不能保证始终是您可能在其他语言中使用的类实例。</p>
|
||||||
<p>您可以使用“此参数”、使用绑定功能或箭头功能来解决问题。</p>
|
<p>您可以使用“此参数”、使用绑定功能或箭头功能来解决问题。</p>
|
||||||
</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">
|
||||||
<p>一个类既可以用作类型也可以用作值。</p>
|
<p>一个类既可以用作类型也可以用作值。</p>
|
||||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> a<span class="token operator">:</span>Bag <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Bag</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> a<span class="token operator">:</span>Bag <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Bag</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>所以，小心不要这样做：</p>
|
<p>所以，小心不要这样做：</p>
|
||||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name"><span class="token constant">C</span></span> <span class="token keyword">implements</span> <span class="token class-name">Bag</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name"><span class="token constant">C</span></span> <span class="token keyword">implements</span> <span class="token class-name">Bag</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 确保类符合一组接口或类型 ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈▶┈┈╮</span>
|
<pre class="language-ts"><code class="language-ts 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="2"><span class="token comment">// 子类这个类 ┈┈┈┈┈┈┈┈↘ ┈┈┈┈┈┈┈┈┈┈┈┈┈┴┈┈┈┈┈┈┈</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token keyword">class</span> <span class="token class-name">User</span> <span class="token keyword">extends</span> <span class="token class-name">Account</span> <span class="token keyword">implements</span> <span class="token class-name">Updatable</span><span class="token punctuation">,</span> Serializable <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="3"><span class="token keyword">class</span> <span class="token class-name">User</span> <span class="token keyword">extends</span> <span class="token class-name">Account</span> <span class="token keyword">implements</span> <span class="token class-name">Updatable</span><span class="token punctuation">,</span> Serializable <span class="token punctuation">{</span>
|
||||||
@ -407,7 +407,7 @@
|
|||||||
</span><span class="code-line line-number" line="35"> <span class="token keyword">static</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>#userCount <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="35"> <span class="token keyword">static</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>#userCount <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="36"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="36"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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">
|
||||||
<p>声明一个可以在你的类方法中改变的类型。</p>
|
<p>声明一个可以在你的类方法中改变的类型。</p>
|
||||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Box<span class="token operator"><</span>Type<span class="token operator">></span></span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Box<span class="token operator"><</span>Type<span class="token operator">></span></span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> contents<span class="token operator">:</span> Type
|
</span><span class="code-line line-number" line="2"> contents<span class="token operator">:</span> Type
|
||||||
@ -418,7 +418,7 @@
|
|||||||
</span><span class="code-line line-number" line="7"><span class="token keyword">const</span> stringBox <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Box</span><span class="token punctuation">(</span><span class="token string">"a package"</span><span class="token punctuation">)</span>
|
</span><span class="code-line line-number" line="7"><span class="token keyword">const</span> stringBox <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Box</span><span class="token punctuation">(</span><span class="token string">"a package"</span><span class="token punctuation">)</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>这些功能是 TypeScript 特定的语言扩展，可能永远无法使用当前语法进入 JavaScript。</p>
|
<p>这些功能是 TypeScript 特定的语言扩展，可能永远无法使用当前语法进入 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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Location</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Location</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 keyword">public</span> x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> <span class="token keyword">public</span> y<span class="token operator">:</span> <span class="token builtin">number</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 function">constructor</span><span class="token punctuation">(</span><span class="token keyword">public</span> x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> <span class="token keyword">public</span> y<span class="token operator">:</span> <span class="token builtin">number</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><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
@ -428,7 +428,7 @@
|
|||||||
</span><span class="code-line line-number" line="7">loc<span class="token punctuation">.</span>y <span class="token comment">// 40</span>
|
</span><span class="code-line line-number" line="7">loc<span class="token punctuation">.</span>y <span class="token comment">// 40</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>TypeScript 特定于类的扩展，可自动将实例字段设置为输入参数。</p>
|
<p>TypeScript 特定于类的扩展，可自动将实例字段设置为输入参数。</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">abstract</span> <span class="token keyword">class</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">abstract</span> <span class="token keyword">class</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token keyword">abstract</span> <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="2"> <span class="token keyword">abstract</span> <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token function">printName</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 function">printName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
@ -438,7 +438,7 @@
|
|||||||
</span><span class="code-line line-number" line="7"><span class="token keyword">class</span> <span class="token class-name">Dog</span> <span class="token keyword">extends</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span> <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="7"><span class="token keyword">class</span> <span class="token class-name">Dog</span> <span class="token keyword">extends</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span> <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>一个类可以被声明为不可实现，但可以在类型系统中被子类化。 class 成员也可以。</p>
|
<p>一个类可以被声明为不可实现，但可以在类型系统中被子类化。 class 成员也可以。</p>
|
||||||
</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">import</span> <span class="token punctuation">{</span> Syncable<span class="token punctuation">,</span> triggersSync<span class="token punctuation">,</span> preferCache<span class="token punctuation">,</span> required <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"mylib"</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">import</span> <span class="token punctuation">{</span> Syncable<span class="token punctuation">,</span> triggersSync<span class="token punctuation">,</span> preferCache<span class="token punctuation">,</span> required <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"mylib"</span>
|
||||||
</span><span class="code-line line-number" line="2">
|
</span><span class="code-line line-number" line="2">
|
||||||
</span><span class="code-line line-number" line="3"><span class="token decorator"><span class="token at operator">@</span><span class="token function">Syncable</span></span>
|
</span><span class="code-line line-number" line="3"><span class="token decorator"><span class="token at operator">@</span><span class="token function">Syncable</span></span>
|
||||||
@ -451,7 +451,7 @@
|
|||||||
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>您可以在类、类方法、访问器、属性和方法参数上使用装饰器。</p>
|
<p>您可以在类、类方法、访问器、属性和方法参数上使用装饰器。</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">MyClass</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">MyClass</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="2"> <span class="token comment">// 最好将索引数据存储在另一个地方</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token comment">// 而不是类实例本身。</span>
|
</span><span class="code-line line-number" line="3"> <span class="token comment">// 而不是类实例本身。</span>
|
||||||
@ -464,8 +464,8 @@
|
|||||||
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>类可以声明索引签名，与其他对象类型的索引签名相同。</p>
|
<p>类可以声明索引签名，与其他对象类型的索引签名相同。</p>
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>实用程序类型</h2><div class="warp-body">
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>实用程序类型</h2><div class="wrap-body">
|
||||||
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>Awaited<Type></h3><div class="warp-body">
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>Awaited<Type></h3><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">type</span> <span class="token class-name"><span class="token constant">A</span></span> <span class="token operator">=</span> Awaited<span class="token operator"><</span><span class="token builtin">Promise</span><span class="token operator"><</span><span class="token builtin">string</span><span class="token operator">>></span><span class="token punctuation">;</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">A</span></span> <span class="token operator">=</span> Awaited<span class="token operator"><</span><span class="token builtin">Promise</span><span class="token operator"><</span><span class="token builtin">string</span><span class="token operator">>></span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token comment">// type A = string</span>
|
</span><span class="code-line line-number" line="2"><span class="token comment">// type A = string</span>
|
||||||
</span><span class="code-line line-number" line="3">
|
</span><span class="code-line line-number" line="3">
|
||||||
@ -476,7 +476,7 @@
|
|||||||
</span><span class="code-line line-number" line="8"><span class="token comment">// type C = number | boolean</span>
|
</span><span class="code-line line-number" line="8"><span class="token comment">// type C = number | boolean</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>这种类型旨在模拟异步函数中的 await 或 Promises 上的 .then() 方法等操作 - 特别是它们递归解包 Promises 的方式。</p>
|
<p>这种类型旨在模拟异步函数中的 await 或 Promises 上的 .then() 方法等操作 - 特别是它们递归解包 Promises 的方式。</p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Required<Type></h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Required<Type></h3><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">interface</span> <span class="token class-name">Props</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">Props</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> a<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="2"> a<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"> b<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="3"> b<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||||||
@ -488,7 +488,7 @@
|
|||||||
</span><span class="code-line line-number" line="9"><span class="token comment">// 但在 'Required<Props>' 类型中是必需的。</span>
|
</span><span class="code-line line-number" line="9"><span class="token comment">// 但在 'Required<Props>' 类型中是必需的。</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>使 Type 中的所有属性成为必需</p>
|
<p>使 Type 中的所有属性成为必需</p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Readonly<Type></h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Readonly<Type></h3><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">interface</span> <span class="token class-name">Todo</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">Todo</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="2"> title<span class="token operator">:</span> <span class="token builtin">string</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="3"><span class="token punctuation">}</span>
|
||||||
@ -502,7 +502,7 @@
|
|||||||
</span><span class="code-line line-number" line="11"> <span class="token operator">:</span> Readonly<span class="token operator"><</span>Type<span class="token operator">></span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="11"> <span class="token operator">:</span> Readonly<span class="token operator"><</span>Type<span class="token operator">></span><span class="token punctuation">;</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>将 Type 中的所有属性设为<strong>只读</strong></p>
|
<p>将 Type 中的所有属性设为<strong>只读</strong></p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Partial<Type></h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Partial<Type></h3><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">interface</span> <span class="token class-name">Todo</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">Todo</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="2"> title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"> description<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="3"> description<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||||||
@ -522,7 +522,7 @@
|
|||||||
</span><span class="code-line line-number" line="17"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="17"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>将 <code>Type</code> 中的所有属性设为可选</p>
|
<p>将 <code>Type</code> 中的所有属性设为可选</p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Record<Keys, Type></h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Record<Keys, Type></h3><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">interface</span> <span class="token class-name">CatInfo</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">CatInfo</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> age<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="2"> age<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"> breed<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="3"> breed<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||||||
@ -538,7 +538,7 @@
|
|||||||
</span><span class="code-line line-number" line="13"><span class="token comment">// 👉 const cats: Record<CatName, CatInfo></span>
|
</span><span class="code-line line-number" line="13"><span class="token comment">// 👉 const cats: Record<CatName, CatInfo></span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>构造一个具有一组 Keys 类型的属性 Type 的类型</p>
|
<p>构造一个具有一组 Keys 类型的属性 Type 的类型</p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Pick<Type, Keys></h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Pick<Type, Keys></h3><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">interface</span> <span class="token class-name">Todo</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">Todo</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="2"> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"> description<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="3"> description<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||||||
@ -556,7 +556,7 @@
|
|||||||
</span><span class="code-line line-number" line="15"> <span class="token comment">// 👉 const todo: TodoPreview</span>
|
</span><span class="code-line line-number" line="15"> <span class="token comment">// 👉 const todo: TodoPreview</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>从 Type 中<strong>选择</strong>一组其键在并集 Keys 中的属性</p>
|
<p>从 Type 中<strong>选择</strong>一组其键在并集 Keys 中的属性</p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Exclude<UnionType, ExcludedMembers></h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Exclude<UnionType, ExcludedMembers></h3><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">type</span> <span class="token class-name"><span class="token constant">T0</span></span> <span class="token operator">=</span> Exclude<span class="token operator"><</span><span class="token string">"a"</span> <span class="token operator">|</span> <span class="token string">"b"</span> <span class="token operator">|</span> <span class="token string">"c"</span><span class="token punctuation">,</span> <span class="token string">"a"</span><span class="token operator">></span><span class="token punctuation">;</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T0</span></span> <span class="token operator">=</span> Exclude<span class="token operator"><</span><span class="token string">"a"</span> <span class="token operator">|</span> <span class="token string">"b"</span> <span class="token operator">|</span> <span class="token string">"c"</span><span class="token punctuation">,</span> <span class="token string">"a"</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token comment">// 👉 type T0 = "b" | "c"</span>
|
</span><span class="code-line line-number" line="2"><span class="token comment">// 👉 type T0 = "b" | "c"</span>
|
||||||
</span><span class="code-line line-number" line="3">
|
</span><span class="code-line line-number" line="3">
|
||||||
@ -568,7 +568,7 @@
|
|||||||
</span><span class="code-line line-number" line="9"><span class="token comment">// 👉 type T2 = string | number</span>
|
</span><span class="code-line line-number" line="9"><span class="token comment">// 👉 type T2 = string | number</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>从 <code>UnionType</code> 中<strong>排除</strong>那些可分配给 <code>ExcludedMembers</code> 的类型</p>
|
<p>从 <code>UnionType</code> 中<strong>排除</strong>那些可分配给 <code>ExcludedMembers</code> 的类型</p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Extract<Type, Union></h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Extract<Type, Union></h3><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">type</span> <span class="token class-name"><span class="token constant">T0</span></span> <span class="token operator">=</span> Extract<span class="token operator"><</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T0</span></span> <span class="token operator">=</span> Extract<span class="token operator"><</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token string">"a"</span> <span class="token operator">|</span> <span class="token string">"b"</span> <span class="token operator">|</span> <span class="token string">"c"</span><span class="token punctuation">,</span> <span class="token string">"a"</span> <span class="token operator">|</span> <span class="token string">"f"</span>
|
</span><span class="code-line line-number" line="2"> <span class="token string">"a"</span> <span class="token operator">|</span> <span class="token string">"b"</span> <span class="token operator">|</span> <span class="token string">"c"</span><span class="token punctuation">,</span> <span class="token string">"a"</span> <span class="token operator">|</span> <span class="token string">"f"</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token operator">></span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="3"><span class="token operator">></span><span class="token punctuation">;</span>
|
||||||
@ -580,7 +580,7 @@
|
|||||||
</span><span class="code-line line-number" line="9"><span class="token comment">// type T1 = () => void</span>
|
</span><span class="code-line line-number" line="9"><span class="token comment">// type T1 = () => void</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>通过从 Type 中<strong>提取</strong>所有可分配给 Union 的联合成员来构造一个类型。</p>
|
<p>通过从 Type 中<strong>提取</strong>所有可分配给 Union 的联合成员来构造一个类型。</p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>NonNullable<Type></h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>NonNullable<Type></h3><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">type</span> <span class="token class-name"><span class="token constant">T0</span></span> <span class="token operator">=</span> NonNullable<span class="token operator"><</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T0</span></span> <span class="token operator">=</span> NonNullable<span class="token operator"><</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token keyword">undefined</span>
|
</span><span class="code-line line-number" line="2"> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token keyword">undefined</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token operator">></span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="3"><span class="token operator">></span><span class="token punctuation">;</span>
|
||||||
@ -592,7 +592,7 @@
|
|||||||
</span><span class="code-line line-number" line="9"><span class="token comment">// type T1 = string[]</span>
|
</span><span class="code-line line-number" line="9"><span class="token comment">// type T1 = string[]</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>通过从 Type 中<strong>排除</strong> null 和 undefined 来构造一个类型。</p>
|
<p>通过从 Type 中<strong>排除</strong> null 和 undefined 来构造一个类型。</p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Omit<Type, Keys></h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Omit<Type, Keys></h3><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">interface</span> <span class="token class-name">Todo</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">Todo</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="2"> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"> completed<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="3"> completed<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
|
||||||
@ -610,7 +610,7 @@
|
|||||||
</span><span class="code-line line-number" line="15"> <span class="token comment">// 👉 const todo: TodoPreview</span>
|
</span><span class="code-line line-number" line="15"> <span class="token comment">// 👉 const todo: TodoPreview</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>构造一个具有 Type 属性的类型，但类型 Keys 中的属性<strong>除外</strong>。</p>
|
<p>构造一个具有 Type 属性的类型，但类型 Keys 中的属性<strong>除外</strong>。</p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Parameters<Type></h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>Parameters<Type></h3><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">declare</span> <span class="token keyword">function</span> <span class="token function">f1</span><span class="token punctuation">(</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">f1</span><span class="token punctuation">(</span>
|
||||||
</span><span class="code-line line-number" line="2"> arg<span class="token operator">:</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> b<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="2"> arg<span class="token operator">:</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> b<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span><span class="token punctuation">;</span>
|
||||||
@ -632,7 +632,7 @@
|
|||||||
</span><span class="code-line line-number" line="19"><span class="token comment">// type T5 = never</span>
|
</span><span class="code-line line-number" line="19"><span class="token comment">// type T5 = never</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>从函数类型 Type 的<strong>参数中</strong>使用的类型构造元组类型。</p>
|
<p>从函数类型 Type 的<strong>参数中</strong>使用的类型构造元组类型。</p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>ConstructorParameters<Type></h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>ConstructorParameters<Type></h3><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">type</span> <span class="token class-name"><span class="token constant">T0</span></span> <span class="token operator">=</span> ConstructorParameters<span class="token operator"><</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name"><span class="token constant">T0</span></span> <span class="token operator">=</span> ConstructorParameters<span class="token operator"><</span>
|
||||||
</span><span class="code-line line-number" line="2"> ErrorConstructor
|
</span><span class="code-line line-number" line="2"> ErrorConstructor
|
||||||
</span><span class="code-line line-number" line="3"><span class="token operator">></span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="3"><span class="token operator">></span><span class="token punctuation">;</span>
|
||||||
@ -652,8 +652,8 @@
|
|||||||
</span><span class="code-line line-number" line="17"><span class="token comment">// type T3 = unknown[]</span>
|
</span><span class="code-line line-number" line="17"><span class="token comment">// type T3 = unknown[]</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>从构造函数类型的类型构造元组或数组类型。它产生一个包含所有参数类型的元组类型（如果 Type 不是函数，则类型 never ）。</p>
|
<p>从构造函数类型的类型构造元组或数组类型。它产生一个包含所有参数类型的元组类型（如果 Type 不是函数，则类型 never ）。</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">
|
||||||
</div></div><div class="h3warp-body"><div class="warp"><div class="warp-header h4warp"><h4>Uppercase<StringType></h4><div class="warp-body">
|
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4>Uppercase<StringType></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">type</span> <span class="token class-name">Greeting</span> <span class="token operator">=</span> <span class="token string">"Hello, world"</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Greeting</span> <span class="token operator">=</span> <span class="token string">"Hello, world"</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">ShoutyGreeting</span> <span class="token operator">=</span> Uppercase<span class="token operator"><</span>Greeting<span class="token operator">></span>
|
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">ShoutyGreeting</span> <span class="token operator">=</span> Uppercase<span class="token operator"><</span>Greeting<span class="token operator">></span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token comment">// type ShoutyGreeting = "HELLO, WORLD"</span>
|
</span><span class="code-line line-number" line="3"><span class="token comment">// type ShoutyGreeting = "HELLO, WORLD"</span>
|
||||||
@ -663,7 +663,7 @@
|
|||||||
</span><span class="code-line line-number" line="7"><span class="token comment">// type MainID = "ID-MY_APP"</span>
|
</span><span class="code-line line-number" line="7"><span class="token comment">// type MainID = "ID-MY_APP"</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>将字符串中的每个字符<strong>转换为大写</strong>版本。</p>
|
<p>将字符串中的每个字符<strong>转换为大写</strong>版本。</p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h4warp"><h4>Lowercase<StringType></h4><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>Lowercase<StringType></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">type</span> <span class="token class-name">Greeting</span> <span class="token operator">=</span> <span class="token string">"Hello, world"</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Greeting</span> <span class="token operator">=</span> <span class="token string">"Hello, world"</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">QuietGreeting</span> <span class="token operator">=</span> Lowercase<span class="token operator"><</span>Greeting<span class="token operator">></span>
|
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">QuietGreeting</span> <span class="token operator">=</span> Lowercase<span class="token operator"><</span>Greeting<span class="token operator">></span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token comment">// type QuietGreeting = "hello, world"</span>
|
</span><span class="code-line line-number" line="3"><span class="token comment">// type QuietGreeting = "hello, world"</span>
|
||||||
@ -673,19 +673,19 @@
|
|||||||
</span><span class="code-line line-number" line="7"><span class="token comment">// type MainID = "id-my_app"</span>
|
</span><span class="code-line line-number" line="7"><span class="token comment">// type MainID = "id-my_app"</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>将字符串中的每个字符转换为等效的<strong>小写字母</strong>。</p>
|
<p>将字符串中的每个字符转换为等效的<strong>小写字母</strong>。</p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h4warp"><h4>Capitalize<StringType></h4><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>Capitalize<StringType></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">type</span> <span class="token class-name">LowercaseGreeting</span> <span class="token operator">=</span> <span class="token string">"hello, world"</span><span class="token punctuation">;</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">LowercaseGreeting</span> <span class="token operator">=</span> <span class="token string">"hello, world"</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">Greeting</span> <span class="token operator">=</span> Capitalize<span class="token operator"><</span>LowercaseGreeting<span class="token operator">></span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">Greeting</span> <span class="token operator">=</span> Capitalize<span class="token operator"><</span>LowercaseGreeting<span class="token operator">></span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token comment">// type Greeting = "Hello, world"</span>
|
</span><span class="code-line line-number" line="3"><span class="token comment">// type Greeting = "Hello, world"</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>将字符串中的第一个字符转换为等效的<strong>大写字母</strong>。</p>
|
<p>将字符串中的第一个字符转换为等效的<strong>大写字母</strong>。</p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h4warp"><h4>Uncapitalize<StringType></h4><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4>Uncapitalize<StringType></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">type</span> <span class="token class-name">UppercaseGreeting</span> <span class="token operator">=</span> <span class="token string">"HELLO WORLD"</span><span class="token punctuation">;</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">UppercaseGreeting</span> <span class="token operator">=</span> <span class="token string">"HELLO WORLD"</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">UncomfortableGreeting</span> <span class="token operator">=</span> Uncapitalize<span class="token operator"><</span>UppercaseGreeting<span class="token operator">></span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">UncomfortableGreeting</span> <span class="token operator">=</span> Uncapitalize<span class="token operator"><</span>UppercaseGreeting<span class="token operator">></span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token comment">// type UncomfortableGreeting = "hELLO WORLD"</span>
|
</span><span class="code-line line-number" line="3"><span class="token comment">// type UncomfortableGreeting = "hELLO WORLD"</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>将字符串中的第一个字符转换为等效的<strong>小写字母</strong>。</p>
|
<p>将字符串中的第一个字符转换为等效的<strong>小写字母</strong>。</p>
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h3warp"><h3>ReturnType<Type></h3><div class="warp-body">
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>ReturnType<Type></h3><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">declare</span> <span class="token keyword">function</span> <span class="token function">f1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">f1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> a<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> b<span class="token operator">:</span> <span class="token builtin">string</span>
|
</span><span class="code-line line-number" line="2"> a<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> b<span class="token operator">:</span> <span class="token builtin">string</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="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||||
@ -717,7 +717,7 @@
|
|||||||
</span><span class="code-line line-number" line="29"><span class="token comment">// type T6 = never</span>
|
</span><span class="code-line line-number" line="29"><span class="token comment">// type T6 = never</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>构造一个由函数 Type 的<strong>返回类型</strong>组成的类型。</p>
|
<p>构造一个由函数 Type 的<strong>返回类型</strong>组成的类型。</p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>ThisType<Type></h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>ThisType<Type></h3><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">type</span> <span class="token class-name">ObjectDescriptor<span class="token operator"><</span><span class="token constant">D</span><span class="token punctuation">,</span> <span class="token constant">M</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">ObjectDescriptor<span class="token operator"><</span><span class="token constant">D</span><span class="token punctuation">,</span> <span class="token constant">M</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> data<span class="token operator">?</span><span class="token operator">:</span> <span class="token constant">D</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="2"> data<span class="token operator">?</span><span class="token operator">:</span> <span class="token constant">D</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token comment">// 方法中“this”的类型是 D & M</span>
|
</span><span class="code-line line-number" line="3"> <span class="token comment">// 方法中“this”的类型是 D & M</span>
|
||||||
@ -747,7 +747,7 @@
|
|||||||
</span><span class="code-line line-number" line="27">obj<span class="token punctuation">.</span><span class="token function">moveBy</span><span class="token punctuation">(</span><span class="token number">5</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="27">obj<span class="token punctuation">.</span><span class="token function">moveBy</span><span class="token punctuation">(</span><span class="token number">5</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>
|
</span></code></pre>
|
||||||
<p>此实用程序不返回转换后的类型。 相反，它用作上下文 this 类型的标记。 请注意，必须启用 <a href="https://www.typescriptlang.org/tsconfig#noImplicitThis">noImplicitThis</a> 标志才能使用此实用程序。</p>
|
<p>此实用程序不返回转换后的类型。 相反，它用作上下文 this 类型的标记。 请注意，必须启用 <a href="https://www.typescriptlang.org/tsconfig#noImplicitThis">noImplicitThis</a> 标志才能使用此实用程序。</p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>InstanceType<Type></h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>InstanceType<Type></h3><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">class</span> <span class="token class-name"><span class="token constant">C</span></span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name"><span class="token constant">C</span></span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> x <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"> x <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"> y <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"> y <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||||||
@ -760,7 +760,7 @@
|
|||||||
</span><span class="code-line line-number" line="10"><span class="token comment">// type T2 = never</span>
|
</span><span class="code-line line-number" line="10"><span class="token comment">// type T2 = never</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>构造一个由 Type 中构造函数的实例类型组成的类型。</p>
|
<p>构造一个由 Type 中构造函数的实例类型组成的类型。</p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>ThisParameterType<Type></h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>ThisParameterType<Type></h3><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">function</span> <span class="token function">toHex</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token operator">:</span> Number<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">toHex</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token operator">:</span> Number<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="2"> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">16</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="3"><span class="token punctuation">}</span>
|
||||||
@ -772,7 +772,7 @@
|
|||||||
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>提取函数类型的 <code>this</code> 参数的类型，如果函数类型没有 <code>this</code> 参数，则为未知。</p>
|
<p>提取函数类型的 <code>this</code> 参数的类型，如果函数类型没有 <code>this</code> 参数，则为未知。</p>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>OmitThisParameter<Type></h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>OmitThisParameter<Type></h3><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">function</span> <span class="token function">toHex</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token operator">:</span> Number<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">toHex</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token operator">:</span> Number<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="2"> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token number">16</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="3"><span class="token punctuation">}</span>
|
||||||
@ -783,8 +783,8 @@
|
|||||||
</span><span class="code-line line-number" line="8"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">fiveToHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="8"><span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">fiveToHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>从 Type 中移除 this 参数。 如果 Type 没有显式声明此参数，则结果只是 Type。 否则，从 Type 创建一个不带此参数的新函数类型。 泛型被删除，只有最后一个重载签名被传播到新的函数类型中。</p>
|
<p>从 Type 中移除 this 参数。 如果 Type 没有显式声明此参数，则结果只是 Type。 否则，从 Type 创建一个不带此参数的新函数类型。 泛型被删除，只有最后一个重载签名被传播到新的函数类型中。</p>
|
||||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>JSX</h2><div class="warp-body">
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>JSX</h2><div class="wrap-body">
|
||||||
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>JSX 介绍</h3><div class="warp-body">
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>JSX 介绍</h3><div class="wrap-body">
|
||||||
<p>JSX 规范是对 ECMAScript 的类似 XML 的语法扩展。</p>
|
<p>JSX 规范是对 ECMAScript 的类似 XML 的语法扩展。</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>使用 <code>.tsx</code> 扩展名命名您的文件</li>
|
<li>使用 <code>.tsx</code> 扩展名命名您的文件</li>
|
||||||
@ -792,21 +792,21 @@
|
|||||||
<li>不允许在 <code>.tsx</code> 文件中使用尖括号类型断言。</li>
|
<li>不允许在 <code>.tsx</code> 文件中使用尖括号类型断言。</li>
|
||||||
<li><a href="https://facebook.github.io/jsx/">JSX 规范</a></li>
|
<li><a href="https://facebook.github.io/jsx/">JSX 规范</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>as 运算符</h3><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3>as 运算符</h3><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> foo <span class="token operator">=</span> <span class="token operator"><</span>foo<span class="token operator">></span>bar<span class="token punctuation">;</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token operator"><</span>foo<span class="token operator">></span>bar<span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token comment">// ❌ 不允许在 .tsx 👆 文件中使用尖括号类型断言。</span>
|
</span><span class="code-line line-number" line="2"><span class="token comment">// ❌ 不允许在 .tsx 👆 文件中使用尖括号类型断言。</span>
|
||||||
</span><span class="code-line line-number" line="3">
|
</span><span class="code-line line-number" line="3">
|
||||||
</span><span class="code-line line-number" line="4"><span class="token keyword">const</span> foo <span class="token operator">=</span> bar <span class="token keyword">as</span> foo<span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="4"><span class="token keyword">const</span> foo <span class="token operator">=</span> bar <span class="token keyword">as</span> foo<span class="token punctuation">;</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p><code>as</code> 运算符在 <code>.ts</code> 和 <code>.tsx</code> 文件中都可用，并且在行为上与<strong>尖括号</strong>类型断言样式相同。</p>
|
<p><code>as</code> 运算符在 <code>.ts</code> 和 <code>.tsx</code> 文件中都可用，并且在行为上与<strong>尖括号</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-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">import</span> <span class="token imports"><span class="token maybe-class-name">MyComponent</span></span> <span class="token keyword">from</span> <span class="token string">"./myComponent"</span><span class="token punctuation">;</span>
|
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">import</span> <span class="token imports"><span class="token maybe-class-name">MyComponent</span></span> <span class="token keyword">from</span> <span class="token string">"./myComponent"</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="2">
|
</span><span class="code-line line-number" line="2">
|
||||||
</span><span class="code-line line-number" line="3"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyComponent</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ok</span>
|
</span><span class="code-line line-number" line="3"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyComponent</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ok</span>
|
||||||
</span><span class="code-line line-number" line="4"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SomeOtherComponent</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ❌ error</span>
|
</span><span class="code-line line-number" line="4"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SomeOtherComponent</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ❌ error</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>基于值的元素只是由范围内的标识符查找。</p>
|
<p>基于值的元素只是由范围内的标识符查找。</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-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">declare</span> <span class="token keyword">namespace</span> <span class="token constant">JSX</span> <span class="token punctuation">{</span>
|
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">declare</span> <span class="token keyword">namespace</span> <span class="token constant">JSX</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token keyword">interface</span> <span class="token class-name">IntrinsicElements</span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="2"> <span class="token keyword">interface</span> <span class="token class-name">IntrinsicElements</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> foo<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="3"> foo<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
|
||||||
@ -822,7 +822,7 @@
|
|||||||
</span><span class="code-line line-number" line="4"> <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><span class="code-line line-number" line="5"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">FooProp</span> <span class="token punctuation">{</span>
|
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">FooProp</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="2"> name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"> <span class="token constant">X</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="3"> <span class="token constant">X</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||||||
@ -838,7 +838,7 @@
|
|||||||
</span><span class="code-line line-number" line="13"><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>
|
</span></code></pre>
|
||||||
<p>该组件被定义为一个 JavaScript 函数，其第一个参数是一个 props 对象。 TS 强制它的返回类型必须可分配给 JSX.Element。</p>
|
<p>该组件被定义为一个 JavaScript 函数，其第一个参数是一个 props 对象。 TS 强制它的返回类型必须可分配给 JSX.Element。</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-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">CeProps</span> <span class="token punctuation">{</span>
|
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">CeProps</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> children<span class="token operator">:</span> <span class="token constant">JSX</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Element</span></span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">|</span> <span class="token constant">JSX</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Element</span></span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="2"> children<span class="token operator">:</span> <span class="token constant">JSX</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Element</span></span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">|</span> <span class="token constant">JSX</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Element</span></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="3"><span class="token punctuation">}</span>
|
||||||
@ -857,7 +857,7 @@
|
|||||||
</span><span class="code-line line-number" line="16"> <span class="token comment">// ...</span>
|
</span><span class="code-line line-number" line="16"> <span class="token comment">// ...</span>
|
||||||
</span><span class="code-line line-number" line="17"><span class="token punctuation">}</span>
|
</span><span class="code-line line-number" line="17"><span class="token punctuation">}</span>
|
||||||
</span></code></pre>
|
</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-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">MenuProps</span> <span class="token keyword">extends</span> <span class="token class-name">React</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">LiHTMLAttributes</span></span><span class="token operator"><</span><span class="token maybe-class-name">HTMLUListElement</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token spread operator">...</span> <span class="token punctuation">}</span>
|
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name">MenuProps</span> <span class="token keyword">extends</span> <span class="token class-name">React</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">LiHTMLAttributes</span></span><span class="token operator"><</span><span class="token maybe-class-name">HTMLUListElement</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token spread operator">...</span> <span class="token punctuation">}</span>
|
||||||
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> <span class="token function-variable function">InternalMenu</span> <span class="token operator">=</span> <span class="token punctuation">(</span>props<span class="token operator">:</span> <span class="token maybe-class-name">MenuProps</span><span class="token punctuation">,</span> ref<span class="token operator">?</span><span class="token operator">:</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">ForwardedRef</span></span><span class="token operator"><</span><span class="token maybe-class-name">HTMLUListElement</span><span class="token operator">></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> <span class="token function-variable function">InternalMenu</span> <span class="token operator">=</span> <span class="token punctuation">(</span>props<span class="token operator">:</span> <span class="token maybe-class-name">MenuProps</span><span class="token punctuation">,</span> ref<span class="token operator">?</span><span class="token operator">:</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">ForwardedRef</span></span><span class="token operator"><</span><span class="token maybe-class-name">HTMLUListElement</span><span class="token operator">></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 tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>props<span class="token punctuation">}</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>ref<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
</span><span class="code-line line-number" line="3"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>props<span class="token punctuation">}</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>ref<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||||
@ -876,7 +876,7 @@
|
|||||||
</span><span class="code-line line-number" line="16"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu.Item</span></span> <span class="token punctuation">/></span></span> <span class="token comment">// ✅ ok</span>
|
</span><span class="code-line line-number" line="16"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu.Item</span></span> <span class="token punctuation">/></span></span> <span class="token comment">// ✅ ok</span>
|
||||||
</span><span class="code-line line-number" line="17"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu.SubMenu</span></span> <span class="token punctuation">/></span></span> <span class="token comment">// ✅ ok</span>
|
</span><span class="code-line line-number" line="17"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu.SubMenu</span></span> <span class="token punctuation">/></span></span> <span class="token comment">// ✅ ok</span>
|
||||||
</span></code></pre>
|
</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-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">declare</span> <span class="token keyword">namespace</span> <span class="token constant">JSX</span> <span class="token punctuation">{</span>
|
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">declare</span> <span class="token keyword">namespace</span> <span class="token constant">JSX</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> <span class="token keyword">interface</span> <span class="token class-name">ElementClass</span> <span class="token punctuation">{</span>
|
</span><span class="code-line line-number" line="2"> <span class="token keyword">interface</span> <span class="token class-name">ElementClass</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="3"> render<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="3"> render<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
|
||||||
@ -900,7 +900,7 @@
|
|||||||
</span><span class="code-line line-number" line="6"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">NotAValidFactoryFunction</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ❌ error</span>
|
</span><span class="code-line line-number" line="6"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">NotAValidFactoryFunction</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ❌ error</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>默认情况下，<code>JSX.ElementClass</code> 是 {}，但可以对其进行扩展，以将 <code>JSX</code> 的使用限制为仅限于符合适当接口的类型。</p>
|
<p>默认情况下，<code>JSX.ElementClass</code> 是 {}，但可以对其进行扩展，以将 <code>JSX</code> 的使用限制为仅限于符合适当接口的类型。</p>
|
||||||
</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-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Props</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Props</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||||
</span><span class="code-line line-number" line="2"> header<span class="token operator">:</span> React<span class="token punctuation">.</span>ReactNode<span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="2"> header<span class="token operator">:</span> React<span class="token punctuation">.</span>ReactNode<span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"> body<span class="token operator">:</span> React<span class="token punctuation">.</span>ReactNode<span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="3"> body<span class="token operator">:</span> React<span class="token punctuation">.</span>ReactNode<span class="token punctuation">;</span>
|
||||||
@ -919,7 +919,7 @@
|
|||||||
</span><span class="code-line line-number" line="16">
|
</span><span class="code-line line-number" line="16">
|
||||||
</span><span class="code-line line-number" line="17"><span class="token operator"><</span>MyComponent header<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator"><</span>h1<span class="token operator">></span>Header<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span><span class="token punctuation">}</span> body<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator"><</span>i<span class="token operator">></span>body<span class="token operator"><</span><span class="token operator">/</span>i<span class="token operator">></span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
</span><span class="code-line line-number" line="17"><span class="token operator"><</span>MyComponent header<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator"><</span>h1<span class="token operator">></span>Header<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span><span class="token punctuation">}</span> body<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator"><</span>i<span class="token operator">></span>body<span class="token operator"><</span><span class="token operator">/</span>i<span class="token operator">></span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||||
</span></code></pre>
|
</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-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 一个泛型组件</span>
|
<pre class="language-tsx"><code class="language-tsx 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">type</span> <span class="token class-name">SelectProps<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token punctuation">{</span> items<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">SelectProps<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token punctuation">{</span> items<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||||
</span><span class="code-line line-number" line="3"><span class="token keyword">class</span> <span class="token class-name">Select<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token keyword">extends</span> <span class="token class-name">React</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Component</span></span><span class="token operator"><</span><span class="token maybe-class-name">SelectProps</span><span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span><span class="token punctuation">,</span> <span class="token builtin">any</span><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 keyword">class</span> <span class="token class-name">Select<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token keyword">extends</span> <span class="token class-name">React</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Component</span></span><span class="token operator"><</span><span class="token maybe-class-name">SelectProps</span><span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||||||
@ -928,5 +928,5 @@
|
|||||||
</span><span class="code-line line-number" line="6"><span class="token keyword">const</span> <span class="token function-variable function">Form</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 operator"><</span><span class="token maybe-class-name">Select</span><span class="token operator"><</span><span class="token builtin">string</span><span class="token operator">></span> items<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">]</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
|
</span><span class="code-line line-number" line="6"><span class="token keyword">const</span> <span class="token function-variable function">Form</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 operator"><</span><span class="token maybe-class-name">Select</span><span class="token operator"><</span><span class="token builtin">string</span><span class="token operator">></span> items<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">]</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||||||
</span></code></pre>
|
</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>
|
</html>
|
||||||
|
|||||||
@ -9,10 +9,10 @@
|
|||||||
<meta keywords="Quick,Reference,cheatsheet,vscode">
|
<meta keywords="Quick,Reference,cheatsheet,vscode">
|
||||||
<link rel="stylesheet" href="../style/style.css">
|
<link rel="stylesheet" href="../style/style.css">
|
||||||
</head>
|
</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/vscode.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>VSCode 备忘清单</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/vscode.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>VSCode 备忘清单</h1><div class="wrap-body">
|
||||||
<p>这个 VSCode (Visual Studio Code) 快速参考备忘单显示了它的键盘快捷键和命令。</p>
|
<p>这个 VSCode (Visual Studio Code) 快速参考备忘单显示了它的键盘快捷键和命令。</p>
|
||||||
</div></header><div class="h1warp-body"><div class="warp"><div class="warp-header h2warp"><h2>Windows</h2><div class="warp-body">
|
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2>Windows</h2><div class="wrap-body">
|
||||||
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>一般的</h3><div class="warp-body">
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>一般的</h3><div class="wrap-body">
|
||||||
<table class="table-thead-hide">
|
<table class="table-thead-hide">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -47,7 +47,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</div></div></div><div class="warp" style="grid-row: span 2/span 2;"><div class="warp-header h3warp"><h3>基本编辑</h3><div class="warp-body"><!--rehype:data-warp-style=grid-row: span 2/span 2;-->
|
</div></div></div><div class="wrap" style="grid-row: span 2/span 2;"><div class="wrap-header h3wrap"><h3>基本编辑</h3><div class="wrap-body"><!--rehype:data-wrap-style=grid-row: span 2/span 2;-->
|
||||||
<table class="table-thead-hide">
|
<table class="table-thead-hide">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -158,7 +158,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</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 class="table-thead-hide">
|
<table class="table-thead-hide">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -209,7 +209,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</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 class="table-thead-hide">
|
<table class="table-thead-hide">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -248,7 +248,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</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 class="table-thead-hide">
|
<table class="table-thead-hide">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -307,7 +307,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</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 class="table-thead-hide">
|
<table class="table-thead-hide">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -366,7 +366,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</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 class="table-thead-hide">
|
<table class="table-thead-hide">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -405,7 +405,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</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 class="table-thead-hide">
|
<table class="table-thead-hide">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -472,7 +472,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</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 class="table-thead-hide">
|
<table class="table-thead-hide">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -543,7 +543,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
</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 class="table-thead-hide">
|
<table class="table-thead-hide">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -607,5 +607,5 @@
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table><!--rehype:class=table-thead-hide-->
|
</table><!--rehype:class=table-thead-hide-->
|
||||||
|
|
||||||
</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>
|
</html>
|
||||||
|
|||||||
13
index.html
13
index.html
@ -9,10 +9,10 @@
|
|||||||
<meta keywords="Quick,Reference,cheatsheet,">
|
<meta keywords="Quick,Reference,cheatsheet,">
|
||||||
<link rel="stylesheet" href="style/style.css">
|
<link rel="stylesheet" href="style/style.css">
|
||||||
</head>
|
</head>
|
||||||
<body class="home"><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/README.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>Quick Reference</h1><div class="warp-body">
|
<body class="home"><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/README.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>Quick Reference</h1><div class="wrap-body">
|
||||||
<p>为开发人员分享快速参考备忘单(主要是方便自己)，在看到 <a href="https://github.com/Randy8080/reference">Reference</a> 快速参考备忘单，感觉非常简单，造轮子使命感突然来了，造个中文版本的，为了方便自己的技术栈查阅，立马撸起来 :)。</p>
|
<p>为开发人员分享快速参考备忘单(主要是方便自己)，在看到 <a href="https://github.com/Randy8080/reference">Reference</a> 快速参考备忘单，感觉非常简单，造轮子使命感突然来了，造个中文版本的，为了方便自己的技术栈查阅，立马撸起来 :)。</p>
|
||||||
<p>如果您发现此处的备忘单不合适，您可以通过提交 PR 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。</p>
|
<p>如果您发现此处的备忘单不合适，您可以通过提交 PR 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。</p>
|
||||||
</div></header><div class="h1warp-body"><div class="warp"><div class="warp-header h2warp"><h2>编程</h2><div class="warp-body">
|
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2>编程</h2><div class="wrap-body">
|
||||||
<p class="home-card">
|
<p class="home-card">
|
||||||
<a href="./docs/toml.html">TOML</a>
|
<a href="./docs/toml.html">TOML</a>
|
||||||
<a href="./docs/typescript.html">TypeScript</a>
|
<a href="./docs/typescript.html">TypeScript</a>
|
||||||
@ -20,20 +20,21 @@
|
|||||||
<a href="./docs/json.html">JSON</a>
|
<a href="./docs/json.html">JSON</a>
|
||||||
<a href="./docs/markdown.html">Markdown</a>
|
<a href="./docs/markdown.html">Markdown</a>
|
||||||
</p><!--rehype:class=home-card-->
|
</p><!--rehype:class=home-card-->
|
||||||
</div></div></div><div class="warp"><div class="warp-header h2warp"><h2>工具包</h2><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>工具包</h2><div class="wrap-body">
|
||||||
<p class="home-card">
|
<p class="home-card">
|
||||||
<a href="./docs/npm.html">npm</a>
|
<a href="./docs/npm.html">npm</a>
|
||||||
|
<a href="./docs/package.json.html">package.json</a>
|
||||||
<a href="./docs/vscode.html">VSCode</a>
|
<a href="./docs/vscode.html">VSCode</a>
|
||||||
<a href="./docs/sketch.html">Sketch</a>
|
<a href="./docs/sketch.html">Sketch</a>
|
||||||
<a href="./docs/jest.html">Jest</a>
|
<a href="./docs/jest.html">Jest</a>
|
||||||
</p><!--rehype:class=home-card-->
|
</p><!--rehype:class=home-card-->
|
||||||
</div></div></div><div class="warp"><div class="warp-header h2warp"><h2>Linux 命令</h2><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>Linux 命令</h2><div class="wrap-body">
|
||||||
<p class="home-card">
|
<p class="home-card">
|
||||||
<a href="./docs/cron.html">Cron</a>
|
<a href="./docs/cron.html">Cron</a>
|
||||||
<a href="./docs/git.html">Git</a>
|
<a href="./docs/git.html">Git</a>
|
||||||
</p><!--rehype:class=home-card-->
|
</p><!--rehype:class=home-card-->
|
||||||
</div></div></div><div class="warp"><div class="warp-header h2warp"><h2>License</h2><div class="warp-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>License</h2><div class="wrap-body">
|
||||||
<p>MIT © <a href="https://github.com/jaywcjlove">Kenny Wong</a></p>
|
<p>MIT © <a href="https://github.com/jaywcjlove">Kenny Wong</a></p>
|
||||||
|
|
||||||
</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><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer></body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -45,18 +45,18 @@ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
|
|||||||
padding: 0.75rem;
|
padding: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.home .h1warp-body, body.home .h1warp .warp-body {
|
body.home .h1wrap-body, body.home .h1wrap .wrap-body {
|
||||||
max-width: 940px;
|
max-width: 940px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
padding: 0.75rem;
|
padding: 0.75rem;
|
||||||
}
|
}
|
||||||
body.home .h2warp > h2 {
|
body.home .h2wrap > h2 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-right: 0.5rem;
|
padding-right: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.home .h2warp > h2::after {
|
body.home .h2wrap > h2::after {
|
||||||
content: ' ';
|
content: ' ';
|
||||||
display: block;
|
display: block;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
@ -65,15 +65,15 @@ body.home .h2warp > h2::after {
|
|||||||
--bg-opacity: 1;
|
--bg-opacity: 1;
|
||||||
background-color: rgb(30 41 59/var(--bg-opacity));
|
background-color: rgb(30 41 59/var(--bg-opacity));
|
||||||
}
|
}
|
||||||
body.home .h1warp .warp-body p + p {
|
body.home .h1wrap .wrap-body p + p {
|
||||||
margin-top: 1.6rem;
|
margin-top: 1.6rem;
|
||||||
}
|
}
|
||||||
body.home .h1warp .warp-body p {
|
body.home .h1wrap .wrap-body p {
|
||||||
text-indent: 2rem;
|
text-indent: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
body.home .h1warp p {
|
body.home .h1wrap p {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -150,29 +150,29 @@ body.home .h1warp p {
|
|||||||
gap: 0.3rem;
|
gap: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warp-header.h1warp {
|
.wrap-header.h1wrap {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 4.6rem;
|
margin-top: 4.6rem;
|
||||||
margin-bottom: 5rem;
|
margin-bottom: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warp-header.h1warp .warp-body {
|
.wrap-header.h1wrap .wrap-body {
|
||||||
color: rgb(71 85 105/1);
|
color: rgb(71 85 105/1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.warp-header.h1warp > h1 {
|
.wrap-header.h1wrap > h1 {
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h1warp-body {
|
.h1wrap-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 3rem;
|
gap: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warp-header.h2warp > h2 {
|
.wrap-header.h2wrap > h2 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
@ -184,7 +184,14 @@ body.home .h1warp p {
|
|||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warp-header.h3warp {
|
.wrap-header.h2wrap > :last-child {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.wrap-header.h2wrap .wrap-body {
|
||||||
|
color: rgb(148 163 184/1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap-header.h3wrap {
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -192,7 +199,7 @@ body.home .h1warp p {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warp-header.h3warp > h3 {
|
.wrap-header.h3wrap > h3 {
|
||||||
color: rgb(226 232 240/1);
|
color: rgb(226 232 240/1);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
@ -209,7 +216,7 @@ body.home .h1warp p {
|
|||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warp-header.h3warp > .warp-body p, .warp-header.h4warp > .warp-body p {
|
.wrap-header.h3wrap > .wrap-body p, .wrap-header.h4wrap > .wrap-body p {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
@ -220,7 +227,7 @@ body.home .h1warp p {
|
|||||||
background-color: rgb(15 23 42/0.3);
|
background-color: rgb(15 23 42/0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.warp-header.h3warp > .warp-body p:first-child:before {
|
.wrap-header.h3wrap > .wrap-body p:first-child:before {
|
||||||
background-color: rgb(15 23 42/0.3);
|
background-color: rgb(15 23 42/0.3);
|
||||||
color: rgb(30 41 59/0);
|
color: rgb(30 41 59/0);
|
||||||
content: '-';
|
content: '-';
|
||||||
@ -231,11 +238,11 @@ body.home .h1warp p {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warp-header.h3warp > .warp-body p:last-child {
|
.wrap-header.h3wrap > .wrap-body p:last-child {
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warp-header.h3warp > .warp-body {
|
.wrap-header.h3wrap > .wrap-body {
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -243,7 +250,7 @@ body.home .h1warp p {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h4warp > h4 {
|
.h4wrap > h4 {
|
||||||
border-color: rgb(51 65 85/0.5);
|
border-color: rgb(51 65 85/0.5);
|
||||||
background-color: rgb(51 65 85/0.3);
|
background-color: rgb(51 65 85/0.3);
|
||||||
color: rgb(203 213 225/1);
|
color: rgb(203 213 225/1);
|
||||||
@ -263,13 +270,13 @@ ol, ul, menu {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h4warp > .warp-body ul,
|
.h4wrap > .wrap-body ul,
|
||||||
.h4warp > .warp-body ol,
|
.h4wrap > .wrap-body ol,
|
||||||
.h4warp > .warp-body dl,
|
.h4wrap > .wrap-body dl,
|
||||||
|
|
||||||
.h3warp > .warp-body ul,
|
.h3wrap > .wrap-body ul,
|
||||||
.h3warp > .warp-body ol,
|
.h3wrap > .wrap-body ol,
|
||||||
.h3warp > .warp-body dl {
|
.h3wrap > .wrap-body dl {
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
display: grid;
|
display: grid;
|
||||||
@ -277,16 +284,16 @@ ol, ul, menu {
|
|||||||
grid-template-columns: repeat(1,minmax(0,1fr));
|
grid-template-columns: repeat(1,minmax(0,1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
.h2warp-body ul li,
|
.h2wrap-body ul li,
|
||||||
.h2warp-body ol li,
|
.h2wrap-body ol li,
|
||||||
.h2warp-body dl li {
|
.h2wrap-body dl li {
|
||||||
padding: 9px;
|
padding: 9px;
|
||||||
padding-left: 26px;
|
padding-left: 26px;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: solid 1px rgb(51 65 85/0.5);
|
border-bottom: solid 1px rgb(51 65 85/0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.h2warp-body ul:not(.style-none)>li::before {
|
.h2wrap-body ul:not(.style-none)>li::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -298,25 +305,25 @@ ol, ul, menu {
|
|||||||
top: 18px;
|
top: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h2warp-body ul li,
|
.h2wrap-body ul li,
|
||||||
.h2warp-body ol li,
|
.h2wrap-body ol li,
|
||||||
.h2warp-body dl li {
|
.h2wrap-body dl li {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warp-body ul:last-child {
|
.wrap-body ul:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warp-body ul:last-child li:last-child {
|
.wrap-body ul:last-child li:last-child {
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h3warp hr {
|
.h3wrap hr {
|
||||||
border-bottom: 1px solid #475060;
|
border-bottom: 1px solid #475060;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h2warp-body {
|
.h2wrap-body {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 1.75rem;
|
gap: 1.75rem;
|
||||||
font-size: 0.925rem;
|
font-size: 0.925rem;
|
||||||
@ -325,7 +332,7 @@ ol, ul, menu {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h2warp-body > .warp {
|
.h2wrap-body > .wrap {
|
||||||
background-color: #1e293b;
|
background-color: #1e293b;
|
||||||
color: rgb(203 213 225/1);
|
color: rgb(203 213 225/1);
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -437,7 +444,7 @@ pre {
|
|||||||
.row-span-4 {
|
.row-span-4 {
|
||||||
grid-row: span 4/span 4;
|
grid-row: span 4/span 4;
|
||||||
}
|
}
|
||||||
.wrap {
|
.wrap-text {
|
||||||
white-space: pre-wrap !important;
|
white-space: pre-wrap !important;
|
||||||
overflow-wrap: break-word !important;
|
overflow-wrap: break-word !important;
|
||||||
}
|
}
|
||||||
@ -604,7 +611,7 @@ pre {
|
|||||||
/* 代码高亮 End */
|
/* 代码高亮 End */
|
||||||
|
|
||||||
|
|
||||||
.footer-warp {
|
.footer-wrap {
|
||||||
margin-top: 3.5rem;
|
margin-top: 3.5rem;
|
||||||
color: rgb(100 116 139/1);
|
color: rgb(100 116 139/1);
|
||||||
background-color: rgb(30 41 59/1);
|
background-color: rgb(30 41 59/1);
|
||||||
|
|||||||
Reference in New Issue
Block a user