第二章 JavaScript基础

1、JavaScript程序设计教程软件学院软件学院 胡胡 沛沛 2016年年9月月第二章第二章 JavaScript基础基础nJavaScirpt重点语法掌握和重点语法掌握和C/Java不同的不同的地方地方n掌握常用内置对象掌握常用内置对象 n JavaScript语言是一门解释型的脚本语言，其优点之一是比较容易学习和掌握，但是千万不要因此而小看了JavaScript能力，它能够完成许多相当复杂的编程任务。 n 目前，ECMAScript第4版是ECMAScript的最新版本，也是JavaScript的工业标准，本章将基于该标准对JavaScript的基本语法和内置对象特性进行讲解。2.1 Ja

2、vaScript语法基础语法基础n2.1.1 语句语句n n 一条JavaScript语句由若干表达式组织在一起。n JavaScript使用分号“;”表示一条语句的结束；但不是必须的。n例如下面的写法：nalert(“大家好”); / 以分号结尾的JavaScript语句nalert(“大家好”) / 没有分号结尾的JavaScript语句n JavaScript解释器在语法检查方面相对比较宽松，但是在这里还是要求大家每条语句后加上;，主要是因为：n（1）代码规范性；n（2）在使用一些JavaScript代码压缩和代码混淆工具处理代码时，不会发生错误；n（3）提高JavaScript执行性能

3、，解释器就比不再花时间推测应该在哪里插入分号 。n2.1.2 注释注释 n 1. 单行注释 /n 2. 多行注释n /*n */n2.1.3 直接量直接量n n 在JavaScript中，我们用直接量来描述数值。JavaScript支持的直接量分为以下几种：n10/ 整数n0.6/ 浮点数ntest/ 字符串ntest/ 字符串ntrue/false / 布尔值n/abc/gi/ 正则表达式nnull/ 空对象n x: 2.3,y: 3.5 / 对象n1,2,.,n / 数组nJSON简介简介nJSON，也即(JavaScript Object Notation) ，它是一种轻量级的数据交换格

4、式。易于人阅读和编写。同时也易于机器解析和生成，JSON采用完全独立于语言的文本格式。也就是说用JSON表示的数据可以被java读取、也可以被.net读取。nJSON主要基于下面两种结构: (1)“名称/值”对的集合 比如: term: BACCHUS part: n. definition: a name“n (2)值的有序列表nnterm: BACKBITE,npart: v.t.,ndefinition: To speak of a man as you find him when he cant find you.“,n“age”:36nn2.1.4 变量变量n 一切变量、函数名和操作

5、符都是区分大小写的。 n ECMAScript的变量是松散类型的，所谓松散类型就是可以用来保存任何类型的数据。n 可以在修改变量值的同时修改值的类型。 n JavaScript中的变量是使用var关键字加变量名定义的，例如：n var a = 1;n var temp = abc;n var i = 1, s = 123;n 使用var操作符定义的变量将成为定义该变量的作用域中的局部变量，也就是说，如果在函数中使用var定义一个变量，那么这个变量在函数退出后就会被销毁。n 如果省略var定义变量，则无论该变量处于何处，都是全局变量。不推荐这样做 。n 需要说明的是，变量名应该遵守两条简单的规则

6、：n（1）第一个字符必须是字母（az，AZ）、下划线（_）或美元符号（$）；n（2）其他部分可以是下划线、美元符号、任意字母或数字字符（09）。n 如果是一个标识符是由多个字符组成，第一个字母小写，剩下的每个有意义的单词的首字母大些。如：firstNamen 不能把关键字、保留字、true、false和null用作标识符。n2.1.5 运算符运算符n1数学运算符n JavaScript提供的数学运算符有：+、-、*、/、%、+、-。所谓一目运算符是指对一个运算量进行运算的运算符。在JavaScript语言中有4个一目运算符：+、-、+和-。其中一目取正“+”和一目取负“-”只影响表达式的运算结

