什么是nodejs？

简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。

第一步：下载安装程序

官网下载地址：https://nodejs.org/en/download/

选择合适的版本点击下载即可。我这里选择的是64位最新版安装包。

第二步：安装

1、下载完成后，双击“node-v14.2.0-x64.msi”，开始安装Node.js

点击【Next】按钮

勾选复选框，点击【Next】按钮

修改好目录后，点击【Next】按钮

上面共有四大选项：
– 安装Node核心模块
– 安装npm
– 安装文档
– 把Node和npm及其模块添加到环境变量
默认安装这四项就好了，如果不选，之后在cmd窗口想运行node、npm等执行程序会报错，系统找不到指定文件，当然也可以进行手动配置。然后继续Next……

这是在询问是否自动安装2个工具：
1、构建工具(Python 2和Visual Studio构建工具)
2、Chocolatey
构建工具是因为一些npm模块需要使用C/C++编译，如果想要编译这些模块，则需要安装这个工具。如果不安装这个构建工具，在之后使用 npm 安装模块的时候，会报错：gyp ERR! find Python
如果见到这个错误，就知道是因为没有安装构建工具。
构建工具和 Chocolatey 都是必装的，如果现在没有安装，可以之后再手动安装，提示里已经给出了相关解释：https://github.com/nodejs/node-gyp#on-windows
该提示还告诉我们： Chocolatey 会在后面弹出一个 cmd 来安装。
为了避免以后麻烦，这里强烈建议选择“Automatically install …” ，然后 Next…

选择 Install 安装，如果系统弹出是否允许控制权限，记得点“是”

这是在自动安装 Chocolatey。
如果选择了“Automatically install…”，按Finish之后，会弹出一个cmd，我们在cmd窗口“按任意键继续”，然后只要等待安装完成即可。
如果关闭cmd窗口或者没有选择“Automatically install…”，则按Finish之后安装步骤全部完成，不会弹出cmd窗口（不会安装Python 2和Visual Studio这2个工具）。
等待cmd窗口按任意键继续，然后等待自动安装完成，安装就结束了。

如果系统没有安装Python模块，这就会自动安装，速度稍慢。

安装完成后打开 cmd(或powershell)，输入命令 node -v 或者 npm -v 来查看node当前版本号或者npm当前版本：

常见错误

1、如果某些组件安装不成功，可以安装Python后重新安装node.js
下载及安装、配置Python请移步师兄的文章：

Python学习笔记(配置开发环境)

2、‘npm’不是内部或外部命令，也不是可运行的程序
这是因为没有指定运行文件的位置，所以cmd找不到这个运行文件，可以手动添加 Windows 环境变量。
手动配置 Windows 环境变量：
如果 没有选择“把Node和npm及其模块添加到环境变量”，那在使用npm或者node命令的时候，因为cmd找不到运行程序，这时候需要可以手动配置 Windows 环境变量。（当然，还可以卸载了重新装，记得把所有安装都装上）
默认安装路径则是C:\Program Files\nodejs\ ，所以我们要添加的环境变量就是这个路径，添加完成之后，Windows 系统就能通过环境变量找到这个执行文件。
操作方式：
右键“我的电脑”D
选择“属性”
在左侧栏选择“高级系统设置”
选中选项卡“高级”
点击右下角“环境变量(N)”
系统环境变量(s) ，双击变量名为“path”哪一行，添加 D:\develop\nodejs\（默认安装则是 C:\Program Files\nodejs\）
然后再打开 cmd 运行命令则一切正常。

1.Event对象通用属性

