JavaScript学习总结

---

前言

JavaScript是一种广泛应用在Web开发领域的脚本语言，它可以为网页添加交互功能，使用户可以与网页进行动态的交互和操作。学习JavaScript是成为一名优秀的Web开发者的必备技能之一。

在学习JavaScript之前，我们需要先对HTML和CSS有一定的了解，因为JavaScript主要用于操作和控制HTML元素，以及修改CSS样式。

学习JavaScript的好处是多方面的。首先，JavaScript是一门客户端脚本语言，可以在用户的浏览器中直接执行，不需要进行额外的插件安装，能够为网页增加丰富的交互效果和用户体验。其次，JavaScript在后端开发领域也有很广泛的应用，例如使用Node.js进行服务器端开发，可以构建高效且可扩展的Web应用程序。

在学习JavaScript时，需掌握以下几个关键点：

1. JavaScript基础语法和核心概念，如变量、数据类型、运算符、条件语句、循环语句等。

2. DOM（文档对象模型）操作，通过JavaScript可以对HTML文档的结构和内容进行增删改查，实现动态页面交互。

3. 事件处理，JavaScript可以通过事件监听来响应用户的操作，例如点击按钮、鼠标移动等，从而实现交互效果。

4. 异步编程，JavaScript支持异步操作，如处理网络请求、文件读写等。学习异步编程可以让你更好地理解JavaScript的事件循环机制。

5. 常用的JavaScript库和框架，如jQuery、React、Vue等。掌握这些工具和框架可以提高开发效率和代码质量。

最重要的是，学习JavaScript需要不断实践和构建项目，通过实际应用来加深对概念和语法的理解。参考文档、教程和在线资源是学习过程中的良好辅助，可以帮助你更快地解决问题和扩展知识。愿你在学习JavaScript的旅程中收获知识和成长！

---

一、JavaScript是什么？

JavaScript是一种广泛应用于Web开发中的高级编程语言。它是一种脚本语言，可以在网页上实现动态功能和交互性。JavaScript通常与HTML（超文本标记语言）和CSS（层叠样式表）一起使用，在客户端（用户浏览器）运行。

• HTML 用来定义网页的内容，例如标题、正文、图像等；
• CSS 用来控制网页的外观，例如颜色、字体、背景等；
• JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。

JavaScript可以用于创建各种功能，包括表单验证、网页内容操作、动态加载内容、网页动画、响应用户事件等。它可以与HTML和CSS紧密集成，通过修改DOM（文档对象模型）以改变网页的外观和行为。JavaScript还支持许多现代Web技术，如AJAX（异步JavaScript和XML）和HTML5的各种API。

JavaScript语言本身具有面向对象编程的特性，并提供了许多内置功能和对象，如数组、日期、数学等。此外，许多库和框架，如jQuery、React和Vue.js，也是用JavaScript编写的，使开发人员可以更高效地构建复杂的Web应用程序。

总的来说，JavaScript是一种强大和通用的脚本语言，它为Web开发提供了丰富的功能和交互性，使得网页可以更加动态和灵活。

JavaScript特点

1. 解释型脚本语言
   JavaScript 是一种解释型脚本语言，与 C、C++ 等语言需要先编译再运行不同，使用 JavaScript 编写的代码不需要编译，可以直接运行。
2. 面向对象
   JavaScript 是一种面向对象语言，使用 JavaScript 不仅可以创建对象，也能操作使用已有的对象。
3. 弱类型
   JavaScript 是一种弱类型的编程语言，对使用的数据类型没有严格的要求，例如您可以将一个变量初始化为任意类型，也可以随时改变这个变量的类型。
4. 动态性
   JavaScript 是一种采用事件驱动的脚本语言，它不需要借助 Web 服务器就可以对用户的输入做出响应，例如我们在访问一个网页时，通过鼠标在网页中进行点击或滚动窗口时，通过 JavaScript 可以直接对这些事件做出响应。
5. 跨平台
   JavaScript 不依赖操作系统，在浏览器中就可以运行。因此一个 JavaScript 脚本在编写完成后可以在任意系统上运行，只需要系统上的浏览器支持 JavaScript 即可。

二、JavaScript基础语法和核心概念

JavaScript 标识符、关键字、保留字、大小写和字面量等概念：