7、果。n 所谓的二目运算符，是指对两个运算量进行运算的运算符，JavaScript中的二目数学运算符包括：+、-、*、/、%。 var a = 5, b = 1; alert(a+b); alert(The sum of a + b : + a + b );n如果操作数都是数值，则做加法运算n如果操作数有字符串，则将操作数做字符串拼接处理。 n2关系运算符关系运算符n n JavaScript中的关系运算符是用于测试两个变量之间关系的运算符。“”、“=”运算符执行的是两个数的比较运算，比较方式与数学中的比较运算相同，这4个运算符称为比较运算符。 n JavaScript关系运算符中还有两种特殊的

8、运算符：in和instanceof。n in用于判断对象中是否存在某个属性nvar o = title : hello,n author : tom;nalert (title in o);nalert (age in o);ninstaceof运算符用于判断对象是否为某个类的实例。var a=new Array();nalert(a instanceof Array);nalert(a instanceof Object);n3等性运算符等性运算符n 判断两个变量是否相等是程序设计中非常重要的运算。n JavaScript中提供了两套运算符处理这个问题，等号和非等号处理原始值，全等号和非全等

9、号处理对象。 4. 逻辑运算符逻辑运算符n 逻辑运算符的运算结果只有真（true）和假（false）两种。JavaScript支持以下3种逻辑运算符。n逻辑非(!)n逻辑与(&)n两个操作数都为真时才返回true，否则返回false。n只要判断第一个操作数是假就会停止判断，返回falsenvar found = false;nvar result = found & temp; nalert(result);n逻辑或(|)n 两个操作数有一个为真时就返回true，否则返回false。n 只要判断第一个操作数是真就会停止判断，返回true。n 利用这一特性，来避免为变量赋null

10、或undefined值。nvar temp = temp | 0;n5位运算符位运算符n JavaScript完全支持按位（bit）运算。n 位运算符包括：与、或、非、异或、左移、右移运算符。 n 有符号整数和无符号整数的区别在于：有符号整数使用低31位表示整数值，最高位表示整数的符号，0表示正数，1表示负数，数值的范围是从231到2311；而无符号整数则使用所有32位数表示整数值，其数值范围是从0到2321。例如25的二进制为11001，它在内存中的存储结构如图2-1所示。图2-1 整数的存储结构 n 负数也存储为二进制形式，不过采用的是二进制补码。 图2-2 计算补码步骤 n1. 与运算(

11、&) n 按位与只在两个数值的对应位都是1时才返回1，任何一位是0，结果都是0。n2. 按位或（|）n 按位或操作在有一个位是1的情况下就返回1 。n3. 按位异或（）n 两个数值对于位上只有一个1时才返回1，否则返回0。 n4. 左移（）n 每右移一位相当于原来的数值除以2n6. 无符号右移（）n 无符号右移会把负数的二进制码当成整数的二进制码。 n6赋值运算符赋值运算符n JavaScript中赋值运算符是“=”符号，它将等号右边的值赋给等号左边的变量。 7其他运算符其他运算符（1）条件运算符（?:）nvar a = 10, b = 9;nvar c = (a b) ? 1 : 0

12、;（2）typeof运算符（3）new运算符（4）delete运算符（5）void运算符（6）函数调用运算符ntypeof操作符操作符n 用来检测给定变量的数据类型，对一个值使用typeof操作符可能返回下列某个字符串：n1. “undefined”如果这个值未定义；n2. “bollean”如果这个值是布尔值；n3. “string”如果这个值是字符串；n4. “number”如果这个值是数字；n5. “object”如果这个值是对象或null；n6. “function”如果这个值是函数。 n2.1.6 程序流程控制程序流程控制n1选择结构选择结构n（1）单一选择结构n代码结构如下：nif

13、 (condition)n statementn（2）二路选择结构）二路选择结构n代码结构如下：nif (condition)n statement1nelsen statement2n（3）内联三元运算符）内联三元运算符n代码结构如下：n(condition) ? statement1 : statement2;n2. 2. 循环结构循环结构n（1）while循环nwhile循环是一种常见的循环结构，其代码结构如下：nwhile (condition) n statementnn（2）do while循环循环n do while循环和while循环类似，区别在于计算condition表达式的