属性名称	说明
altKey	返回当事件被触发时，”ALT” 是否被按下
bubbles	事件是冒泡，则返回true，否则返回false
cancelBubble	如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true
ctrlKey	返回当事件被触发时，”CTRL” 是否被按下
currentTarget	返回绑定事件的对象，注意这里不能用console打印，在打印中，该属性的值会被重置，将一直显示null
defaultPrevented	当前事件对象的preventDefault方法是否被调用过
detail	鼠标点击的次数
eventPhase	返回事件传播的当前阶段，0：事件为发生 1:事件目前处于捕获阶段，即处于从祖先节点向目标节点的传播过程中 2：事件到达目标节点，即event.target属性指向的节点 3:事件处于冒泡阶段，即处于从目标节点向祖先节点的反向传播过程中
isTrusted	事件是否是用户操作产生的
metaKey	返回当事件被触发时，”META” 是否被按下（windows系统是微软图标，mac系统是⌘）
returnValue	如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作
shiftKey	返回当事件被触发时，”SHIFT” 是否被按下
srcElement	返回触发事件的对象，在IE和Chorme浏览器下有该对象
target	返回触发事件的对象，在Firefox和Chorme浏览器下有该对象
timeStamp	返回事件生成时距离现在的时间值，单位为毫秒
type	该事件的类型

2.Event对象鼠标事件专属属性

属性名称	说明
button	返回是哪个鼠标键触发的，0代表左键，1代表中键，2代表右键(如果鼠标上还有其他键，具体通过打印查询)
buttons	返回是哪些鼠标键触发的，假如左键和右键同时点击，那么返回的值为3
clientX	返回当事件被触发时，鼠标指针的距离窗口左侧的距离
clientY	返回当事件被触发时，鼠标指针的距离窗口顶部的距离
ctrlKey	返回当事件被触发时，”CTRL” 是否被按下
layerX	鼠标相对于元素顶部的位置(确切的说是到边框外边界的距离，包括中间所有元素的padding、margin、border及元素宽度值之和)，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点，兼容性看后面的图片
layerY	鼠标相对于元素左侧的位置（确切的说是到边框外边界的距离，包括中间所有元素的padding、margin、border及元素宽度值之和），其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点，兼容性看后面的图片
metaKey	返回当事件被触发时，”META” 是否被按下（windows系统是微软图标，mac系统是⌘）
movementX	只读值，代表当前事件距离上一个mousemove事件之间鼠标在水平方向上移动的值，相当于currentEvent.screenX - previousEvent.screenX
movementY	只读值，代表当前事件距离上一个mousemove事件之间鼠标在垂直方向上移动的值，当当与currentEvent.screenY - previousEvent.screenY
offsetX	鼠标相对于元素顶部的位置(确切的说是到边框外边界的距离，包括中间所有元素的padding、margin、border及元素宽度值之和)，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点，兼容性看后面的图片
offsetY	鼠标相对于元素左侧的位置（确切的说是到边框外边界的距离，包括中间所有元素的padding、margin、border及元素宽度值之和），其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点，兼容性看后面的图片
pageX	鼠标相对于document顶部的位置，兼容性看后面的图片
pageY	鼠标相对于document元素左侧的位置，兼容性看后面的图片
relatedTarget	鼠标移动时哪个元素进入或退出
screenX	鼠标相对于屏幕左侧的距离
screenY	鼠标相对于屏幕顶部的距离
shiftKey	返回当事件被触发时，”SHIFT” 是否被按下
x	鼠标相对于document顶部的位置，兼容性看后面的图片
y	鼠标相对于document元素左侧的位置，兼容性看后面的图片

属性兼容性

	chrome	Firefox	IE8	IE9	IE10
offsetX	√	×	√	√	√
clientX	√	√	√	√	√
pageX	√	√	×	√	√
screenX	√	√	√	√	√
layerX	√	√	×	√	√
x	√	×	√	√	√

3.Event对象键盘事件专属属性

属性名称	说明
charCode	返回onpress事件触发键值的字母代码，仅用于字符代码
code	返回触发键的按键名称
key	返回触发键的按键名称
keyCode	返回触发键的按键的代号值(目前已弃用)
repeat	返回当前事件是否正在重复

4.Event对象方法

方法名	说明
initEvent()	初始化新创建的 Event 对象的属性
preventDefault()	取消事件的默认操作
stopPropagation()	阻止事件冒泡

注意，以下我们均是在HTML的环境下讨论的，JSP项目的路径会有额外的路径要求

