| Mi Manchi = yuan = Whatever is worth doing at all is worth doing well

# 变量

# 认识 JavaScript

JavaScript 是一种基于对象和事件驱动的简单描述性语言。它从服务器端被下载到客户端，由浏览器执行。

它可用于 HTML 和 Web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

其具有的特点如下：

一般用来编写客户端的脚本。
主要是用来在 HTML 页面中添加交互行为。
是一种解释性语言，边解释边执行。

怎么在 HTML 中引入 JavaScript 呢？

引入方式与 CSS 相似，有以下三种方式：

在 HTML 标签中直接引入，针对一些特别简短的 JavaScript 代码。
使用 script 标签可以将 JavaScript 代码嵌入到 HTML 文档的 head 和 body 里。
使用外部 JavaScript 文件，将 JavaScript 脚本代码写入一个后缀为 .js 的文件中，通过给 script 标签设置 src 属性的方式，引入这个文件。

# JavaScript 变量

在 JavaScript 中，使用 var 声明变量。

其语法格式为：

var 变量名 = 值;

在 JavaScript 中给变量命名应该遵循以下原则：

变量名由字母、下划线、 $ 或数字组成，并且必须由字母、下划线、 $ 开头。
变量名不能命名为系统关键字和保留字。

新建一个 index.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<script>
	var str = "Hello JS!";
	var num = 1;
	document.write(str); /* 在页面上输出变量 str 的值 */
	document.write(num); /* 在页面上输出变量 num 的值 */
	</script>
	</head>
	<body></body>
	</html>

1677986842861

# 数据类型

知识点

基本数据类型
引用数据类型
typeof

# 数据类型的分类

在 JavaScript 中数据类型分为两种：

基本数据类型 ：字符串（string）、数字（number）、布尔（boolean）、空（null）、未定义（undefined）。
引用数据类型 ：对象（object）。

为什么需要这么多种数据类型呢？

不同的数据类型占有的存储空间不同，如果不标识数据类型的话，计算机会给不同的数据类型分配相同的储存空间，这就造成了资源浪费。
不同的数据类型在进行运算的时候，需要进行转换，同类型的数据才能进行计算，比如两个整型相加（+）是算数运算（1+1=2），两个字符串相加（+）是字符串拼接（'1'+'2'='12'）。

那么为什么又要分为基本数据类型和引用数据类型呢？

传参方式不同，基本数据类型是 值传递 ，而引用数据类型是 地址传递 。
储存方式不同，基本数据类型是 栈存储 ，而引用数据类型是 堆存储 。

# 基本数据类型的使用

新建一个 index.html 文件，在文件中写入以下内容：

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var a = 5;
	var b = a;
	a++; // 相当于 a+1 的意思
	console.log("a 的值为：" + a);
	console.log("b 的值为：" + b);
	</script>
	</body>
	</html>

在上述代码中， console.log 可以在控制台输出值，我们也可以使用 document.write 在页面输出值的方式来查看。

使用 Chrome 浏览器，按 F12，在控制台可以看到输出的值，显示如下所示：

1677987231131

从上图我们可以看到，a 输出的值为 6，因为执行了 a++ 的操作；而 b 的值为 5，是因为 a = 5 时，把 5 这个值赋给了 b。

# 引用数据类型的使用

新建一个 index1.html 文件，在文件中写入以下内容：

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var a = new Object(); // 创建一个对象
	a.name = "小花";
	var b = a;
	a.name = "小蓝";
	console.log("对象 a 的 name 属性值为：" + a.name);
	console.log("对象 b 的 name 属性值为：" + b.name);
	</script>
	</body>
	</html>

在控制台我们可以看到如下所示的输出

1677987289100

从上图我们可以看到 a.name 和 b.name 的输出都是 “小蓝”，因为引用类型传递的是地址，所以 a 对象的数据改变，b 对象的数据也会改变。

# 查看数据类型

使用 typeof 关键字来查看数据类型。

新建一个 index2.html 文件，在文件中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var a = 1; // 整型
	var b = "2"; // 字符串
	var c = true; // 布尔类型
	console.log("a 的数据类型是：" + typeof a);
	console.log("b 的数据类型是：" + typeof b);
	console.log("c 的数据类型是：" + typeof c);
	</script>
	</body>
	</html>

