【JavaScript】第二章基本语法

JavaScript程序设计案例教程(第2版)(双色)(含微课)

基本概念

JavaScript参考借鉴了很多语言的语法,如Java、C++、python等。

标识符

标识符是指开发者自定义的变量、函数、属性等的名称。
例如,单词apple可以作为标识符使用。并不是所有字符都能用作标识符,每种编程语言都有自己的标识符定义规则。
在这里插入图片描述
在定义较复杂的标识符时,可能会用到多个单词,此时可使用驼峰命名法(如redBag)、帕斯卡命名法(如RedBag)和下划线命名法(如red_bag)命名标识符。

  • 驼峰命名法常用于函数的命名;
  • 帕斯卡命名法常用于类和构造器的命名;
  • 下划线命名法常用于常量和私有变量的命名。

关键字和保留字

下文给出具体每个关键字保留字的用法含义
关键字是指JavaScript中预先定义好的单词,它们被赋予了各种不同的含义。
例如,var关键字表示变量声明。关键字不能用于标识符的命名,如果用关键字命名标识符,在程序运行时会出现错误提示。
下表列举了ES 5中的所有关键字。
在这里插入图片描述
ES 5中一共有26个关键字,它们有着不同的意义。
例如,var用于变量声明,function用于函数声明,typeof用于变量类型判断,if用于条件判断。
除关键字之外,JavaScript中还有一些保留关键字,简称保留字。保留字是指将来可能会用作JavaScript关键字的一些单词,是为JavaScript的发展预留的一些词语。
下表列举了目前JavaScript中的所有保留字
在这里插入图片描述

注释

几乎所有的编程语言都有注释功能。注释主要用于描述当前代码,它可以让别人更好地理解你编写的代码,在多人合作开发时尤其有用。
在程序解析时,注释会被JavaScript解释器忽略。
JavaScript中的注释主要有两种:单行注释和多行注释。

单行注释

单行注释以两个斜杠“//”开始,后面都是注释内容,代码如下

//声明变量name,并为其赋值
var name = 'tom';

多行注释

多行注释以斜杠和星号“/”开始,星号和斜杠“/”结束,代码如下

/*
* 声明变量teacher
* 为变量teacher赋值
*/
var teacher = 'math';

上述示例,中间的星号不是必需的,增加星号是为了增加注释的可读性。
多行注释中可以嵌套单行注释,但不能嵌套多行注释。

变量

变量可以理解为一个盒子,它可以存放各种各样的物品,在JavaScript中变量主要用于存放数据。

变量声明

JavaScript中一般使用var来声明变量,下面通过实例介绍具体方法。
【例2-1】 声明变量。

var cat; 				// 声明变量cat
var blueShoes; 			// 声明变量blueShoes
var boy, girl; 			// 声明变量boy和girl
console.log(cat);			// 输出结果undefined
console.log(blueShoes); 		// 输出结果undefined
console.log(boy); 			// 输出结果 undefined
console.log(girl); 			// 输出结果 undefined
  • 使用var声明了cat、blueShoes、boy和girl四个变量,其中boy和girl使用了同一个var。
  • 使用var可以一次声明一个变量,以“;”结束;也可以一次声明多个变量,各变量之间使用“,”分隔。
  • 下面运行例2-1创建的页面,并在控制台输出刚声明的变量,效果如下图2-1所示。
    在这里插入图片描述
    由图2-1可知,刚声明的四个变量打印出来全是undefined,变量值为undefined表示变量声明仅定义了一个空盒子,还没在盒子里装东西。

变量赋值

在声明变量之后,需要为变量赋值。
变量赋值的方式一般有两种:声明的同时进行赋值先声明后赋值
下面通过实例介绍具体方式。
【例2-2】 为变量赋值。

var book = 'JavaScript';		// 声明的同时进行赋值
console.log(book);			// 输出结果JavaScript
var car;
console.log(car);			// 输出结果undefined
car = 'bens';			// 先声明后赋值
console.log(car);			// 输出结果bens

下面运行页面,并在控制台输出刚声明并赋值的变量,效果如下图2-2所示。
在这里插入图片描述
由图2-2可知,在声明变量的同时赋值,能直接打印出变量book所对应的值“JavaScript”;先进行变量声明的car,打印的结果为undefined;当为变量car赋值后,打印变量car所对应的值,结果为“bens”。

