XMLN

Appearance

简介 ​

JavaScript（简称JS）是一本轻量级脚本语言，适用于 HTML 和 WEB 相关，大部分运行在现代游览其中。自从 Node.js 问世后，也可以进行服务端的开发

ES：全称 ECMAScript。它是 JS 的实现标准，在任何载体上只要实现了 ECMAScript 的标准，那么就可以在该载体上运行 JS

在编写 JS 的时候，如果是写在 HTML 中，则 JS 必须写在 <script> 标签之间；还有一种是直接写到后缀为 .js 文件中

html
<script>
    // 写在 HTML 中的 JS
	alert('Hello World!')
</script>

分隔符 ​

分割符：;

在 JS 中默认一条指令占用一行

js
alert('指令一')
alert('指令二')
alert('指令三')

在上述写法中末尾的分割符可加可不加。但是如果是吧所有的指令写道一行中，那么就需要加入分割符来保证指令的有效性

js
alert('指令一');alert('指令二');alert('指令三');

注释 ​

JS 有两种注释，单行注释和多行注释

js
// 我是单行注释

/*
我是
多行注释
*/

标识符 ​

标识符用来命令变量和类型等程序实体。通常是由字母（A ~ Z | a ~ z）、数字（0 ~ 9）、下划线（_）组成的一个或多个字符组成的序列。

注意：对于以数字为开头或者 JS 语言关键字为标识符的为无效标识符

条件判断 ​

if 条件 ​

示例：if (条件) {操作}

在 if 判断中，会根据括号中的条件来决策是否应该让操作被执行，只有当总条件为 true 的时候才会触发操作执行

if 有几种书写方式

js
// 纯 if
if (条件) {
    操作
}

// if...else
if (条件) {
    为true时执行的代码
} else {
    为false时执行的代码
}

// if...else if 
if (条件一) {
    条件一为true时执行的代码
} else if (条件二) {
    条件二为true时执行的代码
}

// if...else if...else
if (条件一) {
    条件一为true时执行的代码
} else if (条件二) {
    条件二为true时执行的代码
} else {
    条件一和条件二都为false时执行的代码
}

如果有多个判断逻辑的话，程序会从上到下一次匹配。如果在某一条匹配成功了，那么执行完操作后会跳出判断不在进行后续匹配

switch 条件 ​

如果一个状态存在多个匹配项的话，可以使用 switch

js
switch (表达式) {
    case 值1:
        条件等于值1时执行的代码
        break;
    case 值2:
        条件等于值2时执行的代码
        break;
    default:
        上述条件都不满足时执行的代码
}

每一个 case 块的末尾必须跟上 break。否则在执行完某个 case 块后没有 break 那么它会继续向下执行，直至遇到 break

default 块不是必须项，可以不写

case 块中可以有多个常量表达式，甚至于可以调用方法（方法返回值必须是确定的值 / 布尔结果）

js
switch (表达式) {
    case 值1:
        条件等于值1时执行的代码
        break;
    case 值2, 值3:
        条件等于值1时执行的代码
        break;
    case fun(值4):
        条件等于值2时执行的代码
        break;
}

function fun(值) {
    逻辑运算
    return 值
}

三目运算符 ​

三目：xx ? xx : xx

三目仅在赋值的时候使用。也就是说，使用三目必须得有一个接收方

js
let [变量] = [表达式一] ? [表达式二] : [表达式三]

当表达式一为 true 的时候则会把表达式二的结果赋值给变量，否则就赋值表达式三的结果

多级 ​

三目是可以多段执行套娃的

js
let [变量] = [表达式一] ? [表达式二] : [表达式三] ? [表达式四] : [表达式五] ? [表达式六] : [表达式七]

let num = false ? 1 : false ? 2 : true ? 3 : 4 // 结果为 3

流程为：

  1. 判断表达式一是否为真，如果是的话赋值表达式二的结果，否则执行表达式二 : 后面的表达式
  2. 判断表达式三是否为真，如果是的话赋值表达式四的结果，否则执行表达式四 : 后面的表达式
  3. 判断表达式五是否为真，如果是的话赋值表达式六的结果，否则赋值表达式七的结果

循环 ​

循环是 重复执行一段代码 的核心语法，主要有 for（已知循环次数）、while（未知循环次数）两大类

for 循环 ​

示例：for (初始化; 条件; 更新) {操作}

在 for 循环中，会依次执行一下流程

  1. 初始化
  2. 条件判断
  3. 执行操作
  4. 更新变量

只有当条件为 true 时，才会触发操作执行；条件为 false 时终止循环

for 有几种书写方式

js
// 纯 for（完整写法，最常用）
for (初始化表达式; 条件表达式; 更新表达式) {
    操作
}

// 省略表达式（分号不能省，需手动控制循环）
for (;;) {
    // 无限循环，需配合 break 终止
    if (终止条件) break;
    操作
}

// 反向 for（从后往前遍历）
for (初始化表达式; 条件表达式; 更新表达式--) {
    操作
}

for...[in/of] ​

for...in 和 for...of 是 ES5/ES6 分别新增的遍历循环，前者聚焦属性 / 下标（专为对象设计），后者聚焦值（专为属性设计）

js
// for...in：遍历「属性名/下标」
for (let 变量名 in 目标对象/数组) {
    // 变量名 = 对象属性名 / 数组下标（字符串类型）
}

// for...of：遍历「可迭代对象的值」
for (let 变量名 of 可迭代对象) {
    // 变量名 = 数组元素 / 字符串字符 / Map/Set 值
}

while 循环 ​

适用于 根据条件重复执行，且无法提前确定循环次数

js
// 基础 while
while (条件表达式) {
    条件为true时执行的代码
}

每一轮 while 循环都会先判断条件：条件为 true 则执行操作，执行完后重新判断；条件为 false 则终止循环

js
// do-while（变种）
do {
    至少执行一次的代码
} while (条件表达式);

do-while 是先执行后判断，无论条件是否满足，循环体至少执行 1 次

循环控制 ​

break 会直接终止整个循环，无论后续是否还有满足条件的轮次

continue 仅跳过当前轮次的剩余代码，循环会继续判断下一轮条件

错误处理 ​

关键字含义
try块中写可能会爆出异常的代码
catch当 try 发生错误时捕获报错，并处理错误
throw写在 try 块中创建自定义错误
finally写在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行
js
try {
    // 可能会报错的代码
    throw new Error('这是一个错误')
} catch (error) {
    // 处理错误
} finally {
    // 无论是否报错，都会执行的代码
}

也可以自己写一个异常类让其继承 Error 类

js
// 自定义异常
class MyError extends Error {
    constructor(message) {
        super(message)
    }
}

try {
    throw new MyError('这是一个错误')
} catch (error) {
    // ...
}

throw 后面抛出的异常没有强制必须要继承自 Error，可以写上任何类型（函数、基本数据类型、普通类...）