《JavaScript 从入门到精通》原书读书笔记（第2章）_前端javascript入门到精通笔记-CSDN博客

本文链接：https://blog.csdn.net/shw2080/article/details/145768683

二、JavaScript 基础

2.1、数据类型

每一种编程语言都有自己所支持的数据类型。JavaScript 的数据类型分为基本数据类型和复合数据类型。JavaScript 的基本数据类型有数值型、字符串型、布尔型以及两个特殊的数据类型。

2.1.1、数值型（number）

数值型（number）是 JavaScript 中最基本的数据类型。在 JavaScript 中，和其他程序设计语言（如 C 和Java ）的不同之处在于，它并不区别整型数值和浮点型数值。在 JavaScript 中，所有的数值都是由浮点型表示的。JavaScript 采用 IEEE754 标准定义的 64 位浮点格式表示数字，这意味着它能表示的最大值是±1.7976931348623157e+308，最小值是 5e-324。

当一个数字直接出现在 JavaScript 程序中时，我们称它为数值直接量（numericliteral）。JavaScript 支持数值直接量的形式有几种，下面将对这几种形式进行详细介绍。

注意：在任何数值直接量前加负号（-）可以构成它的负数。但是负号是一元求反运算符，它不是数值直接量语法的一部分。

（1）十进制

在 JavaScript 程序中，十进制的整数是一个由 0~9 组成的数字序列。例如：

JavaScript 的数字格式允许精确地表示 900719925474092（253）和 900719925474092（253）之间的所有整数（包括900719925474092（253）和 900719925474092（253））。但是使用超过这个范围的整数，就会失去尾数的精确性。需要注意的是，JavaScript 中的某些整数运算是对 32位的整数执行的，它们的范围从2147483648（231）到 2147483647（231-1）。

（2）十六进制

JavaScript 不但能够处理十进制的整型数据，还能识别十六进制（以16为基数）的数据。所谓十六进制数据，是以“0X”或“0x”开头，其后跟随十六进制的数字序列。十六进制的数字可以是 0~9 中的某个数字，也可以是a（A）到f（F）中的某个字母，它们用来表示 0~15 之间（包括 0 和 15）的某个值，下面是十六进制整型数据的例子：

0xff

0X123

0xCAFE911

（3）八进制

尽管 ECMAScript 标准不支持八进制数据，但是 JavaScript 的某些实现却允许采用八进制（基数为8）格式的整型数据。八进制数据以数字 0 开头，其后跟随一个数字序列，这个序列中的每个数字都在 0 和 7 之间（包括0和7），例如：

07

0366

由于某些 JavaScript 实现支持八进制数据，而有些则不支持，所以最好不要使用以 0 开头的整型数据，因为不知道某个 JavaScript 的实现是将其解释为十进制，还是解释为八进制。

【案例】红绿蓝3种颜色的色值

网页中的 RGB 颜色代码是以十六进制数字表示的。例如，在颜色代码 #6699FF 中，十六进制数字 66 表示红色部分的色值，十六进制数字 99 表示绿色部分的色值，十六进制数字 FF 表示蓝色部分的色值。在页面中分别输出 RGB 颜色 #6699FF 的 3种颜色的色值。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		document.write("<p>R："+0xEE);//输出红色色值
		document.write("<br>G："+0x56);//输出绿色色值
		document.write("<br>B："+0x7C);//输出蓝色色值
	</script>
</html>

2.1.3.4、浮点型数据

浮点型数据可以具有小数点，它的表示方法有以下两种：

（1）传统记数法

传统记数法是将一个浮点数分为整数部分、小数点和小数部分，如果整数部分为 0，可以省略整数部分。例如：

1.2
56.9963
.236

（2）科学记数法

此外，还可以使用科学记数法表示浮点型数据，即实数后跟随字母 e 或 E，后面加上一个带正号或负号的整数指数，其中正号可以省略。例如：

6e+3
3.12e11
1.234E-12

说明：在科学记数法中，e（或E）后面的整数表示 10 的指数次幂，因此，这种记数法表示的数值等于前面的实数乘以 10 的指数次幂。

【案例】科学记数法输出浮点

输出科学记数法表示的浮点数，输出“3e+6”、“3.5e3”、“1.236E-2”这3种不同形式的科学记数法表示的浮点数，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		document.write("科学记数法表示的浮点数的输出结果："); //输出字符串
		document.write("<p>"); //输出段落标记
		document.write(2e+3); //输出浮点数
		document.write("<br>"); //输出换行标记
		document.write(5.6e7); //输出浮点数
		document.write("<br>"); //输出换行标记
		document.write(1.365E-2); //输出浮点数
	</script>
</html>

（5）Infinity（无穷大）

在 JavaScript 中有一个特殊的数值 Infinity（无穷大），如果一个数值超出了 JavaScript 所能表示的最大值的范围，JavaScript 就会输出 Infinity；如果一个数值超出了 JavaScript 所能表示的最小值的范围，JavaScript 就会输出 -Infinity。例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		document.write(1/0);             //输出1除以0的值

		document.write("<br>");          //输出换行标记

		document.write(-1/0);            //输出-1除以0的值
	</script>
