zhouzhongping/wiki
1
0
Fork 0
Code
f6f2aefb5c
wiki/Technology/WebDevelopment/4.JavaScript/JavaScript.html

1507 lines
598 KiB
HTML
Raw Normal View History

Deploy HTML files - 2024-10-10
2024-10-10 16:56:32 +08:00
<!DOCTYPE html>
<html lang="zh"><head><title>JavaScript</title><meta charset="utf-8"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com"/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM Plex Mono&amp;family=Noto Serif Simplified Chinese:wght@400;700&amp;family=Source Sans Pro:ital,wght@0,400;0,600;1,400;1,600&amp;display=swap"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta property="og:title" content="JavaScript"/><meta property="og:description" content="JavaScript 入门及 ES6."/><meta property="og:image" content="https://wiki.7wate.com/static/og-image.png"/><meta property="og:width" content="1200"/><meta property="og:height" content="675"/><link rel="icon" href="../../../static/icon.png"/><meta name="description" content="JavaScript 入门及 ES6."/><meta name="generator" content="Quartz"/><link href="../../../index.css" rel="stylesheet" type="text/css" spa-preserve/><link href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css" rel="stylesheet" type="text/css" spa-preserve/><script src="../../../prescript.js" type="application/javascript" spa-preserve></script><script type="application/javascript" spa-preserve>const fetchData = fetch("../../../static/contentIndex.json").then(data => data.json())</script></head><body data-slug="Technology/WebDevelopment/4.JavaScript/JavaScript"><div id="quartz-root" class="page"><div id="quartz-body"><div class="left sidebar"><h2 class="page-title"><a href="../../..">🪴 X·Eden</a></h2><div class="spacer mobile-only"></div><div class="search"><button class="search-button" id="search-button"><p>搜索</p><svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title>Search</title><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"></path><circle cx="8" cy="8" r="7"></circle></g></svg></button><div id="search-container"><div id="search-space"><input autocomplete="off" id="search-bar" name="search" type="text" aria-label="搜索些什么" placeholder="搜索些什么"/><div id="search-layout" data-preview="true"></div></div></div></div><button class="darkmode" id="darkmode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="dayIcon" x="0px" y="0px" viewBox="0 0 35 35" style="enable-background:new 0 0 35 35" xml:space="preserve" aria-label="暗色模式"><title>暗色模式</title><path d="M6,17.5C6,16.672,5.328,16,4.5,16h-3C0.672,16,0,16.672,0,17.5 S0.672,19,1.5,19h3C5.328,19,6,18.328,6,17.5z M7.5,26c-0.414,0-0.789,0.168-1.061,0.439l-2,2C4.168,28.711,4,29.086,4,29.5 C4,30.328,4.671,31,5.5,31c0.414,0,0.789-0.168,1.06-0.44l2-2C8.832,28.289,9,27.914,9,27.5C9,26.672,8.329,26,7.5,26z M17.5,6 C18.329,6,19,5.328,19,4.5v-3C19,0.672,18.329,0,17.5,0S16,0.672,16,1.5v3C16,5.328,16.671,6,17.5,6z M27.5,9 c0.414,0,0.789-0.168,1.06-0.439l2-2C30.832,6.289,31,5.914,31,5.5C31,4.672,30.329,4,29.5,4c-0.414,0-0.789,0.168-1.061,0.44 l-2,2C26.168,6.711,26,7.086,26,7.5C26,8.328,26.671,9,27.5,9z M6.439,8.561C6.711,8.832,7.086,9,7.5,9C8.328,9,9,8.328,9,7.5 c0-0.414-0.168-0.789-0.439-1.061l-2-2C6.289,4.168,5.914,4,5.5,4C4.672,4,4,4.672,4,5.5c0,0.414,0.168,0.789,0.439,1.06 L6.439,8.561z M33.5,16h-3c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5h3c0.828,0,1.5-0.672,1.5-1.5S34.328,16,33.5,16z M28.561,26.439C28.289,26.168,27.914,26,27.5,26c-0.828,0-1.5,0.672-1.5,1.5c0,0.414,0.168,0.789,0.439,1.06l2,2 C28.711,30.832,29.086,31,29.5,31c0.828,0,1.5-0.672,1.5-1.5c0-0.414-0.168-0.789-0.439-1.061L28.561,26.439z M17.5,29 c-0.829,0-1.5,0.672-1.5,1.5v3c0,0.828,0.671,1.5,1.5,1.5s1.5-0.672,1.5-1.5v-3C19,29.672,18.329,29,17.5,29z M17.5,7 C11.71,7,7,11.71,7,17.5S11.71,28,17.5,28S28,23.29,28,17.5S23.29,7,17.5,7z M17.5,25c-4.136,0-7.5-3.364-7.5-7.5 c0-4.136,3.364-7.5,7.5-7.5c4.136,0,7.5,3.364,7.5,7.5C25,21.636,21.636,25,17.5,25z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="nightIcon" x="0px" y="0px" viewB
<h2 id="javascript">JavaScript<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#javascript" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h2>
<p>JavaScript 是一种动态的、解释的编程语言，广泛应用于 Web 开发中。JavaScript 通过 BOM（浏览器对象模型）和 DOM（文档对象模型）与浏览器进行交互。</p>
<p>BOM 提供了访问和操作浏览器窗口的能力，包括窗口大小、导航、定时器、对话框等。DOM 则是对网页内容的抽象，它将网页文档结构化为一个节点树，允许开发者查询和操作页面内容。</p>
<p>简单来说，JavaScript 是语言，DOM 是这个语言可以操作的对象之一（网页内容），BOM 也是这个语言可以操作的对象之一（浏览器窗口及其相关属性和方法）。</p>
<pre><code class="mermaid">graph TB
A[JavaScript] -- Interacts with --> B[BOM]
A -- Interacts with --> C[DOM]
B -- Manages --> D[Browser Window]
C -- Manages --> E[Web Page Content]
</code></pre>
<p>这个图展示了 JavaScript、BOM、DOM 之间的关系。<strong>其中，JavaScript 与 BOM 和 DOM 进行交互，BOM 管理浏览器窗口，DOM 管理网页内容。</strong></p>
<h3 id="基础语法">基础语法<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#基础语法" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h3>
<p>JavaScript 的基础语法相对简单,主要包含变量、数据类型、运算符、语句与注释等。</p>
<h4 id="变量">变量<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#变量" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>JavaScript 通过 <code>var</code>、<code>let</code> 和 <code>const</code> 关键词来声明变量，它们之间存在明显的区别：</p>
<ul>
<li><strong><code>var</code> 是函数作用域的变量</strong>，也就是说，如果你在一个函数内部声明了一个 <code>var</code> 变量，那么它只能在这个函数内部被访问。</li>
<li><strong><code>let</code> 和 <code>const</code> 都是块级作用域的变量</strong>，它们只能在声明它们的代码块或者更小的作用域内被访问。</li>
</ul>
<p><code>var</code> 存在变量提升的特性，即在声明之前使用变量不会报错，但是值为 <code>undefined</code>。而 <code>let</code> 和 <code>const</code> 不存在变量提升，它们具有所谓的暂时性死区特性。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// var 声明的变量可以重复声明,会发生变量提升</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'John'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Peter'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// let 声明的变量不可以重复声明,有块级作用域</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> age </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 25</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> age </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 报错</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// const 声明的是常量,初始化后值不可修改</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> pi</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 3.14</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">pi </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 报错</span></span></code></pre></figure>
<h4 id="数据类型">数据类型<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#数据类型" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>JavaScript 中有七种数据类型:</p>
<div class="table-container"><table><thead><tr><th style="text-align:left;">数据类型</th><th style="text-align:left;">说明</th><th style="text-align:left;">示例</th></tr></thead><tbody><tr><td style="text-align:left;">Number</td><td style="text-align:left;">包括整数和浮点数</td><td style="text-align:left;">123, 3.14</td></tr><tr><td style="text-align:left;">String</td><td style="text-align:left;">字符串,使用单引号或双引号包裹</td><td style="text-align:left;">’hello’, “world”</td></tr><tr><td style="text-align:left;">Boolean</td><td style="text-align:left;">true 和 false</td><td style="text-align:left;">true, false</td></tr><tr><td style="text-align:left;">Null</td><td style="text-align:left;">表示无值</td><td style="text-align:left;">null</td></tr><tr><td style="text-align:left;">Undefined</td><td style="text-align:left;">表示值未定义</td><td style="text-align:left;">undefined</td></tr><tr><td style="text-align:left;">Symbol</td><td style="text-align:left;">表示独一无二的值</td><td style="text-align:left;">Symbol(‘id’)</td></tr><tr><td style="text-align:left;">BigInt</td><td style="text-align:left;">可表示任意大的整数</td><td style="text-align:left;">9007199254740991n</td></tr></tbody></table></div>
<p>JavaScript 中还有一种复杂数据类型 Object，表示由多个键值对组成的对象。可以使用 <code>typeof</code> 来判断一个变量的类型：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> n </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 123</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> s </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Hello'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> b </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">typeof</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> n; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 'number'</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">typeof</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> s; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 'string' </span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">typeof</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> b; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 'boolean'</span></span></code></pre></figure>
<h4 id="运算符">运算符<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#运算符" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>JavaScript 支持多种运算符，包括：</p>
<div class="table-container"><table><thead><tr><th style="text-align:left;">运算符类型</th><th style="text-align:left;">运算符</th><th style="text-align:left;">说明</th><th style="text-align:left;">示例</th></tr></thead><tbody><tr><td style="text-align:left;">算术运算符</td><td style="text-align:left;">+ - * / % ++ —</td><td style="text-align:left;">用于执行算术运算</td><td style="text-align:left;">x + y</td></tr><tr><td style="text-align:left;">赋值运算符</td><td style="text-align:left;">= += -= *= /= %= **=</td><td style="text-align:left;">用于给变量赋值</td><td style="text-align:left;">x += 1</td></tr><tr><td style="text-align:left;">比较运算符</td><td style="text-align:left;"><span class="text-highlight"> </span>= != !== > &lt; >= <span>⇐</span></td><td style="text-align:left;">用于比较两个值</td><td style="text-align:left;">x == y</td></tr><tr><td style="text-align:left;">逻辑运算符</td><td style="text-align:left;">&amp;&amp; || !</td><td style="text-align:left;">用于组合条件</td><td style="text-align:left;">x > 0 &amp;&amp; y &lt; 0</td></tr><tr><td style="text-align:left;">条件运算符</td><td style="text-align:left;">? :</td><td style="text-align:left;">根据条件选择值</td><td style="text-align:left;">condition ? val1 : val2</td></tr><tr><td style="text-align:left;">位运算符</td><td style="text-align:left;">&amp; | ^ ~ &lt;&lt; >> >>></td><td style="text-align:left;">用于位运算</td><td style="text-align:left;">x &amp; y</td></tr></tbody></table></div>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> a </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 3</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> b </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Hello'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ' '</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'World!'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 'Hello World!'</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(a </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">==</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> b); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// false</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(a </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> b); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// true</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(a </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &amp;&amp;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> b.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">includes</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Hello'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// true</span></span></code></pre></figure>
<h4 id="语句">语句<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#语句" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>JavaScript 提供了多种控制结构，包括条件语句、循环语句、分支语句和跳转语句。</p>
<h5 id="条件语句">条件语句<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#条件语句" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h5>
<p>使用 <code>if/else</code> 语句进行条件判断：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (condition) {</span></span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 条件为真时执行</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">else</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 条件为假时执行 </span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></figure>
<p><code>if/else</code> 语句可以进行多重条件判断：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (n </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // n 大于 0</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">else</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (n </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // n 小于 0</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">else</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // n 等于 0</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></figure>
<h5 id="循环语句">循环语句<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#循环语句" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h5>
<p>使用 <code>for</code> 循环和 <code>while</code> 循环进行迭代操作：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// for 循环</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; i</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(i); </span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// while 循环</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> j </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">while</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (j </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(j);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> j</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></figure>
<h5 id="分支语句">分支语句<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#分支语句" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h5>
<p>使用 <code>switch</code> 语句进行多分支判断：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">switch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(fruit) {</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> case</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'apple'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'苹果'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> break</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> case</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'banana'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'香蕉'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> break</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'其他水果'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></figure>
<h5 id="跳转语句">跳转语句<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#跳转语句" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h5>
<p><code>break</code> 用于退出循环，<code>continue</code> 用于跳过当前循环：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; i</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ===</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> continue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 跳过偶数</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(i);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (i </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> break</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 当 i 大于 5 时退出循环</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></figure>
<p>另外，JavaScript 支持使用注释来增加代码的可读性：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 这是单行注释</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/*</span></span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">这是多行注释，可以注释一段代码</span></span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">*/</span></span></code></pre></figure>
<h4 id="函数">函数<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#函数" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>函数是 JavaScript 中组织代码的基本单元，可以封装一段可以重复执行的代码块：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 函数声明</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">x</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">y</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> x </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> y; </span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 函数表达式</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> subtract</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">x</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">y</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> x </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> y;</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 箭头函数（ES6 新增）</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> multiply</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">x</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">y</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> x </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">*</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> y;</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></figure>
<p>函数可以有参数，也可以有返回值。在 JavaScript 中，函数也是一种对象，可以被赋值给变量，也可以作为其他函数的参数或返回值。</p>
<h4 id="数组">数组<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#数组" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>数组是一种特殊的对象，用于存储一系列的值：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> nums </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fruits </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Apple'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Banana'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Orange'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">nums.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">push</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 添加元素</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">nums.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pop</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 删除最后一个元素</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">nums.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">includes</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 检查是否包含某个元素</span></span></code></pre></figure>
<p>在 JavaScript 中，数组是动态的，可以随时添加或删除元素。数组的长度可以通过其 <code>length</code> 属性获取。</p>
<h4 id="对象">对象<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#对象" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>对象是 JavaScript 的核心概念，它是由一组键值对构成的数据集合：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> person </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'John'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> age: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span data-line><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> sayHi</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Hi!'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(person.name); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 访问属性</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">person.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sayHi</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 调用方法</span></span></code></pre></figure>
<p>**在 JavaScript 中，几乎所有的东西都是对象。**函数、数组、日期和正则表达式等都是特殊的对象。对象的属性和方法可以被动态创建和删除，非常灵活。</p>
<h4 id="其他特性">其他特性<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#其他特性" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>JavaScript 还有许多其他高级特性，例如原型和继承、闭包、异步处理和模块等。</p>
<h5 id="原型和继承">原型和继承<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#原型和继承" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h5>
<p>JavaScript 是基于原型的语言，每个对象都有一个指向它的原型（prototype）的链接。当试图访问一个对象的属性时，JavaScript 会首先在对象本身的属性中搜索，如果找不到，就会在它的原型对象中搜索。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Person</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span data-line><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.name </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name;</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Person</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">prototype</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sayName</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.name); </span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> person1 </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Person</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'John'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">person1.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sayName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 'John'</span></span></code></pre></figure>
<p>JavaScript 的继承机制是基于原型的。我们可以通过设置一个类型的原型为另一个类型的实例，来实现继承。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Student</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">grade</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Person.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">call</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 继承属性</span></span>
<span data-line><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.grade </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> grade;</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Student</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">prototype</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Object.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">create</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Person</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">prototype</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 继承方法</span></span>
<span data-line><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Student</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">prototype</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">constructor</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Student;</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> student1 </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Student</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Tom'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(student1.name); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Tom</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(student1.grade); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 5</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">student1.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sayName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Tom</span></span></code></pre></figure>
<h5 id="闭包">闭包<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#闭包" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h5>
<p>闭包（closure）是 JavaScript 中一个重要的概念。在 JavaScript 中，函数可以形成闭包。闭包是指有权访问另一个函数作用域中的变量的函数。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createCounter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> count </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ++</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">count;</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> counter </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createCounter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">counter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 1</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">counter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 2</span></span></code></pre></figure>
<p>闭包的一个常见应用是使函数有私有变量。在上面的例子中，变量 <code>count</code> 就像 <code>createCounter</code> 函数的私有变量，外部无法访问，只能通过闭包来操作。</p>
<h5 id="异步处理">异步处理<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#异步处理" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h5>
<p>JavaScript 是单线程的，但是它可以通过事件和回调函数来处理异步操作。例如，我们可以使用 <code>setTimeout</code> 函数来延迟执行一段代码：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Hello'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setTimeout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'World'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'!'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></figure>
<p>这段代码会首先输出 ‘Hello’ 和 ’!’，然后等待一秒钟后，再输出 ‘World’。虽然 <code>setTimeout</code> 函数在 ’!’ 之前调用，但是它不会阻塞代码的执行。</p>
<p>在 ES6 中，JavaScript 引入了 Promise 和 async/await，使得异步编程更加方便和强大。</p>
<h5 id="模块">模块<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#模块" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h5>
<p>在现代的 JavaScript 开发中，我们通常会把代码分成多个模块（module），每个模块负责一部分功能。模块可以导入（import）其他模块，也可以导出（export）自己的接口给其他模块使用。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// math.js</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">x</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">y</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> x </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> y;</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// main.js</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { add } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './math.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 3</span></span></code></pre></figure>
<p>模块可以使我们的代码更加结构化和可维护。</p>
<h3 id="bom-模型">BOM 模型<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#bom-模型" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h3>
<p>**浏览器对象模型（Browser Object Model，BOM）是用于与浏览器交互的模型。**它提供了一种方式，使开发者能够通过 JavaScript 访问和操作浏览器的窗口。</p>
<p>BOM 主要由一系列的对象组成，这些对象提供了许多方法和属性，使得开发者能够处理浏览器窗口和文档的加载、大小、位置等各种情况，以及进行网络通信等操作。</p>
<p>BOM 的核心对象是 <code>window</code>，它代表了浏览器的窗口，也是 JavaScript 的全局对象。除此之外，BOM 还包括了其他一些对象，例如：</p>
<ul>
<li><code>location</code> 对象：提供了当前窗口中加载的文档的 URL 信息，以及用于导航的方法。</li>
<li><code>navigator</code> 对象：提供了当前浏览器的信息，比如版本、名称等。</li>
<li><code>history</code> 对象：提供了浏览器历史的信息，以及用于导航的方法。</li>
<li><code>document</code> 对象：提供了当前加载在窗口中的 HTML 文档的访问和操作的方式。</li>
</ul>
<pre><code class="mermaid">classDiagram
Window --|> Document: &quot;document&quot;
Window --|> Navigator: &quot;navigator&quot;
Window --|> History: &quot;history&quot;
Window --|> Location: &quot;location&quot;
Window --|> Screen: &quot;screen&quot;
Window --|> Frames: &quot;frames&quot;
Window --|> Performance: &quot;performance&quot;
Window --|> localStorage: &quot;localStorage&quot;
Window --|> sessionStorage: &quot;sessionStorage&quot;
Window --|> console: &quot;console&quot;
class Window {
+open()
+close()
+getComputedStyle()
+setTimeout()
+setInterval()
+clearTimeout()
+clearInterval()
+fetch()
}
class Document {
+getElementById(id)
+getElementsByClassName(name)
+getElementsByTagName(name)
+querySelector(selector)
+querySelectorAll(selector)
+createElement(tagName)
+createTextNode(data)
}
class Navigator {
+appName
+appVersion
+userAgent
+platform
+language
+onLine
+geolocation
+cookieEnabled
+javaEnabled()
}
class History {
+back()
+forward()
+go(n)
+pushState()
+replaceState()
}
class Location {
+href
+protocol
+host
+hostname
+port
+pathname
+search
+hash
+reload()
+assign(URL)
+replace(URL)
}
class Screen {
+availWidth
+availHeight
+width
+height
+colorDepth
+pixelDepth
}
class Frames
class Performance
class localStorage {
+setItem()
+getItem()
+removeItem()
+clear()
}
class sessionStorage {
+setItem()
+getItem()
+removeItem()
+clear()
}
class console {
+log()
+info()
+warn()
+error()
}
</code></pre>
<p>需要注意的是，**BOM 并没有一个标准的定义，不同的浏览器可能实现了不同的 BOM。**但是，现代的浏览器已经在很大程度上实现了 BOM 的兼容性。</p>
<h4 id="窗口对象">窗口对象<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#窗口对象" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>窗口对象（Window Object）是 BOM 的核心对象，它代表了浏览器的窗口。所有的全局变量，函数都是它的方法和属性。例如，我们可以获取窗口的尺寸：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="javascript" data-theme="github-light github-dark"><code data-language="javascript" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> window.innerWidth;</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> height </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> window.innerHeight;</span></span></code></pre></figure>
<p>我们也可以使用 <code>setTimeout</code> 和 <code>setInterval</code> 方法来执行定时操作：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="javascript" data-theme="github-light github-dark"><code data-language="javascript" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 打印 &quot;Hello, world!&quot; 然后 2 秒后关闭窗口</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">window.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setTimeout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Hello, world!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> window.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">close</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></figure>
<p>以下是 <code>window</code> 对象的一些常用属性和方法的表格形式：</p>
<div class="table-container"><table><thead><tr><th>类型</th><th>名称</th><th>描述</th></tr></thead><tbody><tr><td>属性</td><td><code>window.innerWidth</code></td><td>浏览器窗口的视口（viewport）的宽度（包括滚动条）</td></tr><tr><td>属性</td><td><code>window.innerHeight</code></td><td>浏览器窗口的视口（viewport）的高度（包括滚动条）</td></tr><tr><td>属性</td><td><code>window.outerWidth</code></td><td>浏览器窗口的外部宽度</td></tr><tr><td>属性</td><td><code>window.outerHeight</code></td><td>浏览器窗口的外部高度</td></tr><tr><td>属性</td><td><code>window.location</code></td><td>当前窗口的 <code>Location</code> 对象，包含了当前页面的 URL 信息</td></tr><tr><td>属性</td><td><code>window.document</code></td><td>当前窗口加载的 <code>Document</code> 对象，即 DOM（文档对象模型）</td></tr><tr><td>属性</td><td><code>window.history</code></td><td>当前窗口的 <code>History</code> 对象，提供了浏览历史的访问和操作</td></tr><tr><td>属性</td><td><code>window.screen</code></td><td>当前屏幕的 <code>Screen</code> 对象，提供了屏幕的信息</td></tr><tr><td>方法</td><td><code>window.alert()</code></td><td>显示一个警告对话框</td></tr><tr><td>方法</td><td><code>window.prompt()</code></td><td>显示一个提示对话框，并请求用户输入</td></tr><tr><td>方法</td><td><code>window.confirm()</code></td><td>显示一个确认对话框，并请求用户确认</td></tr><tr><td>方法</td><td><code>window.open()</code></td><td>打开一个新的浏览器窗口或标签页</td></tr><tr><td>方法</td><td><code>window.close()</code></td><td>关闭当前的浏览器窗口或标签页</td></tr><tr><td>方法</td><td><code>window.setTimeout()</code></td><td>设置一个定时器，在指定的毫秒数后执行一个函数或代码</td></tr><tr><td>方法</td><td><code>window.setInterval()</code></td><td>设置一个定时器，每隔指定的毫秒数重复执行一个函数或代码</td></tr><tr><td>方法</td><td><code>window.clearTimeout()</code></td><td>清除由 <code>setTimeout</code> 设置的定时器</td></tr><tr><td>方法</td><td><code>window.clearInterval()</code></td><td>清除由 <code>setInterval</code> 设置的定时器</td></tr></tbody></table></div>
<h4 id="文档对象">文档对象<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#文档对象" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>文档对象（Document Object）是 HTML 文档的根节点，用于访问和操作网页内容。<code>document</code> 对象允许你访问和操作页面的内容，包括元素节点、属性节点和文本节点。</p>
<p>以下是 <code>document</code> 对象的一些常见属性和方法：</p>
<div class="table-container"><table><thead><tr><th>类型</th><th>名称</th><th>描述</th></tr></thead><tbody><tr><td>属性</td><td><code>document.documentElement</code></td><td>返回文档的根元素（在 HTML 中，通常是 <code>&lt;html></code> 元素）</td></tr><tr><td>属性</td><td><code>document.body</code></td><td>返回文档的 <code>&lt;body></code> 元素</td></tr><tr><td>属性</td><td><code>document.head</code></td><td>返回文档的 <code>&lt;head></code> 元素</td></tr><tr><td>属性</td><td><code>document.title</code></td><td>获取或设置文档的标题</td></tr><tr><td>方法</td><td><code>document.getElementById(id)</code></td><td>返回具有指定 ID 的元素</td></tr><tr><td>方法</td><td><code>document.getElementsByClassName(name)</code></td><td>返回所有具有指定类名的元素的集合</td></tr><tr><td>方法</td><td><code>document.getElementsByTagName(name)</code></td><td>返回所有具有指定标签名的元素的集合</td></tr><tr><td>方法</td><td><code>document.querySelector(selector)</code></td><td>返回匹配指定 CSS 选择器的第一个元素</td></tr><tr><td>方法</td><td><code>document.querySelectorAll(selector)</code></td><td>返回匹配指定 CSS 选择器的所有元素的集合</td></tr><tr><td>方法</td><td><code>document.createElement(tagName)</code></td><td>创建一个新的元素节点</td></tr><tr><td>方法</td><td><code>document.createTextNode(data)</code></td><td>创建一个新的文本节点</td></tr></tbody></table></div>
<p>这些只是 <code>document</code> 对象的基本属性和方法。实际上，DOM 提供了非常多的 API 来查询和操作文档，包括添加、删除和修改元素，添加事件监听器，修改 CSS 样式等等。</p>
<p>例如，我们可以使用 <code>document.getElementById()</code> 来获取具有特定 ID 的元素，或者使用 <code>document.createElement()</code> 来创建新的元素：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="javascript" data-theme="github-light github-dark"><code data-language="javascript" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 获取 ID 为 &quot;myElement&quot; 的元素</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> myElement </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;myElement&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 创建一个新的 &lt;p> 元素</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> newElement </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">newElement.textContent </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;This is a new paragraph.&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">document.body.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(newElement);</span></span></code></pre></figure>
<h4 id="导航对象">导航对象<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#导航对象" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>导航对象（Navigator Object）提供了关于浏览器的信息。下面是一些常见的 <code>navigator</code> 对象的属性：</p>
<div class="table-container"><table><thead><tr><th>类型</th><th>名称</th><th>描述</th></tr></thead><tbody><tr><td>属性</td><td><code>navigator.appName</code></td><td>返回浏览器的名称</td></tr><tr><td>属性</td><td><code>navigator.appVersion</code></td><td>返回浏览器的版本信息</td></tr><tr><td>属性</td><td><code>navigator.userAgent</code></td><td>返回用户代理头的字符串表示（包含浏览器名称、版本、操作系统等信息）</td></tr><tr><td>属性</td><td><code>navigator.platform</code></td><td>返回运行浏览器的操作系统平台</td></tr><tr><td>属性</td><td><code>navigator.language</code></td><td>返回浏览器的默认语言</td></tr><tr><td>属性</td><td><code>navigator.onLine</code></td><td>返回浏览器的在线状态，如果浏览器在线则返回 <code>true</code>，否则返回 <code>false</code></td></tr></tbody></table></div>
<p>另外，<code>navigator</code> 对象还包含一些用于特定功能的方法和对象，例如：</p>
<ul>
<li><code>navigator.geolocation</code>：用于获取用户的地理位置信息。</li>
<li><code>navigator.cookieEnabled</code>：返回一个布尔值，表示是否启用了 cookie。</li>
<li><code>navigator.javaEnabled()</code>：返回一个布尔值，表示是否启用了 Java。</li>
</ul>
<p>请注意，<code>navigator</code> 对象的一些属性和方法可能会因浏览器的不同而有所差异。而且，由于隐私和安全的考虑，某些信息可能需要用户的许可才能访问。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="javascript" data-theme="github-light github-dark"><code data-language="javascript" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(navigator.userAgent);</span></span></code></pre></figure>
<h4 id="历史对象">历史对象<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#历史对象" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>历史对象（History Object）提供了浏览器历史记录的操作方法。然而，由于隐私原因，您不能获取到用户的浏览历史具体细节，但可以用 <code>history</code> 对象来操作当前窗口的浏览历史。</p>
<p>以下是 <code>history</code> 对象的一些常见方法：</p>
<div class="table-container"><table><thead><tr><th>类型</th><th>名称</th><th>描述</th></tr></thead><tbody><tr><td>方法</td><td><code>history.back()</code></td><td>和点击浏览器后退按钮一样，加载历史列表中的前一个 URL</td></tr><tr><td>方法</td><td><code>history.forward()</code></td><td>和点击浏览器前进按钮一样，加载历史列表中的下一个 URL</td></tr><tr><td>方法</td><td><code>history.go(n)</code></td><td>加载历史列表中的某个具体页面，通过参数 <code>n</code> 指定。<code>n</code> 为正数时前进，<code>n</code> 为负数时后退，<code>n</code> 为 0 时刷新当前页面</td></tr><tr><td>方法</td><td><code>history.pushState()</code></td><td>在历史记录中添加一个状态，但不触发页面刷新</td></tr><tr><td>方法</td><td><code>history.replaceState()</code></td><td>在历史记录中替换当前状态，但不触发页面刷新</td></tr></tbody></table></div>
<p>注意，<code>pushState()</code> 和 <code>replaceState()</code> 方法可以改变 URL 并添加历史记录，但并不会重新加载页面。这对于创建 AJAX 驱动的动态页面非常有用。</p>
<p>还有一个 <code>history.length</code> 属性，它返回当前窗口历史堆栈中的 URL 数量。由于安全和隐私原因，您无法访问堆栈中的实际 URL。</p>
<p>例如，我们可以使用 <code>history.back()</code> 和 <code>history.forward()</code> 方法来模拟用户点击浏览器的后退和前进按钮：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="javascript" data-theme="github-light github-dark"><code data-language="javascript" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 后退到上一个页面</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">history.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">back</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 前进到下一个页面</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">history.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">forward</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre></figure>
<h4 id="位置对象">位置对象<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#位置对象" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>位置对象（Location Object）提供了当前窗口或标签的 URL 信息，以及一些方法来操作 URL。</p>
<p>以下是 <code>location</code> 对象的一些常见属性和方法：</p>
<div class="table-container"><table><thead><tr><th>类型</th><th>名称</th><th>描述</th></tr></thead><tbody><tr><td>属性</td><td><code>location.href</code></td><td>获取或设置整个 URL</td></tr><tr><td>属性</td><td><code>location.protocol</code></td><td>返回 URL 的协议部分（如：“http:” 或 “https:“）</td></tr><tr><td>属性</td><td><code>location.host</code></td><td>返回 URL 的主机名和端口（如果有的话）</td></tr><tr><td>属性</td><td><code>location.hostname</code></td><td>返回 URL 的主机名</td></tr><tr><td>属性</td><td><code>location.port</code></td><td>返回 URL 的端口号</td></tr><tr><td>属性</td><td><code>location.pathname</code></td><td>返回 URL 的路径名</td></tr><tr><td>属性</td><td><code>location.search</code></td><td>返回 URL 的查询字符串（包括 ”?“）</td></tr><tr><td>属性</td><td><code>location.hash</code></td><td>返回 URL 的片段标识符（包括 ”#“）</td></tr><tr><td>方法</td><td><code>location.reload()</code></td><td>重新加载当前页面</td></tr><tr><td>方法</td><td><code>location.assign(URL)</code></td><td>加载新的页面</td></tr><tr><td>方法</td><td><code>location.replace(URL)</code></td><td>替换当前页面</td></tr></tbody></table></div>
<p>这些属性和方法使我们可以从 JavaScript 中读取和操作 URL 的各个部分。例如，我们可以使用 <code>location.href</code> 来获取当前页面的 URL，或者使用 <code>location.assign()</code> 来加载一个新的页面。还要注意的是，使用 <code>location.replace()</code> 方法不会在历史记录中留下记录，所以用户不能使用 ” 后退 ” 按钮返回。</p>
<p>例如，我们可以使用 <code>location.href</code> 来获取或设置当前页面的 URL，或者使用 <code>location.reload()</code> 来重载当前页面：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="javascript" data-theme="github-light github-dark"><code data-language="javascript" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 打印当前页面的 URL</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(location.href);</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 重载当前页面</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">location.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">reload</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre></figure>
<h4 id="屏幕对象">屏幕对象<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#屏幕对象" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>屏幕对象（Screen Object）提供了关于用户的屏幕信息。这些信息包括屏幕的宽度、高度、颜色深度和像素深度等。以下是 <code>screen</code> 对象的一些常见属性：</p>
<div class="table-container"><table><thead><tr><th>类型</th><th>名称</th><th>描述</th></tr></thead><tbody><tr><td>属性</td><td><code>screen.availWidth</code></td><td>返回屏幕的可用宽度，以像素为单位（减去界面特性，如 Windows 任务栏）</td></tr><tr><td>属性</td><td><code>screen.availHeight</code></td><td>返回屏幕的可用高度，以像素为单位（减去界面特性，如 Windows 任务栏）</td></tr><tr><td>属性</td><td><code>screen.width</code></td><td>返回屏幕的总宽度，以像素为单位</td></tr><tr><td>属性</td><td><code>screen.height</code></td><td>返回屏幕的总高度，以像素为单位</td></tr><tr><td>属性</td><td><code>screen.colorDepth</code></td><td>返回目标设备或缓冲器上的颜色深度，以位为单位</td></tr><tr><td>属性</td><td><code>screen.pixelDepth</code></td><td>返回屏幕的像素深度</td></tr></tbody></table></div>
<p>这些属性可以帮助你了解用户的屏幕信息，并据此调整网页的布局或设计。例如，你可以根据 <code>screen.width</code> 和 <code>screen.height</code> 来调整网页的大小，以最佳地适应用户的屏幕。</p>
<p>注意，<code>screen</code> 对象的属性是只读的，你不能修改它们的值。我们可以使用 <code>screen.width</code> 和 <code>screen.height</code> 来获取屏幕的宽度和高度：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="javascript" data-theme="github-light github-dark"><code data-language="javascript" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Screen width: &quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> screen.width);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Screen height: &quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> screen.height);</span></span></code></pre></figure>
<h3 id="dom-模型">DOM 模型<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#dom-模型" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h3>
<p>**文档对象模型（Document Object Model，DOM）是一种编程接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。**DOM 将文档解析为一个由节点和对象（包括属性和方法）构成的结构集合，这样就可以使用脚本语言（如 JavaScript）来操作这些节点和对象。</p>
<p>在 Web 中，最常见的文档类型是 HTML 或 XML 文档。对于这种类型的文档，DOM 表示它们为一个树状结构，其中每个节点都是一个对象，代表了文档的一部分。例如，HTML 文档中的每个元素、属性和文本都会被表示为一个 DOM 节点。</p>
<p>一个简单的 HTML DOM 结构可能会像下面这样：</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="html" data-theme="github-light github-dark"><code data-language="html" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;!</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>My Page&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Welcome to My Page&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Content here&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></figure>
<p>在这个 HTML 文档中，<code>&lt;html></code>、<code>&lt;head></code>、<code>&lt;title></code>、<code>&lt;body></code>、<code>&lt;h1></code> 和 <code>&lt;p></code> 元素都是 DOM 节点。<code>My Page</code> 和 <code>Welcome to My Page</code> 以及 <code>Content here</code> 这些文本也是 DOM 节点，它们是元素节点的子节点。</p>
<pre><code class="mermaid">classDiagram
Document --|> HTMLElement: &quot;elements&quot;
HTMLElement --|> HTMLDivElement
HTMLElement --|> HTMLSpanElement
HTMLElement --|> HTMLAnchorElement
HTMLElement --|> HTMLImageElement
HTMLElement --|> HTMLParagraphElement
HTMLElement --|> HTMLInputElement
HTMLElement --|> HTMLButtonElement
HTMLElement --|> HTMLCanvasElement
HTMLElement --|> HTMLTableElement
class Document {
+getElementById(id)
+getElementsByClassName(name)
+getElementsByTagName(name)
+querySelector(selector)
+querySelectorAll(selector)
+createElement(tagName)
+createTextNode(data)
}
class HTMLElement {
+innerHTML
+outerHTML
+textContent
+id
+className
+setAttribute(name, value)
+getAttribute(name)
+removeAttribute(name)
+addEventListener(type, listener)
+removeEventListener(type, listener)
}
class HTMLDivElement
class HTMLSpanElement
class HTMLAnchorElement {
+href
}
class HTMLImageElement {
+src
+alt
}
class HTMLParagraphElement
class HTMLInputElement {
+value
+checked
}
class HTMLButtonElement {
+disabled
}
class HTMLCanvasElement
class HTMLTableElement
</code></pre>
<p>开发者可以使用 DOM API 来获取、创建、修改或删除这些节点，从而实现对网页内容和结构的动态控制。这是现代网页交互性的基础。</p>
<h4 id="获取元素">获取元素<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#获取元素" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<div class="table-container"><table><thead><tr><th style="text-align:left;">方法</th><th>描述</th><th>示例</th></tr></thead><tbody><tr><td style="text-align:left;"><code>document.getElementById(id)</code></td><td>通过元素 ID 获取元素。此方法返回一个对象，表示带有指定 ID 的元素。</td><td><code>document.getElementById('myId')</code></td></tr><tr><td style="text-align:left;"><code>document.getElementsByClassName(name)</code></td><td>通过类名获取元素。此方法返回一个 HTMLCollection 对象，包含了文档中所有具有指定类名的元素。</td><td><code>document.getElementsByClassName('myClass')</code></td></tr><tr><td style="text-align:left;"><code>document.getElementsByTagName(name)</code></td><td>通过标签名获取元素。此方法返回一个 HTMLCollection 对象，包含了文档中所有具有指定标签名的元素。</td><td><code>document.getElementsByTagName('div')</code></td></tr><tr><td style="text-align:left;"><code>document.querySelector(selector)</code></td><td>返回文档中匹配指定 CSS 选择器的第一个元素。</td><td><code>document.querySelector('.myClass')</code></td></tr><tr><td style="text-align:left;"><code>document.querySelectorAll(selector)</code></td><td>返回文档中匹配指定 CSS 选择器的所有元素。此方法返回一个 NodeList 对象。</td><td><code>document.querySelectorAll('.myClass')</code></td></tr><tr><td style="text-align:left;"><code>document.getElementsByName(name)</code></td><td>通过元素的 Name 属性获取元素。此方法返回一个 NodeList 对象，包含了文档中所有具有指定 Name 属性的元素。</td><td><code>document.getElementsByName('myName')</code></td></tr><tr><td style="text-align:left;"><code>Element.querySelector(selector)</code></td><td>返回元素内部匹配指定 CSS 选择器的第一个元素。</td><td><code>document.getElementById('myId').querySelector('.myClass')</code></td></tr><tr><td style="text-align:left;"><code>Element.querySelectorAll(selector)</code></td><td>返回元素内部匹配指定 CSS 选择器的所有元素。此方法返回一个 NodeList 对象。</td><td><code>document.getElementById('myId').querySelectorAll('.myClass')</code></td></tr></tbody></table></div>
<p>请注意，<code>Element.querySelector</code> 和 <code>Element.querySelectorAll</code> 与 <code>document.querySelector</code> 和 <code>document.querySelectorAll</code> 类似，但它们只在指定元素的后代中查找，而不是在整个文档中查找。</p>
<p>例如:</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 获取 id 为 title 的元素</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> title</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'title'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 获取所有 &lt;p> 元素</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> ps</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementsByTagName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'p'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 获取所有 class 为 content 的元素 </span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> contents</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementsByClassName</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'content'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 获取第一个 class 为 content 的元素</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> content</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">querySelector</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'.content'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span></span></code></pre></figure>
<h4 id="改变元素">改变元素<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#改变元素" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<div class="table-container"><table><thead><tr><th>方法</th><th>描述</th><th>示例</th></tr></thead><tbody><tr><td><code>element.setAttribute(name, value)</code></td><td>设置元素的属性。此方法会设置或更新元素的属性。</td><td><code>element.setAttribute('class', 'myClass')</code></td></tr><tr><td><code>element.getAttribute(name)</code></td><td>获取元素的属性值。此方法返回指定属性的值，如果该属性不存在，则返回 <code>null</code>。</td><td><code>element.getAttribute('class')</code></td></tr><tr><td><code>element.removeAttribute(name)</code></td><td>删除元素的属性。此方法会完全移除元素的指定属性。</td><td><code>element.removeAttribute('class')</code></td></tr><tr><td><code>element.classList.add(class1, class2, ...)</code></td><td>向元素添加一个或多个类。此方法会向元素的类列表添加一个或多个类名。如果指定的类名已存在，则不会添加。</td><td><code>element.classList.add('myClass')</code></td></tr><tr><td><code>element.classList.remove(class1, class2, ...)</code></td><td>从元素中删除一个或多个类。此方法会从元素的类列表中删除一个或多个类名。</td><td><code>element.classList.remove('myClass')</code></td></tr><tr><td><code>element.classList.toggle(class, true/false)</code></td><td>切换元素的类。如果类名存在，则删除它；如果类名不存在，则添加它。</td><td><code>element.classList.toggle('myClass')</code></td></tr><tr><td><code>element.style.cssText</code></td><td>设置或返回元素的样式属性。此属性返回一个 CSSStyleDeclaration 对象，代表元素的 <code>style</code> 属性。</td><td><code>element.style.cssText = 'color: red; background: blue;'</code></td></tr><tr><td><code>element.style.property</code></td><td>设置或返回元素的指定样式属性。此属性会设置或返回元素的指定样式属性。</td><td><code>element.style.color = 'red'</code></td></tr><tr><td><code>element.innerHTML</code></td><td>设置或返回元素的 HTML 内容。此属性会设置或返回元素的内部 HTML。</td><td><code>element.innerHTML = '&lt;b>Hello&lt;/b>'</code></td></tr><tr><td><code>element.outerHTML</code></td><td>设置或返回元素的外部 HTML。此属性会设置或返回元素的开头和结尾标签，包括元素的所有后代。</td><td><code>console.log(element.outerHTML)</code></td></tr><tr><td><code>element.textContent</code></td><td>设置或返回元素的文本内容。此属性会设置或返回元素的所有文本内容，包括它的所有后代。</td><td><code>element.textContent = 'Hello'</code></td></tr></tbody></table></div>
<p>请注意，每个属性和方法可能有其适用性和局限性。在使用它们的时候，需要考虑到你的需求和它们的特性。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 改变内容</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">title.innerHTML </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'New title'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 改变样式</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">title.style.color </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'red'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 显示/隐藏</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">content.style.display </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'none'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 添加类</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">content.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'hidden'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 删除类</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">content.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">remove</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'hidden'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></figure>
<h4 id="创建元素">创建元素<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#创建元素" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<div class="table-container"><table><thead><tr><th>方法</th><th>描述</th><th>示例</th></tr></thead><tbody><tr><td><code>document.createElement(tagName)</code></td><td>创建一个新元素。此方法创建一个具有指定标签名的新元素。</td><td><code>let div = document.createElement('div')</code></td></tr><tr><td><code>document.createTextNode(data)</code></td><td>创建一个新的文本节点。此方法创建一个包含指定文本的新 Text 节点。</td><td><code>let text = document.createTextNode('Hello')</code></td></tr><tr><td><code>Node.appendChild(child)</code></td><td>向元素添加一个新的子节点。此方法将指定的节点添加到指定节点的子节点列表的末尾。</td><td><code>div.appendChild(text)</code></td></tr><tr><td><code>Node.insertBefore(newNode, referenceNode)</code></td><td>在参考节点之前插入一个新节点。此方法将指定的节点插入到参考节点之前。如果参考节点为 <code>null</code>，则新节点将被添加到子节点的末尾。</td><td><code>document.body.insertBefore(div, document.body.firstChild)</code></td></tr><tr><td><code>Element.insertAdjacentHTML(position, text)</code></td><td>解析指定的文本作为 HTML 或 XML，并将生成的节点插入到 DOM 树的指定位置。此方法不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。</td><td><code>div.insertAdjacentHTML('beforeend', '&lt;span>Hello&lt;/span>')</code></td></tr><tr><td><code>Element.insertAdjacentText(position, text)</code></td><td>将指定的文本插入到 DOM 树的指定位置。此方法不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。</td><td><code>div.insertAdjacentText('beforeend', 'Hello')</code></td></tr><tr><td><code>Element.insertAdjacentElement(position, element)</code></td><td>将指定的元素插入到 DOM 树的指定位置。此方法不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。</td><td><code>let span = document.createElement('span'); div.insertAdjacentElement('beforeend', span)</code></td></tr><tr><td><code>Node.cloneNode(deep)</code></td><td>创建指定节点的副本。此方法创建一个新的节点，这个节点是调用此方法的节点的副本。如果 deep 参数为 true，则复制包括整个子 DOM 树，否则只复制节点本身。</td><td><code>let divClone = div.cloneNode(true)</code></td></tr><tr><td><code>Node.replaceChild(newChild, oldChild)</code></td><td>替换一个子节点。此方法将 oldChild 替换为 newChild。</td><td><code>div.replaceChild(newSpan, oldSpan)</code></td></tr></tbody></table></div>
<p>这些方法为您提供了创建和操纵 DOM 元素的强大工具。在实际开发中，您可能会经常使用它们来动态地更新页面内容。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 创建新元素</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> div</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'div'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 设置属性</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">div.innerHTML </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Hello World'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">div.style.color </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'blue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 插入到文档中</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">document.body.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">appendChild</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(div);</span></span></code></pre></figure>
<h4 id="事件处理">事件处理<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#事件处理" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<div class="table-container"><table><thead><tr><th>方法</th><th>描述</th><th>示例</th></tr></thead><tbody><tr><td><code>element.addEventListener(event, function, useCapture)</code></td><td>为元素添加事件监听器。此方法在指定元素上添加一个事件处理程序。</td><td><code>element.addEventListener('click', myFunction)</code></td></tr><tr><td><code>element.removeEventListener(event, function, useCapture)</code></td><td>从元素中移除事件监听器。此方法从指定元素中移除事件处理程序。</td><td><code>element.removeEventListener('click', myFunction)</code></td></tr><tr><td><code>element.onclick</code></td><td>为元素设置 click 事件处理程序。此属性返回当前元素的 onclick 事件处理程序代码，或设置一个新的 onclick 事件处理程序代码。</td><td><code>element.onclick = myFunction</code></td></tr><tr><td><code>event.preventDefault()</code></td><td>取消事件的默认动作。此方法阻止事件的默认动作。例如，点击链接的默认动作是跳转到链接的 URL，当调用此方法后，点击链接不会跳转。</td><td><code>event.preventDefault()</code></td></tr><tr><td><code>event.stopPropagation()</code></td><td>阻止事件冒泡。此方法阻止事件向上冒泡到 DOM 树。</td><td><code>event.stopPropagation()</code></td></tr><tr><td><code>event.stopImmediatePropagation()</code></td><td>阻止剩余的事件处理程序被执行并阻止事件冒泡到 DOM 树。</td><td><code>event.stopImmediatePropagation()</code></td></tr><tr><td><code>event.target</code></td><td>返回触发事件的元素。此属性返回触发事件的元素。</td><td><code>let targetElement = event.target</code></td></tr><tr><td><code>event.type</code></td><td>返回事件的名称。此属性返回表示事件名称的字符串。</td><td><code>let eventType = event.type</code></td></tr><tr><td><code>event.clientX</code> and <code>event.clientY</code></td><td>返回鼠标事件发生时鼠标指针的位置。这两个属性返回鼠标指针相对于浏览器窗口的水平和垂直坐标。</td><td><code>let x = event.clientX; let y = event.clientY</code></td></tr></tbody></table></div>
<p>这些都是最常用的事件处理方法和属性。实际上，还有更多的事件类型和与事件相关的方法和属性，它们可以用来处理键盘事件、触摸事件、拖放事件等等。请查阅相关文档以获取更多信息。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 点击事件</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">btn.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addEventListener</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'click'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 点击时运行的代码</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 加载事件</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">window.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addEventListener</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'load'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 页面加载完成后运行的代码</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></figure>
<h3 id="事件处理-1">事件处理<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#事件处理-1" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h3>
<p>JavaScript 可以对各种事件做出响应。</p>
<h4 id="鼠标事件">鼠标事件<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#鼠标事件" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>常见的鼠标事件:</p>
<div class="table-container"><table><thead><tr><th>事件类型</th><th>描述</th><th>示例</th></tr></thead><tbody><tr><td><code>click</code></td><td>鼠标点击一个元素时触发。</td><td><code>element.addEventListener('click', myFunction)</code></td></tr><tr><td><code>dblclick</code></td><td>鼠标双击一个元素时触发。</td><td><code>element.addEventListener('dblclick', myFunction)</code></td></tr><tr><td><code>mousedown</code></td><td>鼠标按钮被按下时触发。</td><td><code>element.addEventListener('mousedown', myFunction)</code></td></tr><tr><td><code>mouseup</code></td><td>鼠标按钮被松开时触发。</td><td><code>element.addEventListener('mouseup', myFunction)</code></td></tr><tr><td><code>mousemove</code></td><td>鼠标被移动时触发。</td><td><code>element.addEventListener('mousemove', myFunction)</code></td></tr><tr><td><code>mouseover</code></td><td>鼠标指针移动到元素上时触发。</td><td><code>element.addEventListener('mouseover', myFunction)</code></td></tr><tr><td><code>mouseout</code></td><td>鼠标指针移动出元素时触发。</td><td><code>element.addEventListener('mouseout', myFunction)</code></td></tr><tr><td><code>mouseenter</code></td><td>鼠标指针移动到元素上时触发，不冒泡。</td><td><code>element.addEventListener('mouseenter', myFunction)</code></td></tr><tr><td><code>mouseleave</code></td><td>鼠标指针移动出元素时触发，不冒泡。</td><td><code>element.addEventListener('mouseleave', myFunction)</code></td></tr><tr><td><code>contextmenu</code></td><td>当尝试在元素上打开上下文菜单时（通常通过右键点击）触发。</td><td><code>element.addEventListener('contextmenu', myFunction)</code></td></tr><tr><td><code>mousewheel</code> / <code>wheel</code></td><td>当鼠标滚轮被滚动时触发。</td><td><code>element.addEventListener('wheel', myFunction)</code></td></tr></tbody></table></div>
<p>在这些事件处理程序中，你可以使用 <code>event</code> 对象来访问事件的相关信息，比如触发事件的元素 (<code>event.target</code>)，鼠标的位置 (<code>event.clientX</code> 和 <code>event.clientY</code>)，以及鼠标按钮的状态 (<code>event.button</code>) 等等。</p>
<p>例如:</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 点击事件</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">btn.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addEventListener</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'click'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Button clicked'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 移动事件</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">window.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addEventListener</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'mousemove'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'鼠标坐标:'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> event.clientX </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ', '</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> event.clientY); </span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></figure>
<h4 id="键盘事件">键盘事件<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#键盘事件" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>常见的键盘事件:</p>
<div class="table-container"><table><thead><tr><th>事件类型</th><th>描述</th><th>示例</th></tr></thead><tbody><tr><td><code>keydown</code></td><td>当用户按下键盘按键时触发。</td><td><code>window.addEventListener('keydown', myFunction)</code></td></tr><tr><td><code>keyup</code></td><td>当用户释放键盘按键时触发。</td><td><code>window.addEventListener('keyup', myFunction)</code></td></tr><tr><td><code>keypress</code></td><td>当用户按下并释放键盘按键时触发。</td><td><code>window.addEventListener('keypress', myFunction)</code></td></tr></tbody></table></div>
<p>在这些事件处理程序中，你可以使用 <code>event</code> 对象来访问事件的相关信息，例如：</p>
<div class="table-container"><table><thead><tr><th>属性</th><th>描述</th><th>示例</th></tr></thead><tbody><tr><td><code>event.key</code></td><td>返回被按下的键的字符。</td><td><code>let key = event.key</code></td></tr><tr><td><code>event.code</code></td><td>返回被按下的物理键的代码。</td><td><code>let code = event.code</code></td></tr><tr><td><code>event.altKey</code></td><td>如果 Alt 键被按下时返回 <code>true</code>，否则返回 <code>false</code>。</td><td><code>let altKeyPressed = event.altKey</code></td></tr><tr><td><code>event.ctrlKey</code></td><td>如果 Ctrl 键被按下时返回 <code>true</code>，否则返回 <code>false</code>。</td><td><code>let ctrlKeyPressed = event.ctrlKey</code></td></tr><tr><td><code>event.shiftKey</code></td><td>如果 Shift 键被按下时返回 <code>true</code>，否则返回 <code>false</code>。</td><td><code>let shiftKeyPressed = event.shiftKey</code></td></tr><tr><td><code>event.metaKey</code></td><td>如果 Meta 键（在 Windows 键盘上通常是 Windows 键，在 Apple 键盘上通常是 Command 键）被按下时返回 <code>true</code>，否则返回 <code>false</code>。</td><td><code>let metaKeyPressed = event.metaKey</code></td></tr></tbody></table></div>
<p>请注意，键盘事件通常在 <code>window</code> 对象上监听，而不是特定的元素上，因为键盘输入通常是全局的。例如:</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 按下任意键时打印</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">addEventListener</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'keydown'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Pressed key: '</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> event.key);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></figure>
<h4 id="其他事件">其他事件<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#其他事件" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>还有一些其他常用的事件:</p>
<div class="table-container"><table><thead><tr><th>事件类型</th><th>描述</th><th>示例</th></tr></thead><tbody><tr><td><code>load</code></td><td>当页面完全加载后（包括所有图像、脚本文件、CSS 文件等）触发。</td><td><code>window.addEventListener('load', myFunction)</code></td></tr><tr><td><code>unload</code></td><td>当页面即将被卸载（或关闭）时触发。</td><td><code>window.addEventListener('unload', myFunction)</code></td></tr><tr><td><code>beforeunload</code></td><td>当窗口即将卸载新的页面时触发。这个事件可以用来提示用户是否真的要离开当前页面（例如，如果有未保存的更改）。</td><td><code>window.addEventListener('beforeunload', myFunction)</code></td></tr><tr><td><code>resize</code></td><td>当浏览器窗口被调整大小时触发。</td><td><code>window.addEventListener('resize', myFunction)</code></td></tr><tr><td><code>scroll</code></td><td>当用户滚动指定的元素或页面时触发。</td><td><code>window.addEventListener('scroll', myFunction)</code></td></tr><tr><td><code>focus</code></td><td>当元素获得焦点时触发。</td><td><code>element.addEventListener('focus', myFunction)</code></td></tr><tr><td><code>blur</code></td><td>当元素失去焦点时触发。</td><td><code>element.addEventListener('blur', myFunction)</code></td></tr><tr><td><code>input</code></td><td>当 <code>&lt;input></code>、<code>&lt;select></code> 或 <code>&lt;textarea></code> 元素的值改变时触发。</td><td><code>element.addEventListener('input', myFunction)</code></td></tr><tr><td><code>change</code></td><td>当用户改变 <code>&lt;input></code>、<code>&lt;select></code> 或 <code>&lt;textarea></code> 元素的值并且失去焦点时触发。</td><td><code>element.addEventListener('change', myFunction)</code></td></tr><tr><td><code>submit</code></td><td>当表单提交时触发。</td><td><code>element.addEventListener('submit', myFunction)</code></td></tr><tr><td><code>touchstart</code></td><td>当用户触摸屏幕时触发。</td><td><code>element.addEventListener('touchstart', myFunction)</code></td></tr><tr><td><code>touchmove</code></td><td>当用户在屏幕上移动触摸点时触发。</td><td><code>element.addEventListener('touchmove', myFunction)</code></td></tr><tr><td><code>touchend</code></td><td>当用户停止触摸屏幕时触发。</td><td><code>element.addEventListener('touchend', myFunction)</code></td></tr></tbody></table></div>
<p>这只是可能发生的事件类型的一部分。实际上，HTML DOM API 定义了很多不同的事件类型，可以用来处理各种各样的用户交互和页面生命周期事件。</p>
<h3 id="es6-新特性">ES6+ 新特性<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#es6-新特性" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h3>
<p>ES6 开始 JavaScript 引入了许多新特性,极大地丰富了语言本身。</p>
<h4 id="let-和-const">Let 和 Const<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#let-和-const" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<ul>
<li>let 声明的变量有块级作用域，这意味着 let 声明的变量只在其声明的块或子块中可用，而在外部不可访问。这与 var 不同，var 声明的变量是函数作用域或全局作用域。</li>
<li>const 声明的是不可修改的常量，一旦声明，其值就不能改变。这并不意味着它指向的对象不可改变，例如，const 声明的对象，我们仍然可以修改其属性。</li>
</ul>
<h4 id="箭头函数">箭头函数<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#箭头函数" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>箭头函数提供了一种更简洁的函数定义方式，它有几个特点：</p>
<ul>
<li>更简洁的语法</li>
<li>不绑定自己的 this，它会捕获其所在的上下文的 this 值作为自己的 this 值</li>
<li>没有 arguments 对象，如果你需要类似的功能，可以使用 rest 参数代替</li>
<li>不能作为构造函数，也就是说，不能使用 new 命令</li>
</ul>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 传统函数</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> a </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> b;</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 箭头函数</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> add</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> a </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> b; </span></span></code></pre></figure>
<h4 id="模板字符串">模板字符串<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#模板字符串" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>模板字符串使用反引号 (“)，可以内嵌变量和表达式，也支持多行字符串。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'John'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`Hello ${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">name</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}!`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Hello John!</span></span></code></pre></figure>
<h4 id="对象解构">对象解构<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#对象解构" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>对象解构允许我们从对象中提取属性作为变量，这使得从对象中获取数据变得非常方便。解构也可以用于数组，可以让我们更快速地获取数组中的元素。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> person</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'John'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> age: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 解构</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">age</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> person; </span></span></code></pre></figure>
<h4 id="模块化">模块化<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#模块化" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>ES6 引入了模块化的概念，可以使用 import 和 export 实现模块的导入和导出。这个特性使得 JavaScript 代码更加模块化，便于组织和管理。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// foo.js</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'John'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// main.js</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { name } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './foo.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></figure>
<p>等等众多特性,极大地推动了 JavaScript 的发展。</p>
<h3 id="异步编程">异步编程<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#异步编程" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h3>
<p>JavaScript 的异步编程主要基于 Promise 和 async/await。</p>
<h4 id="promise">Promise<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#promise" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>Promise 是 JavaScript 中处理异步操作的一种方式，是一种代表未来将要发生事件的对象。Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。Promise 的状态一旦改变，就不会再变。</p>
<p>Promise 可以链式调用，这意味着我们可以在一个 Promise 完成后，返回一个新的 Promise，这使得我们可以以同步的方式编写异步代码。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fetchData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">reject</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 异步操作</span></span>
<span data-line><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setTimeout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> data</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Hello World'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span data-line><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data); </span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fetchData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">data</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 成功时调用</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></figure>
<h4 id="asyncawait">async/await<a role="anchor" aria-hidden="true" tabindex="-1" data-no-popover="true" href="#asyncawait" class="internal"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h4>
<p>async/await 是基于 Promise 实现的，它是一种更人性化的处理异步的方式。它让异步代码看起来更像同步代码，大大提高了代码的可读性和可维护性。</p>
<figure data-rehype-pretty-code-figure><pre tabindex="0" data-language="js" data-theme="github-light github-dark"><code data-language="js" data-theme="github-light github-dark" style="display:grid;"><span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 用 async 声明一个异步函数</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">async</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fetchData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 使用 await 获取 Promise 的结果</span></span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> data</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span data-line><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setTimeout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span data-line><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Hello World'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> data;</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span data-line> </span>
<span data-line><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 调用异步函数</span></span>
<span data-line><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fetchData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">data</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data); </span></span>
<span data-line><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></figure>
<p>使用 async 关键字声明的函数称为异步函数，它会隐式返回一个 Promise。await 关键字可以用于等待一个 Promise 完成并获取其结果。注意，await 关键字只能在 async 函数内部使用。</p>
<p>async/await 与 Promise 一样，有很好的错误处理机制。我们可以使用 try…catch 语句来捕获和处理 Promise 中发生的错误。</p></article><hr/><div class="page-footer"></div></div><div class="right sidebar"><div class="graph"><h3>关系图谱</h3><div class="graph-outer"><div id="graph-container" data-cfg="{&quot;drag&quot;:true,&quot;zoom&quot;:true,&quot;depth&quot;:1,&quot;scale&quot;:1.1,&quot;repelForce&quot;:0.5,&quot;centerForce&quot;:0.3,&quot;linkDistance&quot;:30,&quot;fontSize&quot;:0.6,&quot;opacityScale&quot;:1,&quot;showTags&quot;:true,&quot;removeTags&quot;:[],&quot;focusOnHover&quot;:false}"></div><button id="global-graph-icon" aria-label="Global Graph"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 55 55" fill="currentColor" xml:space="preserve"><path d="M49,0c-3.309,0-6,2.691-6,6c0,1.035,0.263,2.009,0.726,2.86l-9.829,9.829C32.542,17.634,30.846,17,29,17
s-3.542,0.634-4.898,1.688l-7.669-7.669C16.785,10.424,17,9.74,17,9c0-2.206-1.794-4-4-4S9,6.794,9,9s1.794,4,4,4
c0.74,0,1.424-0.215,2.019-0.567l7.669,7.669C21.634,21.458,21,23.154,21,25s0.634,3.542,1.688,4.897L10.024,42.562
C8.958,41.595,7.549,41,6,41c-3.309,0-6,2.691-6,6s2.691,6,6,6s6-2.691,6-6c0-1.035-0.263-2.009-0.726-2.86l12.829-12.829
c1.106,0.86,2.44,1.436,3.898,1.619v10.16c-2.833,0.478-5,2.942-5,5.91c0,3.309,2.691,6,6,6s6-2.691,6-6c0-2.967-2.167-5.431-5-5.91
v-10.16c1.458-0.183,2.792-0.759,3.898-1.619l7.669,7.669C41.215,39.576,41,40.26,41,41c0,2.206,1.794,4,4,4s4-1.794,4-4
s-1.794-4-4-4c-0.74,0-1.424,0.215-2.019,0.567l-7.669-7.669C36.366,28.542,37,26.846,37,25s-0.634-3.542-1.688-4.897l9.665-9.665
C46.042,11.405,47.451,12,49,12c3.309,0,6-2.691,6-6S52.309,0,49,0z M11,9c0-1.103,0.897-2,2-2s2,0.897,2,2s-0.897,2-2,2
S11,10.103,11,9z M6,51c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S8.206,51,6,51z M33,49c0,2.206-1.794,4-4,4s-4-1.794-4-4
s1.794-4,4-4S33,46.794,33,49z M29,31c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S32.309,31,29,31z M47,41c0,1.103-0.897,2-2,2
s-2-0.897-2-2s0.897-2,2-2S47,39.897,47,41z M49,10c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S51.206,10,49,10z"></path></svg></button></div><div id="global-graph-outer"><div id="global-graph-container" data-cfg="{&quot;drag&quot;:true,&quot;zoom&quot;:true,&quot;depth&quot;:-1,&quot;scale&quot;:0.9,&quot;repelForce&quot;:0.5,&quot;centerForce&quot;:0.3,&quot;linkDistance&quot;:30,&quot;fontSize&quot;:0.6,&quot;opacityScale&quot;:1,&quot;showTags&quot;:true,&quot;removeTags&quot;:[],&quot;focusOnHover&quot;:true}"></div></div></div><div class="toc desktop-only"><button type="button" id="toc" class aria-controls="toc-content" aria-expanded="true"><h3>目录</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="fold"><polyline points="6 9 12 15 18 9"></polyline></svg></button><div id="toc-content" class><ul class="overflow"><li class="depth-0"><a href="#javascript" data-for="javascript">JavaScript</a></li><li class="depth-1"><a href="#基础语法" data-for="基础语法">基础语法</a></li><li class="depth-1"><a href="#bom-模型" data-for="bom-模型">BOM 模型</a></li><li class="depth-1"><a href="#dom-模型" data-for="dom-模型">DOM 模型</a></li><li class="depth-1"><a href="#事件处理" data-for="事件处理">事件处理</a></li><li class="depth-1"><a href="#es6-新特性" data-for="es6-新特性">ES6+ 新特性</a></li><li class="depth-1"><a href="#异步编程" data-for="异步编程">异步编程</a></li></ul></div></div><div class="explorer mobile-only"><button type="button" id="explorer" data-behavior="collapse" data-collapsed="collapsed" data-savestate="true" data-tree="[{&quot;path&quot;:&quot;Personal&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Blog&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Blog/2018&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Blog/2020&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Blog/2021&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Blog/2022&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Blog/2023&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Blog/2024&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/个人成长&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/医学健康&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/历史&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/哲学宗教&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/心理&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/政治军事&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/教育学习&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/文学&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/生活百科&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/社会文化&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/科学技术&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/经济理财&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/艺术&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Book/计算机&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Journal&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Journal/2022&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Journal/2022/W34&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Journal/2022/W35&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Journal/2022/W36&quot;,&quot;collapsed&quot;:true},{&quot;path&quot;:&quot;Personal/Journal/2022/W37&quot;,&quot;collapsed&quot;:true
</script><script type="module">
let mermaidImport = undefined
document.addEventListener('nav', async () => {
if (document.querySelector("code.mermaid")) {
mermaidImport ||= await import('https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.esm.min.mjs')
const mermaid = mermaidImport.default
const darkMode = document.documentElement.getAttribute('saved-theme') === 'dark'
mermaid.initialize({
startOnLoad: false,
securityLevel: 'loose',
theme: darkMode ? 'dark' : 'default'
})
await mermaid.run({
querySelector: '.mermaid'
})
}
});
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/contrib/copy-tex.min.js" type="application/javascript"></script><script src="../../../postscript.js" type="module"></script></html>
Copy Permalink