数据类型

JavaScript是一门弱类型语言,和Java等强类型语言不同,它只有在赋值的时候才能确定变量对应的类型。
在ES 5中,JavaScript共有五种基本数据类型,分别是
在这里插入图片描述

Undefinded类型

Undefined类型是JavaScript中特有的数据类型,它仅有一个对应值undefined。可以定义一个变量值为undefined,代码如下

var weather = undefined;
console.log(weather);					// undefined

上述示例定义一个值为undefined的变量weather,在控制台输出weather的值为undefined。
定义一个变量且未赋值的情况下,它的值为undefined,所以在定义变量时,未进行赋值和赋值为undefined的变量其实是等价的。
一般来说不需要将变量显式定义为undefined。

Null类型

Null类型是JavaScript中另外一个仅有一个值的数据类型,它的对应值为null。
null表示一个空的对象指针,它和undefined其实很像,使用等于运算符(==)将null和undefined进行对比时,它们是相等的。
与undefined不同的是,null表示变量(对象或地址)不存在或者无效,而undefined表示变量没有被赋值。
在这里插入图片描述

Boolean类型

Boolean类型是JavaScript中比较常用的数据类型之一。
共有两个值:true、false。布尔型数据主要用于逻辑判断,true为真,false为假。代码如下

var appleIsFruit = true; 		// 苹果是一种水果是真实的,即变量为真
var appleIsMeat = false; 		// 苹果是一块肉是不真实的,即变量为假

在这里插入图片描述
其他类型的数据也可以转换为Boolean类型,可以通过Boolean()函数将Undefined类型和Null类型数据转换为Boolean类型。
【例2-3】 使用Boolean()函数将其他类型数据转换为Boolean类型

var tag;
var flag = null;
var tagAsBoolean = Boolean(tag);
var flagAsBoolean = Boolean(flag);
console.log(tagAsBoolean); 				// false
console.log(flagAsBoolean); 				// false

上述示例中,Undefined和Null类型的数据转换为Boolean类型后,结果都为false。
在学习了其他数据类型之后,可以尝试用Boolean()函数去转换,看看结果如何。

Number类型

和其他语言不同的是,JavaScript的Number(数值)类型不区分整数和浮点数(小数,在某些语言里称为双精度值),所有数值都为Number类型。
Number类型默认为正数,也可以在数值前加上“+”号表示正数,数值前加上“-”号表示负数。代码如下

var a = 10; 			// 定义a为正整数10
var a = +10; 			// 和上一行代码一致
var b = -10; 			// 定义一个负数
var c = 8.88; 			// 定义一个小数
var d = 2.12E5; 			// 科学计数法,等同于2.12 * 105
var e = 026; 			// 八进制数,表示十进制中的22
var f = 0x34; 			// 十六进制数,表示十进制中的52

由上述示例可以看出,数值类型还可以使用科学计数法表示,以0开始的数值表示八进制数,以0x开始的数值表示十六进制数。

【例2-4】 使用Number()函数将其他类型数据转换为Number类型。

      var tag1;
      var tag2 = null;
      var tag3 = true;
      var tag4 = false;
      var tag1AsNumber = Number(tag1); 
      var tag2AsNumber = Number (tag2);
      var tag3AsNumber = Number (tag3);
      var tag4AsNumber = Number (tag4);
      console.log(tag1AsNumber);
      console.log(tag2AsNumber);
      console.log(tag3AsNumber);
      console.log(tag4AsNumber);

由上述示例可以看出,除Undefined类型的数据转换成了NaN外,Null和Boolean类型的数据都转换成了0或者1。

NaN

NaN是JavaScript中的一个特殊全局对象属性,全称为Not a Number不是一个数字),但它本身却是一个Number类型的值。当其他语言的一个数值除以0时一般会有报错提示,但在JavaScript中会返回一个NaN,这样可以避免数值计算的错误。
NaN的两个特点:

  • NaN进行任何计算操作都会返回NaN,这可能导致运算过程中出现异常;
  • NaN和任意一个值都不相等,包括NaN本身。
    JavaScript提供了一个isNaN()全局方法来判断一个变量是否为NaN

String类型