</html>

运行结果为：

（6）NaN（非数字）

JavaScript 中还有一个特殊的数值 NaN（Not a Number 的简写），即“非数字”。在进行数学运算时产生了未知的结果或错误，JavaScript 就会返回 NaN，它表示该数学运算的结果是一个非数字。例如，用 0 除以 0 的输出结果就是 NaN，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		alert(0/0); //输出0除以0的值
	</script>
</html>

运行结果为：

2.1.2、字符串类型

字符串（string）是由 0个或多个字符组成的序列，它可以包含大小写字母、数字、标点符号或其他字符，也可以包含汉字。它是 JavaScript 用来表示文本的数据类型。程序中的字符串型数据是包含在单引号或双引号中的，由单引号定界的字符串中可以含有双引号，由双引号定界的字符串中也可以含有单引号。

说明：空字符串不包含任何字符，也不包含任何空格，用一对引号表示，即 "" 或 ''。

例如：

（1）单引号

单引号括起来的字符串

document.write('单引号字符串')

（2）双引号

双引号括起来的字符串

document.write("双引号字符串")

（3）单引号包含双引号

单引号定界的字符串中可以含有双引号

document.write('单引号中包含："双引号！"')

（4）双引号包含单引号

双引号定界的字符串中可以含有单引号

document.write("双引号包含：'单引号！'")

注意：包含字符串的引号必须匹配，如果字符串前面使用的是双引号，那么在字符串后面也必须使用双引号，反之都使用单引号。

（5）字符串转义

有的时候，字符串中使用的引号会产生匹配混乱的问题。例如：

"字符串是包含在单引号'或双引号"中的"

对于这种情况，必须使用转义字符。JavaScript 中的转义字符是“\”，通过转义字符可以在字符串中添加不可显示的特殊字符，或者防止引号匹配混乱的问题。例如，字符串中的单引号可以使用 " \`" 来代替，双引号可以使用“\"”来代替。因此，上面一行代码可以写成如下的形式：

"字符串是包含在单引号\'或双引号\"中的"

JavaScript 常用的转义字符如表 1 所示。

表 1 JavaScript常用的转义字符

转义字符	描述	转义字符	描述
\b	退格	\v	垂直制表符
\n	换行符	\r	回车符
\t	水平制表符，Tab空格	\\	反斜杠
\f	换页	\OOO	八进制整数，范围000~777
\'	单引号	\xHH	十六进制整数，范围00~FF
\"	双引号	\uhhhh	十六进制编码的Unicode字符

例如，在 alert 语句中使用转义字符“\n”的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		alert("前端必学内容：\nHTML\nCSS\nJavaScript\nVUE")
	</script>
</html>

图7 换行输出字符串

由上图可知，转义字符“\n”在警告框中会产生换行，但是在 document.write(); 语句中使用转义字符时，只有将其放在格式化文本块中才会起作用，所以脚本必须放在 <pre> 和 </pre> 的标签内。

例如，下面是应用转义字符使字符串换行，程序代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		document.write("<pre>");
		document.write("前端必学内容：\nHTML\nCSS\nJavaScript\nVUE");
		document.write("</pre>");
	</script>
</html>

图8 换行输出字符串

如果上述代码不使用 <pre> 和 </pre> 的标签，则转义字符不起作用，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		document.write("前端必学内容：\nHTML\nCSS\nJavaScript\nVUE");
	</script>
</html>

运行结果为：

【案例】输出奥尼尔的中文名、英文名和别名

在 <pre> 和 </pre> 的标签内使用转义字符，分别输出前 NBA 球星奥尼尔的中文名、英文名以及别名，关键代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		document.write("<pre>");
		document.write('\n英文名称：Shaquille O\'Neal');
		document.write('\n别名：大鲨鱼！');
		document.write("</pre>");
	</script>
</html>

图9 输出奥尼尔的中文名、英文名和别名

由上面的实例可以看出，在单引号定义的字符串内出现单引号，必须进行转义才能正确输出。

2.1.3、布尔型

数值数据类型和字符串数据类型的值都无穷多，但是布尔数据类型只有两个值，一个是 true（真），一个是false（假），它说明了某个事物是真还是假。

布尔值通常在 JavaScript 程序中用来作为比较所得的结果。例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		
		let n = 2;
		if(n==1){
			console.log("true");
		}else{
			console.log("false");
		}
		
	</script>
</html>

这行代码测试了变量 n 的值是否和数值 1 相等。如果相等，比较的结果就是布尔值 true，否则结果就是false。

布尔值通常用于 JavaScript 的控制结构。例如，JavaScript 的 if/else 语句就是在布尔值为 true 时执行一个动作，而在布尔值为 false 时执行另一个动作。通常将一个创建布尔值与使用这个比较的语句结合在一起。例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		
		n = 10;
		if(n = 10){
			console.log("获取到 n 的值是：10")
		}else{
			console.log("未能获取到 n 的值！")
		}
	</script>
</html>

本段代码检测了 n 是否等于 10。

