JavaScript脚本语言(发).ppt

单击此处编辑母版标题样式,第一级,第二级,*,你的潜力，我们的动力！,襄樊软件学院,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,JavaScript,脚本语言基本知识,目标,JavaScript,简介,JavaScript,与,HTML,网页,JavaScript,基本语法,函数的使用,程序流程控制,6.1 JavaScript,简介,为什么引入,JavaScript,采用超链接技术只能提供一种静态的信息资源，缺少动态的客户端与服务器端的交互。因而在一段时间防碍了,Internet,技术的发展。而,JavaScript,的出现，无凝为,Internet,网上用户带来了一线生机。可以这样说,JavaScript,的出现是时代的需求,是当今的信息时代造就了,JavaScript,。,2026/4/10 周五,4,JavaScript,给我们带了什么,JavaScript,的出现，它可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交式的表达能力。从而使静态的,HTML,页面被可提供动态实时信息，并对客户操作进行反应的,Web,页面的取代。,JavaScript,脚本正是满足这种需求而产生的语言。它深受广泛用户的喜爱的欢迎。它是众多脚本语言中较为优秀的一种，它与,WWW,的结合有效地实现了网络计算和网络计算机的蓝图。,2026/4/10 周五,5,JavaScript,是什么,JavaScript,是一种基于对象,(Object),和事件驱动,(Event Driven),并具有安全性能的脚本语言。使用它的目的是与,HTML,超文本标记语言、,Java,小程序一起实现在一个,Web,页面中链接多个对象，与,Web,客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的,HTML,语言中实现的。它的出现弥补了,HTML,语言的缺陷，它是,Java,与,HTML,折衷的选择，具有以下几个基本特点：,2026/4/10 周五,6,脚本编写语言,2026/4/10 周五,7,JavaScript,是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript,同样已是一种解释性语言，它提供了一个简易的开发过程。它的基本结构形式与,C,、,C+,、,VB,、,Delphi,十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与,HTML,标识结合在一起，从而方便用户的使用操作。,基于对象的语言,2026/4/10 周五,8,JavaScript,是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。,简单性,2026/4/10 周五,9,JavaScript,的简单性主要体现在：首先它是一种基于,Java,基本语句和控制流之上的简单而紧凑的设计,从而对于学习,Java,是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。,安全性,2026/4/10 周五,10,JavaScript,是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。,动态性,2026/4/10 周五,11,JavaScript,是动态的，它可以直接对用户或客户输入做出响应，无须经过,Web,服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页,(Home Page),中执行了某种操作所产生的动作，就称为,“,事件,”,(Event),。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。,跨平台性,2026/4/10 周五,12,JavaScript,是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持,JavaScript,的浏览器就可正确执行。从而实现了“编写一次，走遍天下”的梦想。,网页交互性,2026/4/10 周五,13,实际上,JavaScript,最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑，软件仅需一个字处理软件及一浏览器，无须,WEB,服务器通道，通过自己的电脑即可完成所有的事情。,JavaScript,语言可以做到回应使用者的需求事件,(,如：,form,的输入,),，而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给服务器端,(server),处理，再传回来的过程，而直接可以被客户端,(client),的应用程式所处理。,综上所述，,JavaScript,是一种有较强生命力和发展潜力的脚本描述语言，它可以被直接嵌入到,HTML,文档中，供浏览器解释执行，直接响应客户端事件，并调用相应的处理方法，迅速返回处理结果并更新页面实现,WEB,交互性和动态的要求，同时将一部分工作交给客户端处理，将,WEB,服务器的资源消耗降到最低。,JavaScript,能做什么,JavaScript,脚本语言由于其效率高、功能强大等特点，在表单数据合法性验证、网页特效、交互式菜单、动态页面、数值计算等获得广泛的应用。,JavaScript,和,Java,的区别,虽然,JavaScript,与,Java,有紧密的联系，但却是两个公司开发的不同的两个产品。,Java,是,SUN,公司推出的新一代面向对象的程序设计语言，特别适合于,Internet,应用程序开发；,JavaScript,是,Netscape,公司的产品，其目的是为了扩展,Netscape Navigator,功能，而开发的一种可以嵌入,Web,页面中的基于对象和事件驱动的解释性语言，它的前身是,Live Script,；,基于对象和面向对象,Java,是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。,JavaScript,是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象（,Object Based,）和事件驱动（,Event Driver,）的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。,解释和编译,两种语言在其浏览器中所执行的方式不一样。,Java,的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。,JavaScript,是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户编由浏览器解释执行。,强变量和弱变量,两种语言所采取的变量是不一样的。,Java,采用强类型变量检查，即所有变量在编译之前必须作声明。如,:,Integer x;String y;,x=1234;x=4321;,其中,X=1234,说明是一个整数，,Y=4321,说明是一个字符串。,JavaScript,中变量声明，采用其弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型，如：,x=1234;y,4321;,前者说明,x,为其数值型变量，而后者说明,y,为字符型变量。,代码格式不一样,Java,是一种与,HTML,无关的格式，其代码以字节代码的形式保存在独立的文档中。,JavaScript,的代码是一种文本字符格式，可以直接嵌入,HTML,文档中，并且可动态装载。编写,HTML,文档就像编辑文本文件一样方便。,嵌入方式不一样,在,HTML,文档中，两种编程语言的标识不同；,JavaScript,使用,.,来标识,Java,使用,.,来标识。,JavaScript,程序运行环境,软件环境：,Windows 95/98,或其以上。,浏览器,用于编辑,HTML,文档的字符编辑器,硬件配置：首先必须具备运行,Windows 95/98,或,Windows NT,的基本硬件配置环境。推荐：,基本内存,32M,。,CRT,只少需要,256,颜色，分辨率在,640X480,以上。,CPU,只少,233,以上。,鼠标和其它外部设置（根据需要选用）。,下面我们通过一个例子，编写第一个,JavaScript,程序。通过它可说明,JavaScript,的脚本是怎样被嵌入到,HTML,文档中的。,举例：,1.html,2026/4/10 周五,23,2026/4/10 周五,24,1.html,编写第一个,JavaScript,程序,如同,HTML,标识语言一样，,JavaScript,程序代码是一些可用字处理软件浏览的文本，它在描述页面的,HTML,相关区域出现。,在,.,之间就可加入,JavaScript,代码。,alert(),是,JavaScript,的窗口对象方法，其功能是弹出一个具有,OK,对话框并显示（）中的字符串。,通过,标识说明：若不认识,JavaScript,代码的浏览器，则所有在其中的标识均被忽略；若认识，则执行其结果。使用注释这是一个好的编程习惯，它使其他人可以读懂你的代码。,2026/4/10 周五,25,6.2,JavaScript与HTML,为了运用,JavaScript,控制,HTML,页面上的对象，,JavaScript,的代码必须与,HTML,代码结合在一起。,嵌入,JavaScript,代码的位置,之间,当脚本被调用时，或者当事件被触发时，脚本就会被执行。当你把脚本放置到,head,部分后，就可以确保在需要使用脚本之前，它已经被载入了。,之间,在页面载入时脚本就会被执行。当你把脚本放置于,body,部分后，它就会生成页面的内容。,两者混合使用,JavaScript,代码与,HTML,代码常见的结合方式一般有两种：,将,JavaScript,直接嵌入,HTML,文档,基本语法：,举例：,例,6.1.html,基本语法：,-,外部文件（,*.js),的语法,-,2026/4/10 周五,32,使用外部,JS,文件,举例：,Myjs.js,例,6.3.html,34,HTML,表单标记,网页中的表单用于创建：,问卷,注册信息,简答题,调查,表单在网页中用于向网站的,访问者请求信息,Form,表单的基本语法,基本语法：,举例：,例,6.4.html,表单的,input,对象,基本语法：,说明：,text,、,password,、,checkbox,、,radio,、,image,、,hidden,、,file,、,button,、,submit,、,reset,name,、,value,、,checked,标记属性,功能,type=inputtype,设置输入域的类型,name=cdata,设置表项的控制名，在表单处理时起作用,size=num,设置表单域的长度,maxlength=num,设置允许输入的最大字符数（适用于,text,和,password,类型）,value=cdata,设置输入域的值,checked,设置是否被选中（适用于,radio,，,checkbox,类型）,表,2-11 ,标记的属性值,举例：,例,6.5.html,3.html,举例：,例,6.6.html,举例：,例,6.7.html,举例：,4.html,表单的,select,对象,基本语法：,显示值,1,显示值,2,下拉菜单,举例：,例,6.8.html,2.html,5.html,菜单列表,举例：,例,6.9.html,表单的,textarea,对象,基本语法：,标记属性,功能,name=cdata,设置,FORM,提交的输入信息的名称,rows=num,设置文本域的行数,cols=num,设置文本域的列数,举例：,例,6.10.html,6.html,表单对象的引用,语法：,Document.,表单名,.,对象名,.,属性,举例：,例,6.11.html,6.3,基本语法,编程术语,大小写敏感,JavaScript,对大小写敏感，相同的字母，大小写不同，代表的意义也不同。,Name NAME name,写代码是一定要确保输入正确,数据类型,number,JavaScript,数值可以是整数和浮点值,整型值可以是正整数，负整数和,0,。可以用,10,进制，,8,进制和,16,进制来表示。在,JavaScript,中大多数字是用十进制表示的。,浮点值为带小数部分的数。也可以用科学计数法来表示。这就是说，大写或小写“,e”,用来表示,10,的次方。,如,45 3.45e2 0.01,等。,NaN,（不是数）。当对不适当的数据进行数学运算时使用，例如字符串或未定义值。,正无穷大。在,JScript,中如果一个正数太大的话使用它来表示。,53,数据类型,string,一个字符串值是排在一起的一串字母、数字和标点符号。字符串数据类型用来表示,JavaScript,中的文本。脚本中可以包含字符串文字，这些字符串文字放在一对匹配的的单引号或双引号中。字符串中可以包含双引号，该双引号两边需加单引号，也可以包含单引号，该单引号两边需加双引号。下面是字符串的示例：,Happy am I;from care Im free!Avast,ye lubbers!roared the technician.42“,请注意，,JavaScript,中没有表示单个字符的类型（如,C+,的,char,）。要表示,JavaScript,中的单个字符，应创建一个只包含一个字符的字符串。包含零个字符（,）的字符串是空（零长度）字符串。,54,boolean,尽管字符串和数字类型可以有无数不同的值，,boolean,数据类型却只有两个值。它们是文字,true,和,false,。,Boolean,值是一个真值，它表示一个状态的有效性（说明该状态为真或假）。,null,表示什么也没有，它可以和任何类型进行安全的转换，,undefined,声明变量后未赋值时的类型，方便后面使用,object,复杂的数据可以构成数据对象类型，可以把对象看成是一个命名好的容器，可以容纳数据（如该容器的某个属性值）以及对这些数据采取操作。,56,变量的声明,对于一个用,var,声明的变量，可以在声明时赋给它一个特殊的常量,null,。若声明了一个变量，但不给它任何值（包括,null,），那么这个变量确实存在，但是却处于未定义状态，其类型为,undefined,，这时如果直接引用，就会产生一个错误。,例如，此用法是错误的：,var abc;,var def=5*abc;,变量的另一个重要属性就是变量的作用域。在,JavaScript,中同样有全局变量和局部变量。全局变量定义在所有函数之外，其作用范围是所有函数；而局部变量定义在函数内，只在该函数内有效。,变量,a,、,b,和,c,只能,在其各自的函数中,被访问,变量的作用域,脚本,函数,function1,局部变量,a,函数,function2,局部变量,b,函数,function3,局部变量,c,可由函数,1,、函数,2,和函数,3,访问,全局变量,gg,全局变量不需要以,var,关键字进行声明，但局部变量则必须,以此关键字来声明,变量命名规则,变量的命名规则,a,）变量名必须以字母或下划线、,$,开始，其余字符可以是字母、数字、下划线等。,b,）变量名中除下划线作为连字符外，不能有空格、,“,”,、,“,”,、,“,，,”,或其他符号。,c,）不能使用,JavaScript,中的关键字作变量名。,注意,:JavaScript,区分字母大小写。,变量声明举例,Var a;,Var a,b,c;,Var a=2;,Var a=2,b=5;,在,JavaScript,中，变量的类型由其值的类型来决定。,a,）在,JavaScript,中，变量可以用命令,var,作声明：,如,var mytest;,如,var mytest=,”,This is a book,”,;,b,）在,JavaScript,中，变量可以不作声明，而在使用时再根据数据的类型来确定其变量的类型。如：,x=100,y=,”,125,”,xy=true,cost=19.5,这里，,X,为整数，,Y,为字符串，,XY,为布尔型，,COST,为实型。,变量的类型,注释,语法：,/,这是单行注释,/*,这是多行注释,.*/,保留字和未来保留字,在,JavaScript,中定义了,40,多个关键字，也称保留字。这些保留字是,JavaScript,内部使用的，不能作为变量名、函数名、方法名和对象名。常用保留字参见课本。,表达式,表达式指具有一定值的、将常量、变量等由运算符按照一定的法则连接起来的式子。,63,运算符,运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值,根据所执行的运算，运算符可分为以下类别：,算术运算符,逻辑运算符,赋值运算符,运算符,说 明,示 例,+,加,a=5+8,-,减,a=8-5,/,除,a=20/5,*,乘,a=5*19,%,取模两个数相除的余数,10%3=1,+,一元自加。该运算符带一个操作数，将操作数的值加,1,。返回的值取决于,+,运算符位于操作数的前面或是后面,将返回,x,自加运算后的值。,x+,将返回,x,自加运算前的值,-,一元自减。该运算符只带一个操作数。返回的值取决于,-,运算符位于操作数的前面或是后面,-x,将返回,x,自减运算后的值。,x-,将返回,x,自减运算前的值,算术运算符,运算符,说 明,示 例,=,等于。如果两个操作数相等，则返回真。,a=b,=,全等于。结果值相等，数据类型也相等时，则返回真。,大于。如果左边的操作数大于右边的操作数，则返回真。,Var1 var2,小于。如果左边的操作数小于右边的操作数，则返回真。,Var2 var1,=,小于等于。如果左边的操作数小于或等于右边的操作数，则返回真。,Var2=4,Var2=,大于等于。如果左边的操作数大于或等于右边的操作数，则返回真。,Var1=5,Var1=var2,逻辑运算符,与,(&),expr1&expr2,只有当,expr1,和,expr2,同为真时，才返回真。否则，返回假。,或,(|),expr1|expr2,如果其中一个表达式为真，或两个表达式同为真，则返回真。否则，返回假。,非,(!),!expr,如果表达式为真，则返回假。如果为假，则返回真。,！,=,不全等于,X!=Y,！,=,不等于。,X!=Y,运算符,说 明,示 例,思考：,+x,与,x+,的区别,+,号的用法：,1.,数字相加 如：,a=1+2,；,2.,链接字符串 如,:a=a+b+c;,+,的用法：,1.,如果不在赋值表达式中：,i+,同,+i,同,i=i+1,；,2.,如果在赋值表达式中：,a=i+,同,a=i,；,i+,；,a=+i,同,a=i+1,；,i+,；,赋值运算符用“,=”,表示，是将内容或值传给变量。一般用于变量内容的设置。,X=5;x=5+x/2;,等,注意：“,=”,和“,=”,的区别,“=”,与其他运算符的结合,X+=3 x-=3,赋值运算符,运算符的优先级,从高到低顺序为：,非运算符算术运算逻辑运算赋值运算,括号,71,语句,JavaScript,程序由若干语句组成；,JavaScript,语句包含若干表达式、关键词和运算符。,如：,var hisname=“Mike”+”Jackson”;,语句块,用,括起来的一组,JavaScript,语句称为语句块,语句块作为一段单独的语句可以被其它,JavaScript,代码调用。,比如：函数、选择语句、循环语句,程序流程控制,课程内容安排,JS,控制语句概述,选择语句,if,语句、,if-else,语句、,if-else-if,语句、,switch,语句,循环语句,for,语句、,while,语句、,do-while,语句、,for-in,语句、,break,和,continue,语句,异常处理语句,try-catch,语句、,try-catch-finally,语句、,throw,语句,JS,控制语句概述,JavaScript,中提供了多种用于程序流程控制的语句，这些语句分为选择和循环两大类,选择语句是指根据条件来选择一个任务分支的语句统称，实现分支程序设计,switch,实现多路选择功能，在给定的多个选择中选择一个符合条件的分支来执行,在编程中有些指令需要重复执行很多遍，这就要编写大量的代码。而计算机则是专门用来快速完成重复和繁琐的工作，因此编程语言也就提供循环语句来减少重复指令的编写,if,语句,if,语句,生活中一个形象的例子，,某人在看钟表上的时间，如果小于凌晨,6,点就决定继续睡，如果大于,6,点，就起床去上班,。编程中也有类似的问题，此时可用,if,语句来描述之，其测试一个,Boolean,表达式，结果为真则执行某段程序。,if()/,条件语句,语句组,;/,程序语句序列,if-else,语句,if-else,语句,if,语句仅根据表达式的值决定是否执行某个任务，没有其它更多的选择，而,if-else,语句则提供双路选择功能。,if()/,表达式成立时,语句组,1;/,有效的程序语句,else/,表达式不成立时,语句组,2;/,有效的程序语句,if-else-if,语句,if-else-if,语句,当有多个可供判断选择的条件时，单个,if-else,语句显然不能表达，于是有了,if-else-if,语句。严格的说,if-else-if,不是单独的语句，而是由多个,if-else,组合而成，实现多路判断,if(),语句组,1;,else if(),语句组,2;,else,语句组,3;,switch,语句,switch,语句,用,if-else,语句实现多路选择结构使程序看起来不清晰，也不容易维护，于是可以选择,switch,语句代替之。,switch,实现多路选功能，在给定的多个选择中选择一个符合条件的分支来执行。,switch(),case:,语句组,1;,case:,语句组,2;,default:,语句组,3;,例,5-4,循环语句,在编程中有些指令需要执行很多遍，这就要编写大量的代码。而计算机则是专门用来快速完成重复和繁琐的工作，因此编程语言也就提供循环语句来减少重复指令的编写,将重复执行的动作放在循环语句中，计算机将根据条件执行之。,JavaScript,的循环语句包括：,for,、,while,、,do-while,、,for-in,等,4,种,for,语句,遇到重得执行指定次数的代码时，使用,for,循环比较合适,在执行,for,循环执行体中的语句前，有三个语句将得到执行，这三个语句的运行结果将决定是否要进入,for,循环体,for(,表达式,1;,表达式,2;,表达式,3),语句组,;,while,语句,while,循环在执行循环体前测试一个条件，如果条件成立则进入循环体，否则跳到循环后的第一条语句。,一些重复执行动作的情形比较简单时就不需要用,for,循环，可以使用,while,循环代替,while(,条件表达式,),语句组,;,do-while,语句,do-while,语句先执行一遍循环体,循环体内的语句执行之后再测试一个条件表达式。,如果表达式成立则继续执行下一轮循环，否则跳到,do-while,代码段后的第一条语句。,do,语句组,;,while(,条件表达式,);,for-in,语句,for-in,语句是,for,语句的一个变体，同样是,for,循环语句,for-in,通常用于遍历某个集合的每个元素，比如数组由很多元素，其元素索引构成了一个集合，使用,for-in,语句可以遍历该集合，进而取得所有元素数据。,for(n in set),语句组,;,break,语句将无条件跳出并结束当前的循环结构,continue,语句的作用是忽略其后的语句并结束此轮循环和开始新的一轮循环,异常处理语句,程序运行过程中难免会出错，出错后的运行结果往往是不正确的，因此运行时出错的程序通常被强制中止。运行时的错误统称为异常,try-catch,try-catch-finally,throw,为了能在错误发生时得到一个处理的机会，,JavaScript,提供了异常处理语句,try-catch,语句,try-catch,是一个异常捕捉和处理代码结构，当,try,块中的代码发生异常时，将由,catch,块捕捉以及处理。,try,tryStatements,catch(exception),catchStatements,try-catch-finally,语句,try-catch-finally,语句作用与,try-catch,语句一样，唯一的区别就是当所有过程执行完毕之后前者的,finally,块无条件被执行,throw,语句,当多个结构嵌套时，处于里层,try-catch,语句不打算自己处理异常则可以将其抛出，父级,try-catch,语句可以接收到子级抛出的异常。,try,tryStatements;,catch(exception),handleStatements;,finally,fianllyStatements;,数组,课程内容安排,数组介绍,创建数组,数组元素的基本操作,数组对象常见的操作,数组介绍,数组的概念：,JavaScript,数组是指将多个数据编码存储、提供一致的存取方式的集合。,与其它程序语言不同的是，,JavaScript,的数组元素的数据类型可以不相同。,实际开发中，总是面临大量数据存储的问题。,JavaScript,语言不像,C/C+,那样合适用于数据结构的设计，因此需要系统内部提供针对大量数据存储的工具，数组因此而产生。,JavaScript,数组的目标是能组织存储各种各样的数据，并且访问方式和其它语言一样，特点是能混合存储类型不相同的数据。,数组介绍,单维数组,与多维数组等效的数组,数组元素：是指存储在数组中并赋予唯一索引号的数据段。,各元素的数据类型可以是任意有效的,JavaScript,数据类型，元素按添加进数组的顺序存储于数组中。,示意图如下：,创建数组,创建一个空数组,通过指定数组长度创建数组,通过指定数组元素创建数组,直接创建数组,创建数组,创建一个空数组,数组在创建时可以不包含任何元素数据，即空数组。创建后返回一个数组对象，使用该对象可以往数组中添加元素。语法如下：,上述语句将创建一个空数组。变量,Obj,引用创建后的数组对象，通过此变量可以操作数组，,Array(),为数组对象的构造函数。,var Obj=new Array();,创建数组,通过指定数组长度创建数组,在创建数组时可以指定数组的元素长度，通过这种方式可以创建一个有指定元素个数的数组对象。语法如下：,Size,指明新建的数组有多少个元素。数组对象的,length,将被设置为,Size,，仅指定长度但没有实际填充元素及其数据的数组将得不到数据存储空间,var Obj=new Array(Size);,创建数组,通过指定数组元素创建数组,新建的数组将包含创建时指定的元素，通常用在数据已经准备就绪的场合。语法如下：,var Obj=new Array(,元素,1,元素,2,元素,N);,创建数组演示：数组善于将每个独立的数据组织起来，提供一致的访问方式。现在创建一个数组用于保存“,Peter”,、“,Tom”,、“,Vicky”,和“,Jet”,这几个学生的名字。,创建数组演示,01,02,通过指定元素创建数组,03/,脚本程序开始,04 var students=new Array(Peter,Tom,Vicky,Jet);,05 for(n in students)/,逐个输出数组中的名字,06 ,07 document.write(studentsn+);/,将名字写入当前文档流,08 ,09,10,直接创建数组,JavaScript,创建数组的另一种简便的方式是使用“,”,运算符直接创建，数组的元素也是创建时被指定。这种方法的目标也是创建数组，与前面的方法相比仅仅是语法上的不同。,var Obj=,元素,1,元素,2,元素,3,元素,N;,数组元素的基本操作,读取数组元素,添加数组元素,删除数组元素,数组元素的个数,以下是最基本的数组操作，我们在使用数组时基本上都涉及到，,后面我们将对它们逐一进行讲解。,提示：尽管有很多种创建方式，但通常使用其中一种就足够。,数组元素的基本操作,读取数组元素,读取数组元素最简单的方法就是使用“,”,运算符。使用“,”,运算符可以一次读取一个数组元素，语法如下：,目标元素通常由下标索引号决定，例如读取第一个元素为“数组名,0”,，依此类推,下面的代码从一个填有商品名字数组中读出第二种商品的名字。,数组名,下标索引,;,var products=new Array(“,洗衣粉”,“,香皂”,“,洗洁精”,);/,商品列表,var product=products 1;/,取出第二种商品,数组元素的基本操作,添加数组元素,JavaScript,的数组可以动态添加新元素，也可以动态删除原有的元素，下一小节讲解如何删除。添加新元素通常使用,Array,对象的,push,方法，,push,方法是将新元素添加到数组的尾部。使用,unshift,可以将指定个数的新元素插入数组的开始位置，形成新的数组,下面是添加元素的一般形式：,也可以使用“,”,运算符指定一个新下标来添加新元素，新元素添加到指定的下标处。如果指定的下标超过数组的长度，数组将被扩展为新下标指定的长度。,var students=new Array();/,创建一个没有任何元素的数组,students.push(“Lily”);/,将,Lily,的名字添加到数组中,数组元素的基本操作,删除数组元素,通常使用,delete,运算符删除一个指定的元素，如果需要删除全部元素只需要删除数组对象即可。使用语法如下：,例如，使用数组作为学生名单，现要删除数组中第一个元素，代码如下,：,delete,数组名,下标,;,var names=Array(“,李莉”,“,杨杨”,);/,有两个名字的名单,delete names0;/,删除第一名字“莉莉”,数组元素的基本操作,数组元素的个数,数组对象的,length,（长度）属性指示了数组元素的个数。,通过设定,length,属性可以指定数组的长度。,在得知长度情况下可以方便的遍历整个数组，读取数组元素个数信息的方法如下代码所示：,尽管指定了数组的,length,属性，真正的有效元素只包含已经存入数据的元素，其它没有真正填充数据的元素仍然为空。,var Obj=new Array(1,2,3);,var count=Obj.length;,数组对象常见的操作,将数组转换为字符串,toString,方法将数组表示为字符串，各个元素按顺序排列组合成为字符串返回。,radix,为可选项参数，表示进制。当对象是数字对象时，该参数起作用。对象名是数组对象变量名，方法执行后各元素以“，”隔开按顺序加入字符串中。,将数组元素连接成字符串,可以使用,join,方法将各元素组合为字符串，连接符号由用户指定。语法如下：,分隔符：必选项，是一个字符串串对象，作为各元素间的分隔字符串。,对象名,.toString(radix);,数组名,.join(,分隔符,);,数组对象常见的操作,在数组尾部添加元素,push,方法一次可以添加单个元素或多个元素到数组末端。使用语法如下：,元素：可选项，可以是一个或多个,JavaScript,对象，使用“，”分隔。,数组名,.push(,元素,1,元素,2,元素,N );,删除数组的最后一个元素,pop,方法的作用是移除数组末尾的一个元素。前面讲过使用,delete,运算符删除指定的元素，与,delete,不同，,pop,方法删除最后一个元素后还将其返回。,语法如下：,数组名,.pop();,数组对象常见的操作,移除数组顶端的元素,pop,方法是移除数组末端的一个元素，而,shift,方法正好相反，其移除数组的第一个元素并将其返回。该方法执行后数组剩下的元素向前移动，下标索引号重新调整从,0,开始按顺序赋予所有元素。,Shift,的语法如下：,在大家所熟知的基本数据结构中，队列非常有用，其遵循选进先出（,FIFO,）的规则，与堆栈不同。,shift,和,push,方法结合使用，可以将数组当成队列使用。,数组名,.shift();,数组对象常见的操作,在数组顶端插入元素,unshift,是将元素插入数组的首部。一次可以插入单个或多个元素，所有元素按顺序插入，操作完成后返回新数组的引用。语法如下。,：,unshift,方法的使用与前面讲过的各方法一样。如果不计较元素插入的位置，则推荐使用,push,方法。因为,unshift,方法将引发所有下标的改动，可能会影响依靠下标才能准确进行的计算,。,数组名,.unshift(,元素,1,元素,2,元素,3,元素,N );,数组对象常见的操作,添加元素并生成新数组,concat,方法可以将多个数组的元素连接一起成为新的数组，新数组中的元素按连接时的顺序排列。当需要合并多个数组时，此方法比较方便。语法如下：,item,：可选项，要连接到“数组名”引用的数组末尾的其它项目。可以是数组也可以是单个数组元素，或者是其它,JavaScript,对象。,数组名,.concat(item1,item2,item3,itemN );,数组对象常见的操作,删除、替换或插入数组元素,splice,方法的作用是，从一个数组中移除一个或多个元素。剩下的元素组成一个数组，移除的元素组成另一个数组并返回它的引用。同时，原数组可以在移除的开始位置处顺带插入一个或多个新元素，达到修改替换数组元素的目的。,start,：必选项，表示从数组中剪切的起始位置下标索引号。,deleteCount,：必选项，表示将从数组中切取的元素的个数。,item,：可选项，表示切取时插入原数组切入点开始处的一个或多个元素，要求为有效的,JavaScript,数组名,.splice(start,deleteCount,item1,item2 ,.,itemN );,数组对象常见的操作,获取数组中的一部分元素,slice,方法的作用是，获取指定下标索引区间中的元素作为新数组返回,.,End:slice,方法一直复制到,end,所指定的元素,但是不包含该元素,.,数组名,.slice(start,end);,数组对象常见的操作,颠倒数组元素的顺序,可以使用,reverse,方法将一个,Array,对象中所有元素的次序反转，然后返回元素顺序反转后的,Array,对象的引用。,数组名,.reverse();,对数组元素进行排序,Array,对象的,sort,方法可以将一个数组中的所有元素排序。执行时先将调用该方法的数组中的元素按用户指定的方法进行排序，排序后的所有元素构成一个新数组并返回之。通常用来对数据排序，语法如下：,数组名,.sort(sortfunction ),数组对象常见的操作,sortfunction,：可选项。用来确定元素顺序的函数的名称。如果这个参数被省略，那么元素将按照,ASCII,字符顺序进行升序排列。,负值：表示传给,sortfunction,两个实参中，第一个的值比第二个的小。,零：表示传给,sortfunction,两个实参的值相等。,正值：表示传给,sortfunction,两个实参中，第一个的值比第二个的大。,结束语,硬爬过那道坎后，你会发现原来的挑战主要是来自已的内心。,