JavaScript+Vue.jsWeb开发实战教程课件 第二章 JavaScript基础语法

JavaScript基础语法演讲人：XXXXXXJavaScript+Vue.jsWeb开发实战教程02学习目标理解JavaScript变量的概念了解JavaScript的数据类型了解JavaScript的运算符能够独立定义各种类型的数据能够定义变量能够使用运算符进行数据操作能够正确使用标识符和关键字思维导图2.1变量在程序设计语言中，通常将这类可变的内容称为变量。JavaScript变量可用于存放值和表达式。变量的命名遵循以下原则：变量名必须以字母、$或_开头（推荐以字母开头）。变量名不能包含空格或其他标点符号。变量名对大小写敏感（例如，a和A是不同的变量）。2.1.1变量声明与赋值在JavaScript中，变量声明用关键字“var”实现，变量赋值用“=”实现。变量声明与赋值其实是分开的两步操作，如语句“vara=1;”实际的实现步骤如下。vara;//声明变量aa=1;//给变量a赋值1变量必须在声明之后才能使用，否则JavaScript会报“变量未定义”的错误。如果只是声明了变量a而没有给变量a赋值，那么变量a的值为“undefined”。2.1.2局部变量与全局变量2．全局变量在JavaScript函数外部声明的变量是全局变量，网页上的所有脚本和函数都能访问该变量。全局变量会在页面关闭后被删除。1．局部变量在JavaScript函数内部声明的变量是局部变量（该变量的作用域是局部的），只能在函数内部访问该变量，在函数运行结束时该变量即被删除。局部变量和全局变量在JavaScript中，变量分为局部变量和全局变量，二者在使用上存在一些区别。2.2.1基本数据类型JavaScript中有5种基本数据类型，分别为String（字符串）类型、Number（数值）类型、Boolean（布尔）类型、Undefined类型、Null类型。1．String类型String类型用于表示由0、1或多个16位Unicode字符组成的字符序列，即字符串。字符串必须用引号（单引号和双引号皆可）进行标识。varname="HelloWorld";varname='HelloWorld';varstring="Pleaseread'HelloWorld'";varstring='Pleaseread"HelloWorld"';2．Number类型2.2.1基本数据类型JavaScript为了支持各种Number类型，定义了不同的数值字面量格式：十进制字面量：varintnum=50;//整数八进制字面量：varintnum=0o70;//对应十进制值56十六进制字面量：varintnum=0xA;//对应十进制值10整数浮点数是指带有小数点，并且小数点后至少有一位数字的数。varfloatnum=1.1varfloatnum=.1//有效，但不推荐使用浮点数需要的内存空间是整数的两倍，因此为了减少内存的使用，JavaScript会将一些浮点数保存为整数对于极小或极大的值，可以用科学记数法表示。浮点数的最高精度是17位小数，但是在进行算术运算时其精度远远不如整数。浮点数NaN（Not-a-Number）代表非数字，其是一个特殊的数值，用于表示无效或不可表示的结果。NaN有以下两个主要特点：一是任何涉及NaN的运算（如NaN/10）的返回结果都是NaN；二是NaN不等于任何值，甚至不等于其自身。NaN3．Boolean类型2.2.1基本数据类型JavaScript为了支持各种Number类型，定义了不同的数值字面量格式：十进制字面量：varintnum=50;//整数八进制字面量：varintnum=0o70;//对应十进制值56十六进制字面量：varintnum=0xA;//对应十进制值10整数浮点数是指带有小数点，并且小数点后至少有一位数字的数。varfloatnum=1.1varfloatnum=.1//有效，但不推荐使用浮点数需要的内存空间是整数的两倍，因此为了减少内存的使用，JavaScript会将一些浮点数保存为整数对于极小或极大的值，可以用科学记数法表示。浮点数的最高精度是17位小数，但是在进行算术运算时其精度远远不如整数。浮点数NaN（Not-a-Number）代表非数字，其是一个特殊的数值，用于表示无效或不可表示的结果。NaN有以下两个主要特点：一是任何涉及NaN的运算（如NaN/10）的返回结果都是NaN；二是NaN不等于任何值，甚至不等于其自身。NaN2.2.1基本数据类型3．Boolean类型Boolean类型有两个字面量：true和false。这两个值与数字值并不相同，即true不一定等于1，false不一定等于0。

vara=true;

varb=false;Boolean类型字面量区分大小写，如True、False等并非Boolean类型的值，只是标识符。另外，Boolean类型的值不能用引号标识，如"true"不是Boolean类型的值。4．Undefined类型2.2.1基本数据类型Undefined类型只有一个值，即特殊的undefined。在使用var声明变量但未进行初始化时，该变量的值就是

undefined。例如，以下代码将输出

message

变量的值（位置：单元2/2-2.html）。varmessage;alert(message); //输出：undefined但是，值为undefined的变量与未定义的变量是不一样的。未定义的变量无法使用，浏览器会抛出“变量未定义”的错误。例如，以下代码将输出message和message1变量的值（位置：单元2/2-3.html）。varmessage;console.log(message);//message已声明但未初始化，因此输出undefinedconsole.log(message1);//message1未定义，浏览器报错5．Null类型2.2.1基本数据类型Null类型也只有一个值，即特殊的null。从逻辑角度来看，null值表示一个空对象指针。如果定义的变量准备用于保存对象，那么最好将该变量初始化为null而不是其他值。这样，只要直接检测null值，就知道相应的变量是否已经保存了一个对象的引用。示例如下。if(object!=null){//对object对象执行某些操作}2.2.2引用数据类型