一、绝对路径

它是一个定死的路径，不会根据项目的移动等等，有所变动，在HTML中有两种绝对路径：

1. 本地磁盘绝对路径，例如：

D:/webProject/JS+jQuery/chapter2/sample9/images/506.jpg
这种路径写法基本上在程序项目中是明令禁止的，因为这会导致项目的可移植性极差，基本上换一个电脑，项目就无法运行了，且如果项目是需要在服务器上运行的，那么也会导致相应的资源无法获取到。

2. 网址绝对路径，例如：

https://www.baidu.com/img/donghangtian_a63318c91cb73a8f04b9a75e8ffa3d6c.gif
这种用法还网页中是比较常见的，尤其是对项目的整体大小有严格要求的时候，我们就可以将图片、音频、视频等这种比较大的资源从项目中剥离出来，放在服务器中，然后通过网址的方式来即时加载。

二、相对路径

顾名思义，这种路径首先是以当前文件为目标，向整个项目的其他位置进行搜索

下面我们用一个项目的结构来进行解释，以下的描述我们均以exercise2中的exercise.html文件为起始点：

1.同目录（也叫当前目录）

我们用./来表示，在原生HTML中也可以省略，不过在框架中是要求写出来的，所以推荐奖它写出来
我们可以看到，exercise.css文件与exercise.html文件处于同目录，那么当我们需要在exercise.html中引入exercise.css文件时，我们的路径就可以写成：

2.同目录文件夹下的文件（同目录子集）

假设我们希望使用1.jpg这张图片，那么我们的路径可以写成：
<img src="./images/1.jpg" alt />

3.父级目录文件

我们使用../代表向上搜索一层父级，注意这里一个../代表一层，如果上面还有父级，那么就是../../，还有就再加
假设我们希望引入的exercise.css文件是exercise1目录下的，那么此时我们的路径可以写成：

4.根目录文件

我们用/将初始的搜索位置定位到根目录下，以图中的项目结构为例，那么我们的位置将定位在JS+jQuery目录下
假设我们希望引入exercise2目录下的1.jpg图片，那么路径可以写成：
<img src="/chapter3/exercise2/images/1.jpg" alt />

1.Window对象

对象属性

名称	说明
document	对Document对象的只读引用
history	对History对象的只读引用
location	用于窗口或框架的Location对象
screen	对Screen对象的只读引用
navigator	对Navigator对象的只读引用
defaultStatus	设置或返回窗口状态栏中的默认文本
innerheight	返回窗口的文档显示区的高度
innerwidth	返回窗口的文档显示区的宽度
outerheight	返回窗口的外部高度
outerwidth	返回窗口的外部宽度
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置
name	设置或返回窗口的名称
parent	返回父窗口
top	返回最顶层的先辈窗口
status	设置窗口状态栏的文本

对象方法

名称	说明
close()	关闭窗口
alert(message)	弹出一个具有确定按钮的系统消息框，显示指定的文本
confirm(message)	弹出一个具有确定和取消按钮的询问对话框，返回一个布尔值
propmt(message,defaultVal)	提示用户输入信息，接受2个参数，第一个为提示的文本，第二个为输入框的默认值。返回文本框中输入的值
setTimeout(handler,timeout)	延迟函数，设置在指定的毫秒数后执行函数，接受2个参数，要执行的函数和等待的毫秒数
clearTimeout(handle)	取消指定的延迟函数
setInterval(handler,timeout)	调度器函数，按照指定的周期（以毫秒计）来调用函数，接受2个参数，要执行的函数和间隔周期毫秒数
clearInterval(handle)	取消指定的调度器函数
blur()	把键盘焦点从顶层窗口移开
focus()	把键盘焦点给予一个窗口
moveBy(x,y)	可相对窗口的当前坐标把它移动指定的像素
moveTo(x,y)	把窗口的左上角移动到一个指定的坐标
open(url,target,replace)	打开一个新的浏览器窗口或查找一个已命名的窗口
print(url,target,replace)	打印当前窗口的内容
resizeBy(x,y)	按照指定的像素调整窗口的大小
resizeTo(x,y)	把窗口的大小调整到指定的宽度和高度
scrollBy(options)	按照指定的像素值来滚动内容
scrollTo(options)	把内容滚动到指定的坐标