有时候可以把两个可能的布尔值看作是“on（true）”和“off（false）”，或者看作是“yes（true）”和“no（false）”，这样比将它们看作是“true”和“false”更为直观。有时候把它们看作是 1（true）和 0（false）会更加有用（实际上 JavaScript 确实是这样做的，在必要时会将 true 转换成 1，将 false 转换成 0）。

2.1.4、特殊数据类型

（1）未定义值（undefined）

未定义值就是 undefined，表示变量还没有赋值（如 var a;）。

（2）空值（null）

JavaScript 中的关键字 null 是一个特殊的值，它表示为空值，用于定义空的或不存在的引用。这里必须要注意的是：null 不等同于空的字符串（""）或 0。当使用对象进行编程时可能会用到这个值。

由此可见，null 与 undefined 的区别是，null 表示一个变量被赋予了一个空值，而 undefined 则表示该变量尚未被赋值。

2.1.5、编程训练

（1）输出珠穆朗玛峰的高度

输出珠移朗玛峰的高度珠穆朗玛峰是世界海拔最高的山峰，它的高度约等于 8848.86m，在页面中输出珠穆朗玛峰的高度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		document.write("珠穆朗玛峰的高度")
		document.write(8844);
		document.write("米")
	</script>
</html>

（2）输出文件夹的路径

通过转义字符在页面中输出文件夹 index1.html 在计算机中的路径 D:\CodeLocation\StudyBookCode\Front\JavaScript\ch2\index1.html。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		document.write("D:\CodeLocation\StudyBookCode\Front\JavaScript\ch2\index1.html")
	</script>
</html>

2.2、常量和变量

每一种计算机语言都有自己的数据结构。在 JavaScript 中，常量和变量是数据结构的重要组成部分。本节将介绍常量和变量的概念以及变量的使用方法。

2.2.1、常量

常量是指在程序运行过程中保持不变的数据。例如，123 是数值型常量，“JavaScript 脚本”是字符串型常量，true 或 false 是布尔型常量等。在 JavaScript 脚本编程中可直接输入这些值。

2.2.2、变量

变量是指程序中一个已经命名的存储单元，它的主要作用就是为数据操作提供存放信息的容器。变量是相对常量而言的。常量是一个不会改变的固定值，而变量的值可能会随着程序的执行而改变。

变量有两个基本特征，即变量名和变量值。为了便于理解，可以把变量看作是一个贴着标签的盒子，标签上的名字就是这个变量的名字（即变量名），而盒子里面的东西就相当于变量的值。对于变量的使用首先必须明确变量的命名、变量的声明、变量的赋值以及变量的类型。

（1）变量的命名

JavaScript 变量的命名规则如下：

（1）必须以字母或下划线开头，其他字符可以是数字、字母或下划线。

（2）变量名不能包含空格或加号、减号等符号。

（3）JavaScript 的变量名是严格区分大小写的。例如，UserName 与 username 代表两个不同的变量。

（4）不能使用 JavaScript 中的关键字。JavaScript 中的关键字如表 2 所示。

表2 JavaScript的关键字

abstract	continue	finally	instanceof	private	this
boolean	default	float	int	public	throw
break	do	for	interface	return	typeof
byte	double	function	long	short	true
case	else	goto	native	static	var
catch	extends	implements	new	super	void
char	false	import	null	switch	while
class	final	in	package	synchronized	with

JavaScript 关键字（Reserved Words）是指在 JavaScript 语言中有特定含义，成为 JavaScript 语法中一部分的那些字。JavaScript 关键字是不能作为变量名和函数名使用的。使用 JavaScript 关键字作为变量名或函数名，会使 JavaScript 在载入过程中出现语法错误。

虽然 JavaScript 的变量可以任意命名，但是在进行编程的时候，最好还是使用便于记忆、且有意义的变量名称，以增加程序的可读性。

（2）变量的声明（var）

在 JavaScript 中，使用变量前需要先声明变量，所有的 JavaScript 变量都由关键字 var 声明，语法格式如下：

var variablename;

variablename 是声明的变量名，例如，声明一个变量 username，代码如下：

	<script type="text/javascript">
		
		// 1. 声明变量
		var username; // 变量名称：username
	</script>

另外，可以使用一个关键字 var 同时声明多个变量，例如：

	<script type="text/javascript">
		
		// 1. 同时声明多个变量
		var username,password,age,sex;
	</script>

（3）变量的赋值

在声明变量的同时也可以使用等于号（=）对变量进行初始化赋值，例如，声明一个变量 lesson 并对其进行赋值，值为一个字符串“零基础学 JavaScript”，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		
		// 1. 声明变量并为变量赋值
		var lesson = "零基础学 JavaScript";
		document.write(lesson);
	</script>
</html>

另外，还可以在声明变量之后再对变量进行赋值，例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		
		// 1. 声明变量并为变量赋值
		var lesson;
		lesson = "零基础学 JavaScript";
		document.write(lesson);
	</script>
</html>

在 JavaScript 中，变量可以不先声明而直接对其进行赋值。例如，给一个未声明的变量赋值，然后输出这个变量的值，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		
		// 1. 变量不声明，直接赋值
		username = "张三";
		document.write(username);
	</script>
</html>

运行结果为：

这是一个未声明的变量。