1．Object类型对象（Object）是一组数据和功能的集合。创建对象的方式有两种。一种方式是使用new关键字后跟Object()构造函数；另一种方式是使用对象字面量表示法。varperson=newObject();="John";person.age=12;varperson={

name:'John',

age:12}在使用对象字面量表示法时，如果花括号中无任何内容，则可以定义值包含默认属性和方法的对象。varperson={};//作用与newObject()相同

="John";person.age=12;2.2.2引用数据类型

2．Array类型创建数组的方式有两种。一种方式是使用Array()构造函数，示例如下。varfruits1=newArray();varfruits2=newArray(10);varfruits3=newArray('apple','banana','peach');另一种方式是使用数组字面量表示法，示例如下。varfruits1=[];varfruits2=['apple','banana','peach'];2.2.2引用数据类型

3．Date类型JavaScript中的Date类型使用自1970年1月1日0时开始经过的毫秒数来保存日期和时间。在使用这种数据存储格式的条件下，Date类型保存的日期和时间能够精确到1970年1月1日之后的285616年。Date类型的对象为Date对象，也称日期对象，其使用new关键字和Date()构造函数创建，具体如下。varnow=newDate();在调用Date()构造函数而不传递参数的情况下，新创建的对象会自动获得当前日期和时间。为了简化这一计算过程，JavaScript提供了两个方法：Date.parse()和Date.UTC()。2.2.2引用数据类型

方法描述Date()返回当前的日期和时间getDate()获取日期对象中月中的天数（1～31）getDay()获取日期对象中周中的天数（0～6）getMonth()获取日期对象中的月份（0～11）getFullYear()获取日期对象中的年份getHours()获取日期对象中的小时数（0～23）getMinutes()获取日期对象中的分钟数（0～59）getSeconds()获取日期对象中的秒数（0～59）getMilliseconds()获取日期对象中的毫秒数（0～999）getTime()返回1970年1月1日至今的毫秒数getTimezoneOffset()返回本地时间与格林尼治标准时的分钟差getUTCDay()根据世界时返回Date对象中周中的天数（0～6）getUTCMonth()根据世界时返回Date对象的月份（0～11）getUTCFullYear()根据世界时返回Date对象的4位数的年份getUTCHours()根据世界时返回Date对象的小时数（0～23）getUTCMinutes()根据世界时返回Date对象的分钟数（0～59）getUTCSeconds()根据世界时返回Date对象的秒数（0～59）getUTCMilliseconds()根据世界时返回Date对象的毫秒数（0～999）parse()返回1970年1月1日0时到指定日期（字符串）的毫秒数setTime()以毫秒数设置Date对象表Date类型的方法2.2.2引用数据类型

续表方法描述setUTCDate()根据世界时设置Date对象中月的天数（1～31）setUTCMonth()根据世界时设置Date对象中的月份（0～11）setUTCFullYear()根据世界时设置Date对象中的年份（4位数字）setUTCHours()根据世界时设置Date对象中的小时数（0～23）setUTCMinutes()根据世界时设置Date对象中的分钟数（0～59）setUTCSeconds()根据世界时设置Date对象中的秒数（0～59）setUTCMilliseconds()根据世界时设置Date对象中的毫秒数（0～999）toSource()返回该对象的源代码toString()把Date对象转换为字符串toTimeString()把Date对象的时间部分转换为字符串toDateString()把Date对象的日期部分转换为字符串toUTCString()根据世界时把Date对象转换为字符串toLocaleString()根据本地时间把Date对象转换为字符串toLocaleTimeString()根据本地时间把Date对象的时间部分转换为字符串toLocaleDateString()根据本地时间把Date对象的日期部分转换为字符串UTC()根据世界时返回1970年1月1日0时到指定日期的毫秒数valueOf()返回Date对象的原始值2.2.2引用数据类型

4．RegExp类型在JavaScript中，RegExp类型的对象用来表示正则表达式。正则表达式的创建也有两种方式。varpattern=newRegExp("[bc]at","i")//匹配以“b”或“c”开头，以“at”结尾的字符串，不区分大小写另一种方式是使用字面量定义正则表达式，定义方式如下。一种方式是使用RegExp()构造函数定义正则表达式。RegExp()构造函数接收两个参数：一个是要匹配的字符串模式，另一个是可选的标志字符串。使用示例如下。varexpress=/pattern/flags;2.2.2引用数据类型