• 标识符（Identifier），就是名字。JavaScript 中的标识符包括变量名、函数名、参数名、属性名、类名等。
• • 第一个字符必须是字母、下划线（_）或美元符号（$）。
• • 除了第一个字符外，其他位置可以使用 Unicode 字符。一般建议仅使用 ASCII 编码的字母，不建议使用双字节的字符。
• • 不能与 JavaScript 关键字、保留字重名。
• • 可以使用 Unicode 转义序列。例如，字符 a 可以使用“\u0061”表示。
• 关键字（Keyword）就是 JavaScript 语言内部使用的一组名字（或称为命令）。这些名字具有特定的用途，用户不能自定义同名的标识符，具体说明如表所示。
  
• 保留字就是 JavaScript 语言内部预备使用的一组名字（或称为命令）。这些名字目前还没有具体的用途，是为 JavaScript 升级版本预留备用的，建议用户不要使用。具体说明如表所示。
  
• 区分大小写
• 字面量（Literal）也叫直接量，就是具体的值，即能够直接参与运算或显示的值，如字符串、数值、布尔值、正则表达式、对象直接量、数组直接量、函数直接量等。

1.变量

变量主要用来用来存储数据。

变量的命名规则

在 JavaScript 中，变量名称需要遵循标识符的命名规则，如下所示：

• 变量名中可以包含数字、字母、下划线_、美元符号$；
• 变量名中不能出现汉字；
• 变量名中不能包含空格；
• 变量名不能是 JavaScript 中的关键字、保留字；
• 变量名不能以数字开头，即第一个字符不能为数字。
  驼峰命名法
• 大驼峰：每个单词首字母大写，例如 FileType、DataArr；
• 小驼峰：第一个单词首字母小写后面的单词首字母大写，例如 fileType、dataArr；

变量定义

定义变量需要使用var关键字，语法格式如下：

var 变量名;
var str; //用来存储字符串
var age; //用来存储年龄
var prePage; //用来存储上一页

变量定义后，可以使用等于号=来为变量赋值，等号左边的为变量的名称，等号右边为要赋予变量的值。

2.数据类型

• 基本数据类型（值类型）：字符串（String）、数字（Number）、布尔（Boolean）、空（Null）、未定义（Undefined）、Symbol；
• 引用数据类型：对象（Object）、数组（Array）、函数（Function）。

JS 基本数据类型

1. String 类型
   字符串（String）类型是一段以单引号’'或双引号""包裹起来的文本，例如 ‘123’、“abc”。

定义字符串时，如果字符串中包含引号，可以使用反斜杠\来转义字符串中的引号，或者选择与字符串中不同的引号来定义字符串
2) Number 类型
数值（Number）类型用来定义数值，JavaScript 中不区分整数和小数（浮点数），统一使用 Number 类型表示。

var num1 = 123;     // 整数
var num2 = 3.14;    // 浮点数
var y=123e5;      // 123 乘以 10 的 5 次方，即 12300000
var z=123e-5;     // 123 乘以 10 的 -5 次方，即 0.00123

特殊值

• Infinity：用来表示正无穷大的数值，一般指大于 1.7976931348623157e+308 的数；
• -Infinity：用来表示负无穷大的数值，一般指小于 5e-324 的数；
• NaN：即非数值（Not a Number 的缩写），用来表示无效或未定义的数学运算结构，例如 0 除以 0。

3. Boolean 类型
   布尔（Boolean）类型只有两个值，true（真）或者 false（假），在做条件判断时使用的比较多，您除了可以直接使用 true 或 false 来定义布尔类型的变量外，还可以通过一些表达式来得到布尔类型的值。
4. Null 类型
   Null 是一个只有一个值的特殊数据类型，表示一个“空”值，即不存在任何值，什么都没有，用来定义空对象指针。
5. Undefined 类型
   Undefined 也是一个只有一个值的特殊数据类型，表示未定义。当我们声明一个变量但未给变量赋值时，这个变量的默认值就是 Undefined。

JS 引用数据类型

1. Object 类型
   JavaScript 中的对象（Object）类型是一组由键、值组成的无序集合，定义对象类型需要使用花括号{ }，语法格式如下：

{name1: value1, name2: value2, name3: value3, …, nameN: valueN}