14、位置。在do while循环中，每次循环结束时会计算condition表达式的值，如果该表达式的值为true，则继续循环，否则结束循环。 do while循环的代码结构如下所示：ndo n statementn while (condition)n（3）for循环循环n for循环常用于遍历数组，对数组的每个成员执行相同或者类似的操作，其代码结构如下所示：nfor (initialize; condition; increment) n statementnn（4）for in循环循环n JavaScript还提供了一种for in的循环机制来遍历对象的所有属性，其代码结构如下：nfor (p

15、rop in object) n .nnvar obj = new Object();nobj.title = hello;nobj.author = tom;nfor (var prop in obj)nalert(obj. + prop + = + objprop);nn3 3异常处理结构异常处理结构n n 前面讨论的选择结构和循环结构都是通过判断条件表达式的值来确定程序流向的，异常处理结构则不同，它是根据程序执行过程中是否发生异常来决定程序流向的。n其代码结构如下：ntry n statementn catch (exception) n catchStatementn finnaly

16、n finnalyStatementn2.2 JavaScript内置对象内置对象n作为一门编程语言，JavaScript提供了一些内置的对象和函数。n n对象是一种复杂的数据结构，用于将数据和功能组织在一起。它也常被称为类，有时候也被称为对象定义，因为他们描述的是一类对象所具有的属性和方法。 n ECMAScript定义的JavaScript内置对象主要包括：n（1）全局（Global）对象n（2）对象（Object）对象n（3）字符串（String）对象n（4）正则表达式（RegExp）对象n（5）数组（）数组（Array）对象）对象（6）数学（Math）对象（7）日期（Date）对象（8

17、）数字（）数字（Number）对象）对象（9）函数（Function）对象（10）布尔值（）布尔值（Boolean）对象）对象（11）错误（）错误（Error）对象）对象n2.2.1 全局对象全局对象n在ECMAScript定义了两个静态对象Global和Math。 n全局对象的属性和方法不能引用Gloal。n编码方法：escape()、encodeURI()、encodeURIComponent()n解码方法：unescape()、decodeURI()、decodeURIComponent()n2.2.2 Object对象对象nObject是ECMAScript中使用最多的一个类型 。提供

18、了一种创建自定义对象的简单方式，不需要再定义构造函数，可以随意为其添加属性。n创建Object实例有两种方式：n1. 使用new操作符后跟Object构造函数。n/使用花括号，定义只包含默认属性和方法的对象。nvar person = new Object(); / var person = ; = John;nperson.age = 29;n2. JSON表示法nvar person = nname : John,nage : 29n;nJSON是向函数传递大量可选参数的首选方式，代码量少，而且清晰直观。n通常访问对象属性时使用的都是点表示法，不过在JS中也可以使

19、用方括号表示法来访问对象的属性。如：nalert(personname);nalert();n方括号法的主要优点是可以通过变量来访问属性（动态访问），如：nvar propertyName = name;nalert(personpropertyName);n除非必须使用变量来访问属性，优先选择使用点表示法。nfor in 语句n对某个对象所有的属性属性循环遍历操作，不用事先知道属性的个数。nvar person = new Object(); = John;nperson.age = 29;nfor(var temp in person)nal

20、ert(temp);nvar str = 属性: + temp + , 属性值: + persontemp;nalert(str);nn2.2.3 Array对象对象nArray是除Object之外最常用的类型。n数组的每一项都可以保存任何类型保存任何类型的数据。数组的大小是可以动态调整动态调整的，即可以随着数据的添加自动增长以容纳新增数据。 n一、创建数组n创建数组的基本方式有两种：n1. 使用Array构造函数nvar colors = new Array();nvar colors = new Array(10);nvar colors = new Array(red, blue, gr

21、een);n在使用Array构造函数时也可以省略new操作符。n2. 使用表示，多个数组项之间可以逗号隔开，如：nvar colors = red, blue, green; nvar names = ; /创建一个空数组 n在读取和设置数组的值时，要使用方括号并提供相应值的基于0的数字索引，如：nvar colors = red, blue, green; nalert(colors0);ncolors2 = black;ncolors3 = brown;nalert(colors2);nalert(colors3);n如果设置某个值的索引超过了数组现有项数，数组就会自动增加到该索引值加1的