在控制台可以看到如下输出：

1677987335989

# 运算符和表达式

知识点

算术运算符
比较运算符
赋值运算符
逻辑运算符
条件运算符

# 算术运算符

在 JavaScript 中有七种算术运算符：加 + 、减 - 、乘 * 、除 / 、取余 % 、自加 ++ 、自减 -- 。

新建一个 index.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<script>
	var result1 = 1 + 2; // 对 1 和 2 进行加法运算
	document.write(result1 + "<br>");
	var result2 = 7 - 5; // 对 7 和 5 进行减法运算
	document.write(result2 + "<br>");
	var result3 = 8 / 2; // 对 8 和 2 进行除法运算
	document.write(result3 + "<br>");
	var result4 = 6 * 3; // 对 6 和 3 进行乘法运算
	document.write(result4 + "<br>");
	var a = 10;
	var result5 = ++a; // 变量 a 做自加
	document.write(result5 + "<br>");
	var b = 10;
	var result6 = --b; // 变量 b 做自减
	document.write(result6 + "<br>");
	var result7 = 9 % 2; // 对 9 和 2 做余运算
	document.write(result7 + "<br>");
	</script>
	</head>
	<body></body>
	</html>

1677987477723

在上面代码中我们使用 ++a 对变量 a 做自加运算，得到的结果是 11；使用 --b 对变量 b 做自减运算，得到的结果是 9。同学们有没有想过，如果我们把 ++ 和 -- 放在变量的后面会发生什么呢

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<script>
	var a;
	var i = 10;
	a = i++;
	document.write("变量 a 的值为 " + a + "<br>");
	document.write("变量 i 的值为 " + i);
	</script>
	</head>
	<body></body>
	</html>

效果如下：

1677987533132

从上面可以看出，把 ++ 写在变量后面，先执行了赋值运算，所以变量 a 输出的值为 10，然后 i 再进行自加，所以变量 i 输出的值为 11。

比较运算符是比较操作数，并根据表达式判断为真或为假，来返回一个布尔类型的值。

在 JavaScript 中有如下表所示的比较运算符。

运算符	描述
等于（==）	当等于号左右两边的操作数相等时，返回 `true` 。
不等于（!=）	当不等号左右两边的操作数不相等时，返回 `true` 。
全等（===）	当全等号左右两边的操作数相等且类型相同时，返回 `true` 。
不全等（!==）	当不全等号左右两边的操作数不相等或者类型不相同时，返回 `true`
大于（>）	当大于号左边的操作数大于右边的操作数时，返回 `true` 。
大于等于（>=）	当大于等于号左边的操作数大于或者等于右边的操作数时，返回 `true` 。
小于（<）	当小于号左边的操作数小于右边的操作数时，返回 `true` 。
小于等于（<=）	当小于等于号左边的操作数小于或者等于右边的操作数时，返回 `true` 。

这里我们来举个例子吧！👻

新建一个 index1.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<script>
	var a = 2 > 3;
	var b = 4 < 5;
	var c = 3 >= 1;
	var d = 3 <= 1;
	var e = 4 == 0;
	var f = 5 != 4;
	var g = 0 !== true;
	var h = 0 === true;
	document.write("2 > 3 的结果为 " + a + "<br>"); // 因 2 小于 3 所以结果为 false
	document.write("4 < 5 的结果为 " + b + "<br>"); // 因 4 小于 5 所以结果为 true
	document.write("3 >= 1 的结果为 " + c + "<br>"); // 因 3 大于等于 1 所以结果为 true
	document.write("3 <= 1 的结果为 " + d + "<br>"); // 因 3 不是小于等于 1 所以结果为 false
	document.write("4 == 0 的结果为 " + e + "<br>"); // 很显然 4 不等于 0 所以结果为 false
	document.write("5 != 4 的结果为 " + f + "<br>"); // 5 不等于 4 所以结果为 true
	document.write("0 !== true 的结果为 " + g + "<br>"); // 0 不全等于 true 所以结果为 true
	document.write("0 === true 的结果为 " + h); // 0 不全等于 true 所以结果为 false
	</script>
	</head>
	<body></body>
	</html>