其中 name1、name2、name3、…、nameN 为对象中的键，value1、value2、value3、…、valueN 为对应的值。
2) Array 类型
数组（Array）是一组按顺序排列的数据的集合，数组中的每个值都称为元素，而且数组中可以包含任意类型的数据。在 JavaScript 中定义数组需要使用方括号[ ]，数组中的每个元素使用逗号进行分隔；也可以使用 Array() 函数来创建数组。数组中的元素可以通过索引来访问。数组中的索引从 0 开始，并依次递增，也就是说数组第一个元素的索引为 0，第二个元素的索引为 1，第三个元素的索引为 2，以此类推。

//，分隔
[1, 2, 3, 'hello', true, null]
//Arry函数
var arr = new Array(1, 2, 3, 4);
console.log(arr);       // 输出 [1, 2, 3, 4]
//索引
var arr = [1, 2, 3.14, 'Hello', null, true];
console.log(arr[0]);  // 输出索引为 0 的元素，即 1
console.log(arr[5]);  // 输出索引为 5 的元素，即 true
console.log(arr[6]);  // 索引超出了范围，返回 undefined

3. Function 类型
   函数（Function）是一段具有特定功能的代码块，函数并不会自动运行，需要通过函数名调用才能运行。

function sayHello(name){
    return "Hello, " + name;
}
var res = sayHello("Peter");
console.log(res);  // 输出 Hello, Peter

3.运算符

算术运算符

赋值运算符

字符串运算符

JavaScript 中的+和+=运算符除了可以进行数学运算外，还可以用来拼接字符串，其中：

• +运算符表示将运算符左右两侧的字符串拼接到一起；
• +=运算符表示先将字符串进行拼接，然后再将结果赋值给运算符左侧的变量。

自增、自减运算符

比较运算符

比较运算符用来比较运算符左右两侧的表达式，比较运算符的运算结果是一个布尔值，结果只有两种，不是 true 就是 false。

逻辑运算符

逻辑运算符通常用来组合多个表达式，逻辑运算符的运算结果是一个布尔值，只能有两种结果，不是 true 就是 false。

位运算符

位运算符用来对二进制位进行操作

4.条件语句

几种不同形式的条件判断语句：

• if 语句；
• if else 语句；
• if else if else 语句；
• switc case 语句。

if 语句

if 语句是 JavaScript 中最简单的条件判断语句，语法格式如下：