其中，模式（pattern）部分可以是任何简单或者复杂的正则表达式（由字符、限定符和特殊符号组成）。每一个正则表达式都可以带有一个或者多个标志（flags），用以标明正则表达式的行为。正则表达式匹配模式支持以下3个标志。g：全局（global）模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止匹配。i：不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写。m：多行（multiline）模式，即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。2.2.3基本数据类型值和引用数据类型值的区别JavaScript包含两种不同类型的值：基本数据类型值和引用数据类型值。基本数据类型值指的是简单的数据段。引用数据类型值指由多个值构成的对象。基本数据类型是按值访问的，因为可以直接操作保存在变量中的实际值。例如，输出变量a的值，代码如下所示（位置：单元2/2-6.html）。vara=10;varb=a;b=20;alert(a);引用数据类型是保存在堆（heap）内存中的对象。与其他语言不同的是，JavaScript不能直接访问堆内存中的位置和操作堆内存，只能操作对象在栈（stack）内存中的引用地址。2.2.3基本数据类型值和引用数据类型值的区别对于引用数据类型值，栈内存保存的实际上是值在堆内存中的引用地址。通过该引用地址，可以快速查找到保存在堆内存中的值。例如，输出对象属性的值，代码如下所示（位置：单元2/2-7.html）。varobj1=newObject();varobj2=obj1;="你好";alert();综上所述，基本数据类型值和引用数据类型值的区别如下表所示。2.2.3基本数据类型值和引用数据类型值的区别区别基本数据类型值引用数据类型值声明变量时的内存分配存储在栈中的简单数据段，直接存储在变量访问的位置。因为基本数据类型占据的空间是固定的，所以可将它们存储在较小的内存区域，即栈中，这样存储便于迅速查找变量的值存储在堆中的对象，存储在变量访问处的值是一个引用地址。由于引用数据类型值所占用的内存空间大小不固定，因此不适合将其存储在栈中，否则会影响变量查找效率访问机制基本数据类型的值可以直接访问JavaScript不允许直接访问保存在堆内存中的对象，所以在访问一个对象时，首先得到的是该对象在堆内存中的地址，然后需要按照这个地址获得该对象中的值变量赋值将一个保存着基本数据类型值的变量赋值给另一个变量时，会将基本数据类型值的副本赋值给新变量，此后这两个变量是完全独立的，它们只是拥有相同的值而已将一个保存着对象引用地址的变量赋值给另一个变量时，会把该引用地址赋值给新变量，这两个变量都指向了堆内存中的同一个对象，它们中任何一个做出的改变都会体现在另一个身上（注意：复制对象时并不会在堆内存中新生成一个一模一样的对象，只会增加一个保存指向该对象的指针的变量）参数传递只是把变量里的值传递给参数，之后参数和该变量互不影响对象变量里的值是该对象在堆内存中的内存地址，因此其传递的值就是这个内存地址表

基本数据类型值和引用数据类型值的区别2.2.4数据类型转换JavaScript的数据类型转换方法主要有3种：转换函数、强制类型转换和变量弱类型转换。使用typeof关键字可以查看JavaScript变量的数据类型，示例如下。typeof"John"; //返回：stringtypeof3.14; //返回：numbertypeofNaN; //返回：numbertypeoffalse; //返回：booleantypeof[1,2,3,4]; //返回：objecttypeof{name:'John',age:34}; //返回：objecttypeofnewDate(); //返回：objecttypeofmyCar; //返回：undefined（在myCar没有声明的情况下）typeofnull; //返回：object通过上述代码的返回结果可以看出，NaN的数据类型是number，数组的数据类型是object，日期的数据类型为object，null的数据类型是object，未定义变量的数据类型为undefined。1．转换函数JavaScript提供了parseInt()和parseFloat()两个转换函数，其中parseInt()函数用于把值转换成整数，parseFloat()函数用于把值转换成浮点数。（1）parseInt()函数parseInt()函数在判断字符串是否是数字之前，会仔细分析该字符串。parseInt()函数首先查看位置0处的字符，判断其是否是有效数字。如果该字符不是有效数字，该函数返回NaN，不再继续执行其他操作，但如果该字符是有效数字，该函数将查看位置1处的字符，并进行同样的判断。这一过程将持续到发现为非有效数字的字符为止，此时parseInt()函数将把该字符之前的字符串转换成数字。2.2.4数据类型转换parseInt("1234blue");

//返回：1234

parseInt("0xA");

//返回：10

parseInt("22.5");

//返回：22

parseInt("blue");

//返回：NaN示例如下：parseInt()函数还支持基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。（2）parseFloat()函数parseFloat()函数的处理方式与parseInt()函数的处理方式相似，从位置0开始查看每个字符，直到找到第1个为非有效数字的字符为止，然后把该字符之前的字符串转换成数字。使用parseFloat()函数的另一不同之处在于，字符串必须用十进制形式表示浮点数，而不能用八进制形式或十六进制形式。2.2.4数据类型转换parseFloat("1234blue"); //返回：1234.0parseFloat("0xA"); //返回：NaNparseFloat("22.5"); //返回：22.5parseFloat("22.34.5"); //返回：22.34parseFloat("0908"); //返回：908parseFloat("blue"); //返回：NaN使用parseFloat()函数的示例如下：2．强制类型转换2.2.4数据类型转换01Boolean()函数02Number()函数Number()函数用于把值转换成数字（整数或浮点数）。Number()函数与

parseInt()函数和parseFloat()函数类似，它们的区别在于Number()函数用于转换整个值，而

parseInt()函数和parseFloat()函数则用于转换字符串开头部分数值。例如，输出一些调用Number()函数之后的结果，代码如下所示（位置：单元2/2-9.html）。03String()函数String()函数用于把值强制转换成字符串。String()函数可以把所有类型值转换为字符串，用法如下所示。varstr1=String(null);//返回："null"