1677987742075

比较运算符通常在流程控制语句中作为条件判断使用，

# 赋值运算符

在 JavaScript 中，有五种赋值运算符： = 、 += 、 -= 、 *= 、 /= 。

新建一个 index2.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<script>
	var a = 2;
	a += 2; // 相当于 a = a + 2
	document.write(a + "<br>");
	a -= 1; // 此时的 a = 4，相当于 a = a - 1
	document.write(a + "<br>");
	a = 6; // 此时的 a = 3，相当于 a = a 6
	document.write(a + "<br>");
	a /= 2; // 此时的 a = 18，相当于 a = a / 2
	document.write(a + "<br>");
	</script>
	</head>
	<body></body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

# 逻辑运算符

在 JavaScript 中，逻辑运算符包括：与 && 、或 || 、非 ! 。

假设 p 和 q 代表两个条件，我们用 0 代表假（false），用 1 代表真（true），其逻辑运算真值表可以如下所示：

图片描述

这里我们来举个例子吧！

新建一个 index3.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<script>
	var a = 0 && 1; // 0 和 1 做与运算，结果为 0
	var b = 0 \|\| 1; // 0 和 1 做或运算，结果为 1
	var c = !1; // 非 1 的结果为 false
	document.write("0 && 1 的结果为 " + a + "<br>");
	document.write("0 \|\| 1 的结果为 " + b + "<br>");
	document.write("!1 的结果为 " + c + "<br>");
	</script>
	</head>
	<body></body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

1677987834515

# 条件运算符

条件运算符也可叫三目运算符，你可以用来判断条件的真假，根据真假执行不同的语句。

条件运算符的使用格式如下：

条件表达式 ? 表达式1 : 表达式2

当条件表达式的结果为 true，则问号后面的「表达式 1」将会执行；如果条件表达式结果为 false，则冒号后面的「表达式 2」将会执行。

新建一个 index4.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<script>
	var a = 2,
	b = 1;
	var result = a > b ? "正确" : "错误";
	document.write(result);
	</script>
	</head>
	<body></body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

1677987878488

result = a > b ? "正确" : "错误" 判断变量 a 的值是否大于变量 b 的值。在代码中，给变量 a 赋值为 2，给变量 b 赋值为 1，所以 a 大于 b，满足条件，result 取值为 “正确”。

# 实验总结

在本节实验中给大家介绍了 JavaScript 中五种基本的运算符，这里我们一起来总结一下：

算术运算符：+、-、*、/、%、++、--
比较运算符：>、<、>=、<=、、!=、=、!==
赋值运算符：=、+=、-=、*=、/=
逻辑运算符：&&、||、!
条件运算符：条件表达式？表达式 1 : 表达式 2

# 分支与循环

知识点

分支结构
循环结构

# 分支结构

何为分支结构呢？

分支结构就是会根据条件判断来选择执行的路径。

在 JavaScript 中分支结构有两种：

if 语句。
switch 语句。

# if 语句

if 语句有以下三种形式：

单分支语句。
双分支语句。
多分支语句。

接下来我们就对这三种 if 语句分别做一下练习来了解它们之间的区别。

# 单分支语句

if... 语句的执行流程如下图所示：

1677988002915

语法格式为：

	if (条件表达式) {
	}

这里我们来举个例子吧！👻

新建一个 index.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var age = 15; // 定义名为 age 的变量，并赋值为 15
	// 判断 age 变量是否小于 18，判断为真，页面上输出 if 语句中的文字
	if (age < 18) {
	document.write("年龄低于 18 岁。");
	}
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

1677988029709

# 双分支语句

if...else 语句的执行流程如下图所示：

1677988073757

其语法格式为：

	if (条件表达式) {
	} else {
	}

这里我们来举个例子吧！👻

新建一个 index1.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var age = 20; // 定义名为 age 的变量，并赋值为 20
	// 判断 age 变量是否小于 18，判断为真，输出年龄低于 18 岁；判断为假，输出年龄大于 18 岁
	if (age < 18) {
	document.write("年龄低于 18 岁。");
	} else {
	document.write("年龄大于 18 岁。");
	}
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

