第
5
章
JavaScript基础
JavaScript是一种被广泛用于Web开发的编程语言,常用来为网页增添交互
性和动态性,为用户提供更流畅、绚丽的浏览效果。JavaScript具有简单易学、高
度可扩展性以及跨平台兼容性等特点,现已成为最流行的编程语言之一。除在
Web开发中使用外,也被广泛用于构建桌面应用程序、构建移动应用程序、游戏开
发、机器学习和人工智能等领域。
..5.1
JavaScript简介
JavaScript是一种高级的、多范式、解释型的编程语言,支持面向对象编程、命
令式编程以及函数式编程。
1.基本语法
5.1
1.
区分大小写
JavaScript对大小写敏感,即区分大小写。例如,变量名Car和变量名car是
两个不同的变量。
2.
标识符
JavaScript的标识符包括变量名、函数名、参数名和属性名等,也包括某些循
环语句中跳转位置的标记,在JavaScript中,所有可自主命名的名称都可以称为标
识符。
合法的标识符应该满足以下规则。
(1)标识符可以是一个或多个字符。
(2)第一个字符必须是字母、下画线“_” 或符号“$”,其后字符可以是字母、数
字、下画线或符号“$”。
(3)自定义标识符不能与JavaScript关键字、保留字重名。
(4)可使用Unicode转义序列。例如,字符a可使用“\u0061”表示,因此,下
列标识符都是合法的:a、_a、$a_ab_23ab、a23 、\u0061 。
3.
关键字
JavaScript的关键字不可以用作变量、标签或者函数名,主要关键字如表5-1
第5章 JavaScript基础1 27
所示。
表5-1 关键字
break case catch continue default
delete do else finally for
function if in instanceof new
return switch this throw try
typeof var void while with
4.保留字
ECMA-262规定保留字是JavaScript语言内部预备使用的一组标识符,建议不要使用,
主要保留字如表5-2所示。
表5-2 保留字
abstract boolean byte char class
const double enum export extends
final float goto implements import
int interface long native package
private protected public short static
super synchronized throws transient volatile
5.常量
常量表示固定不变的数据,与变量一样,均是用于存储数据的容器,只不过常量的值在
程序的运行过程中不发生改变。在JavaScript语言下一代标准ES6(ECMAScript6.0,已在
2015年6月正式发布)之前,并没有声明常量的方法,在ES6中新增加了const来定义常
量,例如:
const a = 1 //当常量a 被创建时,再次给a 赋值时,a 仍为1
console.log(a) ;
a = 10;
console.log(a) //报错
常量分为以下四类。
(1)整型常量,也就是整数,包括正整数、负整数和0。
(2)实型常量,也称为浮点常量,即日常生活中的小数。
(3)字符串常量,指使用单引号或者双引号括起来的内容。
(4)布尔常量,即真或假,其取值为true或者false。
1 28 Web前端开发基础———HTML+CSS+JavaScript+前端框架
6.变量
变量表示可以变化的数据,是用于存储数据的容器,在程序的运行过程中,可发生变化
或者被再次赋值。
JavaScript中定义变量有两种方式:var与let,其中,let是ES6新增的语法。
(1)var定义变量名称。
var a; //定义一个变量
a = 1; //往变量中存储数据
console.log(a); //从变量中取出存储的数据
(2)let定义变量名称。
let num; //定义一个变量
num = 2; //给变量初始化
console.log(num); //取出存储的数据
两种定义方式的区别如下:
(1)var是函数作用域,let是块级作用域。var声明的变量,只有函数能限制其作用域,
而任何大括号都可以限制let声明变量的作用域。
(2)var存在变量提升,let不存在变量提升。var可以先使用再声明,在变量没有被声
明时,其值为undefined;但在使用let关键字声明变量时,必须先声明再使用,否则会报错。
(3)var变量可以重复声明,let变量不可以重复声明。多人团队开发项目时,使用let
声明变量,可以避免变量名的覆盖。
(4)var声明的全局变量,会成为全局对象window的属性;let声明的变量不会。
根据变量作用域的不同,可分为块级变量、局部/函数变量和全局变量。
块级变量是在块中声明的变量,只在块中有效。
局部变量声明在函数之中,其作用域是局部的,只能在函数内部访问,因此能够在不同
函数中使用同名变量。函数执行时,会创建局部变量,函数执行完毕后,会销毁局部变量,
例如:
//此处的代码不能使用carName 变量
function myFunction() {
var carName = "porsche";
//此处的代码能使用carName 变量
}
全局变量声明在函数之外,其作用域是全局的,即网页的所有脚本和函数都能够访问
它,例如:
var carName = " porsche";
//此处的代码能够使用carName 变量
function myFunction() {
//此处的代码也能够使用carName 变量
}
第5章 JavaScript基础1 29
注意:如果为尚未声明的变量赋值,此变量会自动成为全局变量。
7.注释
单行注释:以“//”开头,任何位于“//”与行末之间的文本都会被JavaScript忽略。
多行注释:以“/*”开头,以“*/”结尾,任何位于“/*”和“*/”之间的文本都会被
JavaScript忽略。
5.1.2 引入方式
JavaScript的引入方式有三种,分别为行内式、内联式以及外链式。
1.行内式
行内式是指将JavaScript代码作为HTML标签的属性值来使用,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript 引入方式</title>
</head>
<body>
<!-- 行内式引入JS 代码 -->
<input type="button" value="点我" onclick="alert('hello!')">
</body>
</html>
2.内联式
内联式,也称内嵌式,或嵌入式,是指将JavaScript代码包裹在<script>标签之中,直
接编写在HTML文件里,其中,type="text/javascript"用于告知浏览器,此代码语言是
JavaScript。在HTML5中,其属于默认值,可省略不写。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript 引入方式</title>
<!-- 内联式引入JS 代码 -->
<script type="text/javascript">
alert("hello!");
</script>
</head>
<body>
网页内容
</body>
</html>
1 30 Web前端开发基础———HTML+CSS+JavaScript+前端框架
3.外链式
外链式是指将JavaScript代码保存到一个单独的扩展名为.js的文件中,然后使用<
script>标签的src属性引入该js文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 外链式</title>
<!-- 外链式引入JS 代码 -->
<script src="JavaScript.js"></script>
</head>
<body>
网页内容
</body>
</html>
相比内联式和行内式,推荐使用外链式来编写和引入JavaScript代码。
在Web开发中,提倡结构、样式、代码分离,即HTML、CSS、JavaScript三部分代码,需
避免直接在HTML中编写,可分为xx.html、xx.css、xx.js三个文件编写,以便于后期维护。
.. 5.2 基本数据类型
JavaScript中,主要有数值number、字符串string、布尔值boolean、null以及undefined
五种基本数据类型,可通过typeof运算符返回变量或表达式的类型。
5.2.1 数值
JavaScript不区分整数和浮点数,所有数都以64位浮点数形式进行存储,当运算需要
用到整数时,JavaScript会自动把64位浮点数转换为整数,再进行整数运算。
1.数值精度
JavaScript中,根据IEEE-754标准,浮点数64位二进制组成方式如下:
第1位:符号位sign,0代表正数,1则代表负数,用于确定一个数的正负。
第2位到第12位(共11位):代表指数部分exponent,用于确定该数的大小。
第13位到第64位(共52位):代表小数部分mantissa,用于确定该数的精度。
计算公式如下:
number=(-1)sign×(1.mantissa)×2exponent-1023
2.数值范围
64位浮点数指数部分的长度是11位,可知指数的最大值是2047,即211-1,其中,一半
用来表示负数,那么JavaScript指数范围在2-1023到21024之间。如果指数范围等于或超过最
第5章 JavaScript基础1 31
大正值1024,JavaScript会返回Infinity,即“正向溢出”;如果等于或超过最小负值,
JavaScript会把该数转为0,即“负向溢出”。例如:
console.log(Math.pow(2,1024)) //Infinity
console.log(Math.pow(2,-1074)==Number.MIN_VALUE) //true
console.log(Math.pow(2,-1075)) //0
3.数值表示法
数值的表示可使用字面形式直接表示,例如十进制、八进制等,也可使用科学记数法表
示。例如,1110000可以表示为111e4,0.111可以表示为111e-3。
注意:e和E一样,在它们的后面需要跟一个整数,该整数表示当前数值的指数部分。
数值一般直接采用字面形式表示,但是,以下两种情况,JavaScript会自动将数值转换为科
学记数法表示。
(1)小数点前的数字多于21位。
(2)小数点后的0多于5个,例如,0.00000003被转换为3e-8。
4.进制
JavaScript有以下四种进制。
(1)十进制:正常书写,取值数字0~9,前面不加0。
(2)二进制:取值数字0和1,前缀0b或者0B。
(3)八进制:取值数字0~7,前缀0o或者0O。
(4)十六进制:取值数字0~9和a~f,前缀0x或者0X。
JavaScript会自动将八进制、十六进制、二进制转换为十进制。
5.特殊数值
任何一个数都有正负,0也一样。JavaScript中存在两个0,即+0与-0,它们是等价
的,唯独当+0或-0作为分母时,返回值不相等,例如:
(1 / +0) === (1 / -0) //返回值:false
原因是左边除以+0得到的是+Infinity,右边除以-0得到的是-Infinity,这两个值并
不相等。Infinity表示无穷,当正数值过大或负数值过小无法表示,或者以非零数字除以0,
都会得到Infinity。
6.NaN
NaN(NotaNumber)是JavaScript特殊值,表示非数值,属于JavaScript保留词,指示
某个数不是合法数。使用一个非数值字符串进行除法运算,会得到NaN。另外,0/0也会得
到NaN。
NaN 是一个特殊值,其类型依然是number,其运算规则如下:
(1)NaN 不等于任何值,包括其本身。
1 32 Web前端开发基础———HTML+CSS+JavaScript+前端框架
(2)NaN 的布尔值为false。
(3)NaN 与任何数的运算,得到的都是NaN。
5.2.2 字符串
字符串string类型用于表示由16位Unicode字符组成的字符序列,且字符序列由双引
号或单引号引起来,下面两种字符串的书写方式均有效。
var firstName = "ZhiHao";
var lastName = 'Wang';
若需要将一个值转换为一个字符串,可以使用toString()方法,例如:
var age = 10;
var ageAsString = age.toString(); //字符串"10"
var found = true;
var foundAsString = found.toString(); //字符串"true"
5.2.3 布尔值
布尔boolean类型只有两个值:true和false。
注意:boolean类型的字面值true和false区分大小写。也就是说,True和False不是
boolean值,只是标识符。JavaScript中,所有类型的值都可使用转型函数Boolean()转换为
boolean值,例如:
var message = "Hello world!";
var messageAsBoolean = Boolean(message);
5.2.4 null和undefined类型
undefined类型只有一个值,为undefined,表示已声明但未对其初始化的变量,例如:
var message;
alert(message == undefined); //true
null类型是第二个只有一个值的数据类型,值为null,表示尚未存在的对象。例如,如
果函数或方法返回的是对象,而找不到该对象时,通常返回null,也可通过设置值为null来
清空对象。
var person = null; //值是null,但是类型仍然是对象
alert(typeof(person)); //输出object
5.2.5 类型转换
类型转换是将一种数据类型转换为另一种数据类型,对于任何数据类型,无论是原始类
第5章 JavaScript基础1 33
型还是对象,都可以进行类型转换。
1.强制类型转换
强制类型转换,也称为显式类型转换,通过JavaScript内置API将一种类型人为地转换
为另一种类型,这些API包括Boolean()、Number()、String()、parseInt()、parseFloat()等,
例如:
String(2 - true); //'1'
'56' === String(56); //true
Number('2350e-2'); //'23.5'
Number('23') + 7; //30
Boolean(''); //false
Boolean(2) === true; //true
2.隐式类型转换
隐式类型转换,也称为自动类型转换,通过JavaScript编译器自动根据运算符进行类型
转换,以使运算符或函数正常工作,例如:
'25' + 15; //'2515'
23 * '2'; //46
23 - true; //22
true - null; //1
false + undefined; //NaN
parseFloat('10.81'); //10.81
parseInt('10.20'); //10
注意:下面这些常见的操作会触发隐式类型转换。
(1)与运算相关的操作符:+、-、+=、++、*、/、%、<<、& 等。
(2)与数据比较相关的操作符:>、<、==、<=、>=、===。
(3)与逻辑判断相关的操作符:&&、!、||、三目运算符。
.. 5.3 运算符和流程控制
运算符是专门用于程序执行特定运算或逻辑操作的符号,根据其作用,可分为七类:算
术运算符、字符串运算符、赋值运算符、比较运算符、逻辑运算符、三元运算符以及位运算符。
流程控制用于控制程序的执行流程,包括顺序结构、选择结构以及循环结构。
5.3.1 运算符
1.算术运算符
算术运算符用于对数值类型的变量及常量进行算术运算,常用运算符及其示例如表5-3
所示。
1 34 Web前端开发基础———HTML+CSS+JavaScript+前端框架
表5-3 常用算术运算符及其示例
运 算 符运 算示 例结 果
+ 加5+5 10
- 减6-4 2
* 乘3*4 12
/ 除3/2 1.5
% 求余5%7 5
** 幂运算3**4 81
++ 自增(前置) a=2,b=++a a=3;b=3
++ 自增(后置) a=2,b=a++ a=3;b=2
- - 自减(前置) a=2,b=- -a a=1;b=1
- - 自减(后置) a=2,b=a- - a=1;b=2
算术运算符在实际应用中,需注意以下几点。
(1)四则混合运算时,运算顺序需遵循“先乘除后加减”原则。
(2)取模运算时,运算结果的正负取决于被模数的符号,与模数的符号无关。例如,(-
8)%7= -1,而8% (-7)=1。
(3)“++”或“- -”放在操作数前面时,先进行自增或自减运算,再进行其他运算。
若放在操作数之后,则先进行其他运算,再进行自增或自减运算。
2.字符串运算符
JavaScript中,“+”操作的两个数据中,只要有一个是字符型,则“+”表示字符串运算
符,用于返回两个数据拼接后的字符串,例如:
var tel = 110 + '120100';
console.log (tel); //输岀结果为:'110120100'
console.log(typeof tel); //输出结果:string
从上述示例可知,当变量或值通过运算符“+”与字符串进行运算时,变量或值就会被自
动转换为字符型,再与指定的字符串进行拼接。
3.赋值运算符
赋值运算符将运算符右边的值赋给左边的变量,“=”是最基本的赋值运算符,而非数学
意义上的相等关系,常用赋值运算符及其示例如表5-4所示。
表5-4 常用赋值运算符及其示例
运算符运 算示 例结 果
= 赋值a=3,b=2 a=3 b=2
续表
第5章 JavaScript基础1 35
运算符运 算示 例结 果
+= 加并赋值a=3,b=2;a+=b a=5 b=2
-= 减并赋值a=3,b=2;a-=b a=1 b=2
*= 乘并赋值a=3,b=2;a*=b a=6 b=2
/= 除并赋值a=3,b=2;a/=b a=1.5 b=2
%= 模并赋值a=3,b=2;a%=b a=1 b=2
+= 连接并赋值a="abc";a+="def" a="abcdef"
**= 幂运算并赋值a=2;a**=5 a=32
<<= 左移位赋值a=9,b=2;a<<= b a=36 b=2
>>= 右移位赋值a=-9,b=2;a>>= b a=-3 b=2
>>>= 无符号右移位赋值a=-9,b=2;a>>>= b a=1073741821 b=2
&= 按位与赋值a=3,b=9;a&= b a=1 b=9
^= 按位异或赋值a=3,b=9;a^= b a=10 b=9
|= 按位或赋值a=3,b=9;a|= b a=11 b=9
(1)同时赋值。
赋值运算符不仅可以为指定变量赋值,还可以利用一条赋值语句,同时为多个变量进行
赋值,例如:
var a = b = c = 8; //为三个变量同时赋值
在上述代码中,一条赋值语句可同时为变量a、b、c赋值,这是由于赋值运算符的结合性
为“从右向左”,即先将8赋值给变量c,然后再把变量c的值赋值给变量b,最后把变量b的
值赋值变量a,表达式赋值完成。
(2)“+=”运算符。
“+”运算符在JavaScript中既可以表示加运算、正数运算,也可表示字符串运算。因
此,“+=”运算符在使用时,若其操作数都是非字符型数据,则表示相加后赋值,否则用于拼
接字符串,例如:
var num1= 1,num2 = "2";
num1 += 3;
num2 += 3;
console.log(num1, num2); //输出结果为:4 "23"
4.比较运算符
比较运算符用于对两个数值或变量进行比较,其结果是一个布尔值,常用比较运算符及
其示例如表5-5所示。