2.History对象

对象属性

名称	说明
length	返回浏览器历史列表中的 URL 数量

对象方法

名称	说明
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go(delta)	加载 history 列表中的某个具体页面，参数为Number类型，表示跳转多少步

3.Screen对象

对象属性

名称	说明
availHeight	返回显示屏幕的高度 (除 Windows 任务栏之外)
availWidth	返回显示屏幕的宽度 (除 Windows 任务栏之外)
colorDepth	返回目标设备或缓冲器上的调色板的比特深度
height	返回显示屏幕的高度
pixelDepth	返回显示屏幕的颜色分辨率（比特每像素）
width	返回显示器屏幕的宽度

4.Navigator对象

对象属性

名称	说明
appCodeName	返回浏览器的代码名
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值
onLine	返回指明系统是否处于脱机模式的布尔值
platform	返回运行浏览器的操作系统平台
systemLanguage	返回 OS 使用的默认语言
userAgent	返回由客户机发送服务器的 user-agent 头部的值
userLanguage	返回 OS 的自然语言设置

对象方法

名称	说明
javaEnabled()	规定浏览器是否启用 Java

5.Location 对象

对象属性

名称	说明
hash	设置或返回从井号 (#) 开始的 URL（锚）
host	设置或返回主机名和当前 URL 的端口号
hostname	设置或返回当前 URL 的主机名
href	设置或返回完整的 URL
pathname	设置或返回当前 URL 的路径部分
port	设置或返回当前 URL 的端口号
protocol	设置或返回当前 URL 的协议
search	设置或返回从问号 (?) 开始的 URL（查询部分）

对象方法

名称	说明
assign()	加载新的文档
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)
getMonth()	从 Date 对象返回月份 (0 ~ 11)
getFullYear()	从 Date 对象以四位数字返回年份
getHours()	返回 Date 对象的小时 (0 ~ 23)
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)
getTime()	返回 1970 年 1 月 1 日至今的毫秒数
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)
getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)
setMonth()	设置 Date 对象中月份 (0 ~ 11)
setFullYear()	设置 Date 对象中的年份（四位数字）
setHours()	设置 Date 对象中的小时 (0 ~ 23)
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)
setTime()	以毫秒设置 Date 对象
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)
setUTCSeconds()	根据世界时设置 Date 对象中的秒钟 (0 ~ 59)
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)
toSource()	返回该对象的源代码
toString()	把 Date 对象转换为字符串
toTimeString()	把 Date 对象的时间部分转换为字符串
toDateString()	把 Date 对象的日期部分转换为字符串
toUTCString()	根据世界时，把 Date 对象转换为字符串
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串
UTC()	根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数
valueOf()	返回 Date 对象的原始值

首先最重要的，为了保证大家在学习的过程当中不会出现一些未知的问题，请将工作环境调整为与老师的一致：

咱们的操作系统一定是win10，苹果系统是绝对不行的，它的权限限制非常多，会对后面咱们学习前端框架等有很大的阻碍

后文所需的所有安装文件，请均从群文件中获取

---

一.首先我们安装webstrom

1.从群文件中下载webstorm的安装包，双击安装包，第一步直接点next即可

---

2.选择自己想要的安装目录，然后点击next

---

3.勾选64-bit launcher，然后点击next

---

4.直接点击install开始安装

---

5.安装完毕后，勾选run webstorm

---

6.导入设置，这里我们直接默认选择不的上传即可

---

7.用户协议，我们勾选I confirm…，然后点击continue

---

8.数据分享，我们选择don’t send，不发送数据

---

9.主题选择,看小伙伴们自己的喜好，是选暗色调还是亮色调，然后点击Next

---

10.各种插件，目前我们不需要其他插件，直接点击Star using WebStorm即可

---