也可以使用作为参数传递进来的值的toString()方法将该值转换为字符串。varstr1=123;varstr2=str1.toString();Boolean()函数用于把值转换成Boolean类型的值。Boolean()函数的参数为value，参数value不同，将会返回不同的结果。如果value为至少有一个字符的字符串、非0的数字或者对象，那么Boolean(value)将会返回true；如果value为空字符串、数字0、undefined或者null，那么Boolean(value)将会返回false。示例如下（位置：单元2/2-8.html）。<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>Boolean()强制类型转换</title></head><body><script>

document.write(Boolean("")+"<br/>");

document.write(Boolean("s")+"<br/>");

document.write(Boolean(0)+"<br/>");

document.write(Boolean(1)+"<br/>");

document.write(Boolean(-1)+"<br/>");

document.write(Boolean(null)+"<br/>");

document.write(Boolean(undefined)+"<br/>");

document.write(Boolean(newObject())+"<br/>");</script></body></html>2.2.4数据类型转换Boolean()函数的强制类型转换结果如图所示。图Boolean()函数的强制类型转换结果<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>Number()强制类型转换</title></head><body><script>

document.write(Number(false)+"<br/>");

document.write(Number(true)+"<br/>");

document.write(Number(undefined)+"<br/>");

document.write(Number(null)+"<br/>");document.write(Number("1.2")+"<br/>");

document.write(Number("1.2.3")+"<br/>");

document.write(Number(newObject())+"<br/>");

document.write(Number(123)+"<br/>");</script></body></html>2.2.4数据类型转换Number()函数的强制类型转换结果如图所示。图Number()函数的强制类型转换结果3．变量弱类型转换2.2.4数据类型转换变量弱类型转换是指JavaScript的运算符在变量运算时会先自动将运算符前后的变量进行类型转换，再进行运算，如果无法运算则输出NaN。例如，可以对一些字符串和数字进行弱类型转换，代码如下所示（位置：单元2/2-10.html）。<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>变量弱类型转换</title></head><body><script>

console.log(1+"2"+"2"); //行1

console.log(1++"2"+"2"); //行2

console.log("A"-"B"+"2"); //行3

console.log("A"-"B"+2); //行4</script></body></html> 图

变量弱类型转换结果2.3.1运算符类型JavaScript提供了7种基本运算符，分别为一元运算符、算术运算符、关系运算符、逻辑运算符、位运算符、赋值运算符及其他运算符。1．一元运算符只能操作一个数的运算符叫作一元运算符。一元运算符是JavaScript中最简单的运算符。（1）递增运算符和递减运算符名称作用类型①

递增运算符（++）递增运算符对其唯一的运算数进行递增操作（每次加1），该运算数必须是一个变量、数组的一个元素或对象的一个属性。如果该变量、元素或属性不是一个数字，则递增运算符首先会将其转换为数字。前置型：递增运算符即“++”位于运算数之前，也称前递增运算符；后置型：递增运算符即“++”位于运算数之后，也称后递增运算符。②

递减运算符（--）递减运算符对其唯一的运算数进行递减操作（每次减1），该运算数必须是一个变量、数组的一个元素或对象的一个属性。如果该变量、元素或属性不是一个数字，则递减运算符首先会将其转换为数字。前置型：递减运算符即“--”位于运算数之前，也称前递减运算符后置型：递减运算符即“--”位于运算数之后，也称后递减运算符。2.3.1运算符类型前递增运算符先对运算数进行递增，再用递增后的值进行表达式计算；后递增运算符则相反，先用运算数进行表达式计算，再将运算数递增。varage=24;varage1=++age; //前递增运算符console.log(age);console.log(age1);varage=24;varage1=age++;//后递增运算符console.log(age);console.log(age1);代码如下所示（位置：单元2/2-11.html）代码如下所示（位置：单元2/2-12.html）。前递减运算符先对运算数进行递减，再用递减后的值进行表达式计算；后递减运算符则相反，先用运算数进行表达式计算，再将运算数递减。varage=24;varage1=--age; //前递减运算符console.log(age);console.log(age1);varage=24;varage1=age--; //后递减运算符console.log(age);console.log(age1);代码如下所示（位置：单元2/2-13.html）代码如下所示（位置：单元2/2-14.html）。2.3.1运算符类型（2）一元加/减运算符名称作用①

一元加运算符（+）一元加运算符放在数值前面，对数值不会产生任何影响。如果将一元加运算符应用于非数值，该运算符会首先对这个值进行转换。如果应用于布尔值false和true，则其将被转换为0和1；如果应用于字符串，则会按照一组特殊的规则对字符串进行解析；如果应用于对象，则先调用它们的valueOf()或toString()方法，再转换得到的值。②

