JavaScript引用类型(一)
2014-06-04 14:30
120 查看
【Object类型】
在JavaScript中,引用类型是一种数据结构,用于将数据和功能组织在一起(这有点类似于传统编程语言中的“类”,但它不是“类”),引用类型有时也被称为对象定义,因为它是描述一类对象所具有的属性和方法,对象是某个特定类型的实例,即引用类型的值是一个对象,新对象是用new操作符后面跟构造函数创建,JavaScript提供了很多原生的引用类型,以便日常计算。【Object类型】
在程序中存储和传送数据,Object类型是最常用的类型,创建Object类型有两种方法一:使用构造函数创建
varperson=newObject(); person.name="Tom"; person.age=20;
二:使用对象字面量创建
varperson={ name:"Tom", age:20 };
对象字面量定义法用于简化创建包含大量属性的对象;在使用字面量表示法创建Object对象时,属性名也可以使用字符串,使用逗号来分隔不同的属性
定义带有默认属性和方法的Object对象
varperson={}; person.name="Tom"; person.name=20;
如果把花括号中的内容置空,则相当于newObject()。当我们使用对象字面量表示法创建对象的时候,是不会调用Object构造函数的。习惯上发人员更喜欢用对象字面量方法来创建Object类型
//定义一个接受args参数的函数displayInfo(args) functiondisplayInfo(args){ varoutput=""; if(typeofargs.name=="string"){//通过typeof操作符检查数据类型 output+="Name:"+args.name+"\n"; } if(typeofargs.age=="number"){ output+="Age:"+args.age+"\n"; } alert(output); } //调用函数,函数中使用了对象字面量来封装多个可选参数 displayInfo({ name:"Jack", age:28 }); displayInfo({ name:"Tom" });
【访问对象的属性】
有两种方法,访问对象的属性:
一:与传统的C++、Java、C#语言类似,可以通过点号来访问对象属性
二:通过使用方括号来访问对象属性,这时需要将属性以字符串的形式放在方括号中
通过点号访问
varperson=newObject(); person.name="Tom"; person.age=20;
alert(person.name);//访问对象的属性
通过方括号访问
varperson=newObject(); person.name="Tom"; person.age=20;
alert(person["name"]);//访问对象的属性
在使用方括号访问对象属性的时候,应将属性以字符串的形式放在方括号中,使用方括号访问属性的,有个优点:可以通过变量来访问属性
varperson={ name:"TOM", age:20 }; varpropertyName="name"; alert(person[propertyName]);
这是点号访问方式无法做到的,习惯上一般使用点号来访问属性,在必须使用变量访问属性时才使用方括号形式
【Array类型】
在JavaScript中的数组与其他语言的数组,有着很大区别:
①数组元素的没一项都可以使不同类型的数据
②数组大小自动可调整
【创建数组】
与创建Object对象一样,创建数组类型也可以使用:构造函数和字面量两种方法创建
一:使用Array()构造函数创建数组
varcolors=newArray();//调用构造函数创建数组 varcolors=newArray(100);//指定length的值 varcolors=newArray("green","red","blue");//设定数组的初始值 varcolors=Array(100);//以上写法都可以省略new关键字
需要注意的是在向数组传入单个值的时候,如果传入的是数值,就会造成给length赋值
【使用字面量创建数组】
varcolors=["green","blue","red"]//创建一个包含三个字符串的数组 varnames=[];//空数组
colors[colors.length]="black";
colors[colors.length]="brown";
【检测数组】
确定某个对象到底是不是数组,可以使用JavaScript中新增的Array.isArray(object)方法,参考http://msdn.microsoft.com/en-us/library/ie/ff848265(v=vs.94).aspx
alert(Array.isArray(colors));
【转换方法】
Javascript中的所有引用类型的对象都具有toLocaleString()、toString()、valueOf()方法
alert(colors.toLocaleString());//返回以逗号分隔的字符串
alert(colors.toString());//返回以逗号分隔的字符串
alert(colors.valueOf());//返回数组
三者的区别先看如下代码输出
/*按照定义所有引用类型的对象都具有toLocaleString()、toString()、valueOf()方法
*toLocaleString()
*toString()返回数组中,每个值的字符串形式,以逗号拼接而成
*valeOf()返回数组
*/
//定义带有方法的对象person1,以下是函数重写吗?
varperson1={
toLocaleString:function(){
return"Tom";
},
toString:function(){
return"Tom";
}
};
//定义带有方法的对象person2
varperson2={
toLocaleString:function(){
return"Jack";
},
toString:function(){
return"Lucy";
}
};
//创建对象数组
varpeople=[person1,person2];
alert(people);//输出Tom,Lucy实际上是调用people数组每一项的toString()方法
alert(people.toString());//输出Tom,Lucy
alert(people.toLocaleString());//输出Tom,Jack
【栈方法】
JavaScript中的数组具有一种特殊的特性,它具有栈的特性,栈是一种LIFO(Last-In-First-Out后进先出)的数据结构
也就是说最新添加的项最早被移除。项的插入/推入和移除/弹出,只发生在栈顶一个位置。Javascript为数组提供了push()和pop()
方法来完成类似栈的行为。
push()方法:接受任意个参数,把它们逐个添加到数组末尾,并且返回修改后的数组长度
pop()方法:从数组末尾移除最后一项,减少数组的length值,并且方法被移除的项
示例如下:
//实现数组的栈操作
varstudents=newArray();
varcount1=students.push("Tom","Jack","Lucy");//output:4
varcount2=students.push("Justin");
alert(count1);//output:3
alert(count2);//output:4
alert(students.length);//output:4
varitem=students.pop();//移除数组最后一项,并且将被移除的数组元素保存在item中
alert(item);//output:Justin显示被移除的数组元素
alert(students.length);//output:3
【队列方法】
栈的访问规则是LIFO(后进先出),而队列的访问规则是FIFO(先进先出)。队列是在列表的末端添加项,前端移除项。由于push()方法实现的是在末端添加项
,所以要模拟队列,只需要有一个从队列前端取得一个项的方法即可。实现这一操作的方法是shift()方法。
shift()方法:移除数组中的第一项,数组长度减少1,并且返回该项
所以实现队列操作,需要push()方法和shift()方法结合使用。
示例如下:
//实现数组的队列操作
varstudents=newArray();
varcount1=students.push("Tom","Jack","Lucy");//output:4推入
varcount2=students.push("Justin");
alert(count1);//output:3
alert(count2);//output:4
alert(students.length);//output:4
varitem=students.shift();//移除数组第一项,并且将被移除的数组元素,保存在item中
alert(item);//output:Tom显示被移除的数组元素
alert(students.length);//output:3
从反方向来模拟队列操作,Javascript中还未数组提供了unshift()方法,该方法与shift方法相反,它能在数组前端添加任意个项并返回新数组长度
因此同时使用unshift()方法和pop()方法,同样可以实现队列操作
示例如下:
//从反方向实现队列的操作
varstudents=newArray();
varcount=students.unshift("Tom","Jack","Lucy");//在数组前端添加三个元素,并返回数组长度存入count中
alert(count);//output:3
alert(students);//output:"Tom","Jack","Lucy"
varcount=students.unshift("Justin");//再在数组前面添加一个元素
alert(students);//查看数组output:"Justin","Tom","Jack","Lucy"
//alert(count);
varitem=students.pop();//从后端移除元素
alert(item);//output:Lucy
alert(students);//"Justin","Tom","Jack"Lucy已经被移除了
varitem=students.pop();//继续移除
alert(students);//此时Jack也被移除所以输出是:"Justin","Tom"
栈和队列操作的总结:
操作 | 特征 | 说明 | 位置 | 方法 | 备注 |
栈 | LIFO(后进先出) | 列表中最新添加的项最早被移除 | 只发生在一个位置:栈顶 | 后端:push()插入 | 后端指的是栈顶 |
后端:pop()移除 | |||||
队列 | FIFO(先进先出) | 列表末端添加项,前端移除项 | 发生在列表的前端和后端 | 后端:push()插入 | |
前端:shift()移除 | |||||
反方向队列 | FIFO(先进先出) | 前端添加项,后端移除项 | 发生在列表的前端和后端 | 后端:pop()移除 | 实现的是反方向的先进先出 |
前端:unshift()插入 |
首先看如下代码输出:
//实现数组位置反转
varvalues=[0,1,2,3,4,5,6,7,8,9,10];
vartestValue=[7,0,3,2,10,4,5,1,9,6,8]
values.reverse();
testValue.reverse();
alert(values);//output:10,9,8,7,6,5,4,3,2,1,0
alert(testValue);//output:8,6,9,1,5,4,10,2,3,0,7
//实现数组排序
values.sort();
testValue.sort();
alert(values);//0,1,10,2,3,4,5,6,7,8,9
alert(testValue);//0,1,10,2,3,4,5,6,7,8,9
从上面可以看出reverse()方法,用于对数组位置进行反转,即首尾互换。而sort()方法用于对数组进行排序,比较的是值而不是位置。在默认情况下sort()是按升序排列数组的
为了实现排序sort()会调用每个数组项的toString()方法进行转型得到字符串,即sort()方法比较的是字符串。
sort()方法还可接受一个比较函数,以便指定那个值在前。比较函数接受两个参数,如果第一个参数应该位于第二个参数之前则返回负数,如果两个参数相等则返回0,如果第一个参数应该位于第二个参数之后则返回正数
//接受比较函数
functioncompare(value1,value2){
if(value1<value2){
return-1;
}elseif(value1>value2){
return1;
}else{
return0;
}
}
//实现数组排序
varvalues=[0,1,2,3,4,5,6,7,8,9,10];
vartestValue=[7,0,3,2,10,4,5,1,9,6,8]
values.sort();
testValue.sort(compare);
alert(values);
alert(testValue);
【操作方法】
concat()方法可以基于现有的数组创建一个新数组
varcolors=["red","blue","green","black"];
varnewColors1=colors.concat();
varnewColor2=colors.concat("gold");
varnewColors3=colors.concat("royalblue","gold",["grey","white"]);
alert(newColors1);//red,blue,green,black
alert(newColor2);//red,blue,green,black,gold
alert(newColors3);//red,blue,green,black,royalblue,gold,grey,white
从上面输出可以看出:
一.在不给concat()传递参数的情况下,concat()简单复制原数组
二.当给concat()传递的不是数组时,concat()会将传入的参数简单的添加到新数组末尾
三.在给concat()传递一个或多个数组时,会合并这些数组添加到新数组中
slice()方法用于从当前数组项中的一项或多项创建新数组,它接受两个数字参数分别,分别表示要返回项目的开始位置和结束位置
varvalues=[110,120,119,911,114,112,117];
varnewValues1=values.slice(2);
varnewValues2=values.slice(3,5);
varnewValues3=values.slice(6,2);
varnewValues4=values.slice(-5,-2);//请注意从小到大即-5<-2
alert(newValues1);//119,911,114,112,117
alert(newValues2);//911,114
alert(values);//110,120,119,911,114,112,117
alert(newValues3);//返回为空
alert(newValues4);//119,911,114
从上面输出可以看出:
一.在只有一个参数的情况,slice()方法返回从该参数指定位置到数组末尾所有项
二.在有两个参数的情况,slice()方法返回参数指定的开始项到结束项之间的所有项,但不包括结束位置项
三.slice()方法不影响原始数组
四.如果传入的开始位置大于结束位置,则返回空数组
五.如果传入的位置是负值,则将负值加上数组长度后,再进行计算输出,比如上面的newValues4,values.slice(-5,-2)与newValues4,values.slice(2,5)等价
splice()方法
splice()方法有很多种用法,,主要用途是向数组中部插入项,splice()方法返回的还是数组,具体操作如下:
删除:接受两个参数,第一个参数指定要的第一项位置,第二个参数指定要删除的项数
插入:接受三个参数,第一个参数指定起始位置,第二个参数0和要插入的项目
替换:接受三个参数,第一个参数指定起始位置,第二个参数指定要删除的项和要替入的项
varperson=["Jack","Tom","Lucy","Bob","Anne","Abby","Angelia"];//原始数组,演示删除操作
varperson2=person.concat();//复制原始数组,以备插入操作
varperson3=person.concat();//复制原始数组,
varremovedPerson=person.splice(2,2);//从第三项开始删除,删除二项,将删除的结果存入removedPerson变量中
alert(removedPerson);//Lucy,Bob
alert(person);//查看操作后的原始数组:Jack,Tom,Anne,Abby,Angelia
//插入操作
varinsertPerson1=person3.splice(3,0,"Justin","Ellen");
alert(insertPerson1);//返回为空
alert(person3);//Jack,Tom,Lucy,Justin,Ellen,Bob,Anne,Abby,Angelia当删除项目为0的时候,插入在开始位置之前
//替换操作
varinsertPerson=person2.splice(3,1,"Justin","Ellen");//从索引3开始删除两项
alert(insertPerson);//从索引3开始删除一项:Bob仅仅返回被删除的那项
alert(person2);//Jack,Tom,Lucy,Justin,Ellen,Abby,Angelia;Bob已被删除了,新元素已替换好
【位置方法】
JavaScript数组有两个位置方法:indexOf()和lastIndexOf(),它们都接受两个参数,第一个参数要查找的项,第二项表示查找起点位置的索引;
indexOf()表示从头查找,lastIndexOf()表示从尾查找,两个方法都是返回要查找的项在数组中的位置,没查找到的情况下返回-1
varperson=["Jack","Tom","Lucy","Bob","Anne","Abby","Angelia"];
alert(person.indexOf("Bob"));//3
alert(person.indexOf("Bob",5));//在指定的位置上面,没找到返回-1
alert(person.indexOf("Abby"));//5
alert(person.lastIndexOf("Abby",2));//在指定的位置上面,没找到返回-1
alert(person.indexOf("Justin"));//-1没找到返回-1
alert(person.lastIndexOf("Justin"));//-1
【迭代方法】
Javascript为数组定义了5个迭代的方法:every(),filter(),forEach(),map(),some()。5个方法都不会改变数组的内容
每个方法接受两个参数:要在每一项上运行的函数和运行该函数的作用域对象,以下是说明
every()方法示例:
//定义回调函数
functionCheckIfEven(value,index,ar){
document.write(value+"");
if(value%2==0)
returntrue;
else
returnfalse;//如果返回false就停止调用,返回true则继续调用,直到数组项结束
}
//创建示例数组
varnumbers1=[2,4,6,6,8,3,10,4];
varnumbers2=[2,4,6,8,];
//检查返回值
if(numbers1.every(CheckIfEven))//numbers.every(CheckIfEven)返回的是布尔值
document.write("都是偶数");
else
document.write("不全是偶数");//246683不全是偶数没有全部检查完
//检查返回值
if(numbers2.every(CheckIfEven))//numbers.every(CheckIfEven)返回的是布尔值
document.write("都是偶数");
else
document.write("不全是偶数");//2468都是偶数;全部调用完
some()方法:
functionCheckIfEven(value,index,ar){
document.write(value+"");
if(value%2==0)
returntrue;
else
returnfalse;
}
//创建示例数组
varnumbers3=[1,3,5,2,6,8,7];
varevens=numbers3.some(CheckIfEven);
document.write(evens);//1352true找到了2
相关文章推荐
- ASP.NET AJAX 说明文档->客户端引用->全局命名空间->JavaScript 基础类型扩展->Array 类型扩展
- ASP.NET AJAX 说明文档->客户端引用->全局命名空间->JavaScript 基础类型扩展->Array 类型扩展->addRange 函数
- javascript 基本类型和引用类型的值【javascript高级程序设计】
- Javascript高级程序设计第二版第五章--引用类型--笔记
- JavaScript中值类型与引用类型实例说明
- 深入Atlas系列:Web Sevices Access in Atlas示例(7) - 编写JavaScriptConverter处理含有循环引用的类型
- javascript 高程二 第五章(引用类型)-上
- 值类型与引用类型 in JavaScript
- JavaScript之引用类型介绍
- ASP.NET AJAX 说明文档->客户端引用->全局命名空间->JavaScript 基础类型扩展->Array 类型扩展->clear 函数
- JavaScript中的值类型和引用类型
- JAVASCRIPT基础学习篇(6)--ECMAScript Basic2(EcmaScript 引用类型)
- JavaScript高级程序设计(第2版) 之 引用类型
- Javascript高级程序设计第二版第五章--引用类型--笔记
- ASP.NET AJAX 说明文档->客户端引用->全局命名空间->JavaScript 基础类型扩展->Array 类型扩展->add 函数
- Javascript 权威指南第五版 手记(1) 引用类型
- javascript高级程序第三版学习笔记【基本类型和引用类型】
- 每天进步一点点-JavaScript之ECMAScript(继JavaScript标准) 引用类型
- JavaScript中的值类型和引用类型
- javascript最常用的继承模式-寄生组合式继承——引用类型最理想的继承范式