1677988094785

# 多分支语句

if...else if...else 执行流程如下图所示：

1677988132394

其语法格式为：

	if (条件表达式) {
	} else if (条件表达式) {
	} else {
	}

这里我们来举个例子吧

新建一个 index2.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var score = 65; // 定义一个名为 score 的变量，并赋值为 65
	// 判断 score 是否小于 60，若为真，则输出成绩不合格；若为假，又判断 score 是否大于等于 60 且小于 80，若为真输出成绩良；若为假，输出成绩优
	if (score < 60) {
	document.write("成绩不合格");
	} else if (60 <= score && score < 80) {
	document.write("成绩良");
	} else {
	document.write("成绩优");
	}
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

1677988176391

# switch 语句

switch 语句的语法格式为：

	switch (条件) {
	case 条件1:
	break;
	case 条件2:
	break;
	default:
	break;
	}

这里我们来举个例子吧！

新建一个 index3.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var score = 5; // 定义一个名为 score 的变量，且赋值为 5
	switch (
	score // 判断 score 是否有对应的编号，若有，在页面上输出相应的内容
	) {
	case 1:
	document.write("等级一");
	break;
	case 2:
	document.write("等级二");
	break;
	case 3:
	document.write("等级三");
	break;
	case 4:
	document.write("等级四");
	break;
	case 5:
	document.write("等级五");
	default:
	break;
	}
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

if 语句和 switch 语句都是分支结构，同学们有没有想过，它们之间有什么区别呢？我们在什么场景下使用呢？

先说说 switch，它是先设置一个表达式，表达式的值会与 case 后面接的值进行比较，若匹配到则执行；若不匹配，则退出。这相当于是，给你几个编有序号的盒子，你说出一个编号，若有，你可以打开这个盒子；若没有，游戏结束。

再说说 if，它是根据条件对值进行判断，当不满足条件你可以有另一种选择。

所以，当我们只需要对几个固定的值进行判断时，可以选择用 switch 语句，其他情况建议选择 if 语句，因为 if 语句可读性更强。

# 循环结构

环结构就是当满足判断条件，程序就一直在循环体中运行；当不满足条件时，退出循环。

这里会给大家介绍 JavaScript 中四种循环语句，分别是

while 语句
do...while 语句
for 语句
for...in 语句

# while 语句

while 语句是当满足条件时，便执行 while 语句中的内容，这种循环属于先判断再执行。

其语法格式为：

while (条件) {}

这里我们来举个例子吧！👻

新建一个 index4.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var num = 0;
	while (num < 10) {
	document.write(num);
	num++;
	}
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

1677988313644

# do...while 语句

do...while 语句是先执行一次循环体再判断是否符合条件。

其语法格式为：

do {} while (条件);

这里我们来举个例子吧！👻

新建一个 index5.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var num = 0;
	do {
	document.write(num);
	num++;
	} while (num < 10);
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# for 语句

for 语句，会设置一个初始值，循环条件，当不满足条件时退出循环。

其语法格式为：

for (初始化表达式; 条件表达式; 循环后的操作) {}

这里我们来举个例子吧！👻

新建一个 index6.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var num = 10;
	for (var n = 0; n < num; n++) {
	document.write(n);
	}
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# for...in 语句

for...in 语句循环一个指定的变量来循环指定对象的所有可枚举属性。

其语法格式为：

	for (i in obj) {
	}

这里我们来举个例子吧！👻

新建一个 index7.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var arr = ["小红", "小蓝", "小白", "小黑"];
	for (i in arr) {
	r = "欢迎" + arr[i] + "来到蓝桥云课。" + "</br>";
	document.write(r);
	}
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

从上图效果我们可以看到，当使用 for...in 去遍历数组时，返回的是数组元素的下标值。

# 函数

什么是函数呢？

函数是用来实现某个功能的，我们可以通过调用这个函数，重复使用该功能，这样就避免代码中出现重复的代码。

# 函数的使用