一元减运算符（-）一元减运算符放在数值前面，执行一元取反操作。简而言之，一元减运算符将把一个正值转换成相应的负值，或把一个负值转换成相应的正值。但是，如果运算数是非数值，则一元减运算符遵循与一元加运算符相同的规则，最后对得到的值取反。2.3.1运算符类型varnumber=25;number=+number;alert(number);一元加运算符操作变量，代码如下所示（位置：单元2/2-15.html）如果将一元加运算符应用于非数值，该运算符会首先对这个值进行转换。如果应用于布尔值false和true，则其将被转换为0和1；如果应用于字符串，则会按照一组特殊的规则对字符串进行解析；如果应用于对象，则先调用它们的valueOf()或toString()方法，再转换得到的值。vars1="001";vars2="1.1";vars3="hello";varb=false;varf=1.1;varo={valueOf:function(){return-1;}}s1=+s1;s2=+s2;s3=+s3;b=+b;f=+f;o=+o;console.log("s1为："+s1);console.log("s2为："+s2);console.log("s3为："+s3);console.log("b为："+b);console.log("f为："+f);console.log("o为："+o);一元加运算符应用于非数值，代码如下所示（位置：单元2/2-16.html）2.3.1运算符类型vars1="001";vars2="1.1";vars3="hello";varb=false;varf=1.1;varo={valueOf:function(){return-1;}}s1=-s1;s2=-s2;s3=-s3;b=-b;f=-f;o=-o;console.log("s1为："+s1);console.log("s2为："+s2);console.log("s3为："+s3);console.log("b为："+b);console.log("f为："+f);console.log("o为："+o);一元减运算符应用于非数值，代码如下所示（位置：单元2/2-17.html）2.3.1运算符类型2．算术运算符（1）加法运算符JavaScript中的加法运算符的使用示例如下。varresult=1+2;两个运算数都是数值时：如果有一个运算数为NaN，则结果是NaN。如果是正无穷大的值加正无穷大的值，则结果是无穷大的值。如果是负无穷大的值加负无穷大的值，则结果是负无穷大的值。如果是正无穷大的值加负无穷大的值，则结果是NaN。如果是+0加+0，则结果是+0。如果是-0加-0，则结果是-0。如果是+0加-0，则结果是+0。如果运算数包含字符串时：如果两个运算数都是字符串，则将两个运算数拼接起来作为结果返回。如果只有一个运算数是字符串，则另一个运算数需先转换为字符串，再将两个运算数拼接起来作为结果返回。如果有一个运算数是对象、数组或布尔值，则先调用它们的toString()函数得到相应的字符串，再应用前面关于字符串的规则。对于undifined和null，则调用String()函数并取得undifined和null。2.3.1运算符类型varresult=1+2; //两个数值相加alert(result); //输出：3varresult=1+"2"; //数值加字符串alert(result); //输出：12示例如下。varnum1=1;varnum2=2;varmessage="Theresultis"+num1+num2;alert(message);使用加法运算符进行字符串拼接操作在JavaScript编程中应用很多，也经常会出现错误。例如，用加法运算符操作变量，代码如下所示（位置：单元2/2-18.html）。2.3.1运算符类型（2）减法运算符相对于加法运算符而言，减法运算符则简单得多，只涉及数字的减法运算，示例如下。varresult=2-1;同加法运算符一样，减法运算符在实际编程中也需要遵循如下规则。如果两个运算数都是数值，则执行常规的减法运算。如果有一个运算数是NaN，则结果为NaN。如果是正无穷大的值减正无穷大的值，则结果是NaN。如果是负无穷大的值减负无穷大的值，则结果是NaN。如果是正无穷大的值减负无穷大的值，则结果是正无穷大的值。如果是负无穷大的值减正无穷大的值，则结果是负无穷大的值。如果是+0减+0，则结果是+0。如果是-0减-0，则结果是+0。如果是+0减-0，则结果是-0。如果有一个运算数是字符串、布尔值、null或undefined，则先调用Number()函数将其转换为数值，再使用前面的规则进行减法运算。如果有一个运算数是对象，则调用对象的valueOf()函数以取得表示该对象的数值。如果对象没有valueOf()函数，则先调用其toString()函数将得到的字符串转换为数值，再使用前面的规则进行减法运算。2.3.1运算符类型（3）乘法运算符乘法运算符用于计算两个数值的乘积，示例如下。varresult=2*1;乘法运算符遵循以下特殊规则。如果运算数都是数值，则执行常规的乘法操作。如果有一个运算数是NaN，则结果是NaN。如果是正无穷大的值和0相乘，则结果是NaN。如果是正无穷大的值和非0值相乘，则结果是正无穷大的值或负无穷大的值，具体取决于有符号运算数的符号。如果是正无穷大的值和正无穷大的值相乘，则结果是正无穷大的值。如果有一个运算数不是数值，则先调用Number()函数将其转换为数值，再应用前面的规则进行乘法运算。2.3.1运算符类型（4）除法运算符除法运算符执行第一个运算数除以第二个运算数的运算，示例如下。varresult=10/5;除法运算符遵循以下特殊规则。如果运算数都是数值，则执行常规的除法运算。如果有一个运算数是NaN，则结果为NaN。如果是正无穷大的值被正无穷大的值除，则结果为NaN。如果是0被0除，则结果为NaN。如果是非0的有限数被0除，则结果是无穷大的值或负无穷大的值，具体取决于有符号运算数的符号。如果是无穷大的值被任何非0值除，则结果是无穷大的值或负无穷大的值，取决于有符号运算数的符号。如果有一个运算数不是数值，则先调用Number()函数将其转换为数值，再应用前面的规则进行除法运算。2.3.1运算符类型（5）取余运算符取余运算符的运算结果是第一个运算数除以第二个运算数的余数，且取余结果与第一个运算数的符号保持一致。取余运算符的使用示例如：varresult=3%2;同其他算术运算符类似，取余运算符也遵循以下特殊规则。如果运算数都是数值，则执行常规的除法运算，返回余数。如果被除数是无穷大的值而除数是有限大的值，则结果为NaN。如果被除数是有限大的值而除数是0，则结果为NaN。如果是无穷大的值被无穷大的值除，则结果为NaN。如果被除数是有限大的值而除数是无穷大的值，则结果为被除数。如果被除数是0，除数非0，则结果为0。如果有一个运算数为非数值，则先调用Number()函数将其转换为数值，再应用前面的规则进行取余运算。2.3.1运算符类型3．关系运算符（1）常规运算符常规的关系运算包括小于运算符、大于运算符、小于或等于运算符和大于或等于运算符，示例如下。varresult=5>3;//返回：truevarresult=3>5;//返回：false与JavaScript中的其他运算符一样，当运算数中存在非数值时，关系运算符需要进行相关的数据类