11.软件激活，我们现在暂时选择使用选项(Evaluate for free)，然后点击Evaluate

---

二.接着我们webstorm激活

1.将群里面下载好的激活文件”jetbrains-agent.jar”拷贝到webstorm安装的目录同目录下，例如老师放置的位置是如图所示：

---

2.在webstorm的欢迎界面，选择Configure，然后选择Edit Custom VM Options

---

3.在弹出的窗口中输入内容：-javaagent:G:\JetBrains\jetbrains-agent.jar，注意-javaagent:之后是你放置激活文件的路径，例如如果你放在F盘的test文件夹下面，那么整个应该是-javaagent:F:\test\jetbrains-agent.jar，然后点击save保存

---

4.关闭webstorm，然后重新打开webstorm

5.点击Configure，然后选择Manage License,打开激活窗口

---

6.选择License server，此时，address的内容，会帮我们自动填上，如果没有请检查网络或者第3步中的内容是否有填写错误，然后我们直接点击Activate

---

7.正常情况下，第6步已经成功，但是有时候，服务器地址会变更，因此会出现下图所示的提示，我们按照红字的内容输入新的地址，然后点击Activate

---

8.激活成功后，会自关闭激活窗口，回到欢迎窗口，如果我们看到右下角有绿色图标以及Events的字样，则代表我们的webstorm已经激活成功了

Math对象的属性

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）
LN2	返回 2 的自然对数（约等于0.693）
LN10	返回 10 的自然对数（约等于2.302）
LOG2E	返回以 2 为底的 e 的对数（约等于 1.414）
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）
PI	返回圆周率（约等于3.14159）
SQRT1_2	返回 2 的平方根的倒数（约等于 0.707）
SQRT2	返回 2 的平方根（约等于 1.414）

Math对象的方法

方法	描述
abs	返回数的绝对值
acos(x)	返回数的反余弦值
asin(x)	返回数的反正弦值
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）
ceil(x)	对数进行上舍入
cos(x)	返回数的余弦
exp(x)	返回 e 的指数
floor(x)	对数进行下舍入
log(x)	返回数的自然对数（底为e）
max(x,y)	返回 x 和 y 中的最高值
min(x,y)	返回 x 和 y 中的最低值
pow(x,y)	返回 x 的 y 次幂
random()	返回 0 ~ 1 之间的随机数
round(x)	把数四舍五入为最接近的整数
sin(x)	返回数的正弦
sqrt(x)	返回数的平方根
tan(x)	返回角的正切
toSource()	返回该对象的源代码
valueOf()	返回 Math 对象的原始值

一、直接控制条件的方式结束循环

1.控制条件结束while循环

let isLoop = true;      //是否循环
while (isLoop) {
    console.log('循环正在执行中...');
    isLoop = false;     //控制循环条件，结束循环
}
console.log('循环结束！');

2.控制条件结束do-while循环

let isLoop = true;      //是否循环
do {
    console.log('循环正在执行中...');
    isLoop = false;     //控制循环条件，结束循环
}while (isLoop);
console.log('循环结束！');

3.控制条件结束for循环（不推荐使用）

for(let i = 0;i < 100;i++) {
    console.log(i);
    if(i > 20) i = 100;     //直接改变条件
}

二、通过return结束循环

注意return只能写在函数当中，因为它是直接结束整个函数，相当于循环也结束了

1.使用return结束while循环

function whileLoop() {
    while (true) {
        console.log('循环正在执行中...');
        let isLoop = confirm('是否要继续循环?');
        if(!isLoop) return;
    }
}
whileLoop();
console.log('循环结束！');

2.使用return结束do-while循环

function doWhileLoop() {
    do {
        console.log('循环正在执行中...');
        let isLoop = confirm('是否要继续循环?');
        if(!isLoop) return;
    }while (true);
}
doWhileLoop();
console.log('循环结束！');

3.使用return结束for循环

function forLoop() {
    for(let i = 0;i < 20;i++) {
        console.log('循环正在执行中...');
        if(i > 10) return;
    }
}
forLoop();
console.log('循环结束！');

