-
Notifications
You must be signed in to change notification settings - Fork 0
/
feed.json
72 lines (72 loc) · 292 KB
/
feed.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
{
"version": "https://jsonfeed.org/version/1",
"title": "Blog",
"description": "",
"home_page_url": "https://joyLlll.github.io",
"items": [
{
"id": "https://joyllll.github.io/2024/04/21/%E6%8A%80%E6%9C%AF%E6%8A%A5%E5%91%8A/%E7%AC%AC%E4%B8%80%E6%AC%A1%E4%BD%9C%E4%B8%9A%E6%8A%A5%E5%91%8A/",
"url": "https://joyllll.github.io/2024/04/21/%E6%8A%80%E6%9C%AF%E6%8A%A5%E5%91%8A/%E7%AC%AC%E4%B8%80%E6%AC%A1%E4%BD%9C%E4%B8%9A%E6%8A%A5%E5%91%8A/",
"title": "作业报告",
"date_published": "2024-04-21T09:55:15.897Z",
"content_html": "<h1 id=\"背景\"><a class=\"anchor\" href=\"#背景\">#</a> 背景</h1>\n<h3 id=\"什么是hexo\"><a class=\"anchor\" href=\"#什么是hexo\">#</a> 什么是 hexo？</h3>\n<p>Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。</p>\n<h3 id=\"为什么使用hexo\"><a class=\"anchor\" href=\"#为什么使用hexo\">#</a> 为什么使用 hexo？</h3>\n<ol>\n<li>hexo 提供了丰富的主题 。</li>\n<li>相比自己去开发搭建一个博客系统，而且还要自己购买域名和服务器，搭建博客成本太高。除了购买成本，还需要花时间定期维护它，所以，选择免费且高速的 hexo 再好不过了。</li>\n<li>搭建快速方便，与 GitHub 搭配，可以便捷的部署我们的博客网站（主要是不需要自己去买服务器）</li>\n</ol>\n<h3 id=\"shokax-是一个功能强大的代理客户端有几个使用它的理由\"><a class=\"anchor\" href=\"#shokax-是一个功能强大的代理客户端有几个使用它的理由\">#</a> ShokaX 是一个功能强大的代理客户端，有几个使用它的理由：</h3>\n<ol>\n<li><strong>安全性</strong>: ShokaX 提供了强大的加密和隐私保护功能，可以帮助用户安全地访问互联网，保护个人信息不被窥探或截取。</li>\n<li><strong>突破网络限制</strong>：在一些地区或网络环境中，访问特定网站或服务可能受到限制，ShokaX 可以帮助用户绕过这些限制，自由访问互联网上的内容。</li>\n<li><strong>保护隐私</strong>：通过隐藏用户的真实 IP 地址，ShokaX 能够保护用户的在线隐私，防止个人信息被追踪或泄露。</li>\n<li><strong>加速网络连接</strong>：有时候，通过代理服务器访问互联网可以提供更快的连接速度，ShokaX 提供了一些优化功能，可以加速用户的网络连接。</li>\n<li><strong>跨平台支持</strong>: ShokaX 支持多种操作系统和设备，包括 Windows、macOS、iOS、Android 等，用户可以在不同设备上轻松使用。</li>\n</ol>\n<h1 id=\"安装主题\"><a class=\"anchor\" href=\"#安装主题\">#</a> 安装主题</h1>\n<ol>\n<li>安装 ShokaX-CLI:</li>\n</ol>\n<figure class=\"highlight yaml\"><figcaption data-lang=\"YAML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\">#hexo init</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre>npm install shokax<span class=\"token punctuation\">-</span>cli <span class=\"token punctuation\">-</span><span class=\"token punctuation\">-</span>location=global</pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token comment\">#cd your_blog</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre>SXC install shokaX</pre></td></tr></table></figure><ol start=\"2\">\n<li>配置主题</li>\n</ol>\n<p>\t更改根目录 <code>/_config.yml</code> 中的 <code>theme</code> 为 <code>shokaX</code></p>\n<p>\tmarkdown 配置，停用默认代码高亮</p>\n<h1 id=\"博客功能实现\"><a class=\"anchor\" href=\"#博客功能实现\">#</a> 博客功能实现</h1>\n<ol>\n<li>\n<p>在页面底部显示随机文章和最近评论</p>\n</li>\n<li>\n<p>字数和阅读时间统计</p>\n</li>\n<li>\n<p>头部自主选择日间或夜间模式</p>\n</li>\n<li>\n<p>自定义网站轮播图</p>\n</li>\n<li>\n<p>鼠标点击烟花特效</p>\n</li>\n<li>\n<p>网站标题自定义：</p>\n<figure class=\"highlight yaml\"><figcaption data-lang=\"YAML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token key atrule\">show</span><span class=\"token punctuation\">:</span> 不负韶华</pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token key atrule\">hide</span><span class=\"token punctuation\">:</span> 以梦为马！</pre></td></tr></table></figure></li>\n<li>\n<p>文章分类</p>\n</li>\n</ol>\n<h1 id=\"技术问题\"><a class=\"anchor\" href=\"#技术问题\">#</a> 技术问题</h1>\n<ol>\n<li>\n<p>文章重复显示</p>\n<p>清理缓存解决：</p>\n<figure class=\"highlight yaml\"><figcaption data-lang=\"YAML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre>hexo clean</pre></td></tr><tr><td data-num=\"2\"></td><td><pre>hexo g</pre></td></tr><tr><td data-num=\"3\"></td><td><pre>hexo s</pre></td></tr></table></figure></li>\n<li>\n<p>部署失败</p>\n<p>需要先安装 <code>deploy-git</code></p>\n</li>\n<li>\n<p>图片显示未成功</p>\n<p>图片网址失效，需要换新的网址</p>\n</li>\n</ol>\n",
"tags": []
},
{
"id": "https://joyllll.github.io/2024/04/21/js/javascript%E5%9F%BA%E7%A1%80%E7%AC%AC%E4%BA%94%E5%A4%A9/",
"url": "https://joyllll.github.io/2024/04/21/js/javascript%E5%9F%BA%E7%A1%80%E7%AC%AC%E4%BA%94%E5%A4%A9/",
"title": "JavaScript 基础 - 第5天",
"date_published": "2024-04-20T16:38:11.675Z",
"content_html": "<blockquote>\n<p>知道对象数据类型的特征，能够利用数组对象渲染页面</p>\n</blockquote>\n<ul>\n<li>理解什么是对象，掌握定义对象的语法</li>\n<li>掌握数学对象的使用</li>\n</ul>\n<h2 id=\"对象\"><a class=\"anchor\" href=\"#对象\">#</a> 对象</h2>\n<blockquote>\n<p>对象是 JavaScript 数据类型的一种，之前已经学习了数值类型、字符串类型、布尔类型、undefined。对象数据类型可以被理解成是一种数据集合。它由属性和方法两部分构成。</p>\n</blockquote>\n<h3 id=\"语法\"><a class=\"anchor\" href=\"#语法\">#</a> 语法</h3>\n<p>声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别。</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 对象语法<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// 声明字符串类型变量</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token keyword\">let</span> str <span class=\"token operator\">=</span> <span class=\"token string\">'hello world!'</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> </pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token comment\">// 声明数值类型变量</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token keyword\">let</span> num <span class=\"token operator\">=</span> <span class=\"token number\">199</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> <span class=\"token comment\">// 声明对象类型变量，使用一对花括号</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> <span class=\"token comment\">//user 便是一个对象了，目前它是一个空对象</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> <span class=\"token keyword\">let</span> user <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><h3 id=\"属性和访问\"><a class=\"anchor\" href=\"#属性和访问\">#</a> 属性和访问</h3>\n<p>数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。</p>\n<ol>\n<li>属性都是成 对出现的，包括属性名和值，它们之间使用英文 <code>:</code> 分隔</li>\n<li>多个属性之间使用英文 <code>,</code> 分隔</li>\n<li>属性就是依附在对象上的变量</li>\n<li>属性名可以使用 <code>""</code> 或 <code>''</code> ，一般情况下省略，除非名称遇到特殊符号如空格、中横线等</li>\n</ol>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 对象语法<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// 通过对象描述一个人的数据信息</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token comment\">//person 是一个对象，它包含了一个属性 name</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token comment\">// 属性都是成对出现的，属性名 和 值，它们之间使用英文：分隔</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token keyword\">let</span> person <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'小明'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 描述人的姓名</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> <span class=\"token literal-property property\">age</span><span class=\"token operator\">:</span> <span class=\"token number\">18</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 描述人的年龄</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> <span class=\"token literal-property property\">stature</span><span class=\"token operator\">:</span> <span class=\"token number\">185</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 描述人的身高</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> <span class=\"token literal-property property\">gender</span><span class=\"token operator\">:</span> <span class=\"token string\">'男'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 描述人的性别</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><p>声明对象，并添加了若干属性后，可以使用 <code>.</code> 或 <code>[]</code> 获得对象中属性对应的值，我称之为属性访问。</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 对象语法<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// 通过对象描述一个人的数据信息</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token comment\">//person 是一个对象，它包含了一个属性 name</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token comment\">// 属性都是成对出现的，属性名 和 值，它们之间使用英文：分隔</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token keyword\">let</span> person <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'小明'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 描述人的姓名</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> <span class=\"token literal-property property\">age</span><span class=\"token operator\">:</span> <span class=\"token number\">18</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 描述人的年龄</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> <span class=\"token literal-property property\">stature</span><span class=\"token operator\">:</span> <span class=\"token number\">185</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 描述人的身高</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> <span class=\"token literal-property property\">gender</span><span class=\"token operator\">:</span> <span class=\"token string\">'男'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 描述人的性别</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre> </pre></td></tr><tr><td data-num=\"20\"></td><td><pre> <span class=\"token comment\">// 访问人的名字</span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>person<span class=\"token punctuation\">.</span>name<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 结果为 小明</span></pre></td></tr><tr><td data-num=\"22\"></td><td><pre> <span class=\"token comment\">// 访问人性别</span></pre></td></tr><tr><td data-num=\"23\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>person<span class=\"token punctuation\">.</span>gender<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 结果为 男</span></pre></td></tr><tr><td data-num=\"24\"></td><td><pre> <span class=\"token comment\">// 访问人的身高</span></pre></td></tr><tr><td data-num=\"25\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>person<span class=\"token punctuation\">[</span><span class=\"token string\">'stature'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// 结果为 185</span></pre></td></tr><tr><td data-num=\"26\"></td><td><pre> <span class=\"token comment\">// 或者</span></pre></td></tr><tr><td data-num=\"27\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>person<span class=\"token punctuation\">.</span>stature<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 结果同为 185</span></pre></td></tr><tr><td data-num=\"28\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"29\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"30\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><p>扩展：也可以动态为对象添加属性，动态添加与直接定义是一样的，只是语法上更灵活。</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 对象语法<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// 声明一个空的对象（没有任何属性）</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre>\t<span class=\"token keyword\">let</span> user <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token comment\">// 动态追加属性</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> user<span class=\"token punctuation\">.</span>name <span class=\"token operator\">=</span> <span class=\"token string\">'小明'</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> user<span class=\"token punctuation\">[</span><span class=\"token string\">'age'</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token number\">18</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> </pre></td></tr><tr><td data-num=\"16\"></td><td><pre> <span class=\"token comment\">// 动态添加与直接定义是一样的，只是语法上更灵活</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><h3 id=\"方法和调用\"><a class=\"anchor\" href=\"#方法和调用\">#</a> 方法和调用</h3>\n<p>数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。</p>\n<ol>\n<li>方法是由方法名和函数两部分构成，它们之间使用：分隔</li>\n<li>多个属性之间使用英文 <code>,</code> 分隔</li>\n<li>方法是依附在对象中的函数</li>\n<li>方法名可以使用 <code>""</code> 或 <code>''</code> ，一般情况下省略，除非名称遇到特殊符号如空格、中横线等</li>\n</ol>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 对象方法<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// 方法是依附在对象上的函数</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token keyword\">let</span> person <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'小红'</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token literal-property property\">age</span><span class=\"token operator\">:</span> <span class=\"token number\">18</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token comment\">// 方法是由方法名和函数两部分构成，它们之间使用：分隔</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> <span class=\"token function-variable function\">singing</span><span class=\"token operator\">:</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'两只老虎，两只老虎，跑的快，跑的快...'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> <span class=\"token function-variable function\">run</span><span class=\"token operator\">:</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'我跑的非常快...'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"22\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"23\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"24\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><p>声明对象，并添加了若干方法后，可以使用 <code>.</code> 或 <code>[]</code> 调用对象中函数，我称之为方法调用。</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 对象方法<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// 方法是依附在对象上的函数</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token keyword\">let</span> person <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'小红'</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token literal-property property\">age</span><span class=\"token operator\">:</span> <span class=\"token number\">18</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token comment\">// 方法是由方法名和函数两部分构成，它们之间使用：分隔</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> <span class=\"token function-variable function\">singing</span><span class=\"token operator\">:</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'两只老虎，两只老虎，跑的快，跑的快...'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> <span class=\"token function-variable function\">run</span><span class=\"token operator\">:</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'我跑的非常快...'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"22\"></td><td><pre> </pre></td></tr><tr><td data-num=\"23\"></td><td><pre> <span class=\"token comment\">// 调用对象中 singing 方法</span></pre></td></tr><tr><td data-num=\"24\"></td><td><pre> person<span class=\"token punctuation\">.</span><span class=\"token function\">singing</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"25\"></td><td><pre> <span class=\"token comment\">// 调用对象中的 run 方法</span></pre></td></tr><tr><td data-num=\"26\"></td><td><pre> person<span class=\"token punctuation\">.</span><span class=\"token function\">run</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"27\"></td><td><pre></pre></td></tr><tr><td data-num=\"28\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"29\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"30\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><p>扩展：也可以动态为对象添加方法，动态添加与直接定义是一样的，只是语法上更灵活。</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 对象方法<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// 声明一个空的对象（没有任何属性，也没有任何方法）</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre>\t<span class=\"token keyword\">let</span> user <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token comment\">// 动态追加属性</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> user<span class=\"token punctuation\">.</span>name <span class=\"token operator\">=</span> <span class=\"token string\">'小明'</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> user<span class=\"token punctuation\">.</span><span class=\"token punctuation\">[</span><span class=\"token string\">'age'</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token number\">18</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> </pre></td></tr><tr><td data-num=\"16\"></td><td><pre> <span class=\"token comment\">// 动态添加方法</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> user<span class=\"token punctuation\">.</span><span class=\"token function-variable function\">move</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'移动一点距离...'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre> </pre></td></tr><tr><td data-num=\"21\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"22\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"23\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><p><strong>注：无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的。</strong></p>\n<h3 id=\"null\"><a class=\"anchor\" href=\"#null\">#</a> null</h3>\n<p>null 也是 JavaScript 中数据类型的一种，通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时，结果为 <code>object</code> 。</p>\n<h4 id=\"遍历对象\"><a class=\"anchor\" href=\"#遍历对象\">#</a> 遍历对象</h4>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token keyword\">let</span> obj <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token literal-property property\">uname</span><span class=\"token operator\">:</span> <span class=\"token string\">'pink'</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre><span class=\"token keyword\">for</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> k <span class=\"token keyword\">in</span> obj<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token comment\">//k 属性名 字符串 带引号 obj.'uname' k === 'uname'</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> <span class=\"token comment\">//obj [k] 属性值 obj ['uname'] obj [k]</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token punctuation\">}</span></pre></td></tr></table></figure><p>for in 不提倡遍历数组 因为 k 是 字符串</p>\n<h2 id=\"内置对象\"><a class=\"anchor\" href=\"#内置对象\">#</a> 内置对象</h2>\n<p>回想一下我们曾经使用过的 <code>console.log</code> ， <code>console</code> 其实就是 JavaScript 中内置的对象，该对象中存在一个方法叫 <code>log</code> ，然后调用 <code>log</code> 这个方法，即 <code>console.log()</code> 。</p>\n<p>除了 <code>console</code> 对象外，JavaScritp 还有其它的内置的对象</p>\n<h3 id=\"math\"><a class=\"anchor\" href=\"#math\">#</a> Math</h3>\n<p><code>Math</code> 是 JavaScript 中内置的对象，称为数学对象，这个对象下即包含了属性，也包含了许多的方法。</p>\n<h4 id=\"属性\"><a class=\"anchor\" href=\"#属性\">#</a> 属性</h4>\n<ul>\n<li>Math.PI，获取圆周率</li>\n</ul>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\">// 圆周率</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre>console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>Math<span class=\"token punctuation\">.</span><span class=\"token constant\">PI</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></pre></td></tr></table></figure><h4 id=\"方法\"><a class=\"anchor\" href=\"#方法\">#</a> 方法</h4>\n<ul>\n<li>Math.random，生成 0 到 1 间的随机数</li>\n</ul>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\">// 0 ~ 1 之间的随机数，包含 0 不包含 1</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre>Math<span class=\"token punctuation\">.</span><span class=\"token function\">random</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span></pre></td></tr></table></figure><ul>\n<li>Math.ceil，数字向上取整</li>\n</ul>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\">// 舍弃小数部分，整数部分加 1</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre>Math<span class=\"token punctuation\">.</span><span class=\"token function\">ceil</span><span class=\"token punctuation\">(</span><span class=\"token number\">3.4</span><span class=\"token punctuation\">)</span></pre></td></tr></table></figure><ul>\n<li>Math.floor，数字向下取整</li>\n</ul>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\">// 舍弃小数部分，整数部分不变</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre>Math<span class=\"token punctuation\">.</span><span class=\"token function\">floor</span><span class=\"token punctuation\">(</span><span class=\"token number\">4.68</span><span class=\"token punctuation\">)</span></pre></td></tr></table></figure><ul>\n<li>Math.round，四舍五入取整</li>\n</ul>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\">// 取整，四舍五入原则</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre>Math<span class=\"token punctuation\">.</span><span class=\"token function\">round</span><span class=\"token punctuation\">(</span><span class=\"token number\">5.46539</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre>Math<span class=\"token punctuation\">.</span><span class=\"token function\">round</span><span class=\"token punctuation\">(</span><span class=\"token number\">4.849</span><span class=\"token punctuation\">)</span></pre></td></tr></table></figure><ul>\n<li>Math.max，在一组数中找出最大的</li>\n</ul>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\">// 找出最大值</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre>Math<span class=\"token punctuation\">.</span><span class=\"token function\">max</span><span class=\"token punctuation\">(</span><span class=\"token number\">10</span><span class=\"token punctuation\">,</span> <span class=\"token number\">21</span><span class=\"token punctuation\">,</span> <span class=\"token number\">7</span><span class=\"token punctuation\">,</span> <span class=\"token number\">24</span><span class=\"token punctuation\">,</span> <span class=\"token number\">13</span><span class=\"token punctuation\">)</span></pre></td></tr></table></figure><ul>\n<li>Math.min，在一组数中找出最小的</li>\n</ul>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\">// 找出最小值</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre>Math<span class=\"token punctuation\">.</span><span class=\"token function\">min</span><span class=\"token punctuation\">(</span><span class=\"token number\">24</span><span class=\"token punctuation\">,</span> <span class=\"token number\">18</span><span class=\"token punctuation\">,</span> <span class=\"token number\">6</span><span class=\"token punctuation\">,</span> <span class=\"token number\">19</span><span class=\"token punctuation\">,</span> <span class=\"token number\">21</span><span class=\"token punctuation\">)</span></pre></td></tr></table></figure><ul>\n<li>Math.pow，幂方法</li>\n</ul>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\">// 求某个数的多少次方</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre>Math<span class=\"token punctuation\">.</span><span class=\"token function\">pow</span><span class=\"token punctuation\">(</span><span class=\"token number\">4</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// 求 4 的 2 次方</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre>Math<span class=\"token punctuation\">.</span><span class=\"token function\">pow</span><span class=\"token punctuation\">(</span><span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">3</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// 求 2 的 3 次方</span></pre></td></tr></table></figure><ul>\n<li>Math.sqrt，平方根</li>\n</ul>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\">// 求某数的平方根</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre>Math<span class=\"token punctuation\">.</span><span class=\"token function\">sqrt</span><span class=\"token punctuation\">(</span><span class=\"token number\">16</span><span class=\"token punctuation\">)</span></pre></td></tr></table></figure><p>数学对象提供了比较多的方法，这里不要求强记，通过演示数学对象的使用，加深对对象的理解。</p>\n",
"tags": []
},
{
"id": "https://joyllll.github.io/2024/04/21/js/javascript%E5%9F%BA%E7%A1%80%E7%AC%AC%E5%9B%9B%E5%A4%A9/",
"url": "https://joyllll.github.io/2024/04/21/js/javascript%E5%9F%BA%E7%A1%80%E7%AC%AC%E5%9B%9B%E5%A4%A9/",
"title": "JavaScript 基础 - 第4天",
"date_published": "2024-04-20T16:38:11.674Z",
"content_html": "<blockquote>\n<p>理解封装的意义，能够通过函数的声明实现逻辑的封装，知道对象数据类型的特征，结合数学对象实现简单计算功能。</p>\n</blockquote>\n<ul>\n<li>理解函数的封装的特征</li>\n<li>掌握函数声明的语法</li>\n<li>理解什么是函数的返回值</li>\n<li>知道并能使用常见的内置函数</li>\n</ul>\n<h2 id=\"函数\"><a class=\"anchor\" href=\"#函数\">#</a> 函数</h2>\n<blockquote>\n<p>理解函数的封装特性，掌握函数的语法规则</p>\n</blockquote>\n<h3 id=\"声明和调用\"><a class=\"anchor\" href=\"#声明和调用\">#</a> 声明和调用</h3>\n<p>函数可以把具有相同或相似逻辑的代码 “包裹” 起来，通过函数调用执行这些被 “包裹” 的代码逻辑，这么做的优势是有利于精简代码方便复用。</p>\n<h4 id=\"声明定义\"><a class=\"anchor\" href=\"#声明定义\">#</a> 声明（定义）</h4>\n<p>声明（定义）一个完整函数包括关键字、函数名、形式参数、函数体、返回值 5 个部分</p>\n<p><img loading=\"lazy\" data-src=\"./assets/function.jpg\" alt=\"function\" /></p>\n<h4 id=\"调用\"><a class=\"anchor\" href=\"#调用\">#</a> 调用</h4>\n<p>声明（定义）的函数必须调用才会真正被执行，使用 <code>()</code> 调用函数。</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 声明和调用<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token comment\">// 声明（定义）了最简单的函数，既没有形式参数，也没有返回值</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token keyword\">function</span> <span class=\"token function\">sayHi</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'嗨~'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token comment\">// 函数调用，这些函数体内的代码逻辑会被执行</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token comment\">// 函数名 ()</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> </pre></td></tr><tr><td data-num=\"16\"></td><td><pre> <span class=\"token function\">sayHi</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> <span class=\"token comment\">// 可以重复被调用，多少次都可以</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> <span class=\"token function\">sayHi</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><blockquote>\n<p>注：函数名的命名规则与变量是一致的，并且尽量保证函数名的语义。</p>\n</blockquote>\n<p>小案例： 小星星</p>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token operator\"><</span>script<span class=\"token operator\">></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token comment\">// 函数声明</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> <span class=\"token keyword\">function</span> <span class=\"token function\">sayHi</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token comment\">// document.write('hai~')</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">*<br></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">**<br></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">***<br></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">****<br></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">*****<br></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">******<br></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">*******<br></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">********<br></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">*********<br></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> <span class=\"token comment\">// 函数调用</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> <span class=\"token function\">sayHi</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> <span class=\"token function\">sayHi</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> <span class=\"token function\">sayHi</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre> <span class=\"token function\">sayHi</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre> <span class=\"token function\">sayHi</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre> <span class=\"token operator\"><</span><span class=\"token operator\">/</span>script<span class=\"token operator\">></span></pre></td></tr></table></figure><h3 id=\"参数\"><a class=\"anchor\" href=\"#参数\">#</a> 参数</h3>\n<p>通过向函数传递参数，可以让函数更加灵活多变，参数可以理解成是一个变量。</p>\n<p>声明（定义）一个功能为打招呼的函数</p>\n<ul>\n<li>传入数据列表</li>\n<li>声明这个函数需要传入几个数据</li>\n<li>多个数据用逗号隔开</li>\n</ul>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 函数参数<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// 声明（定义）一个功能为打招呼的函数</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token comment\">// function sayHi() {</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token comment\">// console.log (' 嗨～')</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token comment\">// }</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token comment\">// 调用函数</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> <span class=\"token comment\">// sayHi()</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre>\t</pre></td></tr><tr><td data-num=\"17\"></td><td><pre></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> <span class=\"token comment\">// 这个函数似乎没有什么价值，除非能够向不同的人打招呼</span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre> <span class=\"token comment\">// 这就需要借助参数来实现了</span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre> <span class=\"token keyword\">function</span> <span class=\"token function\">sayHi</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">name</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre> <span class=\"token comment\">// 参数 name 可以被理解成是一个变量</span></pre></td></tr><tr><td data-num=\"22\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>name<span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"23\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'嗨~'</span> <span class=\"token operator\">+</span> name<span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"24\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"25\"></td><td><pre></pre></td></tr><tr><td data-num=\"26\"></td><td><pre> <span class=\"token comment\">// 调用 sayHi 函数，括号中多了 ' 小明'</span></pre></td></tr><tr><td data-num=\"27\"></td><td><pre> <span class=\"token comment\">// 这时相当于为参数 name 赋值了</span></pre></td></tr><tr><td data-num=\"28\"></td><td><pre> <span class=\"token function\">sayHi</span><span class=\"token punctuation\">(</span><span class=\"token string\">'小明'</span><span class=\"token punctuation\">)</span><span class=\"token comment\">// 结果为 小明</span></pre></td></tr><tr><td data-num=\"29\"></td><td><pre></pre></td></tr><tr><td data-num=\"30\"></td><td><pre> <span class=\"token comment\">// 再次调用 sayHi 函数，括号中多了 ' 小红'</span></pre></td></tr><tr><td data-num=\"31\"></td><td><pre> <span class=\"token comment\">// 这时相当于为参数 name 赋值了</span></pre></td></tr><tr><td data-num=\"32\"></td><td><pre> <span class=\"token function\">sayHi</span><span class=\"token punctuation\">(</span><span class=\"token string\">'小红'</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// 结果为 小红</span></pre></td></tr><tr><td data-num=\"33\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"34\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"35\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><p>总结：</p>\n<ol>\n<li>声明（定义）函数时的形参没有数量限制，当有多个形参时使用 <code>,</code> 分隔</li>\n<li>调用函数传递的实参要与形参的顺序一致</li>\n</ol>\n<h4 id=\"形参和实参\"><a class=\"anchor\" href=\"#形参和实参\">#</a> 形参和实参</h4>\n<p>形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）</p>\n<p>实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）</p>\n<p>形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值</p>\n<p>开发中尽量保持形参和实参个数一致</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 函数参数<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token comment\">// 声明（定义）一个计算任意两数字和的函数</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// 形参 x 和 y 分别表示任意两个数字，它们是两个变量</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token keyword\">function</span> <span class=\"token function\">count</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">x<span class=\"token punctuation\">,</span> y</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>x <span class=\"token operator\">+</span> y<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token comment\">// 调用函数，传入两个具体的数字做为实参</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> <span class=\"token comment\">// 此时 10 赋值给了形参 x</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> <span class=\"token comment\">// 此时 5 赋值给了形参 y</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> <span class=\"token function\">count</span><span class=\"token punctuation\">(</span><span class=\"token number\">10</span><span class=\"token punctuation\">,</span> <span class=\"token number\">5</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 结果为 15</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><h3 id=\"返回值\"><a class=\"anchor\" href=\"#返回值\">#</a> 返回值</h3>\n<p>函数的本质是封装（包裹），函数体内的逻辑执行完毕后，函数外部如何获得函数内部的执行结果呢？要想获得函数内部逻辑的执行结果，需要通过 <code>return</code> 这个关键字，将内部执行结果传递到函数外部，这个被传递到外部的结果就是返回值。</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 函数返回值<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// 定义求和函数</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token keyword\">function</span> <span class=\"token function\">count</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">a<span class=\"token punctuation\">,</span> b</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token keyword\">let</span> s <span class=\"token operator\">=</span> a <span class=\"token operator\">+</span> b</pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token comment\">//s 即为 a + b 的结果</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token comment\">// 通过 return 将 s 传递到外部</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> <span class=\"token keyword\">return</span> s</pre></td></tr><tr><td data-num=\"16\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> <span class=\"token comment\">// 调用函数，如果一个函数有返回值</span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre> <span class=\"token comment\">// 那么可将这个返回值赋值给外部的任意变量</span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre> <span class=\"token keyword\">let</span> total <span class=\"token operator\">=</span> <span class=\"token function\">count</span><span class=\"token punctuation\">(</span><span class=\"token number\">5</span><span class=\"token punctuation\">,</span> <span class=\"token number\">12</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"22\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"23\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><p>总结：</p>\n<ol>\n<li>在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用</li>\n<li>函数内部只能出现 1 次 return，并且 return 下一行代码不会再被执行，所以 return 后面的数据不要换行写</li>\n<li>return 会立即结束当前函数</li>\n<li>函数可以没有 return，这种情况默认返回值为 undefined</li>\n</ol>\n<h3 id=\"作用域\"><a class=\"anchor\" href=\"#作用域\">#</a> 作用域</h3>\n<p>通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。</p>\n<p>作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。</p>\n<h4 id=\"全局作用域\"><a class=\"anchor\" href=\"#全局作用域\">#</a> 全局作用域</h4>\n<p>作用于所有代码执行的环境 (整个 script 标签内部) 或者一个独立的 js 文件</p>\n<p>处于全局作用域内的变量，称为全局变量</p>\n<h4 id=\"局部作用域\"><a class=\"anchor\" href=\"#局部作用域\">#</a> 局部作用域</h4>\n<p>作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。</p>\n<p>处于局部作用域内的变量称为局部变量</p>\n<blockquote>\n<p>如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐</p>\n<p>但是有一种情况，函数内部的形参可以看做是局部变量。</p>\n</blockquote>\n<h3 id=\"匿名函数\"><a class=\"anchor\" href=\"#匿名函数\">#</a> 匿名函数</h3>\n<p>函数可以分为具名函数和匿名函数</p>\n<p>匿名函数：没有名字的函数，无法直接使用。</p>\n<h4 id=\"函数表达式\"><a class=\"anchor\" href=\"#函数表达式\">#</a> 函数表达式</h4>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\">// 声明</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token keyword\">let</span> <span class=\"token function-variable function\">fn</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> </pre></td></tr><tr><td data-num=\"3\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'函数表达式'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre><span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre><span class=\"token comment\">// 调用</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token function\">fn</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span></pre></td></tr></table></figure><h4 id=\"立即执行函数\"><a class=\"anchor\" href=\"#立即执行函数\">#</a> 立即执行函数</h4>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token punctuation\">(</span><span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span> xxx <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token punctuation\">(</span><span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>xxxx<span class=\"token punctuation\">}</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></pre></td></tr></table></figure><blockquote>\n<p>无需调用，立即执行，其实本质已经调用了</p>\n<p>多个立即执行函数之间用分号隔开</p>\n</blockquote>\n<p>\t\t在能够访问到的情况下 先局部 局部没有在找全局</p>\n",
"tags": []
},
{
"id": "https://joyllll.github.io/2024/04/21/js/javascript%E5%9F%BA%E7%A1%80%E7%AC%AC%E4%B8%89%E5%A4%A9/",
"url": "https://joyllll.github.io/2024/04/21/js/javascript%E5%9F%BA%E7%A1%80%E7%AC%AC%E4%B8%89%E5%A4%A9/",
"title": "JavaScript 基础 - 第3天",
"date_published": "2024-04-20T16:38:11.673Z",
"content_html": "<p><strong>if 多分支语句和 switch 的区别：</strong></p>\n<ol>\n<li>\n<p>共同点</p>\n<ul>\n<li>都能实现多分支选择， 多选 1</li>\n<li>大部分情况下可以互换</li>\n</ul>\n</li>\n<li>\n<p>区别：</p>\n<ul>\n<li>switch…case 语句通常处理 case 为比较<strong>确定值</strong>的情况，而 if…else… 语句更加灵活，通常用于<strong>范围判断</strong> (大于，等于某个范围)。</li>\n<li>switch 语句进行判断后直接执行到程序的语句，效率更高，而 if…else 语句有几种判断条件，就得判断多少次</li>\n<li>switch 一定要注意 必须是 === 全等，一定注意 数据类型，同时注意 break 否则会有穿透效果</li>\n<li>结论：\n<ul>\n<li>当分支比较少时，if…else 语句执行效率高。</li>\n<li>当分支比较多时，switch 语句执行效率高，而且结构更清晰。</li>\n</ul>\n</li>\n</ul>\n<p></p>\n</li>\n</ol>\n<h2 id=\"for-语句\"><a class=\"anchor\" href=\"#for-语句\">#</a> for 语句</h2>\n<blockquote>\n<p>掌握 for 循环语句，让程序具备重复执行能力</p>\n</blockquote>\n<p><code>for</code> 是 JavaScript 提供的另一种循环控制的话句，它和 <code>while</code> 只是语法上存在差异。</p>\n<h3 id=\"for语句的基本使用\"><a class=\"anchor\" href=\"#for语句的基本使用\">#</a> for 语句的基本使用</h3>\n<ol>\n<li>实现循环的 3 要素</li>\n</ol>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token comment\">// 1. 语法格式</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> <span class=\"token comment\">//for (起始值；终止条件；变化量) {</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token comment\">// // 要重复执行的代码</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token comment\">// }</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre></pre></td></tr><tr><td data-num=\"7\"></td><td><pre> <span class=\"token comment\">// 2. 示例：在网页中输入标题标签</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> <span class=\"token comment\">// 起始值为 1</span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token comment\">// 变化量 i++</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// 终止条件 i <= 6</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token keyword\">for</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\"><=</span> <span class=\"token number\">6</span><span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\"><h</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>i<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">>循环控制，即重复执行<h</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>i<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\">></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><ol start=\"2\">\n<li>\n<p>变化量和死循环， <code>for</code> 循环和 <code>while</code> 一样，如果不合理设置增量和终止条件，便会产生死循环。</p>\n</li>\n<li>\n<p>跳出和终止循环</p>\n</li>\n</ol>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token comment\">// 1. continue </span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\"><=</span> <span class=\"token number\">5</span><span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>i <span class=\"token operator\">===</span> <span class=\"token number\">3</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token keyword\">continue</span> <span class=\"token comment\">// 结束本次循环，继续下一次循环</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>i<span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token comment\">// 2. break</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\"><=</span> <span class=\"token number\">5</span><span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>i <span class=\"token operator\">===</span> <span class=\"token number\">3</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token keyword\">break</span> <span class=\"token comment\">// 退出结束整个循环</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>i<span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><p>结论：</p>\n<ul>\n<li><code>JavaScript</code> 提供了多种语句来实现循环控制，但无论使用哪种语句都离不开循环的 3 个特征，即起始值、变化量、终止条件，做为初学者应着重体会这 3 个特征，不必过多纠结三种语句的区别。</li>\n<li>起始值、变化量、终止条件，由开发者根据逻辑需要进行设计，规避死循环的发生。</li>\n<li>当如果明确了循环的次数的时候推荐使用 <code>for</code> 循环，当不明确循环的次数的时候推荐使用 <code>while</code> 循环</li>\n</ul>\n<blockquote>\n<p>注意： <code>for</code> 的语法结构更简洁，故 <code>for</code> 循环的使用频次会更多。</p>\n</blockquote>\n<h3 id=\"循环嵌套\"><a class=\"anchor\" href=\"#循环嵌套\">#</a> 循环嵌套</h3>\n<p>利用循环的知识来对比一个简单的天文知识，我们知道地球在自转的同时也在围绕太阳公转，如果把自转和公转都看成是循环的话，就相当于是循环中又嵌套了另一个循环。</p>\n<p><img loading=\"lazy\" data-src=\"./assets/universe.gif\" alt=\"universe\" /></p>\n<p>实际上 JavaScript 中任何一种循环语句都支持循环的嵌套，如下代码所示：</p>\n<p><img loading=\"lazy\" data-src=\"assets/1647918261399.png\" alt=\"64791826139\" /></p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre>// 1. 外面的循环 记录第n天 </pre></td></tr><tr><td data-num=\"2\"></td><td><pre>for (let i = 1; i < 4; i++) {</pre></td></tr><tr><td data-num=\"3\"></td><td><pre> document.write(`第${i}天 <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>br</span><span class=\"token punctuation\">></span></span>`)</pre></td></tr><tr><td data-num=\"4\"></td><td><pre> // 2. 里层的循环记录 几个单词</pre></td></tr><tr><td data-num=\"5\"></td><td><pre> for (let j = 1; j < 6; j++) {</pre></td></tr><tr><td data-num=\"6\"></td><td><pre> document.write(`记住第${j}个单词<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>br</span><span class=\"token punctuation\">></span></span>`)</pre></td></tr><tr><td data-num=\"7\"></td><td><pre> }</pre></td></tr><tr><td data-num=\"8\"></td><td><pre>}</pre></td></tr></table></figure><p>记住，外层循环循环一次，里层循环循环全部</p>\n<h4 id=\"倒三角\"><a class=\"anchor\" href=\"#倒三角\">#</a> 倒三角</h4>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\">// 外层打印几行</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\"><=</span> <span class=\"token number\">5</span><span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> <span class=\"token comment\">// 里层打印几个星星</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> j <span class=\"token operator\">=</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span> j <span class=\"token operator\"><=</span> i<span class=\"token punctuation\">;</span> j<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token string\">'★'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token string\">'<br>'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre><span class=\"token punctuation\">}</span></pre></td></tr></table></figure><p><img loading=\"lazy\" data-src=\"assets/1647918678956.png\" alt=\"64791867895\" /></p>\n<h4 id=\"九九乘法表\"><a class=\"anchor\" href=\"#九九乘法表\">#</a> 九九乘法表</h4>\n<p>样式 css</p>\n<figure class=\"highlight css\"><figcaption data-lang=\"CSS\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token selector\">span</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> inline-block<span class=\"token punctuation\">;</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 100px<span class=\"token punctuation\">;</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token property\">padding</span><span class=\"token punctuation\">:</span> 5px 10px<span class=\"token punctuation\">;</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token property\">border</span><span class=\"token punctuation\">:</span> 1px solid pink<span class=\"token punctuation\">;</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> <span class=\"token property\">margin</span><span class=\"token punctuation\">:</span> 2px<span class=\"token punctuation\">;</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre> <span class=\"token property\">border-radius</span><span class=\"token punctuation\">:</span> 5px<span class=\"token punctuation\">;</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> <span class=\"token property\">box-shadow</span><span class=\"token punctuation\">:</span> 2px 2px 2px <span class=\"token function\">rgba</span><span class=\"token punctuation\">(</span>255<span class=\"token punctuation\">,</span> 192<span class=\"token punctuation\">,</span> 203<span class=\"token punctuation\">,</span> .4<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token property\">background-color</span><span class=\"token punctuation\">:</span> <span class=\"token function\">rgba</span><span class=\"token punctuation\">(</span>255<span class=\"token punctuation\">,</span> 192<span class=\"token punctuation\">,</span> 203<span class=\"token punctuation\">,</span> .1<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token property\">text-align</span><span class=\"token punctuation\">:</span> center<span class=\"token punctuation\">;</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> hotpink<span class=\"token punctuation\">;</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre><span class=\"token punctuation\">}</span></pre></td></tr></table></figure><p>javascript</p>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\">// 外层打印几行</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\"><=</span> <span class=\"token number\">9</span><span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> <span class=\"token comment\">// 里层打印几个星星</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> j <span class=\"token operator\">=</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span> j <span class=\"token operator\"><=</span> i<span class=\"token punctuation\">;</span> j<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token comment\">// 只需要吧 ★ 换成 1 x 1 = 1 </span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\"></pre></td></tr><tr><td data-num=\"7\"></td><td><pre>\t\t<div> </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>j<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\"> x </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>i<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\"> = </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>j <span class=\"token operator\">*</span> i<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\"> </div></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> </span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token string\">'<br>'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre><span class=\"token punctuation\">}</span></pre></td></tr></table></figure><p><img loading=\"lazy\" data-src=\"assets/1647918734677.png\" alt=\"64791873467\" /></p>\n<h2 id=\"数组\"><a class=\"anchor\" href=\"#数组\">#</a> 数组</h2>\n<blockquote>\n<p>知道什么是数组及其应用的场景，掌握数组声明及访问的语法。</p>\n</blockquote>\n<h3 id=\"数组是什么\"><a class=\"anchor\" href=\"#数组是什么\">#</a> 数组是什么？</h3>\n<p><strong>数组：</strong>(Array) 是一种可以按顺序保存数据的数据类型</p>\n<p>** 使用场景：** 如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便</p>\n<h3 id=\"数组的基本使用\"><a class=\"anchor\" href=\"#数组的基本使用\">#</a> 数组的基本使用</h3>\n<h4 id=\"定义数组和数组单元\"><a class=\"anchor\" href=\"#定义数组和数组单元\">#</a> 定义数组和数组单元</h4>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token comment\">// 1. 语法，使用 [] 来定义一个空数组</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> <span class=\"token comment\">// 定义一个空数组，然后赋值给变量 classes</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token comment\">// let classes = [];</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> <span class=\"token comment\">// 2. 定义非空数组</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre> <span class=\"token keyword\">let</span> classes <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'小明'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'小刚'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'小红'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'小丽'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'小米'</span><span class=\"token punctuation\">]</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><p>通过 <code>[]</code> 定义数组，数据中可以存放真正的数据，如小明、小刚、小红等这些都是数组中的数据，我们这些数据称为数组单元，数组单元之间使用英文逗号分隔。</p>\n<h4 id=\"访问数组和数组索引\"><a class=\"anchor\" href=\"#访问数组和数组索引\">#</a> 访问数组和数组索引</h4>\n<p>使用数组存放数据并不是最终目的，关键是能够随时的访问到数组中的数据（单元）。其实 JavaScript 为数组中的每一个数据单元都编了号，通过数据单元在数组中的编号便可以轻松访问到数组中的数据单元了。</p>\n<p>我们将数据单元在数组中的编号称为索引值，也有人称其为下标。</p>\n<p>索引值实际是按着数据单元在数组中的位置依次排列的，注意是从 <code> 0</code> 开始的，如下图所示：</p>\n<p><img loading=\"lazy\" data-src=\"./assets/array.jpg\" alt=\"array\" /></p>\n<p>观察上图可以数据单元【小明】对应的索引值为【0】，数据单元【小红】对应的索引值为【2】</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token keyword\">let</span> classes <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'小明'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'小刚'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'小红'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'小丽'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'小米'</span><span class=\"token punctuation\">]</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> </pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token comment\">// 1. 访问数组，语法格式为：变量名 [索引值]</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span>classes<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// 结果为：小明</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span>classes<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// 结果为：小刚</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span>classes<span class=\"token punctuation\">[</span><span class=\"token number\">4</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// 结果为：小米</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> </pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token comment\">// 2. 通过索引值还可以为数组单重新赋值</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span>classes<span class=\"token punctuation\">[</span><span class=\"token number\">3</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// 结果为：小丽</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token comment\">// 重新为索引值为 3 的单元赋值</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> classes<span class=\"token punctuation\">[</span><span class=\"token number\">3</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token string\">'小小丽'</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">wirte</span><span class=\"token punctuation\">(</span>classes<span class=\"token punctuation\">[</span><span class=\"token number\">3</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 结果为： 小小丽</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><h4 id=\"数据单元值类型\"><a class=\"anchor\" href=\"#数据单元值类型\">#</a> 数据单元值类型</h4>\n<p>数组做为数据的集合，它的单元值可以是任意数据类型</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token comment\">// 6. 数组单值类型可以是任意数据类型</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token comment\">//a) 数组单元值的类型为字符类型</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token keyword\">let</span> list <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'HTML'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'CSS'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'JavaScript'</span><span class=\"token punctuation\">]</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> <span class=\"token comment\">//b) 数组单元值的类型为数值类型</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre> <span class=\"token keyword\">let</span> scores <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token number\">78</span><span class=\"token punctuation\">,</span> <span class=\"token number\">84</span><span class=\"token punctuation\">,</span> <span class=\"token number\">70</span><span class=\"token punctuation\">,</span> <span class=\"token number\">62</span><span class=\"token punctuation\">,</span> <span class=\"token number\">75</span><span class=\"token punctuation\">]</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> <span class=\"token comment\">//c) 混合多种类型</span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token keyword\">let</span> mixin <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'hello'</span><span class=\"token punctuation\">]</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><h4 id=\"数组长度属性\"><a class=\"anchor\" href=\"#数组长度属性\">#</a> 数组长度属性</h4>\n<p>重申一次，数组在 JavaScript 中并不是新的数据类型，它属于对象类型。</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token comment\">// 定义一个数组</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> <span class=\"token keyword\">let</span> arr <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'html'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'css'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'javascript'</span><span class=\"token punctuation\">]</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token comment\">// 数组对应着一个 length 属性，它的含义是获取数组的长度</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>arr<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 3</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><h3 id=\"操作数组\"><a class=\"anchor\" href=\"#操作数组\">#</a> 操作数组</h3>\n<p>数组做为对象数据类型，不但有 <code>length</code> 属性可以使用，还提供了许多方法：</p>\n<ol>\n<li>push 动态向数组的尾部添加一个单元</li>\n<li>unshit 动态向数组头部添加一个单元</li>\n<li>pop 删除最后一个单元</li>\n<li>shift 删除第一个单元</li>\n<li>splice 动态删除任意单元</li>\n</ol>\n<p>使用以上 4 个方法时，都是直接在原数组上进行操作，即成功调任何一个方法，原数组都跟着发生相应的改变。并且在添加或删除单元时 <code>length</code> 并不会发生错乱。</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token comment\">// 定义一个数组</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> <span class=\"token keyword\">let</span> arr <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'html'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'css'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'javascript'</span><span class=\"token punctuation\">]</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token comment\">// 1. push 动态向数组的尾部添加一个单元</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> arr<span class=\"token punctuation\">.</span><span class=\"token function\">push</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Nodejs'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>arr<span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> arr<span class=\"token punctuation\">.</span><span class=\"token function\">push</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Vue'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// 2. unshit 动态向数组头部添加一个单元</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> arr<span class=\"token punctuation\">.</span><span class=\"token function\">unshift</span><span class=\"token punctuation\">(</span><span class=\"token string\">'VS Code'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>arr<span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token comment\">// 3. splice 动态删除任意单元</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> arr<span class=\"token punctuation\">.</span><span class=\"token function\">splice</span><span class=\"token punctuation\">(</span><span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// 从索引值为 2 的位置开始删除 1 个单元</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>arr<span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> <span class=\"token comment\">// 4. pop 删除最后一个单元</span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre> arr<span class=\"token punctuation\">.</span><span class=\"token function\">pop</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>arr<span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre></pre></td></tr><tr><td data-num=\"22\"></td><td><pre> <span class=\"token comment\">// 5. shift 删除第一个单元</span></pre></td></tr><tr><td data-num=\"23\"></td><td><pre> arr<span class=\"token punctuation\">.</span><span class=\"token function\">shift</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"24\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>arr<span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"25\"></td><td><pre></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure>",
"tags": []
},
{
"id": "https://joyllll.github.io/2024/04/21/js/javascript%E5%9F%BA%E7%A1%80%E7%AC%AC%E4%BA%8C%E5%A4%A9%E7%AC%94%E8%AE%B0/",
"url": "https://joyllll.github.io/2024/04/21/js/javascript%E5%9F%BA%E7%A1%80%E7%AC%AC%E4%BA%8C%E5%A4%A9%E7%AC%94%E8%AE%B0/",
"title": "JavaScript 基础 - 第2天",
"date_published": "2024-04-20T16:38:11.672Z",
"content_html": "<blockquote>\n<p>理解什么是流程控制，知道条件控制的种类并掌握其对应的语法规则，具备利用循环编写简易 ATM 取款机程序能力</p>\n</blockquote>\n<ul>\n<li>运算符</li>\n<li>语句</li>\n<li>综合案例</li>\n</ul>\n<h2 id=\"运算符\"><a class=\"anchor\" href=\"#运算符\">#</a> 运算符</h2>\n<h3 id=\"算术运算符\"><a class=\"anchor\" href=\"#算术运算符\">#</a> 算术运算符</h3>\n<p>数字是用来计算的，比如：乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。</p>\n<p>算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等</p>\n<table>\n<thead>\n<tr>\n<th>运算符</th>\n<th>作用</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>+</td>\n<td>求和</td>\n</tr>\n<tr>\n<td>-</td>\n<td>求差</td>\n</tr>\n<tr>\n<td>*</td>\n<td>求积</td>\n</tr>\n<tr>\n<td>/</td>\n<td>求商</td>\n</tr>\n<tr>\n<td><strong>%</strong></td>\n<td>取模（取余数），开发中经常用于作为某个数字是否被整除</td>\n</tr>\n</tbody>\n</table>\n<blockquote>\n<p>注意：在计算失败时，显示的结果是 NaN （not a number）</p>\n</blockquote>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\">// 算术运算符</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre>console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token number\">1</span> <span class=\"token operator\">+</span> <span class=\"token number\">2</span> <span class=\"token operator\">*</span> <span class=\"token number\">3</span> <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// 4 </span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token keyword\">let</span> num <span class=\"token operator\">=</span> <span class=\"token number\">10</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre>console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>num <span class=\"token operator\">+</span> <span class=\"token number\">10</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// 20</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre>console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>num <span class=\"token operator\">+</span> num<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 20</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token comment\">// 1. 取模 (取余数) 使用场景： 用来判断某个数是否能够被整除</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre>console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token number\">4</span> <span class=\"token operator\">%</span> <span class=\"token number\">2</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// 0 </span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre>console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token number\">6</span> <span class=\"token operator\">%</span> <span class=\"token number\">3</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// 0</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre>console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token number\">5</span> <span class=\"token operator\">%</span> <span class=\"token number\">3</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// 2</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre>console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token number\">3</span> <span class=\"token operator\">%</span> <span class=\"token number\">5</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// 3</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre></pre></td></tr><tr><td data-num=\"13\"></td><td><pre><span class=\"token comment\">// 2. 注意事项：如果我们计算失败，则返回的结果是 NaN (not a number)</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre>console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'pink老师'</span> <span class=\"token operator\">-</span> <span class=\"token number\">2</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre>console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'pink老师'</span> <span class=\"token operator\">*</span> <span class=\"token number\">2</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre>console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'pink老师'</span> <span class=\"token operator\">+</span> <span class=\"token number\">2</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">//pink 老师 2</span></pre></td></tr></table></figure><h3 id=\"赋值运算符\"><a class=\"anchor\" href=\"#赋值运算符\">#</a> 赋值运算符</h3>\n<p>赋值运算符：对变量进行赋值的运算符</p>\n<p>= 将等号右边的值赋予给左边，要求左边必须是一个容器</p>\n<table>\n<thead>\n<tr>\n<th>运算符</th>\n<th>作用</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>+=</td>\n<td>加法赋值</td>\n</tr>\n<tr>\n<td>-+</td>\n<td>减法赋值</td>\n</tr>\n<tr>\n<td>*=</td>\n<td>乘法赋值</td>\n</tr>\n<tr>\n<td>/=</td>\n<td>除法赋值</td>\n</tr>\n<tr>\n<td>%=</td>\n<td>取余赋值</td>\n</tr>\n</tbody>\n</table>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token operator\"><</span>script<span class=\"token operator\">></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token keyword\">let</span> num <span class=\"token operator\">=</span> <span class=\"token number\">1</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token comment\">// num = num + 1</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre><span class=\"token comment\">// 采取赋值运算符</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre><span class=\"token comment\">// num += 1</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre>num <span class=\"token operator\">+=</span> <span class=\"token number\">3</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre>console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>num<span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre><span class=\"token operator\"><</span><span class=\"token operator\">/</span>script<span class=\"token operator\">></span></pre></td></tr></table></figure><h3 id=\"自增自减运算符\"><a class=\"anchor\" href=\"#自增自减运算符\">#</a> 自增 / 自减运算符</h3>\n<table>\n<thead>\n<tr>\n<th>符号</th>\n<th>作用</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>++</td>\n<td>自增</td>\n<td>变量自身的值加 1，例如: x++</td>\n</tr>\n<tr>\n<td>--</td>\n<td>自减</td>\n<td>变量自身的值减 1，例如: x--</td>\n</tr>\n</tbody>\n</table>\n<ol>\n<li><ins>在前和</ins>在后在单独使用时二者并没有差别，而且一般开发中我们都是独立使用</li>\n<li>++ 在后（后缀式）我们会使用更多</li>\n</ol>\n<blockquote>\n<p>注意：</p>\n<ol>\n<li>只有变量能够使用自增和自减运算符</li>\n<li><ins>、-- 可以在变量前面也可以在变量后面，比如: x</ins> 或者 ++x</li>\n</ol>\n</blockquote>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token operator\"><</span>script<span class=\"token operator\">></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token comment\">// let num = 10</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> <span class=\"token comment\">// num = num + 1</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token comment\">// num += 1</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token comment\">//// 1. 前置自增</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> <span class=\"token comment\">// let i = 1</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre> <span class=\"token comment\">// ++i</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> <span class=\"token comment\">// console.log(i)</span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// let i = 1</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token comment\">// console.log(++i + 1)</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token comment\">// 2. 后置自增</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token comment\">// let i = 1</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token comment\">// i++</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> <span class=\"token comment\">// console.log(i)</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> <span class=\"token comment\">// let i = 1</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> <span class=\"token comment\">// console.log(i++ + 1)</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre></pre></td></tr><tr><td data-num=\"19\"></td><td><pre> <span class=\"token comment\">// 了解 </span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre> <span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> <span class=\"token number\">1</span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>i<span class=\"token operator\">++</span> <span class=\"token operator\">+</span> <span class=\"token operator\">++</span>i <span class=\"token operator\">+</span> i<span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"22\"></td><td><pre> <span class=\"token operator\"><</span><span class=\"token operator\">/</span>script<span class=\"token operator\">></span></pre></td></tr></table></figure><h3 id=\"比较运算符\"><a class=\"anchor\" href=\"#比较运算符\">#</a> 比较运算符</h3>\n<p>使用场景：比较两个数据大小、是否相等，根据比较结果返回一个布尔值（true /false）</p>\n<table>\n<thead>\n<tr>\n<th>运算符</th>\n<th>作用</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>></td>\n<td>左边是否大于右边</td>\n</tr>\n<tr>\n<td><</td>\n<td>左边是否小于右边</td>\n</tr>\n<tr>\n<td>>=</td>\n<td>左边是否大于或等于右边</td>\n</tr>\n<tr>\n<td><=</td>\n<td>左边是否小于或等于右边</td>\n</tr>\n<tr>\n<td>===</td>\n<td>左右两边是否 <code>类型</code> 和 <code>值</code> 都相等（重点）</td>\n</tr>\n<tr>\n<td>==</td>\n<td>左右两边 <code>值</code> 是否相等</td>\n</tr>\n<tr>\n<td>!=</td>\n<td>左右值不相等</td>\n</tr>\n<tr>\n<td>!==</td>\n<td>左右两边是否不全等</td>\n</tr>\n</tbody>\n</table>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token operator\"><</span>script<span class=\"token operator\">></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token number\">3</span> <span class=\"token operator\">></span> <span class=\"token number\">5</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token number\">3</span> <span class=\"token operator\">>=</span> <span class=\"token number\">3</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token number\">2</span> <span class=\"token operator\">==</span> <span class=\"token number\">2</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token comment\">// 比较运算符有隐式转换 把 '2' 转换为 2 双等号 只判断值</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token number\">2</span> <span class=\"token operator\">==</span> <span class=\"token string\">'2'</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// true</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre> <span class=\"token comment\">// console.log(undefined === null)</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> <span class=\"token comment\">// === 全等 判断 值 和 数据类型都一样才行</span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token comment\">// 以后判断是否相等 请用 === </span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token number\">2</span> <span class=\"token operator\">===</span> <span class=\"token string\">'2'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token number\">NaN</span> <span class=\"token operator\">===</span> <span class=\"token number\">NaN</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// NaN 不等于任何人，包括他自己</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token number\">2</span> <span class=\"token operator\">!==</span> <span class=\"token string\">'2'</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// true </span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token number\">2</span> <span class=\"token operator\">!=</span> <span class=\"token string\">'2'</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// false </span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'-------------------------'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'a'</span> <span class=\"token operator\"><</span> <span class=\"token string\">'b'</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// true</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'aa'</span> <span class=\"token operator\"><</span> <span class=\"token string\">'ab'</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// true</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'aa'</span> <span class=\"token operator\"><</span> <span class=\"token string\">'aac'</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// true</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'-------------------------'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre><span class=\"token operator\"><</span><span class=\"token operator\">/</span>script<span class=\"token operator\">></span></pre></td></tr></table></figure><h3 id=\"逻辑运算符\"><a class=\"anchor\" href=\"#逻辑运算符\">#</a> 逻辑运算符</h3>\n<p>使用场景：可以把多个布尔值放到一起运算，最终返回一个布尔值</p>\n<table>\n<thead>\n<tr>\n<th>符号</th>\n<th>名称</th>\n<th>日常读法</th>\n<th>特点</th>\n<th>口诀</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>&&</td>\n<td>逻辑与</td>\n<td>并且</td>\n<td>符号两边有一个假的结果为假</td>\n<td>一假则假</td>\n</tr>\n<tr>\n<td>||</td>\n<td>逻辑或</td>\n<td>或者</td>\n<td>符号两边有一个真的结果为真</td>\n<td>一真则真</td>\n</tr>\n<tr>\n<td>!</td>\n<td>逻辑非</td>\n<td>取反</td>\n<td>true 变 false false 变 true</td>\n<td>真变假，假变真</td>\n</tr>\n</tbody>\n<tbody>\n<tr>\n<td>A</td>\n<td>B</td>\n<td>A && B</td>\n<td>A || B</td>\n<td>!A</td>\n</tr>\n<tr>\n<td>-----</td>\n<td>-----</td>\n<td>------</td>\n<td>--------</td>\n<td>-----</td>\n</tr>\n<tr>\n<td>false</td>\n<td>false</td>\n<td>false</td>\n<td>false</td>\n<td>true</td>\n</tr>\n<tr>\n<td>false</td>\n<td>true</td>\n<td>false</td>\n<td>true</td>\n<td>true</td>\n</tr>\n<tr>\n<td>true</td>\n<td>false</td>\n<td>false</td>\n<td>true</td>\n<td>false</td>\n</tr>\n<tr>\n<td>true</td>\n<td>true</td>\n<td>true</td>\n<td>true</td>\n<td>false</td>\n</tr>\n</tbody>\n</table>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token operator\"><</span>script<span class=\"token operator\">></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token comment\">// 逻辑与 一假则假</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token boolean\">true</span> <span class=\"token operator\">&&</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token boolean\">false</span> <span class=\"token operator\">&&</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token number\">3</span> <span class=\"token operator\"><</span> <span class=\"token number\">5</span> <span class=\"token operator\">&&</span> <span class=\"token number\">3</span> <span class=\"token operator\">></span> <span class=\"token number\">2</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token number\">3</span> <span class=\"token operator\"><</span> <span class=\"token number\">5</span> <span class=\"token operator\">&&</span> <span class=\"token number\">3</span> <span class=\"token operator\"><</span> <span class=\"token number\">2</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'-----------------'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> <span class=\"token comment\">// 逻辑或 一真则真</span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token boolean\">true</span> <span class=\"token operator\">||</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token boolean\">false</span> <span class=\"token operator\">||</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token boolean\">false</span> <span class=\"token operator\">||</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'-----------------'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token comment\">// 逻辑非 取反</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token operator\">!</span><span class=\"token boolean\">true</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token operator\">!</span><span class=\"token boolean\">false</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'-----------------'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre></pre></td></tr><tr><td data-num=\"19\"></td><td><pre> <span class=\"token keyword\">let</span> num <span class=\"token operator\">=</span> <span class=\"token number\">6</span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>num <span class=\"token operator\">></span> <span class=\"token number\">5</span> <span class=\"token operator\">&&</span> num <span class=\"token operator\"><</span> <span class=\"token number\">10</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'-----------------'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"22\"></td><td><pre> <span class=\"token operator\"><</span><span class=\"token operator\">/</span>script<span class=\"token operator\">></span></pre></td></tr></table></figure><h3 id=\"运算符优先级\"><a class=\"anchor\" href=\"#运算符优先级\">#</a> 运算符优先级</h3>\n<p><img loading=\"lazy\" data-src=\"D:/2023%E8%A7%86%E9%A2%91/javascript%E5%9F%BA%E7%A1%80/JavaScript%E5%9F%BA%E7%A1%80%E7%AC%AC%E4%B8%80%E5%A4%A9/02-%E7%AC%94%E8%AE%B0/assets/1671016521031.png\" alt=\"67101652103\" /></p>\n<blockquote>\n<p>逻辑运算符优先级： ！> && > ||</p>\n</blockquote>\n<h2 id=\"语句\"><a class=\"anchor\" href=\"#语句\">#</a> 语句</h2>\n<h3 id=\"表达式和语句\"><a class=\"anchor\" href=\"#表达式和语句\">#</a> 表达式和语句</h3>\n<p><img loading=\"lazy\" data-src=\"assets/1671017924981.png\" alt=\"67101792498\" /></p>\n<h3 id=\"分支语句\"><a class=\"anchor\" href=\"#分支语句\">#</a> 分支语句</h3>\n<p>分支语句可以根据条件判定真假，来选择性的执行想要的代码</p>\n<p>分支语句包含：</p>\n<ol>\n<li>if 分支语句（重点）</li>\n<li>三元运算符</li>\n<li>switch 语句</li>\n</ol>\n<h4 id=\"if-分支语句\"><a class=\"anchor\" href=\"#if-分支语句\">#</a> if 分支语句</h4>\n<p>语法：</p>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token keyword\">if</span><span class=\"token punctuation\">(</span>条件表达式<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token comment\">// 满足条件要执行的语句</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token punctuation\">}</span></pre></td></tr></table></figure><p>小括号内的条件结果是布尔值，为 true 时，进入大括号里执行代码；为 false，则不执行大括号里面代码</p>\n<p>小括号内的结果若不是布尔类型时，会发生类型转换为布尔值，类似 Boolean ()</p>\n<p>如果大括号只有一个语句，大括号可以省略，但是，俺们不提倡这么做～</p>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token operator\"><</span>script<span class=\"token operator\">></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token comment\">// 单分支语句</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> <span class=\"token comment\">// if (false) {</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token comment\">// console.log (' 执行语句 ')</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token comment\">// }</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> <span class=\"token comment\">// if (3 > 5) {</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre> <span class=\"token comment\">// console.log (' 执行语句 ')</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> <span class=\"token comment\">// }</span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token comment\">// if (2 === '2') {</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// console.log (' 执行语句 ')</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token comment\">// }</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token comment\">// 1. 除了 0 所有的数字都为真</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token comment\">// if (0) {</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token comment\">// console.log (' 执行语句 ')</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> <span class=\"token comment\">// }</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> <span class=\"token comment\">// 2. 除了 '' 所有的字符串都为真 true</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> <span class=\"token comment\">//if ('pink 老师 ') {</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> <span class=\"token comment\">// console.log (' 执行语句 ')</span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre> <span class=\"token comment\">// }</span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre> <span class=\"token comment\">// if ('') {</span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre> <span class=\"token comment\">// console.log (' 执行语句 ')</span></pre></td></tr><tr><td data-num=\"22\"></td><td><pre> <span class=\"token comment\">// }</span></pre></td></tr><tr><td data-num=\"23\"></td><td><pre> <span class=\"token comment\">////if ('') console.log (' 执行语句 ')</span></pre></td></tr><tr><td data-num=\"24\"></td><td><pre></pre></td></tr><tr><td data-num=\"25\"></td><td><pre> <span class=\"token comment\">// 1. 用户输入</span></pre></td></tr><tr><td data-num=\"26\"></td><td><pre> <span class=\"token keyword\">let</span> score <span class=\"token operator\">=</span> <span class=\"token operator\">+</span><span class=\"token function\">prompt</span><span class=\"token punctuation\">(</span><span class=\"token string\">'请输入成绩'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"27\"></td><td><pre> <span class=\"token comment\">// 2. 进行判断输出</span></pre></td></tr><tr><td data-num=\"28\"></td><td><pre> <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>score <span class=\"token operator\">>=</span> <span class=\"token number\">700</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"29\"></td><td><pre> <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span><span class=\"token string\">'恭喜考入黑马程序员'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"30\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"31\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'-----------------'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"32\"></td><td><pre></pre></td></tr><tr><td data-num=\"33\"></td><td><pre> <span class=\"token operator\"><</span><span class=\"token operator\">/</span>script<span class=\"token operator\">></span></pre></td></tr></table></figure><h4 id=\"if双分支语句\"><a class=\"anchor\" href=\"#if双分支语句\">#</a> if 双分支语句</h4>\n<p>如果有两个条件的时候，可以使用 if else 双分支语句</p>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>条件表达式<span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token comment\">// 满足条件要执行的语句</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token comment\">// 不满足条件要执行的语句</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre><span class=\"token punctuation\">}</span></pre></td></tr></table></figure><p>例如：</p>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token operator\"><</span>script<span class=\"token operator\">></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token comment\">// 1. 用户输入</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> <span class=\"token keyword\">let</span> uname <span class=\"token operator\">=</span> <span class=\"token function\">prompt</span><span class=\"token punctuation\">(</span><span class=\"token string\">'请输入用户名:'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token keyword\">let</span> pwd <span class=\"token operator\">=</span> <span class=\"token function\">prompt</span><span class=\"token punctuation\">(</span><span class=\"token string\">'请输入密码:'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token comment\">// 2. 判断输出</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>uname <span class=\"token operator\">===</span> <span class=\"token string\">'pink'</span> <span class=\"token operator\">&&</span> pwd <span class=\"token operator\">===</span> <span class=\"token string\">'123456'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre> <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span><span class=\"token string\">'恭喜登录成功'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span><span class=\"token string\">'用户名或者密码错误'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token operator\"><</span><span class=\"token operator\">/</span>script<span class=\"token operator\">></span></pre></td></tr></table></figure><h4 id=\"if-多分支语句\"><a class=\"anchor\" href=\"#if-多分支语句\">#</a> if 多分支语句</h4>\n<p>使用场景： 适合于有多个条件的时候</p>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token operator\"><</span>script<span class=\"token operator\">></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token comment\">// 1. 用户输入</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> <span class=\"token keyword\">let</span> score <span class=\"token operator\">=</span> <span class=\"token operator\">+</span><span class=\"token function\">prompt</span><span class=\"token punctuation\">(</span><span class=\"token string\">'请输入成绩：'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token comment\">// 2. 判断输出</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>score <span class=\"token operator\">>=</span> <span class=\"token number\">90</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span><span class=\"token string\">'成绩优秀，宝贝，你是我的骄傲'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre> <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>score <span class=\"token operator\">>=</span> <span class=\"token number\">70</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span><span class=\"token string\">'成绩良好，宝贝，你要加油哦~~'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>score <span class=\"token operator\">>=</span> <span class=\"token number\">60</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span><span class=\"token string\">'成绩及格，宝贝，你很危险~'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span><span class=\"token string\">'成绩不及格，宝贝，我不想和你说话，我只想用鞭子和你说话~'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token operator\"><</span><span class=\"token operator\">/</span>script<span class=\"token operator\">></span></pre></td></tr></table></figure><h4 id=\"三元运算符三元表达式\"><a class=\"anchor\" href=\"#三元运算符三元表达式\">#</a> 三元运算符（三元表达式）</h4>\n<p><strong>使用场景</strong>： 一些简单的双分支，可以使用 三元运算符（三元表达式），写起来比 if else 双分支 更简单</p>\n<p><strong>符号</strong>：? 与：配合使用</p>\n<p>语法：</p>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre>条件 <span class=\"token operator\">?</span> 表达式<span class=\"token number\">1</span> ： 表达式<span class=\"token number\">2</span></pre></td></tr></table></figure><p>例如：</p>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\">// 三元运算符（三元表达式）</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token comment\">// 1. 语法格式</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token comment\">// 条件？表达式 1 : 表达式 2 </span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre></pre></td></tr><tr><td data-num=\"5\"></td><td><pre><span class=\"token comment\">// 2. 执行过程 </span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token comment\">// 2.1 如果条件为真，则执行表达式 1</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token comment\">// 2.2 如果条件为假，则执行表达式 2</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre></pre></td></tr><tr><td data-num=\"9\"></td><td><pre><span class=\"token comment\">// 3. 验证</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre><span class=\"token comment\">// 5 > 3 ? ' 真的 ' : ' 假的'</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre>console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token number\">5</span> <span class=\"token operator\"><</span> <span class=\"token number\">3</span> <span class=\"token operator\">?</span> <span class=\"token string\">'真的'</span> <span class=\"token operator\">:</span> <span class=\"token string\">'假的'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre></pre></td></tr><tr><td data-num=\"13\"></td><td><pre><span class=\"token comment\">// let age = 18 </span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre><span class=\"token comment\">// age = age + 1</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre><span class=\"token comment\">// age++</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre></pre></td></tr><tr><td data-num=\"17\"></td><td><pre><span class=\"token comment\">// 1. 用户输入 </span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre><span class=\"token keyword\">let</span> num <span class=\"token operator\">=</span> <span class=\"token function\">prompt</span><span class=\"token punctuation\">(</span><span class=\"token string\">'请您输入一个数字:'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre><span class=\"token comment\">// 2. 判断输出 - 小于 10 才补 0</span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre><span class=\"token comment\">// num = num < 10 ? 0 + num : num</span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre>num <span class=\"token operator\">=</span> num <span class=\"token operator\">>=</span> <span class=\"token number\">10</span> <span class=\"token operator\">?</span> num <span class=\"token operator\">:</span> <span class=\"token number\">0</span> <span class=\"token operator\">+</span> num</pre></td></tr><tr><td data-num=\"22\"></td><td><pre><span class=\"token function\">alert</span><span class=\"token punctuation\">(</span>num<span class=\"token punctuation\">)</span></pre></td></tr></table></figure><h4 id=\"switch语句了解\"><a class=\"anchor\" href=\"#switch语句了解\">#</a> switch 语句（了解）</h4>\n<p>使用场景： 适合于有多个条件的时候，也属于分支语句，大部分情况下和 if 多分支语句 功能相同</p>\n<p>注意：</p>\n<ol>\n<li>switch case 语句一般用于等值判断，if 适合于区间判断</li>\n<li>switchcase 一般需要配合 break 关键字使用 没有 break 会造成 case 穿透</li>\n<li>if 多分支语句开发要比 switch 更重要，使用也更多</li>\n</ol>\n<p>例如：</p>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\">//switch 分支语句</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token comment\">// 1. 语法</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token comment\">//switch (表达式) {</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre><span class=\"token comment\">// case 值 1:</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre><span class=\"token comment\">// 代码 1</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token comment\">// break</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre></pre></td></tr><tr><td data-num=\"8\"></td><td><pre><span class=\"token comment\">// case 值 2:</span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre><span class=\"token comment\">// 代码 2</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre><span class=\"token comment\">// break</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre><span class=\"token comment\">// ...</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre><span class=\"token comment\">// default:</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre><span class=\"token comment\">// 代码 n</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre><span class=\"token comment\">// }</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre></pre></td></tr><tr><td data-num=\"16\"></td><td><pre><span class=\"token operator\"><</span>script<span class=\"token operator\">></span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> <span class=\"token keyword\">switch</span> <span class=\"token punctuation\">(</span><span class=\"token number\">2</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> <span class=\"token keyword\">case</span> <span class=\"token number\">1</span><span class=\"token operator\">:</span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'您选择的是1'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre> <span class=\"token keyword\">break</span> <span class=\"token comment\">// 退出 switch</span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre> <span class=\"token keyword\">case</span> <span class=\"token number\">2</span><span class=\"token operator\">:</span></pre></td></tr><tr><td data-num=\"22\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'您选择的是2'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"23\"></td><td><pre> <span class=\"token keyword\">break</span> <span class=\"token comment\">// 退出 switch</span></pre></td></tr><tr><td data-num=\"24\"></td><td><pre> <span class=\"token keyword\">case</span> <span class=\"token number\">3</span><span class=\"token operator\">:</span></pre></td></tr><tr><td data-num=\"25\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'您选择的是3'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"26\"></td><td><pre> <span class=\"token keyword\">break</span> <span class=\"token comment\">// 退出 switch</span></pre></td></tr><tr><td data-num=\"27\"></td><td><pre> <span class=\"token keyword\">default</span><span class=\"token operator\">:</span></pre></td></tr><tr><td data-num=\"28\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'没有符合条件的'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"29\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"30\"></td><td><pre><span class=\"token operator\"><</span><span class=\"token operator\">/</span>script<span class=\"token operator\">></span></pre></td></tr></table></figure><h4 id=\"断点调试\"><a class=\"anchor\" href=\"#断点调试\">#</a> 断点调试</h4>\n<p>** 作用：** 学习时可以帮助更好的理解代码运行，工作时可以更快找到 bug</p>\n<p>浏览器打开调试界面</p>\n<ol>\n<li>按 F12 打开开发者工具</li>\n<li>点到源代码一栏 （ sources ）</li>\n<li>选择代码文件</li>\n</ol>\n<p>** 断点：** 在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来</p>\n<h3 id=\"循环语句\"><a class=\"anchor\" href=\"#循环语句\">#</a> 循环语句</h3>\n<p>使用场景：重复执行 指定的一段代码，比如我们想要输出 10 次 ' 我学的很棒'</p>\n<p>学习路径：</p>\n<p>1.while 循环</p>\n<p>2.for 循环（重点）</p>\n<h4 id=\"while循环\"><a class=\"anchor\" href=\"#while循环\">#</a> while 循环</h4>\n<p>while : 在…. 期间， 所以 while 循环 就是在满足条件期间，重复执行某些代码。</p>\n<p><strong>语法：</strong></p>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token keyword\">while</span> <span class=\"token punctuation\">(</span>条件表达式<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token comment\">// 循环体 </span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token punctuation\">}</span></pre></td></tr></table></figure><p>例如：</p>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\">//while 循环：重复执行代码</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token comment\">// 1. 需求：利用循环重复打印 3 次 ' 月薪过万不是梦，毕业时候见英雄'</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre><span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> <span class=\"token number\">1</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre><span class=\"token keyword\">while</span> <span class=\"token punctuation\">(</span>i <span class=\"token operator\"><=</span> <span class=\"token number\">3</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token string\">'月薪过万不是梦，毕业时候见英雄~<br>'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre> i<span class=\"token operator\">++</span> <span class=\"token comment\">// 这里千万不要忘了变量自增否则造成死循环</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre><span class=\"token punctuation\">}</span></pre></td></tr></table></figure><p>循环三要素：</p>\n<p>1. 初始值 （经常用变量）</p>\n<p>2. 终止条件</p>\n<p>3. 变量的变化量</p>\n<p>例如：</p>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token operator\"><</span>script<span class=\"token operator\">></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token comment\">//// 1. 变量的起始值</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> <span class=\"token comment\">// let i = 1</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token comment\">//// 2. 终止条件</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token comment\">// while (i <= 3) {</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> <span class=\"token comment\">// document.write (' 我要循环三次 <br>')</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre> <span class=\"token comment\">// // 3. 变量的变化量</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> <span class=\"token comment\">// i++</span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token comment\">// }</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// 1. 变量的起始值</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token keyword\">let</span> end <span class=\"token operator\">=</span> <span class=\"token operator\">+</span><span class=\"token function\">prompt</span><span class=\"token punctuation\">(</span><span class=\"token string\">'请输入次数:'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre><span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> <span class=\"token number\">1</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre><span class=\"token comment\">// 2. 终止条件</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre><span class=\"token keyword\">while</span> <span class=\"token punctuation\">(</span>i <span class=\"token operator\"><=</span> end<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token string\">'我要循环三次 <br>'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> <span class=\"token comment\">// 3. 变量的变化量</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> i<span class=\"token operator\">++</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre><span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre></pre></td></tr><tr><td data-num=\"20\"></td><td><pre><span class=\"token operator\"><</span><span class=\"token operator\">/</span>script<span class=\"token operator\">></span></pre></td></tr></table></figure><h4 id=\"中止循环\"><a class=\"anchor\" href=\"#中止循环\">#</a> 中止循环</h4>\n<p><code>break</code> 中止整个循环，一般用于结果已经得到，后续的循环不需要的时候可以使用（提高效率）</p>\n<p><code>continue</code> 中止本次循环，一般用于排除或者跳过某一个选项的时候</p>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token operator\"><</span>script<span class=\"token operator\">></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token comment\">// let i = 1</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> <span class=\"token comment\">// while (i <= 5) {</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token comment\">// console.log(i)</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token comment\">// if (i === 3) {</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> <span class=\"token comment\">// break // 退出循环</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre> <span class=\"token comment\">// }</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> <span class=\"token comment\">// i++</span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// }</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre></pre></td></tr><tr><td data-num=\"12\"></td><td><pre></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> <span class=\"token number\">1</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token keyword\">while</span> <span class=\"token punctuation\">(</span>i <span class=\"token operator\"><=</span> <span class=\"token number\">5</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>i <span class=\"token operator\">===</span> <span class=\"token number\">3</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> i<span class=\"token operator\">++</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> <span class=\"token keyword\">continue</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>i<span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre> i<span class=\"token operator\">++</span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre></pre></td></tr><tr><td data-num=\"22\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"23\"></td><td><pre> <span class=\"token operator\"><</span><span class=\"token operator\">/</span>script<span class=\"token operator\">></span></pre></td></tr></table></figure><h4 id=\"无限循环\"><a class=\"anchor\" href=\"#无限循环\">#</a> 无限循环</h4>\n<p>1.while (true) 来构造 “无限” 循环，需要使用 break 退出循环。（常用）</p>\n<p>2.for(;😉 也可以来构造 “无限” 循环，同样需要使用 break 退出循环。</p>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\">// 无限循环 </span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token comment\">// 需求： 页面会一直弹窗询问你爱我吗？</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token comment\">// (1). 如果用户输入的是 ' 爱 '，则退出弹窗</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre><span class=\"token comment\">// (2). 否则一直弹窗询问</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token comment\">// 1. while (true) 无限循环</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token comment\">// while (true) {</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre><span class=\"token comment\">// let love = prompt (' 你爱我吗？')</span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre><span class=\"token comment\">// if (love === ' 爱 ') {</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre><span class=\"token comment\">// break</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre><span class=\"token comment\">// }</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre><span class=\"token comment\">// }</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre></pre></td></tr><tr><td data-num=\"14\"></td><td><pre><span class=\"token comment\">// 2. for (;;) 无限循环</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre><span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">;</span> <span class=\"token punctuation\">;</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> <span class=\"token keyword\">let</span> love <span class=\"token operator\">=</span> <span class=\"token function\">prompt</span><span class=\"token punctuation\">(</span><span class=\"token string\">'你爱我吗?'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>love <span class=\"token operator\">===</span> <span class=\"token string\">'爱'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> <span class=\"token keyword\">break</span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre><span class=\"token punctuation\">}</span></pre></td></tr></table></figure><h2 id=\"综合案例-atm存取款机\"><a class=\"anchor\" href=\"#综合案例-atm存取款机\">#</a> 综合案例 - ATM 存取款机</h2>\n<p><img loading=\"lazy\" data-src=\"assets/1671018781557.png\" alt=\"67101878155\" /></p>\n<p>分析：</p>\n<p>①：提示输入框写到循环里面（无限循环）</p>\n<p>②：用户输入 4 则退出循环 break</p>\n<p>③：提前准备一个金额预先存储一个数额 money</p>\n<p>④：根据输入不同的值，做不同的操作</p>\n<p> (1) 取钱则是减法操作， 存钱则是加法操作，查看余额则是直接显示金额</p>\n<p> (2) 可以使用 if else if 多分支 来执行不同的操作</p>\n<p>完整代码：</p>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token operator\"><</span>script<span class=\"token operator\">></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token comment\">// 1. 开始循环 输入框写到 循环里面</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> <span class=\"token comment\">// 3. 准备一个总的金额</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token keyword\">let</span> money <span class=\"token operator\">=</span> <span class=\"token number\">100</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre><span class=\"token keyword\">while</span> <span class=\"token punctuation\">(</span><span class=\"token boolean\">true</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> <span class=\"token keyword\">let</span> re <span class=\"token operator\">=</span> <span class=\"token operator\">+</span><span class=\"token function\">prompt</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\"></pre></td></tr><tr><td data-num=\"7\"></td><td><pre>请您选择操作：</pre></td></tr><tr><td data-num=\"8\"></td><td><pre>1.存钱</pre></td></tr><tr><td data-num=\"9\"></td><td><pre>2.取钱</pre></td></tr><tr><td data-num=\"10\"></td><td><pre>3.查看余额</pre></td></tr><tr><td data-num=\"11\"></td><td><pre>4.退出</pre></td></tr><tr><td data-num=\"12\"></td><td><pre></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token comment\">// 2. 如果用户输入的 4 则退出循环， break 写到 if 里面，没有写到 switch 里面， 因为 4 需要 break 退出循环</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>re <span class=\"token operator\">===</span> <span class=\"token number\">4</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> <span class=\"token keyword\">break</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> <span class=\"token comment\">// 4. 根据输入做操作</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> <span class=\"token keyword\">switch</span> <span class=\"token punctuation\">(</span>re<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre> <span class=\"token keyword\">case</span> <span class=\"token number\">1</span><span class=\"token operator\">:</span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre> <span class=\"token comment\">// 存钱</span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre> <span class=\"token keyword\">let</span> cun <span class=\"token operator\">=</span> <span class=\"token operator\">+</span><span class=\"token function\">prompt</span><span class=\"token punctuation\">(</span><span class=\"token string\">'请输入存款金额'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"22\"></td><td><pre> money <span class=\"token operator\">=</span> money <span class=\"token operator\">+</span> cun</pre></td></tr><tr><td data-num=\"23\"></td><td><pre> <span class=\"token keyword\">break</span></pre></td></tr><tr><td data-num=\"24\"></td><td><pre> <span class=\"token keyword\">case</span> <span class=\"token number\">2</span><span class=\"token operator\">:</span></pre></td></tr><tr><td data-num=\"25\"></td><td><pre> <span class=\"token comment\">// 存钱</span></pre></td></tr><tr><td data-num=\"26\"></td><td><pre> <span class=\"token keyword\">let</span> qu <span class=\"token operator\">=</span> <span class=\"token operator\">+</span><span class=\"token function\">prompt</span><span class=\"token punctuation\">(</span><span class=\"token string\">'请输入取款金额'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"27\"></td><td><pre> money <span class=\"token operator\">=</span> money <span class=\"token operator\">-</span> qu</pre></td></tr><tr><td data-num=\"28\"></td><td><pre> <span class=\"token keyword\">break</span></pre></td></tr><tr><td data-num=\"29\"></td><td><pre> <span class=\"token keyword\">case</span> <span class=\"token number\">3</span><span class=\"token operator\">:</span></pre></td></tr><tr><td data-num=\"30\"></td><td><pre> <span class=\"token comment\">// 存钱</span></pre></td></tr><tr><td data-num=\"31\"></td><td><pre> <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">您的银行卡余额是</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>money<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"32\"></td><td><pre> <span class=\"token keyword\">break</span></pre></td></tr><tr><td data-num=\"33\"></td><td><pre> <span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"34\"></td><td><pre><span class=\"token punctuation\">}</span></pre></td></tr><tr><td data-num=\"35\"></td><td><pre><span class=\"token operator\"><</span><span class=\"token operator\">/</span>script<span class=\"token operator\">></span></pre></td></tr></table></figure>",
"tags": []
},
{
"id": "https://joyllll.github.io/2024/04/21/js/javascript%E5%9F%BA%E7%A1%80%E7%AC%AC%E4%B8%80%E5%A4%A9/",
"url": "https://joyllll.github.io/2024/04/21/js/javascript%E5%9F%BA%E7%A1%80%E7%AC%AC%E4%B8%80%E5%A4%A9/",
"title": "JavaScript 基础 - 第1天",
"date_published": "2024-04-20T16:38:11.672Z",
"content_html": "<blockquote>\n<p>了解变量、数据类型、运算符等基础概念，能够实现数据类型的转换，结合四则运算体会如何编程。</p>\n</blockquote>\n<ul>\n<li>体会现实世界中的事物与计算机的关系</li>\n<li>理解什么是数据并知道数据的分类</li>\n<li>理解变量存储数据的 “容器”</li>\n<li>掌握常见运算符的使用，了解优先级关系</li>\n<li>知道 JavaScript 数据类型隐式转换的特征</li>\n</ul>\n<h2 id=\"介绍\"><a class=\"anchor\" href=\"#介绍\">#</a> 介绍</h2>\n<blockquote>\n<p>掌握 JavaScript 的引入方式，初步认识 JavaScript 的作用</p>\n</blockquote>\n<h3 id=\"引入方式\"><a class=\"anchor\" href=\"#引入方式\">#</a> 引入方式</h3>\n<p>JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 <code>script</code> 标签将 JavaScript 代码引入到 HTML 中，有两种方式：</p>\n<h4 id=\"内部方式\"><a class=\"anchor\" href=\"#内部方式\">#</a> 内部方式</h4>\n<p>通过 <code>script</code> 标签包裹 JavaScript 代码</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 引入方式<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> <span class=\"token comment\"><!-- 内联形式：通过 script 标签包裹 JavaScript 代码 --></span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span><span class=\"token string\">'嗨，欢迎来传智播学习前端技术！'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><h4 id=\"外部形式\"><a class=\"anchor\" href=\"#外部形式\">#</a> 外部形式</h4>\n<p>一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 <code>script</code> 标签的 <code>src</code> 属性引入</p>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\">// demo.js</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre>document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token string\">'嗨，欢迎来传智播学习前端技术！'</span><span class=\"token punctuation\">)</span></pre></td></tr></table></figure><figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 引入方式<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> <span class=\"token comment\"><!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 --></span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>demo.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><p>如果 script 标签使用 src 属性引入了某 .js 文件，那么 标签的代码会被忽略！！！如下代码所示：</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 引入方式<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> <span class=\"token comment\"><!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 --></span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>demo.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// 此处的代码会被忽略掉！！！！</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> \t<span class=\"token function\">alert</span><span class=\"token punctuation\">(</span><span class=\"token number\">666</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> </pre></td></tr><tr><td data-num=\"12\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><h3 id=\"注释和结束符\"><a class=\"anchor\" href=\"#注释和结束符\">#</a> 注释和结束符</h3>\n<p>通过注释可以屏蔽代码被执行或者添加备注信息，JavaScript 支持两种形式注释语法：</p>\n<h4 id=\"单行注释\"><a class=\"anchor\" href=\"#单行注释\">#</a> 单行注释</h4>\n<p>使用 <code>// </code> 注释单行代码</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 注释<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> </pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// 这种是单行注释的语法</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token comment\">// 一次只能注释一行</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token comment\">// 可以重复注释</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token string\">'嗨，欢迎来传智播学习前端技术！'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><h4 id=\"多行注释\"><a class=\"anchor\" href=\"#多行注释\">#</a> 多行注释</h4>\n<p>使用 <code>/* */</code> 注释多行代码</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 注释<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> </pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">/* 这种的是多行注释的语法 */</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token comment\">/*</pre></td></tr><tr><td data-num=\"12\"></td><td><pre> \t更常见的多行注释是这种写法</pre></td></tr><tr><td data-num=\"13\"></td><td><pre> \t在些可以任意换行</pre></td></tr><tr><td data-num=\"14\"></td><td><pre> \t多少行都可以</pre></td></tr><tr><td data-num=\"15\"></td><td><pre> */</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token string\">'嗨，欢迎来传智播学习前端技术！'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><p><strong>注：编辑器中单行注释的快捷键为 <code>ctrl + /</code> </strong></p>\n<h3 id=\"结束符\"><a class=\"anchor\" href=\"#结束符\">#</a> 结束符</h3>\n<p>在 JavaScript 中 <code>;</code> 代表一段代码的结束，多数情况下可以省略 <code>;</code> 使用回车（enter）替代。</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 结束符<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> </pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"> </pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span><span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span><span class=\"token number\">2</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span><span class=\"token number\">1</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span><span class=\"token number\">2</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><p>实际开发中有许多人主张书写 JavaScript 代码时省略结束符 <code>;</code></p>\n<h3 id=\"输入和输出\"><a class=\"anchor\" href=\"#输入和输出\">#</a> 输入和输出</h3>\n<p>输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。</p>\n<p>举例说明：如按键盘上的方向键，向上 / 下键可以滚动页面，按向上 / 下键这个动作叫作输入，页面发生了滚动了这便叫输出。</p>\n<h4 id=\"输出\"><a class=\"anchor\" href=\"#输出\">#</a> 输出</h4>\n<p>JavaScript 可以接收用户的输入，然后再将输入的结果输出：</p>\n<p><code>alert()</code> 、 <code>document.wirte()</code></p>\n<p>以数字为例，向 <code>alert()</code> 或 <code>document.write()</code> 输入任意数字，他都会以弹窗形式展示（输出）给用户。</p>\n<h4 id=\"输入\"><a class=\"anchor\" href=\"#输入\">#</a> 输入</h4>\n<p>向 <code>prompt()</code> 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 输入输出<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> </pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"> </pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// 1. 输入的任意数字，都会以弹窗形式展示</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token string\">'要输出的内容'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span><span class=\"token string\">'要输出的内容'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token comment\">// 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> <span class=\"token function\">prompt</span><span class=\"token punctuation\">(</span><span class=\"token string\">'请输入您的姓名:'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><h2 id=\"变量\"><a class=\"anchor\" href=\"#变量\">#</a> 变量</h2>\n<blockquote>\n<p>理解变量是计算机存储数据的 “容器”，掌握变量的声明方式</p>\n</blockquote>\n<p>变量是计算机中用来存储数据的 “容器”，它可以让计算机变得有记忆，通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】（数据）</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token comment\">//x 符号代表了 5 这个数值</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre> x <span class=\"token operator\">=</span> <span class=\"token number\">5</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token comment\">//y 符号代表了 6 这个数值</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> y <span class=\"token operator\">=</span> <span class=\"token number\">6</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> </pre></td></tr><tr><td data-num=\"7\"></td><td><pre> <span class=\"token comment\">// 举例： 在 JavaScript 中使用变量可以将某个数据（数值）记录下来！</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token comment\">// 将用户输入的内容保存在 num 这个变量（容器）中</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> num <span class=\"token operator\">=</span> <span class=\"token function\">prompt</span><span class=\"token punctuation\">(</span><span class=\"token string\">'请输入一数字!'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token comment\">// 通过 num 变量（容器）将用户输入的内容输出出来</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span>num<span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span>num<span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><h3 id=\"声明\"><a class=\"anchor\" href=\"#声明\">#</a> 声明</h3>\n<p>声明 (定义) 变量有两部分构成：声明关键字、变量名（标识）</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 声明和赋值<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> </pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"> </pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">//let 变量名</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token comment\">// 声明 (定义) 变量有两部分构成：声明关键字、变量名（标识）</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token comment\">//let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token comment\">//age 即变量的名称，也叫标识符</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token keyword\">let</span> age</pre></td></tr><tr><td data-num=\"15\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><p>关键字是 JavaScript 中内置的一些英文词汇（单词或缩写），它们代表某些特定的含义，如 <code>let</code> 的含义是声明变量的，看到 <code>let</code> 后就可想到这行代码的意思是在声明变量，如 <code>let age;</code></p>\n<p><code>let</code> 和 <code>var</code> 都是 JavaScript 中的声明变量的关键字，推荐使用 <code>let</code> 声明变量！！！</p>\n<h3 id=\"赋值\"><a class=\"anchor\" href=\"#赋值\">#</a> 赋值</h3>\n<p>声明（定义）变量相当于创造了一个空的 “容器”，通过赋值向这个容器中添加数据。</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 声明和赋值<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> </pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"> </pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// 声明 (定义) 变量有两部分构成：声明关键字、变量名（标识）</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token comment\">//let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token comment\">//age 即变量的名称，也叫标识符</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token keyword\">let</span> age</pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token comment\">// 赋值，将 18 这个数据存入了 age 这个 “容器” 中</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> age <span class=\"token operator\">=</span> <span class=\"token number\">18</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> <span class=\"token comment\">// 这样 age 的值就成了 18</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span>age<span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> </pre></td></tr><tr><td data-num=\"19\"></td><td><pre> <span class=\"token comment\">// 也可以声明和赋值同时进行</span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre> <span class=\"token keyword\">let</span> str <span class=\"token operator\">=</span> <span class=\"token string\">'hello world!'</span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre> <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span>str<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></pre></td></tr><tr><td data-num=\"22\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"23\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"24\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><h3 id=\"关键字\"><a class=\"anchor\" href=\"#关键字\">#</a> 关键字</h3>\n<p>JavaScript 使用专门的关键字 <code>let</code> 和 <code>var</code> 来声明（定义）变量，在使用时需要注意一些细节：</p>\n<p>以下是使用 <code>let</code> 时的注意事项：</p>\n<ol>\n<li>允许声明和赋值同时进行</li>\n<li>不允许重复声明</li>\n<li>允许同时声明多个变量并赋值</li>\n<li>JavaScript 中内置的一些关键字不能被当做变量名</li>\n</ol>\n<p>以下是使用 <code>var</code> 时的注意事项：</p>\n<ol start=\"2\">\n<li>允许声明和赋值同时进行</li>\n<li>允许重复声明</li>\n<li>允许同时声明多个变量并赋值</li>\n</ol>\n<p>大部分情况使用 <code>let</code> 和 <code>var</code> 区别不大，但是 <code>let</code> 相较 <code>var</code> 更严谨，因此推荐使用 <code>let</code> ，后期会更进一步介绍二者间的区别。</p>\n<h3 id=\"变量名命名规则\"><a class=\"anchor\" href=\"#变量名命名规则\">#</a> 变量名命名规则</h3>\n<p>关于变量的名称（标识符）有一系列的规则需要遵守：</p>\n<ol>\n<li>只能是字母、数字、下划线、$，且不能能数字开头</li>\n<li>字母区分大小写，如 Age 和 age 是不同的变量</li>\n<li>JavaScript 内部已占用于单词（关键字或保留字）不允许使用</li>\n<li>尽量保证变量具有一定的语义，见字知义</li>\n</ol>\n<p>注：所谓关键字是指 JavaScript 内部使用的词语，如 <code>let</code> 和 <code>var</code> ，保留字是指 JavaScript 内部目前没有使用的词语，但是将来可能会使用词语。</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 变量名命名规则<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> </pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"> </pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token keyword\">let</span> age <span class=\"token operator\">=</span> <span class=\"token number\">18</span> <span class=\"token comment\">// 正确</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token keyword\">let</span> age1 <span class=\"token operator\">=</span> <span class=\"token number\">18</span> <span class=\"token comment\">// 正确</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token keyword\">let</span> _age <span class=\"token operator\">=</span> <span class=\"token number\">18</span> <span class=\"token comment\">// 正确</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token comment\">//let 1age = 18; // 错误，不可以数字开头</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> <span class=\"token keyword\">let</span> $age <span class=\"token operator\">=</span> <span class=\"token number\">18</span> <span class=\"token comment\">// 正确</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> <span class=\"token keyword\">let</span> Age <span class=\"token operator\">=</span> <span class=\"token number\">24</span> <span class=\"token comment\">// 正确，它与小写的 age 是不同的变量</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> <span class=\"token comment\">//let let = 18; // 错误，let 是关键字</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> <span class=\"token keyword\">let</span> int <span class=\"token operator\">=</span> <span class=\"token number\">123</span> <span class=\"token comment\">// 不推荐，int 是保留字</span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><h2 id=\"常量\"><a class=\"anchor\" href=\"#常量\">#</a> 常量</h2>\n<p>概念：使用 const 声明的变量称为 “常量”。</p>\n<p>使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是 let。</p>\n<p>命名规范：和变量一致</p>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token keyword\">const</span> <span class=\"token constant\">PI</span> <span class=\"token operator\">=</span> <span class=\"token number\">3.14</span></pre></td></tr></table></figure><blockquote>\n<p>注意： 常量不允许重新赋值，声明的时候必须赋值（初始化）</p>\n</blockquote>\n<h2 id=\"数据类型\"><a class=\"anchor\" href=\"#数据类型\">#</a> 数据类型</h2>\n<blockquote>\n<p>计算机世界中的万事成物都是数据。</p>\n</blockquote>\n<p>计算机程序可以处理大量的数据，为了方便数据的管理，将数据分成了不同的类型：</p>\n<p>注：通过 typeof 关键字检测数据类型</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 数据类型<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> </pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"> </pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// 检测 1 是什么类型数据，结果为 number</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">typeof</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><h3 id=\"数值类型\"><a class=\"anchor\" href=\"#数值类型\">#</a> 数值类型</h3>\n<p>即我们数学中学习到的数字，可以是整数、小数、正数、负数</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 数据类型<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> </pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"> </pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token keyword\">let</span> score <span class=\"token operator\">=</span> <span class=\"token number\">100</span> <span class=\"token comment\">// 正整数</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token keyword\">let</span> price <span class=\"token operator\">=</span> <span class=\"token number\">12.345</span> <span class=\"token comment\">// 小数</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token keyword\">let</span> temperature <span class=\"token operator\">=</span> <span class=\"token operator\">-</span><span class=\"token number\">40</span> <span class=\"token comment\">// 负数</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">typeof</span> score<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 结果为 number</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">typeof</span> price<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 结果为 number</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">typeof</span> temperature<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 结果为 number</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><p>JavaScript 中的数值类型与数学中的数字是一样的，分为正数、负数、小数等。</p>\n<h3 id=\"字符串类型\"><a class=\"anchor\" href=\"#字符串类型\">#</a> 字符串类型</h3>\n<p>通过单引号（ <code>''</code> ） 、双引号（ <code>""</code> ）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。</p>\n<p>注意事项：</p>\n<ol>\n<li>无论单引号或是双引号必须成对使用</li>\n<li>单引号 / 双引号可以互相嵌套，但是不以自已嵌套自已</li>\n<li>必要时可以使用转义符 <code>\\</code> ，输出单引号或双引号</li>\n</ol>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 数据类型<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> </pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"> </pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token keyword\">let</span> user_name <span class=\"token operator\">=</span> <span class=\"token string\">'小明'</span> <span class=\"token comment\">// 使用单引号</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token keyword\">let</span> gender <span class=\"token operator\">=</span> <span class=\"token string\">\"男\"</span> <span class=\"token comment\">// 使用双引号</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token keyword\">let</span> str <span class=\"token operator\">=</span> <span class=\"token string\">'123'</span> <span class=\"token comment\">// 看上去是数字，但是用引号包裹了就成了字符串了</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token keyword\">let</span> str1 <span class=\"token operator\">=</span> <span class=\"token string\">''</span> <span class=\"token comment\">// 这种情况叫空字符串</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre>\t\t</pre></td></tr><tr><td data-num=\"15\"></td><td><pre> documeent<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">typeof</span> user_name<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 结果为 string</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> documeent<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">typeof</span> gender<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 结果为 string</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> documeent<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">typeof</span> str<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 结果为 string</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><h3 id=\"布尔类型\"><a class=\"anchor\" href=\"#布尔类型\">#</a> 布尔类型</h3>\n<p>表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 <code>true</code> 和 <code>false</code> ，表示肯定的数据用 <code>true</code> ，表示否定的数据用 <code>false</code> 。</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 数据类型<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> </pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"> </pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// pink 老师帅不帅？回答 是 或 否</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token keyword\">let</span> isCool <span class=\"token operator\">=</span> <span class=\"token boolean\">true</span> <span class=\"token comment\">// 是的，摔死了！</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> isCool <span class=\"token operator\">=</span> <span class=\"token boolean\">false</span> <span class=\"token comment\">// 不，套马杆的汉子！</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">typeof</span> isCool<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 结果为 boolean</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><h3 id=\"undefined\"><a class=\"anchor\" href=\"#undefined\">#</a> undefined</h3>\n<p>未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 数据类型<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> </pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"> </pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token comment\">// 只声明了变量，并末赋值</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre> <span class=\"token keyword\">let</span> tmp<span class=\"token punctuation\">;</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> document<span class=\"token punctuation\">.</span><span class=\"token function\">write</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">typeof</span> tmp<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 结果为 undefined</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><p><strong>注：JavaScript 中变量的值决定了变量的数据类型。</strong></p>\n<h2 id=\"类型转换\"><a class=\"anchor\" href=\"#类型转换\">#</a> 类型转换</h2>\n<blockquote>\n<p>理解弱类型语言的特征，掌握显式类型转换的方法</p>\n</blockquote>\n<p>在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系。</p>\n<h3 id=\"隐式转换\"><a class=\"anchor\" href=\"#隐式转换\">#</a> 隐式转换</h3>\n<p>某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 隐式转换<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"> </pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token keyword\">let</span> num <span class=\"token operator\">=</span> <span class=\"token number\">13</span> <span class=\"token comment\">// 数值</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token keyword\">let</span> num2 <span class=\"token operator\">=</span> <span class=\"token string\">'2'</span> <span class=\"token comment\">// 字符串</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token comment\">// 结果为 132</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> <span class=\"token comment\">// 原因是将数值 num 转换成了字符串，相当于 '13'</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre> <span class=\"token comment\">// 然后 + 将两个字符串拼接到了一起</span></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>num <span class=\"token operator\">+</span> num2<span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> <span class=\"token comment\">// 结果为 11</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre> <span class=\"token comment\">// 原因是将字符串 num2 转换成了数值，相当于 2</span></pre></td></tr><tr><td data-num=\"19\"></td><td><pre> <span class=\"token comment\">// 然后数值 13 减去 数值 2</span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>num <span class=\"token operator\">-</span> num2<span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre></pre></td></tr><tr><td data-num=\"22\"></td><td><pre> <span class=\"token keyword\">let</span> a <span class=\"token operator\">=</span> <span class=\"token function\">prompt</span><span class=\"token punctuation\">(</span><span class=\"token string\">'请输入一个数字'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"23\"></td><td><pre> <span class=\"token keyword\">let</span> b <span class=\"token operator\">=</span> <span class=\"token function\">prompt</span><span class=\"token punctuation\">(</span><span class=\"token string\">'请再输入一个数字'</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"24\"></td><td><pre></pre></td></tr><tr><td data-num=\"25\"></td><td><pre> <span class=\"token function\">alert</span><span class=\"token punctuation\">(</span>a <span class=\"token operator\">+</span> b<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></pre></td></tr><tr><td data-num=\"26\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"27\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"28\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure><p>注：数据类型的隐式转换是 JavaScript 的特征，后续学习中还会遇到，目前先需要理解什么是隐式转换。</p>\n<p>补充介绍模板字符串的拼接的使用</p>\n<h3 id=\"显式转换\"><a class=\"anchor\" href=\"#显式转换\">#</a> 显式转换</h3>\n<p>编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。</p>\n<h4 id=\"number\"><a class=\"anchor\" href=\"#number\">#</a> Number</h4>\n<p>通过 <code>Number</code> 显示转换成数值类型，当转换失败时结果为 <code>NaN</code> （Not a Number）即不是一个数字。</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token doctype\"><span class=\"token punctuation\"><!</span><span class=\"token doctype-tag\">DOCTYPE</span> <span class=\"token name\">html</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>JavaScript 基础 - 隐式转换<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\"></pre></td></tr><tr><td data-num=\"9\"></td><td><pre> <span class=\"token keyword\">let</span> t <span class=\"token operator\">=</span> <span class=\"token string\">'12'</span></pre></td></tr><tr><td data-num=\"10\"></td><td><pre> <span class=\"token keyword\">let</span> f <span class=\"token operator\">=</span> <span class=\"token number\">8</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token comment\">// 显式将字符串 12 转换成数值 12</span></pre></td></tr><tr><td data-num=\"13\"></td><td><pre> t <span class=\"token operator\">=</span> <span class=\"token function\">Number</span><span class=\"token punctuation\">(</span>t<span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"14\"></td><td><pre></pre></td></tr><tr><td data-num=\"15\"></td><td><pre> <span class=\"token comment\">// 检测转换后的类型</span></pre></td></tr><tr><td data-num=\"16\"></td><td><pre> <span class=\"token comment\">// console.log(typeof t);</span></pre></td></tr><tr><td data-num=\"17\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>t <span class=\"token operator\">+</span> f<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 结果为 20</span></pre></td></tr><tr><td data-num=\"18\"></td><td><pre></pre></td></tr><tr><td data-num=\"19\"></td><td><pre> <span class=\"token comment\">// 并不是所有的值都可以被转成数值类型</span></pre></td></tr><tr><td data-num=\"20\"></td><td><pre> <span class=\"token keyword\">let</span> str <span class=\"token operator\">=</span> <span class=\"token string\">'hello'</span></pre></td></tr><tr><td data-num=\"21\"></td><td><pre> <span class=\"token comment\">// 将 hello 转成数值是不现实的，当无法转换成</span></pre></td></tr><tr><td data-num=\"22\"></td><td><pre> <span class=\"token comment\">// 数值时，得到的结果为 NaN （Not a Number）</span></pre></td></tr><tr><td data-num=\"23\"></td><td><pre> console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token function\">Number</span><span class=\"token punctuation\">(</span>str<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"24\"></td><td><pre> </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"25\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"26\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></pre></td></tr></table></figure>",
"tags": []
},
{
"id": "https://joyllll.github.io/2024/04/20/%E5%BD%B1%E8%AF%84/%E6%91%A9%E7%99%BB%E5%AE%B6%E5%BA%AD/modern_family/",
"url": "https://joyllll.github.io/2024/04/20/%E5%BD%B1%E8%AF%84/%E6%91%A9%E7%99%BB%E5%AE%B6%E5%BA%AD/modern_family/",
"title": "摩登家庭剧评",
"date_published": "2024-04-20T14:44:56.254Z",
"content_html": "<h2 id=\"剧情概述\"><a class=\"anchor\" href=\"#剧情概述\">#</a> 剧情概述</h2>\n<p>《摩登家庭》是一部以脱离传统的家庭模式为题材的喜剧，通过三个不同家庭的日常生活和相互关系展现了现代家庭的多样性和复杂性。故事主要围绕着杰伊・普里查德（Jay Pritchett）的家庭展开，他与年轻妻子格洛丽亚（Gloria）及她的儿子曼尼（Manny）组成了一个非典型的家庭。此外，杰伊的成年子女克莱尔（Claire）和米切尔（Mitchell）也各自有着截然不同的生活方式和挑战。</p>\n<h2 id=\"角色魅力\"><a class=\"anchor\" href=\"#角色魅力\">#</a> 角色魅力</h2>\n<p>《摩登家庭》的魅力在于其丰富多彩的角色。从杰伊的幽默老绅士形象，到克莱尔的完美主妇兼事业女性，再到米切尔与他的伴侣卡梅隆（Cameron）的同性婚姻形象，每个角色都有着鲜明的个性和故事线。此外，曼尼的成长故事和他与杰伊之间的父子情感也是该剧的一大亮点。</p>\n<h2 id=\"幽默与温情并存\"><a class=\"anchor\" href=\"#幽默与温情并存\">#</a> 幽默与温情并存</h2>\n<p>《摩登家庭》成功地将幽默和温情相结合，让观众在笑声中感受到家庭情感的温暖。剧中的情节常常荒诞搞笑，但在笑料背后隐藏着对家庭、友情和爱情的深刻思考。即使是最荒谬的情节，也常常能触动观众内心的柔软之处。</p>\n<h2 id=\"拍摄手法与剧集结构\"><a class=\"anchor\" href=\"#拍摄手法与剧集结构\">#</a> 拍摄手法与剧集结构</h2>\n<p>《摩登家庭》采用了 “模拟纪录片” 的拍摄手法，以独白、摄像头对镜头的直接交流等形式增强了剧集的真实感和观众的参与感。此外，每集通常由三个不同家庭的故事线组成，这种多线叙事的结构使得剧集更加富有层次感和趣味性。</p>\n<h2 id=\"总评\"><a class=\"anchor\" href=\"#总评\">#</a> 总评</h2>\n<p>《摩登家庭》是一部充满了幽默和温情的家庭喜剧，通过对现代家庭多样性的刻画，给观众带来了许多欢乐与思考。无论是家庭观念、友情还是爱情，剧中的情节都能触动人心，使得观众在笑声中感受到生活的温暖和美好。因此，这部剧绝对值得一看，能够给人带来无尽的快乐与感动。</p>\n",
"tags": []
},
{
"id": "https://joyllll.github.io/2024/04/19/python/My-New-Post/",
"url": "https://joyllll.github.io/2024/04/19/python/My-New-Post/",
"title": "Python 学习笔记",
"date_published": "2024-04-19T15:02:07.477Z",
"content_html": "<p>欢迎来到我的 Python 学习笔记页面！在这里，我将分享一些关于 Python 基础和进阶知识的学习心得。</p>\n<h2 id=\"基础知识\"><a class=\"anchor\" href=\"#基础知识\">#</a> 基础知识</h2>\n<p>Python 是一种广泛使用的高级、解释型、动态编程语言。它的设计哲学强调代码的可读性和简洁的语法（尤其是使用空格缩进来区分代码块，而不是使用大括号或关键字）。</p>\n<h3 id=\"数据类型\"><a class=\"anchor\" href=\"#数据类型\">#</a> 数据类型</h3>\n<p>Python 中有几种基本的数据类型：</p>\n<ul>\n<li><strong>整数</strong>：无限精度的整数，例如： <code>1</code> , <code>100</code> , <code>-8080</code></li>\n<li><strong>浮点数</strong>：双精度浮点数，例如： <code>3.14159</code> , <code>-0.0001</code></li>\n<li><strong>字符串</strong>：字符集合，例如： <code>"Hello, Python!"</code></li>\n<li><strong>布尔值</strong>： <code>True</code> 或 <code>False</code></li>\n</ul>\n<h3 id=\"控制流\"><a class=\"anchor\" href=\"#控制流\">#</a> 控制流</h3>\n<p>在 Python 中，可以使用 <code>if</code> , <code>for</code> , <code>while</code> 等关键字来控制程序的流程。</p>\n<figure class=\"highlight python\"><figcaption data-lang=\"python\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token comment\"># 示例：使用 if-elif-else 结构</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre>x <span class=\"token operator\">=</span> <span class=\"token number\">20</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token keyword\">if</span> x <span class=\"token operator\"><</span> <span class=\"token number\">0</span><span class=\"token punctuation\">:</span></pre></td></tr><tr><td data-num=\"4\"></td><td><pre> <span class=\"token keyword\">print</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"负数\"</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre><span class=\"token keyword\">elif</span> x <span class=\"token operator\">==</span> <span class=\"token number\">0</span><span class=\"token punctuation\">:</span></pre></td></tr><tr><td data-num=\"6\"></td><td><pre> <span class=\"token keyword\">print</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"零\"</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre><span class=\"token keyword\">else</span><span class=\"token punctuation\">:</span></pre></td></tr><tr><td data-num=\"8\"></td><td><pre> <span class=\"token keyword\">print</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"正数\"</span><span class=\"token punctuation\">)</span></pre></td></tr><tr><td data-num=\"9\"></td><td><pre></pre></td></tr><tr><td data-num=\"10\"></td><td><pre><span class=\"token comment\"># 示例：for 循环遍历列表</span></pre></td></tr><tr><td data-num=\"11\"></td><td><pre><span class=\"token keyword\">for</span> i <span class=\"token keyword\">in</span> <span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span> <span class=\"token number\">4</span><span class=\"token punctuation\">,</span> <span class=\"token number\">5</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">:</span></pre></td></tr><tr><td data-num=\"12\"></td><td><pre> <span class=\"token keyword\">print</span><span class=\"token punctuation\">(</span>i<span class=\"token punctuation\">)</span></pre></td></tr></table></figure>",
"tags": []
}
]
}