在 JavaScript 中有两种函数，一种是有返回值的函数，一种是没有返回值的函数。

定义函数的格式为：

	function 函数名(参数){
	...
	return 返回值;
	}

注意：参数可传递也可不传，返回值也是可有可无。

这里我们来举个例子吧！

新建一个 index.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	function Sum(a, b) {
	sum = a + b;
	document.write(a + "+" + b + "=" + sum);
	}
	Sum(4, 5);
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

在上面代码中，定义了一个名为 Sum 的函数，在函数里可以计算两个数的和，并在页面上显示出结果。

# 变量的作用域

知识点

全局作用域
局部作用域

# 变量作用域的使用

作用域是变量与函数的可访问范围，在 JavaScript 中，变量的作用域有全局作用域和局部作用域两种。

# 局部作用域

在函数内声明的变量为局部变量，作用域只在函数内部有效，也只能被函数内部访问。

注：正因为局部变量只作用于函数内部，所以不同函数在函数内部是可以使用相同名称的变量；函数开始执行时创建局部变量，函数执行完成后局部变量会自动销毁。

新建一个 index.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	function Test() {
	var str = "www.lanqiao.cn";
	document.write("我最喜欢的网站：" + str + "<br>");
	}
	Test();
	var str;
	document.write("函数外部：" + str);
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# 全局作用域

在函数外部声明的变量，即为全局变量。全局变量的作用域针对整个全局，简单来说，就是网页的所有脚本和函数都能够访问它。

这里我们来举个例子吧！👻

新建一个 index1.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var str = "www.lanqiao.cn";
	document.write("函数外部：" + str + "<br>");
	function Test() {
	document.write("函数内部：" + str);
	}
	Test();
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# 内置对象

本节实验带大家认识 JavaScript 中四种常见的内置对象，并给大家介绍每种对象的常用方法和属性。

知识点

数学对象
日期对象
数组对象
字符串对象

# 数学对象

JavaScript 中的数学对象为 Math，它的内部有一些数学的属性和函数方法。

Math 的常用属性如下表所示：

属性	描述
Math.E	自然对数的底数
Math.LN2	2 的自然对数
Math.PI	圆周率
Math.SQRT2	2 的平方根

Math 的常用方法如下表所示：

属性	描述
Math.abs(x)	返回一个数的绝对值。
Math.pow(x, y)	返回一个数的 y 次幂。
Math.random()	返回一个 0 到 1 之间的伪随机数（不包括 1）。
Math.sqrt(x)	返回一个数的平方根。
Math.round()	返回四舍五入后的整数。
Math.exp(x)	返回欧拉常数的参数次方。

这里我们来举个例子吧

建一个 index.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	document.write("圆周率为 " + Math.PI + "<br>");
	document.write("2 的平方根为 " + Math.SQRT2 + "<br>");
	document.write("自然对数的底数为 " + Math.E);
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# 日期对象

在 JavaScript 中，日期对象是 Date，用于处理日期和时间。

其常用方法如下所示：

方法	描述
getDate()	返回一个月的某一天。
getDay()	返回一周中的某一天。
getFullYear()	返回年份。
getHours()	返回小时。
getMonth()	返回月份。
getTime()	返回毫秒数。
setFullYear()	设置年份。
setDate()	设置一个月中的某一天。
setMonth()	设置月份。

新建一个 index1.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var date = new Date(); // 实例化 Date 对象
	var month = date.getMonth() + 1; // 获取月份，取值为 0（一月）到 11（十二月）之间的整数
	document.write(
	"今天是" +
	date.getFullYear() +
	"年" +
	month +
	"月" +
	date.getDate() +
	"日" +
	"<br>"
	);
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# 数组对象

在 JavaScript 中，数组对象是 Array ，在其语法格式为：

var 数组名 = new Array(元素1, 元素2,...,元素n);

注意：我们在定义数组时，不一定要写入元素，可以只定义一个空数组。

创建数组我们还可以简写为：

var 数组名 = [元素1, 元素2,...,元素n];

例如，我们定一个名为 nums 的数组。

var nums = [1, 2, 3];