三、使用break结束循环

break的作用是终止整个循环，让循环往后继续

1.使用break结束while循环

while (true) {
    console.log('循环正在执行中...');
    let isLoop = confirm('是否要继续循环?');
    if(!isLoop) break;
}
console.log('循环结束！');

2.使用break结束do-while循环

do {
    console.log('循环正在执行中...');
    let isLoop = confirm('是否要继续循环?');
    if(!isLoop) break;
}while (true);
console.log('循环结束！');

3.使用break结束for循环

for(let i = 0;i < 20;i++) {
    console.log('循环正在执行中...');
    if(i > 10) break;
}
console.log('循环结束！');

四、使用continue跳过循环

1.使用continue跳过while循环

while (true) {
    let sex = prompt('您的性别是?');
    if(sex !== '男' && sex !== '女') {
        continue;
    }
    console.log('循环正在执行中...');
    break;
}
console.log('性别输入正确，循环结束！');

2.使用continue跳过do-while循环

do {
    let sex = prompt('您的性别是?');
    if(sex !== '男' && sex !== '女') {
        continue;
    }
    console.log('性别输入正确');
    break;
}while (true);
console.log('循环结束！');

3.使用continue跳过for循环

for(let i = 0; i < 20;i++) {
    if(i < 10) continue;
    console.log('当前的数字为:%d',i);
}

五、使用break结束嵌套循环

假如现在我们有一个2层的嵌套循环，我们希望在满足一定条件的时候，结束整个循环，同时在循环结束后，我们还希望能够执行后续的逻辑。而目前我们所知break只能结束单个循环，如果要结束整个循环，就需要写多个条件多个break，而一旦嵌套层数多了，很明显就不合理了。而return虽然可以结束所有循环，但是它无法继续执行循环之后的逻辑。
那么为了达到上述的要求，这里我们就需要用到给循环取一个别名，然后用break来结束指定的循环
现在我们先用2层for循环书写一个九九乘法表：

/* 样式 */
p {
    margin-block-start: .5em;
    margin-block-end: .5em;
}
span {
    display: inline-block;
    width: 95px;
}

for(let i = 1; i<= 9; i++) {
    let str = '';
    document.write('<p>');
    for(let j = 1; j<= i; j++) {
        document.write('<span>' + j + ' * ' + i + ' = ' + i * j + '</span>');
    }
    document.write('</p>');
}

现在我们调整一下需求，我们希望只显示到3 * 6就结束了，同时在最后输出一句话“先暂时背这么多吧，后面的，明天再背”，如果我们用return的话：

function loop() {
    for(let i = 1; i<= 9; i++) {
        let str = '';
        document.write('<p>');
       for(let j = 1; j<= i; j++) {
            document.write('<span>' + j + ' * ' + i + ' = ' + i * j + '</span>');
            if(i > 5 && j > 2) return;
        }
        document.write('</p>');
    }
    document.write('<p>先暂时背这么多吧，后面的，明天再背</p>');
}
loop();

我们会发现，公式的确只显示到3 * 6了，但是最后一句话却并没有显示，因为return结束整个函数了，函数中最后一句输出代码并没有执行

现在我们用break的形式来调整一下：

function loop() {
    oneLoop:for(let i = 1; i<= 9; i++) {
        let str = '';
        document.write('<p>');
       twoLoop:for(let j = 1; j<= i; j++) {
            document.write('<span>' + j + ' * ' + i + ' = ' + i * j + '</span>');
            if(i > 5 && j > 2) break oneLoop;
        }
        document.write('</p>');
    }
    document.write('<p>先暂时背这么多吧，后面的，明天再背</p>');
}
loop();

这里给for循环取了一个别名oneLoop，然后用break跳出指定oneLoop循环，这样就达到想要的效果了。同样的，while循环和do-while循环的嵌套也可以使用这种方式处理，这里就不做演示了。

ECMAScript6 关键字

关键字标识了ECMAScript语句的开头和结尾。根据规定，关键字是保留的，不能用作变量名或函数名