虽然在 JavaScript 中可以给一个未声明的变量直接进行赋值，但是建议在使用变量前就对其声明，因为声明变量的最大好处就是能及时发现代码中的错误。由于 JavaScript 是采用动态编译的，而动态编译是不易于发现代码中的错误的，特别是变量命名方面的错误。

常见错误：使用变量时忽略了字母的大小写。例如，下面的代码在运行时就会产生错误。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		
		// 1. 变量不声明，直接赋值
		username = "张三";
		document.write(Username);
	</script>
</html>

上述代码中，定义了一个变量 name，但是在使用 document.write 语句输出变量的值时忽略了字母的大小写，因此在运行结果中就会出现错误。

说明：

（1）如果只是声明了变量，并未对其赋值，则其值默认为 undefined。

（2）可以使用 var 语句重复声明同一个变量，也可以在重复声明变量时为该变量赋一个新值。

例如，定义一个未赋值的变量 a 和一个进行重复声明的变量 b，并输出这两个变量的值，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		
		// 1. 重复变量
		var a = "Hello!";
		var b = "作为一个后端，还要学习前端！";
		var c = "前端 3 大件：Html，CSS，JavaScript！";
		
		document.write(a);
		document.write("<br>")
		document.write(c);
	</script>
</html>

运行结果为：

注意：在 JavaScript 中的变量必须要先定义后使用，没有定义过的变量不能直接使用。

常见错误：直接输出一个未定义的变量。例如，下面的代码在运行时就会产生错误。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		
		// 1. 未定义的变量
		document.write(username);
	</script>
</html>

上述代码中，并没有定义变量 username，但是却使用 document.write 语句直接输出 username 的值，因此在运行结果中就会出现错误。

（4）变量的类型

变量的类型是指变量的值所属的数据类型，可以是数值型、字符串型和布尔型等，因为 JavaScript 是一种弱类型的程序语言，所以可以把任意类型的数据赋值给变量。

例如：先将一个数值型数据赋值给一个变量，在程序运行过程中，可以将一个字符串型数据赋值给同一个变量，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		
		// 1. 变量的数据类型
		var age = 29;
		age = "二十九！";
		document.write(age);
	</script>
</html>

【案例】输出球员信息

科比・布莱恩特是前 NBA 最著名的篮球运动员之一。将科比的别名、身高、总得分、主要成就以及场上位置分别定义在不同的变量中，并输出这些信息，关键代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1 style="font-size: 24px;">迈克尔*乔丹</h1>
	</body>
	<script type="text/javascript">
		var alias = "飞人";
		var height = 198;
		var score = 32292;
		var achievement = "6 次 NBA 冠军！";
		var position = "得分后卫/小前锋！";
		document.write("别名：" + alias);
		document.write("<br>身高：" + height);
		document.write("<br>总得分：" + score);
		document.write("<br>主要奖项：" + achievement);
		document.write("<br>场上位置：" + position);
	</script>
	<style type="text/css">
		*{
			font-size:18px;
			line-height:30px;
		}
	</style>
</html>

2.2.3、编程训练

（1）输出俄罗斯的国土面积

俄罗斯是世界上国土面积最大的国家，其面积约为17100000km2。将该面积定义在变量中，并输出俄罗斯的国土面积。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	</body>
	<script type="text/javascript">
		document.write("俄罗斯的面积为：")
		var area = 1712;
		document.write(area)
		document.write("万平方公里！")
	</script>
</html>

（2）输出人物的个人信息

将郭靖的姓名、性别、年龄、身高和武功这些个人信息定义在变量中，并在页面中输出。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	</body>
	<script type="text/javascript">
		document.write("郭靖的个人简介！");
		var name = "郭靖";
		var sex = "男";
		var age = 29;
		var height = 1.77;
		var skill = "九阴真经，降龙十八掌"
		document.write("名字：" + name);
		document.write("<br>性别：" + sex);
		document.write("<br>年龄：" + age);
		document.write("<br>身高：" + height);
		document.write("<br>绝招：" + skill);
	</script>
</html>

2.3、运算符

运算符也称为操作符，它是完成一系列操作的符号。运算符用于将一个或几个值进行计算而生成一个新的值，对其进行计算的值称为操作数，操作数可以是常量或变量。

JavaScript 的运算符按操作数的个数可以分为单目运算符、双目运算符和三目运算符。按运算符的功能可以分为算术运算符、字符串运算符、比较运算符、赋值运算符、逻辑运算符、条件运算符和其他运算符。运算符还有，明确的优先级和结合性。

2.3.1、算术运算符

算术运算符用于在程序中进行加、减、乘、除等运算。在 JavaScript 中常用的算术运算符如表 3 所示。

表 3 JavaScript 中的算术运算符

运算符	描述	示例
+	加运算符	4+6 //返回值为10
-	减运算符	7-2 //返回值为5
*	乘运算符	7*3 //返回值为21
/	除运算符	12/3 //返回值为4
%	求模运算符	7%4 //返回值为3
++	自增运算符。该运算符有两种情况：i++（在使用i之后，使i的值加1）；++i（在使用i之前，先使i的值加1）	i=1; j=i++ //j的值为1，i的值为2 i=1; j=++i //j的值为2，i的值为2
--	自减运算符。该运算符有两种情况：i--（在使用i之后，使i的值减1）；--i（在使用i之前，先使i的值减1）	i=6; j=i-- //j的值为6，i的值为5 i=6; j=--i //j的值为5，i的值为5