在数组中，每一个子项都有其对应的编号，这样的编号被称为下标，下标从 0 开始。

1677989130205

当我们想要取出数组中的某个值时，下标就起作用了，比如我们取出数组中的第二个值 2。

nums[1];

在数组对象中，它有很多方法和属性帮助我们更加灵活地处理数组

# slice()

slice() 是用来做数组切片操作的，也就是取数组中的部分值，例如：

arr.slice(2, 4);

表示取名为 arr 的数组中下标从 2 到 4 的值。

这里我们来举个例子吧！👻

新建一个 index2.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var arr = ["苹果", "梨子", "橙子", "葡萄", "樱桃", "芒果"];
	document.write(arr.slice(1, 4));
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# unshift()

unshift() 可以在数组的头部增加新的元素。

使用格式：

数组名.unshift(待添加项);

这里我们来举个例子吧！👻

新建一个 index3.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var arr = ["苹果", "梨子", "橙子", "葡萄", "樱桃", "芒果"];
	arr.unshift("释迦果");
	document.write(arr);
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# shift()

shift() 可以删除数组的首元素。

使用格式：

数组名.shift();

这里我们来举个例子吧！👻

新建一个 index4.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var arr = ["苹果", "梨子", "橙子", "葡萄", "樱桃", "芒果"];
	arr.shift();
	document.write(arr);
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# sort()

sort() 可以给数组中的元素从小到大进行排序。

使用格式：

数组名.sort();

这里我们来举个例子吧！👻

新建一个 index5.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var arr = [2, 3, 4, 8, 1];
	document.write(arr.sort());
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# reverse()

reverse() 可以将数组中的元素进行逆序排列。

使用格式：

数组名.reverse();

这里我们来举个例子吧！👻

新建一个 index6.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var arr = ["一", "二", "三", "四"];
	document.write(arr.reverse());
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# join()

join() 可以将数组中的字符拼接成字符串。

使用格式：

数值名.join();

这里我们来举个例子吧！👻

新建一个 index7.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var arr = ["H", "e", "l", "l", "o"];
	document.write(arr.join(""));
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# 获取数组的长度

我们可以使用 length 来获取数组的长度。

使用格式：

数组名.length;

这里我们来举个例子吧！👻

新建一个 index8.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var arr = ["苹果", "梨子", "橙子", "葡萄", "樱桃", "芒果"];
	document.write("数组的长度为 " + arr.length);
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# concat()

concat() 可以将两个数组拼接在一起。

使用格式：

	// 将数组 2 拼接到数组 1 里
	数组1.concat(数组2);

这里我们来举个例子吧！👻

新建一个 index9.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var arr1 = ["柠檬", "苹果", "草莓"];
	var arr2 = ["葡萄", "西瓜", "柚子"];
	document.write(arr1.concat(arr2));
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# includes()

includes() 可以用来判断该数组中是否包含某个元素。

使用格式：

数组.includes(元素);

这里我们来举个例子吧！👻

新建一个 index10.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var arr = ["柠檬", "苹果", "草莓"];
	document.write("水果清单里有西瓜吗？" + arr.includes("西瓜") + "<br>");
	document.write("水果清单里有苹果吗？" + arr.includes("苹果"));
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# toString()

toString() 可以将数组中的值转换成字符串类型。

使用格式：

数组名.toString();

这里我们来举个例子吧！👻

新建一个 index11.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var arr = ["Hello", "string"];
	document.write("arr 的类型为 " + typeof arr + "<br>");
	document.write("arr.toString() 的类型为 " + typeof arr.toString());
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

typeof 是用来查看数据类型的。

# indexOf()

indexOf() 可以用来查找指定元素的下标值。

使用格式：

arr.indexOf(元素);

这里我们来举个例子吧！👻

新建一个 index12.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var arr = ["梨子", "西瓜", "梨子", "葡萄", "柚子"];
	document.write("返回梨子的索引：" + arr.indexOf("梨子") + "<br>");
	document.write("返回樱桃的索引：" + arr.indexOf("樱桃"));
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

注意：如果查找到多个匹配的元素时，返回的是第一个匹配的元素下标。

# 字符串对象