do	if	in
for	let	new
try	var	case
else	enum	eval
null	this	true
void	with	await
break	catch	class
const	false	supper
throw	while	yield
delete	export	import
public	return	static
switch	typeof	default
extends	finally	package
private	continue	debugger
function	arguments	interface
protected	implements	instanceof
static	switch	throws
typeof	boolean	volatile
transient	synchronized

ECMAScript6 保留字

保留字在某种意义上是为将来的关键字而保留的单词，因此保留字也不能被用作变量名或函数名。

abstract	byte	char
double	final	float
goto	int	long
native	short

通过 console 命令打印日志进行调试大家肯定不陌生。我们只要在 JavaScript 代码中使用 console.log() 方法，就可以将内容输出到 Chrome 的控制台中显示。

当然 console 命令的功能远不止这些，本文对其做个总结。

1.清空控制台信息

如果想要清空控制台里的日志信息，除了可以点击控制台面板左上角的清空按钮，还可以在 js 代码中执行如下命令：

console.clear()

2.各种类型信息的输出

console 提供了如下几种方法，用来输出不同类型级别的信息：
– console.log：用于输出普通信息
– console.info：用于输出提示性信息
– console.warn：用于输出告警信息
– console.error：用于输出错误信息

各类型信息显示效果如下：

console.log('输出普通信息');
console.info('输出提示信息');
console.warn('输出警告信息');
console.error('输出错误信息');

3.格式化输出

上面提到的几种 console 对象输出方法都是支持格式化输出的，具体支持如下四种占位符：
– 字符（%s）
– 整数（%d 或 %i）
– 浮点数（%f）
– 对象（%o

console.log("%d年%d月%d日",2017,7,26);
console.log("圆周率是%f",3.1415926);
let dog = {
    name: '大黄',
    color: '黄色'
};
console.log("这是我家的小狗：%o", dog);

4.格式化输出 CSS 样式

控制台还可以直接输出带有样式的内容。

console.log("%c老九学堂欢迎大家", "background:blue; color:white; font-size:16px; padding: 3px 5px;");

5.消息分组

为了让消息日志看起来更清晰，我们可以对消息进行分组，将同一类的输出信息放在一个分组中，具体操作如下：
– console.group：输出一组信息的开头
– console.groupEnd：结束一组输出信息

console.group("老九学堂");
console.log("一群人!");
console.log("一辈子!");
console.log("一件事!");
console.groupEnd();

6.断言

console.assert()可以对输入的表达式进行断言，只有表达式为 false 时，才输出相应的信息到控制台。
注意：输出断言,不影响后续的函数执行。

console.assert(1>2, "1不可能大于2!");

7.输出对象的详细信息

使用console.dir()方法可以 dump 对象的详细信息，包括对象里的属性和方法。
也可以用console.log()直接打印，两者没区别

let obj = {
    name: "老九学堂",
    method: function() {
        alert("欢迎大家！");
    }
};
console.dir(obj);
console.log(obj);

8.输出 DOM 节点信息

使用console.dirxml()方法可以显示网页的某个节点（node）所包含的 html/xml 代码。
也可以用console.log()直接打印，两者没区别

let container = document.getElementById("container");
console.dirxml(container);

9.执行次数统计

console.count()方法可以输出执行到该行的次数，可带一个描述参数用于在次数前显示。

for(let i = 0; i < 8; i++){
    console.count("当前执行次数");
}

10.计时

通过console.time（计时开始）和console.timeEnd（计时结束）这两个方法，可以自动统计并显示一段代码的执行时间。

console.time("循环100万次");
let array= new Array(1000000);
for (let i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
}
console.timeEnd("循环100万次");

11.使用表格形式输出

对于一些数组对象，我们可以通过console.table()方法将其以表格的形式输出显示，使得结果更加容易阅读。

let languages = [
    {name:"JavaScript", fileExtension:".js"},
    {name:"Swift", fileExtension:".swift"},
    {name:"PHP", fileExtension:".php"},
];
console.table(languages);