【案例】将华氏度转换为摄氏度

美国使用华氏度来作为计量温度的单位。将华氏度转换为摄氏度的公式为“摄氏度 = 5 / 9* (华氏度C32)”。假设洛杉矶市的当前气温为 68 华氏度，分别输出该城市以华氏度和摄氏度表示的气温。关键代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>将华氏度转换为摄氏度</h1>
		<h2>某城市的当前气温</h2>
	</body>
	<script type="text/javascript">
		var degreeF = 77;
		var degreeC = 0;
		degreeC = 5 / 9 *(degreeF-32);
		document.write("华氏度：" + degreeF + "&deg;F");
		document.write("<br>摄氏度：" + degreeC + "&deg:C");
	</script>
</html>

注意：在使用“/”运算符进行除法运算时，如果被除数不是0，除数是0，得到的结果为 Infinity；如果被除数和除数都是 0，得到的结果为 NaN。

说明：“+”除了可以作为算术运算符之外，还可用于字符串连接的字符串运算符。

2.3.2、字符串运算符

字符串运算符是用于两个字符串型数据之间的运算符，它的作用是将两个字符串连接起来。在 JavaScript 中，可以使用 + 和 += 运算符对两个字符串进行连接运算。其中，+ 运算符用于连接两个字符串，而 += 运算符则连接两个字符串，并将结果赋给第一个字符串。表4 给出了 JavaScript 中的字符串运算符。

表4 JavaScript中的字符串运算符

运算符

描述

示例

连接两个字符串

"零基础学"+"JavaScript"

连接两个字符串并将结果赋给第一个字符串

var name = "零基础学"

name += "JavaScript"//相当于name = name+"JavaScript"

【案例】字符串运算符的使用

将歌曲《昨日重现》的名称、歌手、风格、语言和时长分别定义在变量中，应用字符串运算符对多个变量和字符串进行拼接输出。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		var songName,singer,style,language,duration;
		songName = "昨日再现";
		singer = "卡朋特乐队";
		style = "流行";
		language = "英语";
		duration = "3分59秒";
		alert("歌曲名称：" + songName + "\n歌手：" + singer+ "\n风格：" + style + "\n语言：" + language + "\n时长：" + duration)
	</script>
</html>

说明：JavaScript 脚本会根据操作数的数据类型来确定表达式中的“+”是算术运算符还是字符串运算符。在两个操作数中只要有一个是字符串类型，那么这个“+”就是字符串运算符，而不是算术运算符。

常见错误：使用字符串运算符对字符串进行连接时，字符串变量未进行初始化。例如下面的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		var str;
		var += "零基础学习 JavaScript";
		var += "前端利器！";
		document.write(str);
	</script>
</html>

上述代码中，在声明变量 str 时并没有对变量初始化，这样在运行时会出现不想要的结果。

2.3.3、比较运算符

比较运算符的基本操作过程是：首先对操作数进行比较，这个操作数可以是数字也可以是字符串，然后返回一个布尔值 true 或 false。在 JavaScript 中常用的比较运算符如表 5 所示。

表5 JavaScript中的比较运算符

运算符	描述	示例
<	小于	1<6 //返回值为true
>	大于	7>10 //返回值为false
<=	小于等于	10<=10 //返回值为true
>=	大于等于	3>=6 //返回值为false
==	等于。只根据表面值进行判断，不涉及数据类型	"17"==17 //返回值为true
===	绝对等于。根据表面值和数据类型同时进行判断	"17"===17 //返回值为false
!=	不等于。只根据表面值进行判断，不涉及数据类型	"17"!=17 //返回值为false
!==	不绝对等于。根据表面值和数据类型同时进行判断	"17"!==17 //返回值为true

常见错误：对操作数进行比较时，将比较运算符“==”写成“=”。例如下面的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		// 声明变量并初始化
		var username = "张三";
		document.write(username == "张三");
	</script>
</html>

上述代码中，在对操作数进行比较时使用了赋值运算符“=”，而正确的比较运算符应该是“==”。

【案例】比较运算符的使用

应用比较运算符实现两个数值之间的大小比较。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		// 声明变量并初始化
		var score = 65;
		document.write("score 变量的值为：" + score);
		document.write("<p>")

		document.write("score > 60：");
		document.write(score > 60);
		
		document.write("<br>");
		document.write("score < 60 ：");
		document.write(score < 60);
		
		document.write("<br>");
		document.write("score == 60：");
		document.write(score == 60);
	</script>
</html>

比较运算符也可用于两个字符串之间的比较，返回结果同样是一个布尔值 true 或 false。当比较两个字符串 A 和 B 时，JavaScript 会首先比较 A 和 B 中的第一个字符，例如第一个字符的 ASCII 码值分别是 a 和 b，如果 a 大于 b，则字符串 A 大于字符串 B，否则字符串 A 小于字符串 B。如果第一个字符的 ASCII 码值相等，就比较 A 和 B 中的下一个字符，以此类推。如果每个字符的 ASCII 码值都相等，那么字符数多的字符串大于字符数少的字符串。