我们通常定义一个字符串，方法如下：

var str = "HELLO";

其实这是以种简写的方式，完整的定义方法如下：

var str = new String("HELLO");

从完整的字符串定义方式中，我们可以看出 String 就是字符串对象了。

接下来我们学一学字符串对象的属性和方法吧！

# 获取字符串长度

获取字符串的长度与获取数组的长度是一样的，都是使用 length 。

使用格式：

字符串.length;

这里我们来举个例子吧！👻

新建一个 index13.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var str = "HelloJavaScript";
	document.write("str 字符串的长度为 " + str.length);
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# toLowerCase()

toLowerCase() 可以把字符串的大写字母转换成小写字母。

使用格式：

字符串.toLowerCase();

这里我们来举个例子吧！👻

新建一个 index14.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var str = "HelloJavaScript";
	document.write(str.toLowerCase());
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# toUpperCase()

toUpperCase() 可以把字符串中的小写字母转换成大写字母。

使用格式：

字符串.toUpperCase();

这里我们来举个例子吧！👻

新建一个 index15.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var str = "HelloJavaScript";
	document.write(str.toUpperCase());
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# charAt()

charAt() 是用于根据指定下标从一个字符串中返回指定的字符。

使用格式：

字符串.charAt(下标值);

这里我们来举个例子吧！👻

新建一个 index16.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var str = "HelloJavaScript";
	document.write("第 7 个字符为 " + str.charAt(7)); // 获取下标为 7 的字符
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# substring()

substring() 可以通过下标来选取字符串中的部分字符。

使用格式：

字符串.substring();

这里我们来举个例子吧！👻

新建一个 index17.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var str = "HelloJavaScript";
	document.write("第 7-10 的字符为 " + str.substring(7, 10)); // 获取下标为 7-10 的字符
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# replace()

replace() 可以用来替换指定字符串的内容。

字符串.replace(待替换的字符串, 新的字符串);

这里我们来举个例子吧！👻

新建一个 index18.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var str = "HelloJavaScript";
	document.write(str.replace("JavaScript", "World")); // 替换指定字符串
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# split()

split 可以使用指定的分隔符将一个字符串分割成子字符串数组。

使用格式如下：

字符串.split();

这里我们来举个例子吧！👻

新建一个 index19.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var str = "Hello,Java,Script";
	var arr = str.split(","); // 已逗号划分字符串
	document.write("第一个元素为：" + arr[0] + "<br>");
	document.write("第二个元素为：" + arr[1] + "<br>");
	document.write("第三个元素为：" + arr[2] + "<br>");
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# indexOf()

indexOf() 是寻找某个字符在字符串中首次出现的位置。

使用格式：

字符串.indexOf(字符);

这里我们来举个例子吧！👻

新建一个 index20.html 文件，在其中写入以下内容。

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<body>
	<script>
	var str = "HelloJavaScript";
	document.write("a 首次出现的位置：" + str.indexOf("a"));
	</script>
	</body>
	</html>

启动 8080 端口，打开 Web 服务，可以看到如下结果。

图片描述

# 变量

# 认识 JavaScript

# JavaScript 变量

# 数据类型

# 数据类型的分类

# 基本数据类型的使用

# 引用数据类型的使用

# 查看数据类型

# 运算符和表达式

# 算术运算符

# 赋值运算符

# 逻辑运算符

# 条件运算符

# 实验总结

# 分支与循环

# 分支结构

# if 语句

# 单分支语句

# 双分支语句

# 多分支语句

# switch 语句

# 循环结构

# while 语句

# do...while 语句

# for 语句

# for...in 语句

# 函数

# 函数的使用

# 变量的作用域

# 变量作用域的使用

# 局部作用域

# 全局作用域

# 内置对象

# 数学对象

# 日期对象

# 数组对象

# slice()

# unshift()

# shift()

# sort()

# reverse()

# join()

# 获取数组的长度

# concat()

# includes()

# toString()

# indexOf()

# 字符串对象

# 获取字符串长度

# toLowerCase()

# toUpperCase()

# charAt()

# substring()

# replace()

# split()

# indexOf()

未命名

未命名