JavaScript 常用功能总结

本文主要总结了JavaScript常用功能总结，如一些常用的JS对象，基本数据结构，功能函数等，还有一些常用的设计模式。目录：众所周知，JavaScript是动态的面向对象的编程语言，能够实现以下效果：丰富Web网页功能丰富Web界面实现本地或远程存储。实现分布式网络应用的前端组件，并在后台进行数据存储管理。使用JavaScript可以实现完整的分布式Web应用。JavaScript中的数据类型JavaScript提供三种元数据类型，string，number，和Boolean，可使用typeof(v)测试变量V的类型，typeof(v)===〃number〃提供五种基本的引用类型：Object,Array,Function,Date及RegExp。数组，函数，日期和正则表达式是特殊类型，但是严格来讲，日期和正则表达式是元数据类型，可封装在其他对象中。JS中变量类型，数组元素类型，函数参数以及返回值的类型不需要声明类型，类型之间的转换是自动执行的。变量值可以是：数值：如字符串，数字或布尔值。对象引用：可引用典型对象，也可以是数据，函数，日期或正则表达式。特殊数据值，Null,是典型的用于初始化对象的默认值。特殊数据undefined，常用于已被定义，但未赋值的变量。string是一系列的Unicode字符串，String如“helloworld”,’A3FO’或空字符串“”，字符串连接可通过+操作符来执行，也可以使用二号来验证两个字符串是否相等;if(firstName+lastName==="JamesBond")...numeric表示64位的浮点数，在JS中没有明显的区分整形和浮点数，如果一个表达式的值不等于某个数字，那么它的值可设为NaN，表示非数字，可联合isNaN使用。如下表是详细的类型测试和转换TgT«tifxoftypeConverttcstringConvertstringtotypestringtypeci-f(x)=D=hhstring"nan.a.booleantypeQf(x)=°=Hboolean**Stririg(x)Boolean(y)(ffgingpoint)numbertypeQf(x)===klnumber"String(x)p^rsePloat(y)integerNumber.String(x)p^rselnt(y)Objecttypeof(x)===h+otjject"x□taString()orJSQN,stringify(x)3SON.p5.r&e(y)ArrayArray^isArray(x)XntoStringf)pr]50tkstringi-fy(x)y.split()ar(y)Functiontypeof(x)=n=rhfunction"'x,tQStPirig()newFLtinction(y)DatexinstanceofDatex.toISOString()newD^te(y)RegExpxinstanceo-FRegExpx.toISC£tring{)newRegExp(y)变量作用域范围目前，JavaScript，ES5提供两种作用域类型：全局变量及函数作用域，没有块作用域。块作用域的范围不太明确，所以应当避免块作用域的使用。如下代码，尽管是开发人员常用的Pattern，却是一个陷阱。functionfoo()(for(vari=0;i<10;i++)(...//dosomethingwithi}}所有的变量声明最好是在函数的开始位置。在JS，ES6版本中支持块作用域，采用关键字let定义变量。严格模式(StrictMode)从ES5开始，严格模式用于检测运行时的错误，在严格模式下，所有的变量必须声明，如果给未声明的变量赋值会抛出异常。在JavaScript文件或＜Script＞元素内，通过输入以下代码切换到严格模式：usestrict;建议采用严格模式，除非项目依赖的库不兼容严格模式。多种对象JS中的对象概念不同于OO或UML中的对象，尤其是在JS中对象不需要实例化，也可以有自己的方法，不仅有propertyslots，也包含methodslots。除此之外还包含key-valueslots；因此他们总共有三种Slots，而常见的对象只有属性槽。JS对象是由一系列的name-value组成的，［。"而name可以是属性名称，函数名称，映射名称。对象可通过一种特定的方式创建，使用JS对象声明语法(JSON)，而不需要实例化一个类。代码如下：varpersonl=(lastName:"Smith",firstName:"Tom"};varo1=Object.create(null);//anemptyobjectwithnoslots如果Slot的name是合法的JS标识符，则Slot可表示属性，方法，或键值对。如果名称含有一些特殊字符如空格，则Slot代表键值对，是一种映射元素，如下：PropertySlot中的name:datavalue属性，在这种情况下，Value表示变量值，或是值表达式。object-valued属性，Value表示对象的引用或对象表达式。methodSlot表示的是JS函数，它的值是JS函数定义表达式：Object属性可以使用两种方法来访问：1.使用”.与(C++和Java的类似)：person1.lastName="Smith2.使用map：person1["lastName"]="Smith"JS对象能够用于各种途径，以下是五种常见情况：Record是Propertyslots集合，如：varmyRecord={firstName:〃Tom〃，lastName:"Smith",age:26)map如Hashmap，数组，hash表；varnumeral2number={one:1,two:2,three:3}Untyped对象不需要实例化类，它可能包含propertyslot和functionslots:varperson1=(lastName:"Smith”,firstName:"Tom”,getFullName:function()(returnthis.firstName+""+this.lastName;}}；ArrayListJSarray即逻辑数据结构，通过数组下标访问。如数组初始化：vara=[1,2,3];JS数组可动态增长，因此数组索引有可能比实际元素个数多，如下：a[4]=7;数组循环：for(i=0;i<a.length;i++){...}数组是特殊的对象类型，因此有很多情况下，需要判断变量是否为数组类型，使用IsArray方法：Array.isArray(a)。添加新元素到数组：a.push(newElement);删除：a.splice(i,1);查找：if(a.indexOf(v)>-1)...循环：vari=0;for(i=0;i<a.length;i++)(console.log(a[i]);}如果数组较小，可使用foreach循环：a.forEach(function(elem)(console.log(elem);})JS也提供克隆数组的函数：varclone=a.slice(0);Mapsmap提供key到值得映射。JSmap是一串字符集，可包含空格:varmyTranslation=("myhouse":"meinHaus”,"myboat":"meinBoot","myhorse":"meinPferd"}增加：myTranslation["mycar"]="meinAuto";删除：myTranslation["mycar"]="meinAuto";查找：if("mybike"inmyTranslation)...循环：vari=0,key="",keys二口；keys=Object.keys(m);for(i=0;i<keys.length;i++)(key=keys[i];console.log(m[key]);}如果map较小可使用foreach语句：Object.keys(m).forEach(function(key)(console.log(m[key]);})复制map