型转换，转换规则如下。①

如果两个运算数都是数值，则执行常规的数值比较。②

如果两个运算数都是字符串，则比较两个字符串对应的字符编码值。③

如果只有一个运算数是数值，则先将另一个运算数转换为数值，再进行常规的数值比较。④

如果一个运算数是对象，则调用该对象的valueOf()函数，用得到的结果按照前面的规则执行比较。如果对象没有valueOf()函数，则调用toString()函数，并用得到的结果根据前面的规则执行比较。⑤

如果一个运算数是布尔值，则先将其转换为数值，再执行比较。2.3.1运算符类型varresult="Blue"<"alpha";//返回：truevarresult="Blue".toLowerCase()<"alpha".toLowerCase();//返回：falsevarresult="23"<"3";//返回：truevarresult="23"<3;//返回：faslevarresult="a"<3;//返回：false不同情况的示例如下：2.3.1运算符类型（2）等性运算符除了前面的关系运算符外，JavaScript还有一种关系运算符，用于判断两个运算数的等性关系（包括等于、不等于、全等和非全等），称为等性运算符。对于等于运算符，当且仅当两个运算数相等时返回true；对于不等于运算符，当且仅当两个运算数不相等时返回true。为确定两个运算数是否相等，这两个运算数都会进行类型转换，转换规则如下。

如果有一个运算数是布尔值，则在比较等性之前先将其转换为数值（其中，false转换为0，true转换为1），再比较等性。如果一个运算数是字符串，另一个运算数是数值，则在比较之前先将字符串转换为数值。如果一个运算数是对象，而另一个运算数不是，则调用对象的valueOf()方法，用得到的基本数据类型值按照前面的规则进行比较。2.3.1运算符类型在比较时，等性运算符还应遵循以下几条特殊规则。

null和undefined相等。在检查等性时，不能把null和undefined转换为其他值。如果某个运算数是null，则使用“==”将null与其他类型的运算数进行比较时将返回false，使用“!=”将null与其他类型的运算数进行比较时将返回true。如果两个运算数都是对象，那么比较的是它们的引用值。如果两个运算数指向同一个对象，那么使用“==”返回true，否则两个运算数不等。2.3.1运算符类型表中列出了一些使用关系运算符的特殊情况及比较结果。特殊情况比较结果null==undefinedtrue"NaN"==NaNfalse5==NaNfalseNaN==NaNfalseNaN!=NaNtruefalse==0truetrue==1truetrue==2falseundefined==0falsenull==0false"5"==5true表

使用关系运算符的特殊情况及比较结果2.3.1运算符类型等于和不等于的同类运算分别是全等和非全等。全等运算符和非全等运算符所做的操作与等于运算符和不等于运算符相似，只是它们在检查等性之前不执行类型转换。全等运算符只有在无须类型转换运算数就相等的情况下才返回true，示例如下。varnum1="66";varnum2=66;alert(num1==num2);//返回：truealert(num1===num2);//返回：false非全等运算符只有在无须类型转换运算数就不相等的情况下才返回true，示例如下。varnum1="66";varnum2=66;alert(num1!=num2);//返回：falsealert(num1!==num2);//返回：true2.3.1运算符类型4．逻辑运算符逻辑运算符也称布尔运算符，其在第3章介绍的循环语句中有重要作用。逻辑运算符分为3种：逻辑非运算符（NOT）、逻辑与运算符（AND）和逻辑或运算符（OR）。在JavaScript中，逻辑非运算符与C和Java中的逻辑非运算符相同，都由感叹号（!）表示。与逻辑与运算符和逻辑或运算符不同的是，逻辑非运算符返回的一定是布尔值。逻辑非运算符遵循如下规则。如果运算数是对象，则返回false。如果运算数是数字0，则返回true。如果运算数是0以外的任何数字，则返回false。如果运算数是null，则返回true。如果运算数是NaN，则返回true。如果运算数是undefined，则发生错误。逻辑非运算符012.3.1运算符类型逻辑与运算符的使用方法如下所示。varresult1=true;varresult2=false;varresult3=result1&&result2;逻辑与运算符的运算数及运算结果如表所示。果某个运算数不是布尔值，逻辑与运算并不一定返回布尔值，常见场景如下。如果一个运算数是对象，另一个是布尔值，则返回该对象。如果两个运算数都是对象，则返回第二个对象。如果某个运算数是null，则返回null。如果某个运算数是NaN，则返回NaN。如果某个运算数是undefined，则发生错误。逻辑与运算符02运算数1运算数2运算结果truetruetruetruefalsefalsefalsetruefalsefalsefalsefalse2.3.1运算符类型逻辑或运算符的使用示例如下。varresult1=true;varresult2=false;varresult3=result1||result2;逻辑或运算符的运算数及运算结果如表所示。与逻辑与运算符相似，如果某个运算数不是布尔值，逻辑或运算并不一定返回布尔值，常见场景如下。如果一个运算数是对象，并且该对象左边的运算数的值均为false，则返回该对象。如果两个运算数都是对象，则返回第一个对象。如果最后一个运算数是null，并且其他运算数的值均为false，则返回null。如果最后一个运算数是NaN，并且其他运算数的值均为false，则返回NaN。如果某个运算数是undefined，则发生错误。逻辑或运算符03运算数1运算数2运算结果truetruetruetruefalsetruefalsetruetruefalsefalsefalse2.3.1运算符类型5．位运算符位运算符是在数字底层（表示数字的32位）进行操作的。位运算符不直接操作64位的值，而是首先将64位的值转换为32位的整数，然后执行操作，最后将结果转换为64位的值。在JavaScript中，对于有符号的整数，32位中的前31位用于表示整数的值；第32位用于表示数值的符号，其中0表示正数，1表示负数。这个表示符号的位叫作符号位，符号位的值决定了其他位数值的格式。其中，正数以二进制格式存储，31位中的每一位都表示2的幂，其中第1位（叫作位0）表示20，第2位表示21，以此类推。没有用到的位以0填充。例如，数值18的二进制表示是00000000000000000000000000010010，或者更简洁的10010，其中包含5个有效位，这5位决定了实际的值，如下图所示。图

