JavaScript 常用功能总结
2016-01-21 13:38
555 查看
小编吐血整理加上翻译,太辛苦了~求赞!
本文主要总结了JavaScript常用功能总结,如一些常用的JS对象,基本数据结构,功能函数等,还有一些常用的设计模式。
目录:
众所周知,JavaScript是动态的面向对象的编程语言,能够实现以下效果:
1.丰富Web网页功能
2.丰富Web界面
3.实现本地或远程存储。
4.实现分布式网络应用的前端组件,并在后台进行数据存储管理。
5.使用JavaScript可以实现完整的分布式Web应用。
JavaScript中的数据类型
JavaScript提供三种元数据类型,string,number,和Boolean,可使用typeof(v)测试变量V的类型,
提供五种基本的引用类型:Object,Array,Function,Date及RegExp。数组,函数,日期和正则表达式是特殊类型,但是严格来讲,日期和正则表达式是元数据类型,可封装在其他对象中。
JS中变量类型,数组元素类型,函数参数以及返回值的类型不需要声明类型,类型之间的转换是自动执行的。
变量值可以是:
1.数值:如字符串,数字或布尔值。
2.对象引用:可引用典型对象,也可以是数据,函数,日期或正则表达式。
3.特殊数据值,Null,是典型的用于初始化对象的默认值。
4.特殊数据undefined,常用于已被定义,但未赋值的变量。
string是一系列的Unicode字符串,String如“helloworld”,’A3FO’或空字符串“”,字符串连接可通过+操作符来执行,也可以使用=号来验证两个字符串是否相等;
numeric表示64位的浮点数,在JS中没有明显的区分整形和浮点数,如果一个表达式的值不等于某个数字,那么它的值可设为NaN,表示非数字,可联合isNaN使用。
如下表是详细的类型测试和转换
所有的变量声明最好是在函数的开始位置。在JS,ES6版本中支持块作用域,采用关键字let定义变量。
在JavaScript文件或<Script>元素内,通过输入以下代码切换到严格模式:
建议采用严格模式,除非项目依赖的库不兼容严格模式。
JS对象是由一系列的name-value组成的Slot。而name可以是属性名称,函数名称,映射名称。对象可通过一种特定的方式创建,使用JS对象声明语法(JSON),而不需要实例化一个类。代码如下:
如果Slot的name是合法的JS标识符,则Slot可表示属性,方法,或键值对。如果名称含有一些特殊字符如空格,则Slot代表键值对,是一种映射元素,如下:
PropertySlot中的name:
1.datavalue属性,在这种情况下,Value表示变量值,或是值表达式。
2.object-valued属性,Value表示对象的引用或对象表达式。
methodSlot表示的是JS函数,它的值是JS函数定义表达式:
Object属性可以使用两种方法来访问:
1.使用”.”(与C++和Java的类似):
2.使用map:
person1["lastName"]="Smith"
JS对象能够用于各种途径,以下是五种常见情况:
1.Record是Propertyslots集合,如:
2.map如Hashmap,数组,hash表;
3.Untyped对象不需要实例化类,它可能包含propertyslot和functionslots:
ArrayList
JSarray即逻辑数据结构,通过数组下标访问。如数组初始化:
JS数组可动态增长,因此数组索引有可能比实际元素个数多,如下:
数组循环:
for(i=0;i<a.length;i++){...}
数组是特殊的对象类型,因此有很多情况下,需要判断变量是否为数组类型,使用IsArray方法:
添加新元素到数组:
如果数组较小,可使用foreach循环:
JS也提供克隆数组的函数:
2:records:特殊的JS对象,如
3:maps:如{"one":1,"two":2,"three":3}
4:entity表:如下表所示,是一种特殊的map,值是有固定ID的记录。
record,map,entity在实际应用中没有明显的区分,只是概念上的区分。对JS引擎而言,都是对象。但是从概念上是有区分的。
函数定义:
theNameOfMyFunction是可选的,如果省略函数名称,则称该函数为匿名函数。通常,函数是通过变量来调用的,如上面的代码,则表示
myFunction会调用myFunction()函数,而不是使用theNameOfMyFunction()调用。
匿名函数表达式在其他编程语言中称为lambda表达式。如下代码是匿名函数。可以与预定义的sort函数对比:
函数声明:
等价;
声明了函数theNameOfMyFunction,并使用theNameOfMyFunction变量来引用函数。
JS提供函数内联,closure机制允许JS函数调用函数之外的使用变量。函数可以创建closure来存储当前的环境。如下,不需要通过参数将外部变量的结果传给内部函数,它本身就是可用的。
当执行一个方法时,可以使用内置arguments对象访问函数内的参数,arguments对象与数组使用方法类似,有长度属性,也有索引,并且可以使用For语句来循环迭代。但是由于它并不是Array实例,因此JSarrary的部分方法无法应用如foreach。
arguments对象的元素个数与函数参数个数相同,也可以定义方法的时候不指定参数个数,在调用时,可为函数赋多个参数,如:
方法是在构造函数的原型上定义的,可以通过对象创建的构造器调用,如Array.prototype.forEach;Array表示构造器,调用类的实例作为上下文对象参考的,如下:在foreach中numbers表示上下文对象:
无论原型方法是否被上下文对象调用,但是只要是参数为对象,可以使用JS函数的Call方法来辅助调用对象。如下,我们可以使用foreach循环方法:
Function.prototype.call方法和apply都是为了改变某个函数运行时的context即上下文而存在的。
除此之外还支持对哦集成和多分类。
JS中对类没有统一的定义规范,可以使用不同代码模式来定义类,并应用于多种不同的框架。JS中最常用的定义类的方法如下:
1.构造函数规范,可通过prototypechain实现方法继承,并支持创建新的类实例。
2.factory对象,用于预定义Object.create方法来创建新实例。该方法中基于构造函数的继承机制可以被其他机制代替。
创建App都需要使用类,因此经常需要定义类之间的关系,所以必须保证,使用相同类
只有ES6引入了定义基于构造器的类。新语法支持定义一些简单的类继承,具体步骤如下:
Step1.a基类Person具有两个属性,firstName和LastName,实例层的方法toString和静态方法checkLastName;
Step1.b类层次的属性定义:
在第二步中,会定义一个带有其他属性和方法的子类,也有可能重写父类的相关方法:
ES5中,可以定义继承基于构造器类的子类。如下:
Step1.a首先定义构造函数,能够隐式的定义类的属性并赋值;
注意,上述代码中的this指的是新生成的对象,当构造函数被调用时,该对象就已经生成了。
Step1.b定义实例层的方法:
Step1.c定义静态方法:
Step1.d定义类层次的静态属性
[code]//invokesuperclassconstructor
[/code]
通过调用超类的构造函数Person.call(this,...),来创建新对象。其中This指的是Student,PropertySlots在超类的构造函数中已经创建((firstName和lastName)以及其他子类相关的属性。在这种情况下可使用PropertyInheritance机制保证所有的属性已经被定义且被创建。
Step2b,通过构造函数的prototype属性安装methodinheritance。如下,分配了一个新对象创建子类型构造函数的Prototype属性,并做出适当的调整:
Step2c,重新定义子类方法重写超类方法:
基于构造器类的实例化是通过应用new操作符来创建的,并提供合适的构造参数:
方法toString通过pers1.来调用:
在JS中,prototype是具有methodslots的对象,可以通过JS方法或属性槽继承的。
注意JS对象Person实际表示的是factory-based类。factory-based类的实例化是通过调用它自己的Create方法实现的:
getFullName方法是通过pers1.调用的,如下:
每个属性的声明都是使用Object.Create声明的,其中包含三个参数及值,'descriptors'
[/code]
[/code]
本文主要总结了JavaScript常用功能总结,如一些常用的JS对象,基本数据结构,功能函数等,还有一些常用的设计模式。
目录:
众所周知,JavaScript是动态的面向对象的编程语言,能够实现以下效果:
1.丰富Web网页功能
2.丰富Web界面
3.实现本地或远程存储。
4.实现分布式网络应用的前端组件,并在后台进行数据存储管理。
5.使用JavaScript可以实现完整的分布式Web应用。
JavaScript中的数据类型
JavaScript提供三种元数据类型,string,number,和Boolean,可使用typeof(v)测试变量V的类型,
typeof(v)==="number"
提供五种基本的引用类型:Object,Array,Function,Date及RegExp。数组,函数,日期和正则表达式是特殊类型,但是严格来讲,日期和正则表达式是元数据类型,可封装在其他对象中。
JS中变量类型,数组元素类型,函数参数以及返回值的类型不需要声明类型,类型之间的转换是自动执行的。
变量值可以是:
1.数值:如字符串,数字或布尔值。
2.对象引用:可引用典型对象,也可以是数据,函数,日期或正则表达式。
3.特殊数据值,Null,是典型的用于初始化对象的默认值。
4.特殊数据undefined,常用于已被定义,但未赋值的变量。
string是一系列的Unicode字符串,String如“helloworld”,’A3FO’或空字符串“”,字符串连接可通过+操作符来执行,也可以使用=号来验证两个字符串是否相等;
if(firstName+lastName==="JamesBond")...
如下表是详细的类型测试和转换
变量作用域范围
目前,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组成的Slot。而name可以是属性名称,函数名称,映射名称。对象可通过一种特定的方式创建,使用JS对象声明语法(JSON),而不需要实例化一个类。代码如下:
varperson1={lastName:"Smith",firstName:"Tom"}; varo1=Object.create(null);//anemptyobjectwithnoslots
如果Slot的name是合法的JS标识符,则Slot可表示属性,方法,或键值对。如果名称含有一些特殊字符如空格,则Slot代表键值对,是一种映射元素,如下:
PropertySlot中的name:
1.datavalue属性,在这种情况下,Value表示变量值,或是值表达式。
2.object-valued属性,Value表示对象的引用或对象表达式。
methodSlot表示的是JS函数,它的值是JS函数定义表达式:
Object属性可以使用两种方法来访问:
1.使用”.”(与C++和Java的类似):
person1.lastName="Smith"
2.使用map:
person1["lastName"]="Smith"
JS对象能够用于各种途径,以下是五种常见情况:
1.Record是Propertyslots集合,如:
varmyRecord={firstName:"Tom",lastName:"Smith",age:26}
2.map如Hashmap,数组,hash表;
varnumeral2number={"one":"1","two":"2","three":"3"}
3.Untyped对象不需要实例化类,它可能包含propertyslot和functionslots:
varperson1={ lastName:"Smith", firstName:"Tom", getFullName:function(){ returnthis.firstName+""+this.lastName; } };
ArrayList
JSarray即逻辑数据结构,通过数组下标访问。如数组初始化:
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);
Maps
map提供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:如{"one":1,"two":2,"three":3}
4:entity表:如下表所示,是一种特殊的map,值是有固定ID的记录。
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
方法是在构造函数的原型上定义的,可以通过对象创建的构造器调用,如Array.prototype.forEach;Array表示构造器,调用类的实例作为上下文对象参考的,如下:在foreach中numbers表示上下文对象:
varnumbers=[1,2,3];//createaninstanceofArray
numbers.forEach(function(n){
console.log(n);
});
无论原型方法是否被上下文对象调用,但是只要是参数为对象,可以使用JS函数的Call方法来辅助调用对象。如下,我们可以使用foreach循环方法:
varsum=function(){
varresult=0;
Array.prototype.forEach.call(arguments,function(n){
result=result+n;
});
returnresult;
};
Function.prototype.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;
}
//methodoverridessuperclassmethod
toString(){
returnsuper.toString()+"("+
this.studNo+")";
}
}
ES5中,可以定义继承基于构造器类的子类。如下:
Step1.a首先定义构造函数,能够隐式的定义类的属性并赋值;
functionPerson(first,last){
this.firstName=first;
this.lastName=last;
}
注意,上述代码中的this指的是新生成的对象,当构造函数被调用时,该对象就已经生成了。
Step1.b定义实例层的方法:
Person.prototype.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定义子类:
functionStudent(first,last,studNo){
[code]//invokesuperclassconstructor
Person.call(this,first,last);
//defineandassignadditionalproperties
this.studNo=studNo;
}
[/code]
通过调用超类的构造函数Person.call(this,...),来创建新对象。其中This指的是Student,PropertySlots在超类的构造函数中已经创建((firstName和lastName)以及其他子类相关的属性。在这种情况下可使用PropertyInheritance机制保证所有的属性已经被定义且被创建。
Step2b,通过构造函数的prototype属性安装methodinheritance。如下,分配了一个新对象创建子类型构造函数的Prototype属性,并做出适当的调整:
//StudentinheritsfromPerson
Student.prototype=Object.create(
Person.prototype);
//adjustthesubtype'sconstructorproperty
Student.prototype.constructor=Student;
Step2c,重新定义子类方法重写超类方法:
Student.prototype.toString=function(){
returnPerson.prototype.toString.call(this)+
"("+this.studNo+")";
};
基于构造器类的实例化是通过应用new操作符来创建的,并提供合适的构造参数:
varpers1=newPerson("Tom","Smith");
方法toString通过pers1.来调用:
alert("Thefullnameofthepersonare:"+
pers1.toString());
在JS中,prototype是具有methodslots的对象,可以通过JS方法或属性槽继承的。
基于Factory的类
在该方法中定义了JS对象Person,含有特殊的Create方法来调用预定义的Object.Create方法,创建Person类型的对象;varPerson={
name:"Person",
properties:{
firstName:{range:"NonEmptyString",label:"Firstname",
writable:true,enumerable:true},
lastName:{range:"NonEmptyString",label:"Lastname",
writable:true,enumerable:true}
},
methods:{
getFullName:function(){
returnthis.firstName+""+this.lastName;
}
},
create:function(slots){
//createobject
varobj=Object.create(this.methods,this.properties);
//addspecialpropertyfor*directtype*ofobject
Object.defineProperty(obj,"type",
{value:this,writable:false,enumerable:true});
//initializeobject
Object.keys(slots).forEach(function(prop){
if(propinthis.properties)obj[prop]=slots[prop];
})
returnobj;
}
};
注意JS对象Person实际表示的是factory-based类。factory-based类的实例化是通过调用它自己的Create方法实现的:
varpers1=Person.create({firstName:"Tom",lastName:"Smith"});
getFullName方法是通过pers1.调用的,如下:
alert("Thefullnameofthepersonare:"+pers1.getFullName());
每个属性的声明都是使用Object.Create声明的,其中包含三个参数及值,'descriptors'
writable:trueand
enumerable:true;如上面第五行的。
[/code]
[/code]
相关文章推荐
- 每天学习十分钟17之JavaScript
- javascript多语言实现
- How to excute javascript on Robotframework
- JS对文件读写
- js 里map功能的实现
- JS—事件对象
- javascript函数的声明,及返回值
- OS.js – 开源的 Web OS 系统,赶快来体验
- JSON和XML:不可同日而语
- JSON和XML:不可同日而语
- javascript 类型检测
- 解析json数组——TypeToken
- 网页版坦克大战坦克换方向原理
- 调用jsapi缺少参数$key0$
- 132 javascript 个人项目中的模块化实践
- js console.log打印对像与数组用法详解
- js方法调用
- JS遍历数组及打印数组实例分析
- Web前端开发规范文档(css/javascript)
- json的理解及读取