例如，在下面字符串的比较中，结果都是 true。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		document.write("abc" == "abc");
		document.write("<br>");
		document.write("ac < bc");
		document.write("<br>");
		document.write("abcd">"abc");
	</script>
</html>

2.3.4、赋值运算符

JavaScript 中的赋值运算可以分为简单赋值运算和复合赋值运算。简单赋值运算是将赋值运算符（=）右边表达式的值保存到左边的变量中；而复合赋值运算混合了其他操作（例如算术运算操作）和赋值操作。例如：

sum+=i; // 等同于 sum=sum+i;

JavaScript 中的赋值运算符如表 6 所示。

表 6 JavaScript中的赋值运算符

运算符	描述	示例
=	将右边表达式的值赋给左边的变量	userName="mr"
+=	将运算符左边的变量加上右边表达式的值赋给左边的变量	a+=b //相当于a=a+b
-=	将运算符左边的变量减去右边表达式的值赋给左边的变量	a-=b //相当于a=a-b
*=	将运算符左边的变量乘以右边表达式的值赋给左边的变量	a=b //相当于a=ab
/=	将运算符左边的变量除以右边表达式的值赋给左边的变量	a/=b //相当于a=a/b
%=	将运算符左边的变量用右边表达式的值求模，并将结果赋给左边的变量	a%=b //相当于a=a%b

【实例】赋值运算符的使用

应用赋值运算符实现两个数值之间的运算并输出结果。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		var a = 2;//定义变量
		var b = 3;//定义变量
	
		document.write("a=2,b=3");//输出a和b的值
		document.write("<p>");//输出段落标记
		document.write("a+=b运算后：");//输出字符串
		
		a+=b;//执行运算
		
		document.write("a="+a);//输出此时变量a的值
		document.write("<br>");//输出换行标记
		
		document.write("a-=b运算后：");//输出字符串
		a-=b;//执行运算
		document.write("a="+a);//输出此时变量a的值
		document.write("<br>");//输出换行标记
		
		document.write("a*=b运算后：");//输出字符串
		a*=b;//执行运算
		document.write("a="+a);//输出此时变量a的值
		document.write("<br>");//输出换行标记
		
		document.write("a/=b运算后：");//输出字符串
		a/=b;//执行运算
		document.write("a="+a);//输出此时变量a的值
		document.write("<br>");//输出换行标记
		
		document.write("a%=b运算后：");//输出字符串
		a%=b;//执行运算
		document.write("a="+a);//输出此时变量a的值
	</script>
</html>

2.3.5、逻辑运算符

逻辑运算符用于对一个或多个布尔值进行逻辑运算。在 JavaScript 中有 3个逻辑运算符，如表 7 所示。

表 7 逻辑运算符

运算符	描述	示例
&&	逻辑与	a && b //当a和b都为真时，结果为真，否则为假
\|\|	逻辑或	a \|\| b //当a为真或者b为真时，结果为真，否则为假
!	逻辑非	!a //当a为假时，结果为真，否则为假

【案例】逻辑运算符的使用

应用逻辑运算符对逻辑表达式进行运算并输出结果。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		var number = 10; // 定义变量
		document.write("number = "+number);
		
		// 1. 逻辑：并且
		document.write("<p> number > 0 && number < 5 的结果是：");
		document.write(number > 0 && number < 5);
		
		// 2. 逻辑：与
		document.write("<br>number > 0 || number < 5 的结果是：");
		document.write(number > 0 || number < 5);
		
		// 3. 逻辑：否
		document.write("<br> number !< 5 的结果是：");
		document.write(!number < 5);
	</script>
</html>

2.3.6、三目运算符

条件运算符是 JavaScript 支持的一种特殊的三目运算符，其语法格式如下：

表达式?结果1:结果2

如果“表达式”的值为true，则整个表达式的结果为“结果1”，否则为“结果2”。

例如：定义两个变量，值都为 10，然后判断两个变量是否相等，如果相等则输出“相等”，否则输出“不相等”，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 定义两个变量
		var a = 10;
		var b = 10;
		
		alert(a < b ? "a 小于 b 相等" : "a 和 b 相等")
	</script>
</html>

【案例】条件运算符的使用

如果某年的年份值是 4 的倍数并且不是 100 的倍数，或者该年份值是 400 的倍数，那么这一年就是闰年。应用条件运算符判断 2017 年是否是闰年。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 声明年份
		var year = 2024;
		result = (year % 4 ==0 && 2024 % 100 != 0) || (year % 400 == 0) ? "2024 年是闰年！" : "2024 年不是闰年";
		alert("2024年：" + result);
	</script>
</html>

2.3.7、其他运算符

（1）逗号运算符

逗号运算符用于将多个表达式排在一起，整个表达式的值为最后一个表达式的值。例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		var a,b,c,d;
		a=(a=5,b=6,c=7);
		alert("a 的值是：" + a);
	</script>