数值18的二进制表示2.3.1运算符类型负数也存储为二进制代码，但其采用的是二进制补码。计算数字二进制补码的步骤如下。求该数值绝对值的二进制代码（例如，要求-18的二进制补码，应先求

18的二进制代码）。求二进制反码，即把0转换为1，1转换为0。在二进制反码上加1。例如，要确定-18的二进制代码，首先应得到18的二进制代码，为00000000000000000000000000010010然后，求二进制反码，为11111111111111111111111111101101最后，在二进制反码上加1：11111111111111111111111111101101+

111111111111111111111111111101110在把负整数转换为二进制字符串时，JavaScript并不以二进制补码的形式显示，而是用数字绝对值的标准二进制代码前面加负号的形式输出，使用方法如下所示。varnumber=-18；alert(number.toString(2));//输出：-100102.3.1运算符类型常见的位运算符包含以下几种。非运算符（~）是JavaScript中为数不多的与二进制算术运算有关的运算符之一。非运算符的处理过程如下。把运算数转换成32位二进制数。把二进制数转换成对应的二进制反码。把二进制反码转换成浮点数。示例如下。varnumber=25;varnumber2=～number;alert(number2);非运算符01按位与运算符（&）直接对数字的二进制形式进行运算。按位与运算符首先把每个数字中的数位对齐，然后用表所示的规则对同一位置上的两个数位进行与运算。按位与运算符02第一个数字中的数位第二个数字中的数位结果1111000100002.3.1运算符类型按位或运算符（|）也是直接对数字的二进制形式进行计算，其运算规则如表所示。按位或运算符03按位异或运算符（^）直接对数字的二进制形式进行计算。按位异或运算不同于按位或运算，只有一个数位为1时，结果才为1，具体规则如表所示。按位异或运算符04第一个数字中的数位第二个数字中的数位结果111101011000进行按位或运算的两个数位，只要有一个为1，结果就为1。第一个数字中的数位第二个数字中的数位结果1101010110002.3.1运算符类型左移运算符（<<）把数字中的所有数位向左移动指定的位数。例如，把数字2左移5位的结果为64代码如下所示。左移运算符05有符号右移运算符（>>）把32位数字中的所有数位右移，同时保留该数的符号（正号或负号）。有符号右移运算的作用与左移运算相反。例如，把64右移5位则变为2，代码如下所示。有符号右移运算符06varresult=2<<5alert(result);//输出：64varresult=64>>5;alert(result);//输出：2无符号右移运算符（>>>）将无符号32位数的所有数位整体右移。对于正数，无符号右移结果与有符号右移结果一样。示例如下。无符号右移运算符07varresult=64>>>5;alert(result);//输出：2对于负数，无符号右移运算用0填充所有空位；对于正数，无符号右移运算与有符号右移运算的结果相同。由于无符号右移运算的结果是一个32位的正数，因此负数经过无符号右移运算，得到的总是一个非常大的数字。2.3.1运算符类型6．赋值运算符JavaScript赋值运算符分为简单赋值运算符（=）和复合赋值运算符。简单赋值运算符只用于把等号右边的值赋予等号左边的变量。例如，对变量number赋值，代码如下所示。varnumber=10;//将10赋给变量number复合赋值运算符是由乘法运算符、加法运算符或位运算符等加等号（=）表示的。例如，如下赋值运算符是常见运算方式的简写形式。varnumber=10;number=number+10;可以用一个复合赋值运算符改写上述第二行代码。varnumber=10;number+=10;以下几种运算都有对应的复合赋值运算符：乘法赋值运算符（*=）、除法赋值运算符（/=）、取余赋值运算符（%=）、加法赋值运算符（+=）、减法赋值运算符（-=）、左移/赋值运算符（<<=）、