22、长度。n二、 length属性nlength属性用来求出当前数组的长度。nvar colors = red, blue, green; nvar names = ; nalert(colors.length);nalert(names.length); nlength 不是只读的，利用这个属性给数组指定长度。我们利用这个特性可以很方便的在数组末尾添加新项。nvar colors = red, blue, green; ncolorscolors.length = black; /colors3 = blackncolorscolors.length = brown”; /colors4 =“b

23、rown”n由于数组最后一项的索引始终都是length-1，因此下一个新项的位置就是length。每当在数组末尾添加一项后，其length属性都会自动更新。n三、 转化方法n所有对象都具有toString()、valueOf()、toLocaleString()方法。其中，调用数组的toString()和valueOf()方法会返回相同的值，即由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。nvar colors = red, blue, green; nalert(colors.toString();nalert(colors.valueOf();nalert(colors);n

24、由于alert要接收字符串参数，它会在后台默认调用toString()方法。ntoLocaleString() 是 toString()的本地化版本。n四、 join方法n默认情况下都会以逗号分隔的字符串的形式返回数组项。njoin()方法可以使用不同的分隔符来构造这个字符串；join()方法只接收一个参数，即用作分隔符的字符串，然后返回包含所有数组项的字符串。nvar colors = red, blue, green; nalert(colors.join(,);nalert(colors.join(“+); n五、栈方法n栈是一种后进先出的数据结构。nECMAScript为数组专门提供了

25、push()和pop()方法，以便实现类似栈的行为。npush()方法可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。pop()方法则从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。nvar colors = new Array();nvar count = colors.push(red, blue);nalert(count);ncount = colors.push(green);nalert(colors);nvar item = colors.pop();nalert(item);nalert(colors.length);n六、队列方法

26、n队列是一种先进先出的数据结构。nshift()方法：移除数组中的第一项并返回该项，同时将数组长度减1。n结合使用shift()和push()方法就可以实现队列操作。nvar colors = new Array();nvar count = colors.push(red, blue);nalert(count);nvar item = colors.shift();nalert(item);nalert(colors.length);n七、重排序方法nreverse()方法会对数组项的顺序反转。nvar values = 1, 2, 3, 4, 5;nvalues.reverse();na

27、lert(values);nsort()方法按升序排列数组项，会调用每个数组项的toString()方法，然后比较得到的字符串。将按照 Unicode字符顺序进行升序排列。 n八、 concat()方法nconcat()方法：先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新建的数组。nvar colors = red, blue, green; nvar colors2 = colors.concat(yellow, black, brown);nalert(colors);nalert(colors2);n九、slice() 方法nslice() 方法可提取数组的

28、某些部分，并以新的数组返回被提取的部分。n可以接受一或两个参数，即要返回项的起始和结束位置。如果只有一个参数，返回从起始位置到当前数组末尾的所有项；如果是两个参数，返回起始和结束之间的项，不包括结束位置的项。nvar colors = red, blue, green, yellow, black;nvar colors2 = colors.slice(1);nvar colors3 = colors.slice(1,4);nalert(colors2);nalert(colors3);n也可以接受负数作为参数，需用数组长度加上该数来确定相应的位置。如果结束位置小于起始位置，返回空数组。nva

29、r colors4 = colors.slice(-4,-1);nalert(colors4);n十、splice()方法n1. 删除：两个参数。要删除的第一项的位置和要删除的项数。splice(0,2)会删除前两项。n2. 插入：三个参数。起始位置、0和要插入的项。splice(2,0,”red”,”green”)： 从当前数组的位置2开始插入字符串”red”,”green”。n3. 替换：三个参数。起始位置、要删除的项数和要插入的项。splice(2,1,”red”,”green”)： 先删除当前位置2的项，然后再从当前数组的位置2开始插入字符串”red”,”green”。 nvar colors = red, blue, green; nvar removed = colors.splice(0,1); /删除第一项nalert(colors);nalert(remov