</html>

（2）typeof 判断数据类型

typeof 运算符用于判断操作数的数据类型。它可以返回一个字符串，该字符串说明了操作数是什么数据类型。这对于判断一个变量是否已被定义特别有用。其语法格式如下：

typeof 操作数

不同类型的操作数使用typeof运算符的返回值如表 8 所示。

表 8 不同类型数据使用 typeof 运算符的返回值

数据类型	返回值	数据类型	返回值
数值	number	null	object
字符串	string	对象	object
布尔值	boolean	函数	function
undefined	undefined

例如，应用 typeof 运算符分别判断 4 个变量的数据类型，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		var a,b,c,d;
		
		a = 5;
		
		b = "五";
		
		c = "";
		
		d = null;
		
		document.write("a 的数据类型是：")
		document.write(typeof a);
		
		document.write("<br>b 的数据类型是：");
		document.write(typeof b);
		
		document.write("<br>c 的数据类型是：");
		document.write(typeof c);
		
		document.write("<br>d 的数据类型是：");
		document.write(typeof d);
	</script>
</html>

（3）new（创建对象）

在 JavaScript 中有很多内置对象，如字符串对象、日期对象和数值对象等，通过 new 运算符可以用来创建一个新的内置对象实例。

语法：

对象实例名称 = new 对象类型(参数)
对象实例名称 = new 对象类型

当创建对象实例时，如果没有用到参数，则可以省略圆括号，这种省略方式只限于 new 运算符。

例如：应用 new 运算符来创建新的对象实例，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 创建对象
		object01 = new Object;
		
		arr = new Array();
		
		dates = new Date;
	</script>
</html>

（4）位操作运算符

位运算符分为两种，一种是普通位运算符，另一种是位移运算符。在进行运算前，都先将操作数转换为 32位的二进制整数，然后再进行相关运算，最后的输出结果将以十进制表示。位操作运算符对数值的位进行操作，如向左或向右移位等。JavaScript 中常用的位操作运算符如表9所示。

表9 位操作运算符

位操作运算符	描述	位操作运算符	描述
&	与运算符	<<	左移
\|	或运算符	>>	带符号右移
^	异或运算符	>>>	填0右移
~	非运算符

2.3.8、运算符的优先级与结合性

JavaScript 运算符都有明确的优先级与结合性。优先级较高的运算符将先于优先级较低的运算符进行运算。结合性则是指具有同等优先级的运算符将按照怎样的顺序进行运算。JavaScript运算符的优先级顺序及其结合性如表9所示。

表9 JavaScript运算符的优先级与结合性

优先级	结合性	运算符
最高	向左	.、[ ]、( )
由高到低依次排列		++、--、-、!、delete、new、typeof、void
	向左	*、/、%
	向左	+、-
	向左	<<、>>、>>>
	向左	<、<=、>、>=、in、instanceof
	向左	==、!=、===、!===
	向左	&
	向左	^
	向左	\|
	向左	&&
	向左	\|\|
	向右	?:
	向右	=
	向右	*=、/=、%=、+=、-=、<<=、>>=、>>>=、&=、^=、\|=
最低	向左	,

例如，下面的代码显示了运算符优先顺序的作用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		// 声明变量
		var a;
		
		//为变量赋值
		a = 20-(5+6)<10&&2>1;
		
		//输出变量的值
		alert(a);
	</script>
</html>

当在表达式中连续出现的几个运算符优先级相同时，其运算的优先顺序由其结合性决定。结合性有向左结合和向右结合，例如，由于运算符“+”是左结合的，所以在计算表达式“a+b+c”的值时，会先计算“a+b”，即“(a+b)+c”；而赋值运算符“=”是右结合的，所以在计算表达式“a=b=1”的值时，会先计算“b=1”。下面的代码说明了“=”的右结合性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		//声明变量并赋值
		var a = 1;
		
		//对变量b赋值
		b=a=10;
		
		//输出变量b的值
		alert("b="+b);
	</script>
</html>

【案例】算符优先级的使用

假设手机原来的话费余额是10元，通话资费为0.2元/分钟，流量资费为0.5元/兆，在使用了10兆流量后，计算手机话费余额还可以进行多长时间的通话。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		var balance = 10; // 定义手机话费余额变量
		var call = 0.1; // 定义通话资费变量
		var traffic = 0.3; // 定义流量资费变量
		var minutes = (balance-traffic*30)/call; // 计算余额可通话分钟数
		document.write("手机话费余额还可以通话"+minutes+"min"); // 输出字符串
	</script>
</html>

2.3.9、编程训练

（1）计算本息合计

假设某银行定期存款 3 年的年利率为 2.75%，某客户的存款金额为 100 000 元，计算该客户存款 3 年后的本息合计是多少。（提示：本息合计 = 存款金额 + 存款金额 * 年利率 * 存款期限）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		var rate = 2.75;
		var money = 100000;
		var year = 3;
		document.write("存款金额："+money+"元");
		document.write("<br>年利率："+rate+"%");
		document.write("<br>存款期限："+year+"年");
		var total = money+money*(rate/100)*year;
		document.write("<br>本息合计："+total+"元");
	</script>