varclone=JSON.parse(JSON.stringify(m))小结：JavaScript支持4种基本的数据结构。1：arraylists：如["one","two","three"],specialJS对象2：records:特殊的JS对象，如{firstName:〃Tom〃，lastName:〃Smith〃}；3：maps：如{none":1,"two":2,"three":3}4：entity表：如下表所示,是一种特殊的map,值是有固定ID的记录。jr-zKeyValue006251587X(isbn:”006251587X『titl"W®vingtheWeb'\year:2000}0465026567{isbn:”0465026567,”title;,JGddeLEsther,Bach'；year1999}0465030793{isbn:hf0465030793fMtitledAmAStrangeLoop”，year2008)record，map，entity在实际应用中没有明显的区分，只是概念上的区分。对JS引擎而言，都是对象。但是从概念上是有区分的。函数如表1所示，函数是特殊的JS对象，有name属性和length属性表示参数的个数，如下，判断v是否指向函数：if(typeof(v)==="function"){...}函数定义：varmyFunction=functiontheNameOfMyFunction(){...}theNameOfMyFunction是可选的，如果省略函数名称，则称该函数为匿名函数。通常，函数是通过变量来调用的，如上面的代码，则表示myFunction会调用myFunction()函数，而不是使用theNameOfMyFunction。调用。