if(条件表达式){
// 要执行的代码; }

if else 语句

if else 语句是 if 语句的升级版，它不仅可以指定当表达式成立时要执行的代码，还可以指定当表达式不成立时要执行的代码，语法格式如下：

if(条件表达式){
// 当表达式成立时要执行的代码 }else{
// 当表达式不成立时要执行的代码 }

if else if else 语句

if 和 if else 语句都只有一个条件表达式，而 if else if else 语句是它们更高级的形式，在 if else if else 语句中允许您定义多个条件表达式，并根据表达式的结果执行相应的代码，语法格式如下：

if (条件表达式 1) {
// 条件表达式 1 为真时执行的代码 } else if (条件表达式 2) {
// 条件表达式 2 为真时执行的代码 } … else if (条件表达式N) {
// 条件表达式 N 为真时执行的代码 } else {
// 所有条件表达式都为假时要执行的代码 }

switch case语句

switch 语句根据表达式的值，依次与 case 子句中的值进行比较：

• 如果两者相等，则执行其后的语句段，当遇到 break 关键字时则跳出整个 switch 语句。
• 如果不相等，则继续匹配下一个 case。
• switch 语句包含一个可选的 default 关键字，如果在前面的 case 中没有找到相等的条件，则执行 default 后面的语句段。
  switch case 语句的语法格式如下：

switch (表达式){
case value1:
statements1 // 当表达式的结果等于 value1 时，则执行该代码
break;
case value2:
statements2 // 当表达式的结果等于 value2 时，则执行该代码
break;
…
case valueN:
statementsN // 当表达式的结果等于 valueN 时，则执行该代码
break;
default :
statements // 如果没有与表达式相同的值，则执行该代码 }

switch 语句的执行流程（工作原理）如下图所示：

break 关键字
switch 语句是逐行执行的，当 switch 语句找到一个与之匹配的 case 子句时，不仅会执行该子句对应的代码，还会继续向后执行，直至 switch 语句结束。为了防止这种情况产生，需要在每个 case 子句的末尾使用 break 来跳出 switch 语句。

break 除了可以用来跳出 switch 语句外，还可以用来跳出循环语句（for、for in、while、do while 等），后面我们会详细介绍。
case 子句
case 子句可以省略语句，这样当匹配时，不管下一个 case 条件是否满足，都会继续执行下一个 case 子句的语句。
default语句
default 是 switch 子句，可以位于 switch 内任意位置，不会影响其它 case 子句的正常执行。下面结合示例介绍使用 default 语句应该注意 3 个问题。
default 语句与 case 语句简单比较如下：

• 语义不同：default 为默认项，case 为判例。
• 功能扩展：default 选项是唯一的，不可以扩展。而 case 选项是可扩展的，没有限制。
• 异常处理：default 与 case 扮演的角色不同，case 用于枚举，default 用于异常处理。

5.循环语句

while 循环语法

JS while 循环的语法格式如下：

while (条件表达式) {
// 要执行的代码 }

while 循环在每次循环之前，会先对条件表达式进行求值，如果条件表达式的结果为 true，则执行{ }中的代码，如果条件表达式的结果为 false，则退出 while 循环，执行 while 循环之后的代码。

while 循环的执行流程如下图所示：

do while 循环语法

JS do while 循环的语法格式如下：

do {
// 需要执行的代码 } while (条件表达式);

do while 循环的执行流程如下图所示：

for 循环语法

JS for 循环适合在已知循环次数时使用，语法格式如下：

for(initialization; condition; increment) {
// 要执行的代码 }

for 循环中包含三个可选的表达式 initialization、condition 和 increment，其中：

• initialization：为一个表达式或者变量声明，我们通常将该步骤称为“初始化计数器变量”，在循环过程中只会执行一次；
• condition：为一个条件表达式，与 while 循环中的条件表达式功能相同，通常用来与计数器的值进行比较，以确定是否进行循环，通过该表达式可以设置循环的次数；
• increment：为一个表达式，用来在每次循环结束后更新（递增或递减）计数器的值。
  for 循环中的三个表达式
  JS for 循环中括号中的三个表达式是可以省略的，但是用于分隔三个表达式的分号不能省略，如下例所示：

// 省略第一个表达式
var i = 0;
for (; i < 5; i++) {
    // 要执行的代码
}
// 省略第二个表达式
for (var y = 0; ; y++) {
    if(y > 5){
        break;
    }
    // 要执行的代码
}
// 省略第一个和第三个表达式
var j = 0;
for (; j < 5;) {
    // 要执行的代码
    j++;
}
// 省略所有表达式
var z = 0;
for (;;) {
    if(z > 5){
        break;
    }
    // 要执行的代码
    z++;
}

for in循环

for in 循环是一种特殊类型的循环，也是普通 for 循环的变体，主要用来遍历对象，使用它可以将对象中的属性依次循环出来，其语法格式如下：

for (variable in object) {
// 要执行的代码 }

其中，variable 为一个变量，每次循环时这个变量都会被赋予不同的值，我们可以在{ }中使用这个变量来进行一系列操作；object 为要遍历的对象，在每次循环中，会将 object 对象中的一个属性的键赋值给变量 variable，直到对象中的所有属性都遍历完。

for of 循环

for of 循环的语法格式如下：

for (variable of iterable) {
// 要执行的代码 }

其中，variable 为一个变量，每次循环时这个变量都会被赋予不同的值，我们可以在后面的{ }中使用这个变量来进行一系列操作；iterable 为要遍历的内容，在每次循环中，会将 iterable 中的一个值赋值给变量 variable，直到 iterable 中的所有值都遍历完。

跳出循环

1. break 语句
   使用 break 语句跳出 for 循环：

for (var i = 0; i < 10; i++) {
    if(i == 5) {
        break;
    }
    document.write("i = " + i + "<br>");
}
document.write("循环之外的代码");

2. continue 语句
   continue 语句用来跳过本次循环，执行下次循环。当遇到 continue 语句时，程序会立即重新检测条件表达式，如果表达式结果为真则开始下次循环，如果表达式结果为假则退出循环。

break 语句用来跳出整个循环，执行循环后面的代码；continue 语句用来跳过当次循环，继续执行下次循环。

使用 continue 语句跳出 for 循环：

for (var i = 0; i < 10; i++) {
    if(i % 2 == 0) {
        continue;
    }
    document.write(i + "&nbsp;");
}

6.函数定义和使用

定义函数

JS 函数声明需要以 function 关键字开头，之后为要创建的函数名称，function 关键字与函数名称之间使用空格分开，函数名之后为一个括号( )，括号中用来定义函数中要使用的参数（多个参数之间使用逗号,分隔开），一个函数最多可以有 255 个参数，最后为一个花括号{ }，花括号中用来定义函数的函数体（即实现函数的代码），如下所示：

function functionName(parameter_list) {
// 函数中的代码 }

调用函数

一旦定义好了一个函数，我们就可以在当前文档的任意位置来调用它。调用函数非常简单，只需要函数名后面加上一个括号即可，例如 alert()、write()。注意，如果在定义函数时函数名后面的括号中指定了参数，那么在调用函数时也需要在括号中提供对应的参数。

参数的默认值

在定义函数时，您可以为函数的参数设置一个默认值，这样当我们在调用这个函数时，如果没有提供参数，就会使用这个默认值作为参数值

函数返回值

在函数中可以使用 return 语句将一个值（函数的运行结果）返回给调用函数的程序，这个值可以是任何类型，例如数组、对象、字符串等。对于有返回值的函数，我们可以会使用一个变量来接收这个函数的返回值

函数表达式

函数表达式与声明变量非常相似，是另外一种声明函数的形式，语法格式如下：

var myfunction = function name(parameter_list){
// 函数中的代码 };

参数说明如下：

• myfunction：变量名，可以通过它来调用等号之后的函数；
• name：函数名，可以省略（一般情况下我们也会将其省略），如果省略那么该函数就会成为一个匿名函数；
• parameter_list：为参数列表，一个函数最多可以有 255 个参数。

三、DOM（文档对象模型）操作

文档对象模型（Document Object Model，简称 DOM），是一种与平台和语言无关的模型，用来表示 HTML 或 XML 文档。文档对象模型中定义了文档的逻辑结构，以及程序访问和操作文档的方式。

当网页加载时，浏览器就会自动创建当前页面的文档对象模型（DOM）。在 DOM 中，文档的所有部分（例如元素、属性、文本等）都会被组织成一个逻辑树结构（类似于族谱），树中每一个分支的终点称为一个节点，每个节点都是一个对象，借助 DOM 您可以使用 JavaScript 来访问、修改、删除或添加 HTML 文档中的任何内容，如下图所示：

1.Document 对象

当浏览器加载一个 HTML 文档时，会创建一个 Document 对象，Document 对象是 DOM 树中所有节点的根节点。通过 Document 对象我们可以访问 HTML 文档中的所有元素。

2.Document 对象中的属性

3.Document 对象中的方法

示例

1. 获取元素：

// 通过ID获取元素
const elementById = document.getElementById("myElement");

// 通过类名获取元素
const elementsByClass = document.getElementsByClassName("myClass");

// 通过标签名获取元素
const elementsByTag = document.getElementsByTagName("div");

// 通过CSS选择器获取元素（使用querySelector或querySelectorAll）
const elementBySelector = document.querySelector("#myElement");
const elementsBySelectorAll = document.querySelectorAll(".myClass");

2. 修改元素属性和内容：

// 修改元素属性
element.setAttribute("src", "image.jpg");

// 修改元素内容
element.innerHTML = "<strong>Hello, World!</strong>";

// 获取或修改元素文本内容
const textContent = element.textContent;
element.textContent = "New text content";

3. 添加、移除和修改元素样式：

// 添加CSS类名
element.classList.add("newClass");

// 移除CSS类名
element.classList.remove("oldClass");

// 切换CSS类名
element.classList.toggle("active");

// 修改元素样式
element.style.backgroundColor = "red";
element.style.fontSize = "16px";

4. 添加、移除和处理事件：

// 添加事件监听器
element.addEventListener("click", handleClick);

// 移除事件监听器
element.removeEventListener("click", handleClick);

// 处理事件
function handleClick(event) {
  // 处理点击事件
}

这些只是DOM操作的一部分示例，DOM API提供了更多的方法和属性来操作和操纵页面元素。通过使用DOM操作，JavaScript可以实现动态的页面交互和内容修改，使得网页具有更丰富和灵活的功能。

四、事件处理

当用户与网页进行交互时发生的事情，您可以使用 JavaScript 中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。
一般情况下事件的名称都是以单词on开头的，例如点击事件 onclick、页面加载事件 onload 等。下表中列举了一些 JavaScript 中常用的事件：

事件绑定
事件只有与 HTML 元素绑定之后才能被触发，为 HTML 元素绑定事件处理程序的方法由很多，最简单的就是通过 HTML 事件属性来直接绑定事件处理程序，例如 onclick、onmouseover、onmouseout 等属性。

以 onclick 属性为例，通过该属性我们可以为指定的 HTML 元素定义鼠标点击事件（即在该元素上单击鼠标左键时触发的事件），示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <button type="button" onclick="myBtn()">按钮</button>
    <script type="text/javascript">
        function myBtn(){
            alert("Hello World!");
        }
    </script>
</body>
</html>

五、异步编程

JavaScript中的异步编程是一种处理和管理非阻塞操作的编程方式。在传统的同步编程中，代码会按照顺序一行一行地执行，当遇到需要等待的操作时，程序会暂停执行直到得到结果。这种方式在处理耗时的操作时会导致程序的阻塞，影响用户体验。

异步编程通过使用回调函数、Promise、async/await等机制，可以使程序在等待某些结果时继续执行其他任务，而不会阻塞整个程序的执行。这样可以提高程序的响应性和性能。

在JavaScript中，常见的异步编程方式有：

1. 回调函数：将一个函数作为参数传递给异步操作，并在异步操作完成后调用该函数来处理结果。
   示例：

function fetchData(callback) {
  // 模拟异步请求
  setTimeout(function() {
    const data = 'Hello, World!';
    callback(data);
  }, 1000);
}

function processData(data) {
  console.log(data);
}

fetchData(processData);

2. Promise：Promise是一种表示异步操作的对象，它可以是未来某个时间点可用的值。通过使用Promise可以更方便地进行异步操作的处理和链式调用。
   示例：

function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      const data = 'Hello, World!';
      resolve(data);
    }, 1000);
  });
}

fetchData()
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

3. async/await：async函数是一种声明异步函数的方式，它可以通过await来暂停函数的执行，直到异步操作完成并返回结果。使用async/await可以像编写同步代码一样编写异步代码。
   示例：

function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      const data = 'Hello, World!';
      resolve(data);
    }, 1000);
  });
}

async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

getData();

这些是JavaScript中常用的异步编程方式，通过合理地运用它们，可以更好地处理和管理异步操作，提高程序的性能和用户体验。

try catch用法：异常处理
JavaScript 编程中的错误大致可以分为以下三种类型：

• 语法错误：也称为解析错误，一般是因为代码存在某些语法错误引起的。当发生语法错误时，代码会停止运行；

• 运行时错误：也称为异常，发生在程序运行期间，例如调用未定义的方法、读取不存在的文件等，发生运行时错误也会终止代码运行；

• 逻辑错误：是最难发现的一种错误，逻辑错误通常是因为代码存在瑕疵，导致程序输出意外的结果或终止运行。
  错误和异常的区别

• 错误（Error）是在代码运行之前出现的，在运行 JavaScript 程序之前，JavaScript 解释器会先对代码进行检查，如果代码有误，例如某些语法错误，浏览器就会报出相应的错误，只有将错误修正后，代码才能运行。

• 异常（Exception）是在代码运行中出现的，例如调用某个未定义的方法、读取不存在的文件等。在出现异常之前，代码的运行并不受影响，当出现异常时，会在浏览器控制台输出错误信息，并终止程序的运行。
  JS 异常处理
  异常处理的目的是捕捉产生异常的代码，使整个程序不会因为异常而终止运行。在 JavaScript 中，您可以使用 try catch 语句来捕获异常，并做出相应处理，语法格式如下：

try {
// 可能会发生异常的代码 } catch(error) {
// 发生异常时要执行的操作 }

我们可以将任何可能发生异常的代码放到 try 语句块中，并在 catch 语句块中定义处理异常的方法。如果 try 语句块中的代码发生错误，代码会立即从 try 语句块跳转到 catch 语句块中，如果 try 语句块中代码没有发生错误，就会忽略 catch 语句块中的代码。
当 try 语句块中的代码出现异常时，会创建并抛出一个 Error 对象（例如上面代码内catch(error)中的 error），对象中包含两个属性，如下所示：

• name：错误的类型；
• message：对错误的描述信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        try {
            var title = "JavaScript";
            document.write(title);
            // 调用一个未定义的变量
            document.write(str);
            // 若发生错误，则不会执行以下行
            alert("所有语句都已成功执行。");
        } catch(error) {
            // 处理错误
            alert("错误信息: " + error.message);
        }
        // 继续执行下面的代码
        document.write("<p>Hello World!</p>");
    </script>
</body>
</html>

try catch finally 语句
在 try catch 语句的后面，还可以添加一个 finally 语句块，无论 try 语句块中的代码是否发生错误，finally 语句中的代码都会执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        // 接收用户输入的参数
        var num = prompt("输入一个 0 到 100 的数字");
        // 获取当前时间
        var start = Date.now();
        try {
            if(num > 0 && num <= 100) {
                console.log(Math.pow(num, num)); // 指数幂的基
            } else {
                console.log("输入的值无效!");
            }
        } catch(e) {
            console.log(e.message);
        } finally {
            // 显示执行代码所用的时间
            console.log("代码执行花费了：" + (Date.now() - start) + "ms");
        }
    </script>
</body>
</html>

抛出错误
手动抛出错误。抛出错误需要使用 throw 语句，语法格式如下：

throw expression;

其中 expression 为要抛出的异常，可以是任何类型的值，例如对象、字符串、数组等，推荐使用对象类型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script>
        function squareRoot(number) {
            // 如果数字为负数，则抛出错误
            if(number < 0) {
                throw new Error("抱歉，无法计算负数的平方根！");
            } else {
                console.log(Math.sqrt(number));
            }
        }
        try {
            squareRoot(16);
            squareRoot(625);
            squareRoot(-9);
            squareRoot(100);
            // 若抛出错误，则不会执行下面的行
            console.log("所有函数都执行成功。");
        } catch(e) {
            // 处理错误
            console.log(e.message);
        }
    </script>
</body>
</html>

4
25
抱歉，无法计算负数的平方根！

错误类型

六、常用JavaScript库和框架

1.jQuery

jQuery是一个快捷、简洁且功能强大的JavaScript库。它简化了JavaScript在各种浏览器上的开发任务，提供了简洁的API来操纵HTML文档、处理事件、执行动画效果等。jQuery提供了跨浏览器支持，并极大地简化了DOM操作和AJAX调用。

2.React

React是一个由Facebook开发的用于构建用户界面的JavaScript库。它使用组件化开发模式，并采用虚拟DOM（Virtual DOM）的技术来提高性能。React使得构建复杂的用户界面变得更加简单、高效和可维护。它被广泛应用于Web应用和移动应用开发。

3.Vue

Vue.js是一个渐进式JavaScript框架，用于构建交互式的用户界面。它注重可维护性和易用性，提供了响应式的数据绑定和组件化的架构。Vue.js具有简单的API和灵活的扩展性，使得开发人员可以快速构建复杂的单页面应用程序（SPA）和可复用的组件。

---

总结

在我的JavaScript学习过程中，我学到了许多重要的概念和技术。首先，我了解到JavaScript是一种广泛应用于Web开发中的高级编程语言。它可以在网页上实现动态功能和交互性。

我学习了JavaScript的基本语法、数据类型和操作符。我了解了如何声明和定义变量，以及如何使用条件语句（如if-else和switch）、循环语句（如for和while）来控制程序的流程。我还学会了如何使用函数来组织和重复使用代码。

DOM操作是我学习过程中的一个重要部分。通过DOM，我可以使用JavaScript来访问和操作网页上的元素、属性和样式。我学会了如何通过选择器和API方法来获取元素，并且可以修改它们的属性、内容和样式。我还学会了如何添加和处理事件，使得网页可以响应用户的操作。

异步编程是另一个重要的概念。通过使用回调函数、Promise和async/await等技术，我可以处理和管理异步操作，以提高程序的性能和用户体验。我了解了如何处理异步请求，如AJAX调用，以及如何避免回调地狱。

还有一些重要的概念和技术，例如面向对象编程（OOP）、模块化开发、错误处理、正则表达式等等。这些都是在实际项目中非常有用的知识点。

在学习JavaScript时，我发现不仅要掌握语法和概念，还要进行实践。通过编写小项目和挑战，我能够更好地理解和应用所学的知识。

JavaScript的生态系统非常丰富，还有许多库和框架可以使用。我开始接触了一些常见的库和框架，如jQuery、React和Vue.js，它们提供了更高级和更便捷的功能，以及更好的开发体验。

总的来说，JavaScript是一门非常有用且强大的编程语言。通过学习其语法、DOM操作、异步编程和其他重要概念，我能够构建出交互性强、效果炫酷的网页应用。我非常享受在Web开发中使用JavaScript的过程，我期待继续深入学习和应用这门语言。