有符号右移赋值运算符（>>=）、无符号右移赋值运算符（>>>=）。2.3.1运算符类型7．其他运算符除上面介绍的6种运算符之外，JavaScript还有字符串运算符（+）、逗号运算符（,）、三元运算符（?:）等。字符串运算符主要用于连接两个字符串或字符串变量。因此，在对字符串或字符串变量使用该运算符时，并不是对它们进行加法运算。示例如下。varx="beijing";vary=x+"你好！";alert(y);要想在两个字符串之间增加空格，需要把空格插入一个字符串中。示例如下。vary=x+"你好！";alert(y);//返回字符串"beijing你好！"当对字符串和数字进行连接（加法运算）时，会先将数字转换为字符串再进行连接。示例如下。varx=25;vary="我今年"+x+"岁";

//返回字符串"我今年25岁"字符串运算符012.3.1运算符类型使用逗号运算符可以在一条语句中执行多个操作，示例如下。varnum1=1,num2=2,num3=3;逗号运算符多用于声明多个变量。除此之外，逗号运算符还可以用于赋值。在用于赋值时，逗号运算符总会返回表达式中的最后一项。示例如下。varnum=(5,1,4,8,0);//num的值为0逗号运算符02三元运算符（?:）可视为特殊的比较运算符，使用方法如下。(expr1)?(expr2):(expr3);//语法解释：在expr1值为true时整个表达式的值为expr2，否则为expr3例如，使用三元运算符给变量y赋值，代码如下所示。x=2;y=(x==2)?x:1;alert(y);

三元运算符031++---+～!deletetypeofvoid2*/%3+-4<<>>>>>5<<=>>=instanceofin6==!====!==7&8^9|10&&11||12?:13=*=/=%=+=-=&=^=|=<<=>>=>>>=14,2.3.2运算符优先级

运算符优先级控制着运算符的执行顺序，优先级高的运算符在执行上总是先于优先级低的运算符。JavaScript中的运算符按照优先级分为14级，从高到低依次如下所示。例如，一个复杂的运算符嵌套的示例：!2<1&&4*3+1;2.3.2运算符优先级

上述代码的运算步骤如下。执行一元运算符对应的运算!2，结果为false。false<1&&4*3+1;执行算术运算符对应的运算4*3+1，结果为13。false<1&&13;执行关系运算符对应的运算false<1，结果为true。true&&13;执行逻辑运算，结果为13。可以像数学中一样用圆括号来强行指定运算顺序，示例如下。varnumber=2+3*5; //结果：17varnumber=(2+3)*5; //结果：252.4标识符及关键字JavaScript中的标识符是用来标识变量、函数、对象、属性等命名实体的名称。标识符由字母、数字、下画线（_）和美元符号（$）组成，且不能以数字开头。在JavaScript中，标识符是区分大小写的，即myVariable和myvariable被视为不同的标识符。在定义标识符时，应该尽量使用简洁明了的名称，避免使用过长或过于复杂的名称，同时不能使用JavaScript的关键字或保留字（如if、for、function等）。下表所示是JavaScript中常用的关键字（按字母顺序）。2.4标识符及关键字表JavaScript中常用的关键字abstractelseinstanceofsuperbooleanenumintswitchbreakexportinterfacesynchronizedbyteextendsletthiscasefalselongthrowcatchfinalnativethrowscharfinallynewtransientclassfloatnulltrueconstforpackagetrycontinuefunctionprivatetypeofdebuggergotoprotectedvardefaultifpublicvoiddeleteimplementsreturnvolatiledoimportshortwhiledoubleinstaticwith【商业案例】

学生信息管理系统——展示学生信息列表任务1实现页面HTML布局1．结构分析图2.20为学生信息列表页面实现效果。从图中可以发现，页面主要分为3部分，顶部是页面标题和“新增”“删除”按钮，中部是学生信息列表，底部展示信息数量页码等信息和“上一页”“下一页”按钮。图

学生信息列表页面实现效果（基于JavaScript实现）【商业案例】

学生信息管理系统——展示学生信息列表2．页面布局与结构搭建使用HTML的标签实现页面的大致布局并搭建网页结构，同时给标签加上不同的类名，方便添加样式代码，部分代码如下所示（位置：学生信息管理系统-JavaScript版/index.html）。<divclass="wrapperBox">

<divclass="header">

<divclass="headerTitle">

<divclass="headerLine">学生信息管理系统</div>

</div>

<divclass="headerButton">

<buttonclass="addButton">新增</button>

<buttonid="deleteButton">删除</button>

</div>

</div>

<divclass="container">

<tableid="containerTable">

<theadclass="tableHeader">

<tr>

<th><inputtype="checkbox"/></th>

<th>序号</th>

<th>学号</th>

<th>姓名</th>

<th>学院</th>

<th>专业</th>

<th>年级</th>

<th>班级</th>

<th>年龄</th>

<th>操作</th>

</tr>

</thead><tbodyid="tdata">

<trclass="trHover">

<td><inputtype="checkbox"/></td>

<td>1</td>

<td>2023001001</td>