匿名函数表达式在其他编程语言中称为lambda表达式。如下代码是匿名函数。可以与预定义的sort函数对比：varlist=[[1,2],[1,3],[1,1],[2,1]];list.sort(function(x,y)(return((x[0]===y[0])?x[1]-y[1]:x[0]-y[0]);});函数声明：functiontheNameOfMyFunction(){...}与代码vartheNameOfMyFunction=functiontheNameOfMyFunction(){...}等价；声明了函数theNameOfMyFunction，并使用theNameOfMyFunction变量来引用函数。JS提供函数内联，closure机制允许JS函数调用函数之外的使用变量。函数可以创建closure来存储当前的环境。如下，不需要通过参数将外部变量的结果传给内部函数，它本身就是可用的。varsum=function(numbers)(varresult=0;numbers.forEach(function(n)(result+=n;});returnresult;};console.log(sum([1,2,3,4]));当执行一个方法时，可以使用内置arguments对象访问函数内的参数，arguments对象与数组使用方法类似，有长度属性，也有索引，并且可以使用For语句来循环迭代。但是由于它并不是Array实例，因此JSarrary的部分方法无法应用如foreach。arguments对象的元素个数与函数参数个数相同，也可以定义方法的时候不指定参数个数，在调用时，可为函数赋多个参数，如：varsum=function()(varresult=0,i=0;for(i=0;i<arguments.length;i++)(result=result+arguments[i];}returnresult;}；console.log(sum(0,1,1,2,3,5,8));//20方法是在构造函数的原型上定义的，可以通过对象创建的构造器调用，如Atotype.forEach；Array表示构造器，调用类的实例作为上下文对象参考的，如下：在foreach中numbers表示上下文对象：varnumbers=[1,2,3];//createaninstanceofArraynumbers.forEach(function(n)(console.log(n);});无论原型方法是否被上下文对象调用，但是只要是参数为对象，可以使用JS函数的Call方法来辅助调用对象。如下，我们可以使用foreach循环方法：varsum=function()(varresult=0;Atotype.forEach.call(arguments,function(n)(result=result+n;});returnresult;};Ftotype.call方法和apply都是为了改变某个函数运行时的context即上下文而存在的。定义和使用类类是面向对象中的基本概念，对象的实例化称为类。JS中定义类需要满足以下五个需求:1.指定类的名称，实例级别的属性和方法，类级别的属性和方法。2.是可预测的实力，能够用于验证是否是某一对象的实例。3.实例级别的属性用于检测对象的直接类型。4.属性继承5.方法继承。除此之外还支持对哦集成和多分类。JS中对类没有统一的定义规范，可以使用不同代码模式来定义类，并应用于多种不同的框架。JS中最常用的定义类的方法如下：1.构造函数规范，可通过prototypechain实现方法继承，并支持创建新的类实例。2.factory对象，用于预定义Object.create方法来创建新实例。该方法中基于构造函数的继承机制可以被其他机制代替。创建App都需要使用类，因此经常需要定义类之间的关系，所以必须保证，使用相同类Constructor-basedclasses只有ES6引入了定义基于构造器的类。新语法支持定义一些简单的类继承，具体步骤如下：Step1.a基类Person具有两个属性，firstName和LastName，实例层的方法toString和静态方法checkLastName；classPerson(constructor(first,last)(this.firstName=first;this.lastName=last;}toString()(returnthis.firstName+""+this.lastName;}staticcheckLastName(ln)(if(typeof(ln)!==〃string〃||ln.trim()===〃〃)(console.log("Error:"+"invalidlastname!");}}}Step1.b类层次的属性定义：Person.instances={};在第二步中，会定义一个带有其他属性和方法的子类，也有可能重写父类的相关方法：classStudentextendsPerson(constructor(first,last,studNo)(super.constructor(first,last);this.studNo=studNo;}//methodoverridessuperclassmethodtoString()(returnsuper.toString()+"("+this.studNo+")";}}ES5中，可以定义继承基于构造器类的子类。如下：Stepl.a首先定义构造函数，能够隐式的定义类的属性并赋值；functionPerson(first,last)(this.firstName=first;this.lastName=last;}注意，上述代码中的this指的是新生成的对象，当构造函数被调用时，该对象就已经生成了。Stepl.b定义实例层的方法：Ptotype.toString=function()(returnthis.firstName+""+this.lastName;}Step1.c定义静态方法：Person.checkLastName=function(ln)(if(typeof(ln)!==〃string〃||ln.trim()===〃〃)(console.log("Error:invalidlastname!");}}Step1.d定义类层次的静态属性Person.instances={};Step2.a定义子类：1:functionStudent(first,last,studNo)(2://invokesuperclassconstructor3:Person.call(this,first,last);4://defineandassignadditionalproperties5:this.studNo=studNo;6:}通过调用超类的构造函数Person.call(this,...),来创建新对象。其中This指的是Student,PropertySlots在超类的构造函数中已经创建((firstName和lastName)以及其他子类相关的属性。在这种情况下可使用PropertyInheritance机制保证所有的属性已经被定义且被创建。Step2b,通过构造函数的prototype属性安装methodinheritance。如下，分配了一个新对象创建子类型构造函数的Prototype属性，并做出适当的调整：//StudentinheritsfromPersonStotype=Object.create(Ptotype);//adjustthesubtype'sconstructorpropertyStotype.constructor=Student;Step2c，重新定义子类方法重写超类方法：Stotype.toString=function()(returnPtotype.toString.call(this)+"("+this.studNo+")";};基于构造器类的实例化是通过应用new操作符来创建的，并提供合适的构造参数：varpersl=newPerson(〃Tom〃，〃Smith〃)；方法toString通过pers1.来调用：alert("Thefullnameofthepersonare:"+pers1.toString());在JS中，prototype是具有methodslots的对象，可以通过JS方法或属性槽继承的。基于Factory的类在该方法中定义了JS对象Person，含有特殊的Create方法来调用预定义的Object.Create方法，创建Person类型的对象；varPerson=(name:"Person",properti