</html>

（2）判断考试成绩是否及格

考试成绩达到 60 分以上表示及格。周星星的英语考试成绩是 65 分，使用条件运算符判断该考试成绩是否及格。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		var score=65;
		var status;
		status=(score>=60)?"及格":"不及格";
		document.write("周星星的英语成绩是"+score+"分");
		document.write("<br>");
		document.write("周星星的英语成绩"+status+"");
	</script>
</html>

（3）计算梯形稻田的面积

有一块梯形稻田，稻田上边缘长为 30 m，下边缘长为 50 m，高度为 30 m，计算这块梯形稻田的面积。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		var t = 30;
		var b = 50;
		var height = 30;
		var area = (t+b)*height/2;
		document.write("梯形稻田的面积为"+area+"平方米");
	</script>
</html>

2.4、表达式

表达式是运算符和操作数组合而成的式子，表达式的值就是对操作数进行运算后的结果。

由于表达式是以运算为基础的，因此表达式按其运算结果可以分为如下 3 种：

（1）算术表达式：运算结果为数字的表达式称为算术表达式。

（2）字符串表达式：运算结果为字符串的表达式称为字符串表达式。

（3）逻辑表达式：运算结果为布尔值的表达式称为逻辑表达式。

说明：表达式是一个相对的概念，在表达式中可以含有若干个子表达式，而且表达式中的一个常量或变量都可以看作是一个表达式。

2.5、数据类型的转换规则

在对表达式进行求值时，通常需要所有的操作数都属于某种特定的数据类型，例如，进行算术运算要求操作数都是数值类型，进行字符串连接运算要求操作数都是字符串类型，而进行逻辑运算则要求操作数都是布尔类型。

然而，JavaScript 语言并没有对此进行限制，而且允许运算符对不匹配的操作数进行计算。在代码执行过程中，JavaScript 会根据需要进行自动类型转换，但是在转换时也要遵循一定的规则。下面介绍几种数据类型之间的转换规则。

（1）其他数据类型转换为数值型数据

如表10所示。

表10 转换为数值型数据

类型	转换后的结果
undefined	NaN
null	0
逻辑型	若其值为true，则结果为1；若其值为false，则结果为0
字符串型	若内容为数字，则结果为相应的数字，否则为NaN
其他对象	NaN

（2）其他数据类型转换为逻辑型数据

如表11所示。

表11 转换为逻辑型数据

类型	转换后的结果
undefined	false
null	false
数值型	若其值为0或NaN，则结果为false，否则为true
字符串型	若其长度为0，则结果为false，否则为true
其他对象	true

（3）其他数据类型转换为字符串型数据

如表12所示。

表12 转换为字符串型数据

类型	转换后的结果
undefined	"undefined"
null	"null"
数值型	NaN、0或者与数值相对应的字符串
逻辑型	若其值true，则结果为"true"，若其值为false，则结果为"false"
其他对象	若存在，则为其结果为toString()方法的值，否则其结果为"undefined"

例如，根据不同数据类型之间的转换规则输出以下表达式的结果：100+"200"、100-"200"、true+100、true+"100"、true+false和"a"-100。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		document.write(100+"200");//输出表达式的结果

		document.write("<br>");     //输出换行标记

		document.write(100-"200");  //输出表达式的结果

		document.write("<br>");     //输出换行标记

		document.write(true+100);   //输出表达式的结果

		document.write("<br>");     //输出换行标记

		document.write(true+"100"); //输出表达式的结果

		document.write("<br>");     //输出换行标记

		document.write(true+false); //输出表达式的结果

		document.write("<br>");     //输出换行标记

		document.write("a"-100);    //输出表达式的结果
	</script>
</html>

2.6、实践与练习

（1）输出《九阳神功》心法

使用转义字符输出张无忌所练的《九阳神功》心法，实现效果如下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		document.write("<pre>");
		document.write("他强由他强，清风抚山岗\n");
		document.write("他横任他横，明月照大江\n");
		document.write("他自狠来他自恶，我自一口真气足\n\n");
		document.write("\t\t——《九阳神功》");
		document.write("</pre>");
	</script>
</html>

（2）计算员工的实际收入

假设员工的月薪为 6500，专项扣除费用共 500 元，个人所得税起征点是 5000 元，税率 3%，计算该员工的实际收入。实现效果如图所示。（实际收入 = （月薪- 专项扣除）-（月薪- 专项扣除-个税起征点）*税率）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		var salary = 6500;
		var insurance = 500;
		var threshold = 5000;
		var tax = 0.03;
		salary-=insurance;
		var salary1=salary;
		salary1-=threshold;
		salary1*=tax;
		salary-=salary1;
		document.write("该员工的实际收入为"+salary+"元");
	</script>
</html>

（3）判断 2024 年 2 月的天数

闰年 2 月的天数是 29 天，非闰年 2 月的天数是 28 天，应用条件运算符判断 2024年 2 月的天数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		var year = 2024;
		var result = (year%4 == 0 && year%100 != 0) || (year%400 == 0)?29:28;
		alert(year+"年2月有"+result+"天");
	</script>
</html>