String类型是由零个或多个Unicode字符组成的字符序列,这个字符序列又称为字符串,是开发过程中最常用的数据类型。
JavaScript中的字符串可以由单引号(’ ')或者双引号(" ")包裹。
注意:以单引号开始的字符串需要以单引号结尾,以双引号开始的字符串需要以双引号结尾,否则会报错。代码如下

var str = 'hello'; 					// 单引号字符串
var sky = "blue"; 					// 双引号字符串
var name = "'tim'cook" 				// 双引号内存在单引号
var book = ' "JavaScript"program design';                             // 单引号内存在双引号
var empty = ''; 					// 空字符串
// 报错,Uncaught SyntaxError: Invalid or unexpected token
var error = 'code";

由以上代码可以看出,字符串中双引号和单引号可以相互嵌套,但必须成对出现。某些情况下可能需要在单引号中增加单引号,或在双引号中增加双引号,此时可以使用转义字符“\”处理。代码如下

var str1 = 'this \'s a boy';		                 // 输出this's a boy
var str2 = "\"English\""			// 输出"English"

转义字符除了可以在字符串中输出引号之外,还有换行、输出反斜杠等功能。
下表2-3列出了JavaScript中转义字符常见应用及其含义。
在这里插入图片描述
其他类型数据同样可以转换为String类型,使用String()函数可将Undefined类型、Null类型、Boolean类型和Number类型数据转换为String类型。
【例2-5】 使用String()函数将其他类型数据转换为String类型。

	var tag1;
      var tag2 = null;
      var tag3 = true;
      var tag4 = 55;
      var tag1AsString = String(tag1); 
      var tag2AsString = String(tag2);
      var tag3AsString = String(tag3);
      var tag4AsString = String(tag4);
      console.log(tag1AsString);
      console.log(tag2AsString);
      console.log(tag3AsString);   
      console.log(tag4AsString);

运算符

算数运算符

算术运算符主要用于数值之间的计算。它的功能和数学中的加减乘除类似,并在其基础上增加了自增自减等操作。
在这里插入图片描述
算术运算符和数学中的运算符有许多相似之处,理解起来也比较容易,其主要新增了“++”和“–”两种运算符。
自增和自减运算符可以放在变量前或变量后。

【例2-6】 自增和自减运算符的应用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>示例2-6</title>
</head>
<body>
    示例2-6
    <script>
    	var a = 1;
      var b = a++;
      console.log(a, b);
      var c = 1;
      var d = ++c; 
      console.log(c, d);
      var e = 2;
      var f = e--;
      console.log(e, f);
      var i = 2;
      var j = --i; 
      console.log(i, j);
	</script>	 
</body>
</html>

,自增和自减运算符放在变量前和变量后结果是不同的,放在变量前表示变量先自增减,然后再进行其他操作;放在变量后表示变量先进行其他操作,再自增减。
“+”运算符不仅能用于数学上的加法运算,还可用于字符串拼接操作。

【例2-7】 “+”运算符的应用。

流程控制语句

var prefix = 'hello';
var name ='world';
var result = prefix + name;
console.log(result);				// 结果为helloworld
console.log('tom'+ 12);			// 结果为tom12
console.log('10' + 2);			// 结果为102

“+”号可以拼接字符串。值得注意的是,当字符串和数值进行加法操作时,会进行字符串拼接,而不会进行加法操作。
在这里插入图片描述

赋值运算符

赋值运算符是最常用的运算符,其作用是将运算符右侧的计算结果赋值给左侧的变量。
最基本的赋值运算符之前已使用多次,那就是“=”运算符。
赋值运算符的“=”不等同于数学中的等于号,数学中的等于号与比较运算符“= =”和“===”类似。

在这里插入图片描述
在这里插入图片描述
除“=”运算符以外,其他赋值运算符都是简写形式。例如

var num = 1;
num += 5;

它可以等价于以下代码:

var num = 1;
num = num + 5;

比较运算符

比较运算符主要用于变量与变量、变量与其他基本类型数据的比较,比较结果为Boolean类型的值,即true或者false。
在这里插入图片描述
在这里插入图片描述
“= =”和“= = =”都表示等于,“!=”和“!= =”都表示不等于,它们的主要区别是,“= =”和“!=”会对比较的数据进行类型转换(常称为隐式类型转换),再进行值比较;而“== =”和“!= =”不会进行数据类型转换,直接比较两个值是否相等。代码如下

console.log(1 == true); 			// 结果为true
console.log(1 === true); 			// 结果为false
console.log(22 != '22'); 			// 结果为false
console.log(22 !== '22'); 			// 结果为true

条件运算符

条件运算符也称为三元运算符,主要由条件表达式和结果表达式构成,是一种非常灵活的运算符。条件运算符结构如下

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

?”左边为条件表达式,条件表达式如果为真,则返回“结果1”;反之,条件表达式为假,则返回“结果2”。
【例2-8】 条件表达式的应用。

var num1 = 5;
var num2 = 8;
var result = num1 > num2 ? num1 : num2;
console.log(result); 	                                                      // 结果为8

num1等于5,num2等于8,条件表达式num1>num2的结果为假,所以返回num2的值8。
条件运算符还可以嵌套使用,不过建议尽量少用,嵌套使用条件运算符会降低代码可读性。示例如下

var a = 6;
var b = 3;
var c = 5;
var result = a < b ? a : b > c ? b : c;
console.log(result); 					// 结果为5

布尔运算符

布尔运算符又叫逻辑运算符,主要用于操作布尔型数据,当用于逻辑运算的变量或值(也称操作数)不是布尔型数据时,JavaScript会先将它们转换为布尔型再运算。
在这里插入图片描述
在实际开发中,布尔运算符也可以针对结果为布尔值的表达式进行运算。
例如,x<6 && y=9。

位运算符

在JavaScript中,位运算符用于操作数值型数据。在进行运算时,参与位运算的操作数都会转换为32位的二进制(0或1)字符串。
例如,十进制数字3转换为二进制为0011,此处略去了前面28位0。

在这里插入图片描述
下面将通过具体的示例,分别对七种位运算符的运算方法进行详细讲解。
首先定义两个操作数3和6,
3转换为二进制数为00000000 00000000 00000000 00000011,
6转换为二进制数为00000000 00000000 00000000 00000110。

(1)按位与“&”是将两个操作数的二进制位进行“与”运算,两个数的二进制位一一对应,0和0结果为0,1和0结果为0,1和1结果为1。3&6的运算过程如下
在这里插入图片描述
运算的结果为00000000 00000000 00000000 00000010,转换为十进制数为2。

(2)按位或“|”是将两个操作数的二进制位进行“或”运算,两个数的二进制位一一对应,0和0结果为0,1和0结果为1,1和1结果为1。3|6的运算过程如下
在这里插入图片描述
运算的结果为00000000 00000000 00000000 00000111,转换为十进制数为7。

(3)按位非“”是对操作数的二进制位进行“非”运算,按位非的结果是返回数值的反码,所谓反码就是0对应1,1对应0。3的运算过程如下
在这里插入图片描述
运算的结果为11111111 11111111 11111111 11111100,运算结果的最高位1代表负数,计算时末位减1取反,转换为十进制数为-4。
(4)按位异或“”是将两个操作数的二进制位进行“异或”运算,两个数的二进制位一一对应,0和0结果为0,1和0结果为1,1和1结果为0。36的运算过程如下
在这里插入图片描述
运算的结果为00000000 00000000 00000000 00000101,转换为十进制数为5
(5)左移“<<”是将操作数所有二进制位向左移动指定位数,“<<”左边的数值表示操作数,右边的数值表示移动的位数。
在进行左移操作时,右边的空位进行补0操作,左边移出的部分舍弃。3<<6的运算过程如下
在这里插入图片描述
运算的结果为00000000 00000000 00000000 11000000,转换为十进制数为192。
(6)右移“>>”是将操作数所有二进制位向右移动指定位数,“>>”左边的数值表示操作数,右边的数值表示移动的位数。
在进行右移操作时,左边的空位进行补0或者补1操作(操作数为正数则补0,为负数则补1),右边移出的部分舍弃。3>>6的运算过程如下:
在这里插入图片描述
运算的结果为00000000 00000000 00000000 00000000,转换为十进制数为0
(7)无符号右移“>>>”是将操作数的所有二进制位向右移动指定位数,“>>>”左边的数值表示操作数,右边的数值表示移动的位数。
在进行右移操作时,左边的空位进行补0操作,右边移出的部分舍弃。3>>>6的运算过程如下
在这里插入图片描述
运算的结果为00000000 00000000 00000000 00000000,转换为十进制数为0。

运算符优先级

前面几节介绍了JavaScript中的各种运算符,每个运算符都有自己的运算规则。当一个表达式中同时出现多个运算符时,需要按照一定的顺序执行运算符,以保证程序的正确执行。
运算符的执行顺序也就是运算符优先级。
下表2-9展示了JavaScript中运算符的优先级(自上向下运算符优先级依次降低)和执行顺序(自左向右或者自右向左)。

在这里插入图片描述
在这里插入图片描述

【示例】计算立方体体积

通过计算立方体的体积,练习前面学习的变量、数据类型及运算符的应用。
要实现的效果为,在输入立方体的长、宽、高后,单击按钮系统自动计算立方体的体积。

1.编写HTML代码

<div>
	<input type="number" id="length" placeholder="请输入长">
	<input type="number" id="width" placeholder="请输入宽">
	<input type="number" id="height" placeholder="请输入高">
	<button id="button">计算结果</button>
</div>

2.编写JavaScript代码

// 为按钮添加一个单击事件
document.getElementById('button').onclick = function() {
	var length = document.getElementById('length').value				// 获取输入的长度值
	var width = document.getElementById('width').value				// 获取输入的宽度值
	var height = document.getElementById('height').value				// 获取输入的高度值
	var volume = length * width * height;	// 通过乘法计算体积
	// 如果计算的体积不是一个数字,提示用户“请输入正确的长、宽、高”
	isNaN(volume) ? alert('请输入正确的长、宽、高') : alert('立方体体积为:' + volume);
}

当输入长度为3、宽度为4、高度为5时,单击“计算结果”按钮,最终得到结果为60,效果如下图所示。
在这里插入图片描述
完整的html+JavaScript代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算立方体的体积</title>
</head>
<body>
	<div>
		<input type="number" id="length" placeholder="请输入长">
		<input type="number" id="width" placeholder="请输入宽">
		<input type="number" id="height" placeholder="请输入高">
		<button id="button">计算结果</button>
	</div>

    <script>
    	// 为按钮添加一个单击事件
		document.getElementById('button').onclick = function() {
			var length = document.getElementById('length').value  // 获取输入的长度值
			var width = document.getElementById('width').value  // 获取输入的宽度值
			var height = document.getElementById('height').value  // 获取输入的高度值
			var volume = length * width * height;  // 通过乘法计算体积
			// 如果计算的体积不是一个数字,提示用户“请输入正确的长宽高”
			isNaN(volume) ? alert('请输入正确的长宽高') : alert('立方体体积为:' + volume);
		} 
	</script>	 
</body>
</html>

流程控制语句

JavaScript提供了一些语句(也称为流程控制语句)来控制程序的执行流程。
这些语句包括顺序结构、选择结构和循环结构共三大类。
前面编写的自上而下按顺序执行的程序都是顺序结构的语句。
本节将分别介绍选择结构和循环结构语句。

选择结构语句

选择结构语句就是通过对程序中给出的不同条件进行判断,进而决定执行对应的语句。
常用的选择结构语句有两种分别是:if、switch。

1.if语句

if语句是最基本、最常见的选择结构语句。其基本语法格式如下

if (判断条件) {
代码块1
} else {
   代码块2
}

判断条件是一个Boolean类型的值,当其值为true时,执行代码块1;当其值为false时,执行代码块2。
根据分支数量的多少,if语句又可以分为单分支、双分支和多分支语句。

单分支语句

在单分支if语句中省略了else分句,当满足判断条件时,就向下执行程序,否则不做任何处理。下面通过实例介绍。
【例2-9】 单分支if语句的应用。

var price = 10;
if (price > 5) {
    console.log('价格大于5');
}

上述示例中,判断条件为一个布尔值,当判断条件值为true时,执行{}中的代码段;当判断条件值为false时,不做任何处理。

双分支语句

在双分支语句中有一个else分句,当满足某个条件时就执行某一个语句块,否则执行另一个语句块。
【例2-10】 双分支if…else语句的应用。

var price = 3;
if (price > 5) {
    console.log('价格大于5')
} else {
    console.log('价格不大于5')
}

当if判断条件为true时,就执行语句块1;当if判断条件为false时,就执行语句块2。
其执行流程如下图
在这里插入图片描述

多分支语句

当判断条件同时有多个时,除了连续使用多个if进行条件判断之外,还可以使用else if语句来扩展需求。代码如下

if (color === 'red') {
  console.log('red');
} else if (color === 'green') {
  console.log('green');
} else if (color === 'blue') {
  console.log('blue');
} else {
  console.log('other')
}

上述示例中,一个if可以接上多个else if语句。
当第一个判断条件为true时,则执行第一个语句块;否则继续判断第二个条件,若为true则执行第二个语句块;依此类推,若所有条件都为false,则执行else下的最后一个语句块。
注意:else if必须在if语句之后,else语句之前。
多分支语句的执行流程如下图
在这里插入图片描述

2.switch语句

除if语句外,还可以通过switch语句进行流程控制。
switch语句也是多分支选择结构语句,和if系列条件语句功能相同。
不同:它只能针对某个表达式的值进行判断,从而决定执行哪一段代码。
特点:代码结构更加清晰简洁。
其基本语法结构如下

switch (表达式) {
   case1: 
        语句块1;
        break;
   case2: 
        语句块2;
         break;
         ……
   default: 
        语句块n;
}

switch语句主要是通过case进行条件判断,一个case代表一种结果,当满足case条件后,会执行case里的代码块;当前面所有case都没有匹配成功时,会执行default里的代码块。
注意:case匹配到一个条件以后还会执行下一个case,这个时候可能需要跳出这个条件语句,所以使用了break语句。
【例2-11】 switch语句的应用。

    	var num=3;
      switch (num) {
        case 1: 
          console.log(1);
          break;
        case 2:
          console.log(2);
          break;
        case 3:  
          console.log(3);
          break;
        case 4:  
          console.log(4);
          break;
      default:
          console.log('匹配失败');
      }

当遇到需要对同一个变量进行多次判断的场景时,可以考虑使用switch语句。

循环结构语句

循环结构语句用于反复执行一系列语句,直到条件表达式的值为假为止。
JavaScript中常用的循环结构语句包括for、for-in、while和do-while

1.for语句

for?语句是最常用的循环结构语句,适合循环次数已知的情况。for?语句的基本结构如下

for (初始化表达式;循环条件;操作表达式) {
    代码块
}

for?关键字后面的小括号()中包括初始化表达式、循环条件和操作表达式共三部分内容,它们之间用分号隔开,大括号{}中代码块为循环体
【例2-12】 使用for语句输出数字0~9。(实例位置:example/ch2/2-12.html)用的循环结构语句,适合循环次数已知的情况。for?语句的基本结构如下

for (var i=0;i<10;i++) {
  console.log(i); 					// 循环10次打印i的值
}

上述示例,首先定义了一个初始值i并赋值为0,接着给出循环条件i<10,最后一个是操作表达式i++。所以for循环的执行条件是先判断初始值是否满足循环条件,满足条件,执行代码块内容,然后执行操作表达式,之后不断重复,直至循环结束。
拓展阅读
for循环中的初始化表达式、循环条件及操作表达式都是可选的,如果在for语句中一个表达式都不写,将创建一个无限循环。具体示例如下

for (;;) {
  console.log(1);	
}

运行这段代码会陷入无限循环(也称作死循环),for语句之后的代码将无法继续执行。一般应用程序不会用到无限循环。

2.for-in语句

for-in语句主要用于遍历对象,其基本结构如下

for (属性名 in 对象) {
  // 代码块
}

【例2-13】 使用for-in语句输出window对象上所有属性和方法

for (var name in window) {
  console.log(name);
}

上述示例中,for-in语句由属性名、in和待遍历的对象组成。
for-in语句将遍历对象上的所有属性,当属性遍历完成后循环结束。
注意:for-in循环是没有顺序的,不同浏览器遍历出的属性顺序可能存在不一致的情况。

3.while语句

while语句根据循环条件来判断是否重复执行一段代码,它的结构比for语句更简单,while语句的基本结构如下:

while (循环条件) {
  // 代码块
}

上述语句中,大括号{}中的代码块为循环体,当循环条件为true时,则执行循环体,执行结束后,再次判断循环条件是否为true,循环反复执行
【例2-14】使用while语句输出数字0~9。

var i = 0;
while (i < 10){
  console.log(i);
  i++;
}

while语句比for语句使用更简单,但是由于缺少终止条件,很容易出现死循环。
所以在使用while语句时,一定要注意控制好终止条件,可根据需要在循环体中设置循环结束的条件。

4.do-while语句

do-while语句和while语句类似,最大的不同在于,while是先判断条件再执行循环体,而do-while是无条件执行一次循环体后再判断条件。其语法结构如下

do {
  循环体
}while (循环条件);

【例2-15】 使用do-while语句输出数字0~9。

var i = 0;
do {
  console.log(i);
  i++;
} while (i < 10)

上述示例中,do-while语句将待执行的代码块放在do语句中,循环开始时,先执行一次do语句里的代码,再判断while条件是否成立,之后的执行流程和while语句一致,循环反复执行。

跳转语句

switch语句时已经用到了跳转语句break,它不仅能用于switch语句,还能用于循环控制语句,主要作用是终止当前语句的执行。
【例2-16】 break在循环语句中的应用。

for (var i=0;i<5;i++) {
  if (i === 1) {
    break;
}
console.log(i);
}

上述示例的运行结果是0。由此可以看到,当i等于1时执行了break语句,此时for循环被break终止,不再往下执行。
除break外,还有一个跳出语句continue,主要应用于循环中,其主要作用是结束当前一次循环。
【例2-17】 continue在循环语句中的应用。

for (var i=0;i<5;i++) {
  if (i === 1) {
    continue;
}
console.log(i);
}

上述示例的运行结果是0、2、3、4。由该运行结果可以看出,continue语句仅在i等于1时没有打印出对应的值,由此可知continue语句并没有跳出整个循环,仅跳过当次循环的执行

综合案例:计算银行存款

小明在中国建设银行、中国工商银行、中国农业银行三家银行分别存入10 000元定期存款,存款年限分别为4年、5年、6年,年利率分别为3.75%、3.25%、3%。请问当所有定期存款日期结束时,小明在哪家银行获得的收益最高。
本案例是一个简单的数学运算,只需要分别循环计算出各个银行到期之后存款的总额度,然后将这3个数值进行比较,即可得到结果
上述示例,首先定义了三个银行的存款初始值10 000,然后使用3个for循环分别计算出存款日期结束后的存款总额度,最后通过3个条件语句比较哪个银行最终的存款总额度最高。比较结果为中国农业银行的收益最高。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>计算存款</title>
</head>
<body>
  <script>
    var moneyOfBank1 = 10000;  // 定义银行1存款100000
	var moneyOfBank2 = 10000;  // 定义银行2存款100000
	var moneyOfBank3 = 10000;  // 定义银行3存款100000
	for (var i=1;i<5;i++) {
		moneyOfBank1 += moneyOfBank1 * 3.75 / 100; 
		// 通过for循环4次,计算银行1总额度
	}
	for (var j=1;j<6;j++) {
		moneyOfBank2 += moneyOfBank2 * 3.25 / 100; 
		// 通过for循环5次,计算银行2总额度
	}
	for (var k=1;k<7;k++) {
		moneyOfBank3 += moneyOfBank3 * 3 / 100; 
		// 通过for循环6次,计算银行2总额度
	}
	// 比较各银行最终计算的存款
	if (moneyOfBank1 > moneyOfBank2 && moneyOfBank1 > moneyOfBank3) {
		// 如果moneyOfBank1值最大,弹出提示框"中国建设银行收益最高"
		alert('中国建设银行收益最高'); 
	} else if (moneyOfBank2 > moneyOfBank1 && moneyOfBank2 > moneyOfBank3) {
		// 如果moneyOfBank2值最大,弹出提示框"中国工商银行收益最高"
		alert('中国工商银行收益最高');
	} else if (moneyOfBank3 > moneyOfBank1 && moneyOfBank3 > moneyOfBank2) {
		// 如果moneyOfBank3值最大,弹出提示框"中国农业银行收益最高"
		alert('中国农业银行收益最高');
	}
  </script>
</body>
</html>

本章小结

本章首先讲解了JavaScript的标识符、关键字与保留字,然后通过代码示例讲解了变量的声明与赋值,接下来介绍了五种数据类型,之后通过案例讲解运算符及运算符的优先级,最后讲解了JavaScript中常用的流程控制语句,以及如何使用这些语句编写程序。
通过本章的学习,读者应重点掌握标识符的定义规则、变量的赋值与声明、各种数据类型的特点、各种运算符的应用、运算符优先级,以及条件语句、循环语句等常用语句的应用,为之后的程序编写打下基础。

附录(保留字-关键字)

Js的保留字
保留字没有任何特定的用途,但是他们很有可能将来被用作关键字,所以保留字一般也不能用来做标识符。
abstract:abstract(抽象)修饰符,可以修饰类和方法
boolean:对象用于将非布尔值转换为布尔值
byte:字节
char:定义字符型变量
class:定义“类”
const: 声明一个只读的常量,一旦声明,常量的值就不能改变
debugger:debugger 语句用于停止执行 JavaScript,并调用 (如果可用) 调试函数。
double:双精度浮点型
enum:枚举
export:可以输出一个模块,可以是变量或者方法
extends:用来创建一个普通类或者内建对象的子类。
final:修饰用的关键字
float:Float() 函数可解析一个字符串,并返回一个浮点数
goto:无条件转移语句
implements:实现相应接口的方法
import:用于导入由另一个模块导出的绑定
int:是将一个数值向下取整为最接近的整数的函数
interface:是面向对象编程语言中接口操作的关键字,功能是把所需成员组合起来,用来装封一定功能的集合
long: 表示一种长整型数据,是编程语言中的一种基本数据类型,为long int 的缩写,默认为有符号长整型
native:是一种将手机操作系统的原生对象转义
package: Packages属性是 Java 解释器所知道的所有包的根
private:内部变量private;@private标签标记标识符为私有
protected:创建实用程序函数
public:全局变量
short:短整型
static:static的变量称为静态变量或类变量
super:super() 函数是用于调用父类(超类)的一个方法
synchroonized:实例对象锁
throws:将异常抛给调用者可以使程序能够继续执行下去
transient:一种持久化对象实例的机制
volatile:.volatile的作用是作为指令关键字,确保本条指令不会因编译器的优化而省略,且要求每次直接读值
————————————————

JavaScript的关键字
关键字可用于表示控制语句的开始和结束,或者用于执行特定操作等等。按照规则,关键字也是语言保留的,不能用作标识符。

break: 用于switch语句和循环结构中, 在switch语句中的作用是立即结束当前的switch语句;在循环结构中的作用是立即结束当前的循环结构

case:存在于switch语句中,每存在一个case,存在一种选择情形

catch:存在于try.catch语句中,其中try 部分包含需要运行的代码,而 catch 部分包含错误发生时运行的代码

continue:continue 语句中断(循环中)的一个迭代,如果发生指定的条件。然后继续循环中的下一个迭代。

debugger:debugger 语句用于停止执行 JavaScript,并调用 (如果可用) 调试函数。

default:虚拟扩展方法。指的是,在接口内部包含了一些默认的方法实现(也就是接口中可以包含方法体,这打破了Java之前版本对接口的语法限制),从而使得接口在进行扩展的时候,不会破坏与接口相关的实现类代码。

delete:用于删除对象的某个属性;如果没有指向这个属性的引用,那它最终会被释放。

do:存在于do/while 循环,指的是当指定的条件为 true 时循环指定的代码块,但该循环在判断条件前会执行一次代码块

else:if…else 语句在条件为 true 时执行代码,在条件为 false 时执行其他代码

finally: try/catch/finally 语句用于处理代码中可能出现的错误信息。finally语句在 try 和 catch 之后无论有无异常都会执行。

for:for - 循环代码块一定的次数。for/in - 循环遍历对象的属性

function:使用关键字 function 定义函数。

if:if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码

in:for/in 语句用于循环对象属性。循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。

instanceof:nstanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上

new:new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例

return:return 语句会终止函数的执行并返回函数的值。

switch:switch/case 语句用于基于不同的条件来执行不同的动作。

this:JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。
在方法中,this 表示该方法所属的对象。
如果单独使用,this 表示全局对象。
在函数中,this 表示全局对象。
在函数中,在严格模式下,this 是未定义的(undefined)。
在事件中,this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

throw:throw 语句抛出一个错误。当错误发生时, JavaScript 会停止执行并抛出错误信息。

try:try…catch 的作用是测试代码中的错误。

typeof:typeof是一个运算符,有2种使用方式:typeof(表达式)和typeof 变量名,第一种是对表达式做运算,第二种是对变量做运算。

var:var 语句用于声明变量。

void:该操作符指定要计算一个表达式但是不返回值

while:while 循环会在指定条件为真时循环执行代码块。

with: with语句的作用是将代码的作用域设置到一个特定的作用域中

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

KryHan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值