- 积分
- 40165
- 好友
- 记录
- 主题
- 帖子
- 听众
- 收听
|
Object类型 Object类型是JavaScript中使用最多的一种类型。虽然Object的实例不具备多少功能,但对于在应用程序中存储和传输数据而言,它确实是非常理想的选择。
创建Object实例的方式有两种,第一种是使用new操作符后跟Object构造函数。
[code=csharp] var person = new Object();
person.name = "tt";
person.age = 12;[/code]
另一种方式是使用对象字面量表示法。
[code=csharp] var person = {
name : 'tt',
age : 12
}[/code]
另外,使用对象字面量语法时,如果留空其花括号,则可以定义值包含默认属性和方法的对象。
[code=csharp] var person = {}; //与new Object()相同
person.name = "tt";
person.age = 12;[/code]
虽然可以使用前面介绍的任何一种方法来定义对象,但开发人员更青睐第二种方法(对象字面量语法),因为这种语法要求的代码量少,而且能给人封装数据的感觉。实际上,对象字面量也是向函数传递大量可选参数的首选方式,例如:
[code=csharp] function showInfo(args)
{
if(args.name != undefined)
{
alert(args.name);
}
if(args.age != undefined)
{
alert(args.age);
}
}
showInfo({
name:'name',
age:12
});
showInfo({name:'name'});[/code]
一般来说,访问对象属性时使用的都是点表示法,这也是很多面向对象语言中通用的语法。不过,在JavaScript也可以使用方括号表示法来访问对象的属性。例如:
[code=csharp] alert(person.name);
alert(person['name']); [/code]
从功能上看,这两种访问对象属性的方法没有任何区别。但方括号语法的主要优点是可以通过变量来访问属性。
[code=csharp] var propertyName = 'name';
alert(person[propertyName]);[/code]
通常,除非必须使用变量来访问属性,否则我们建议使用点表示法。
Array类型 JavaScript中的数组与其他多数语言中的数组有着相当大的区别。虽然JavaScript数组与其他语言中的数组都是数据的有序列表,但与其他语言不同的是,JavaScript数组的每一项可以保持任何类型的数据。也就是说,可以用数组的第一个位置来保存字符串,用第二个位置来保存数值,用第三个位置来保存对象。而且,JavaScript数组的大小是可以动态调整的,即可以随着数据的添加自动增长以容纳新增数据。
创建数组的基本方式有两种。第一种是使用Array构造函数。
[code=csharp] var colors1 = new Array();
var colors2 = new Array(20);
var colors3 = new Array('red','blue','yellow');[/code]
创建数组的第二种基本方式是使用数组字面量表示法。
[code=csharp] var colors1 = [];
var colors2 = ['red','blue','yellow'];[/code]
在读取和设置数组的值时,要使用方括号并提供相应值的基于0的数字索引。
[code=csharp] var colors = ['red','blue','yellow']; //定义一个字符串数组
alert(colors[0]); //显示第一项
colors[2] = 'green'; //修改第三项
colors[3] = 'black'; //新增第四项[/code]
数组的长度保存在其length属性中,这个属性始终会返回0或更大的值。
[code=csharp] var colors = ['red','blue','yellow'];
var names = [];
alert(colors.length); //3
alert(names.length); //0[/code]
数组的length属性很有特点——它不是只读的。因此,通过设置这个属性,可以从数组的末尾移除项或想数组中添加新项
[code=csharp] var colors = ['red','blue','yellow'];
colors.length = 2;
alert(colors[2]); //undefined[/code]
这个例子中的数组colors一开始有3个值。将其length属性设置为2会移除最后一项,结果再访问colors[2]就会显示undefined了。
利用length属性也可以方便地在数组末尾添加新项。
[code=html] var colors = ['red','blue','yellow'];
colors[colors.length] = 'green'; //在位置3添加一种颜色
colors[colors.length] = 'black'; //再在位置4添加一种颜色[/code]
由于数组最后一项的索引始终是length-1,因此下一个新项的位置就是length。
转换方法 所有对象都具有toLocaleString()、toString()和valueOf()方法。其中,调用数组的toString()和valueOf()方法会返回相同的值,即由数组中每个值的字符串形成拼接而成的一个以逗号分隔的字符串。实际上,为了创建这个字符串会调用数组每一项的toString()方法。
[code=html] var colors = ['red','blue','yellow'];
alert(colors.toString()); //red,blue,yellow
alert(colors.valueOf()); //red,blue,yellow
alert(colors); //red,blue,yellow[/code]
我们首先显式地调用了toString()和valueOf()方法,以便返回数组的字符串表示,每个值的字符串表示拼接成了一个字符串,中间以逗号分隔。最后一行代码直接将数组传递给了alert()。由于alert()要接收字符串参数,所有它会在后台调用toString()方法,由此会得到与直接调用toString()方法相同的结果。
另外,toLocaleString()方法经常也会返回与toString()和valueOf()方法相同的值,但也不总是如此。当调用数组的toLocaleString()方法时,它也会创建一个数组值的以逗号分隔的字符串。而与前两个方法唯一的不同之处在于,这一次为了取得每一项的值,调用的是每一项的toLocaleString()方法,而不是toString()方法。例如:
[code=html] var person1 = {
toLocaleString : function(){
return "person1 : toLocaleString";
},
toString : function(){
return "person1 : toString";
}
};
var person2 = {
toLocaleString : function(){
return "person2 : toLocaleString";
},
toString : function(){
return "person2 : toString";
}
};
var people = [person1,person2];
alert(people); //person1 : toString,person2 : toString
alert(people.toString()); //person1 : toString,person2 : toString
alert(people.toLocaleString()); //person1 : toLocaleString,person2 : toLocaleString[/code]
数组继承的toLocaleString()、toString()和valueOf()方法,在默认情况下都会以逗号分隔的字符串的形式返回数组项。而如果使用join()方法,则可以使用不同的分隔符来构建这个字符串。
[code=html] var colors = ['red','blue','yellow'];
alert(colors.join(',')); //red,blue,yellow
alert(colors.join('||')); //red||blue||yellow[/code]
注意:如果数组中的某一项的值是null或者undefined,那么该值在join()、toString()、toLocaleString()和valueOf()方法返回的结果中以空字符串表示。
栈方法 JavScript数组也提供了一种让数组的行为类似于其他数据结构的方法。具体来说,数组可以表现得就像栈一样,后者是一种可以限制插入和删除项的数据结构。栈是一种后进先出后进先出的数据结构。而栈中项的插入(叫做推入)和移除(叫做弹出),只发生在一个位置——栈的顶部。JavaScript提供了push()和pop()方法,以便实现类似的栈行为。
push()方法可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。而pop()方法则从数组末尾移除最后一项,减少数组的length值,然后返回移除的项。
[code=html] var colors = new Array(); //创建一个数组
var count = colors.push('red','blue'); //推入两项
alert(count); //2
count = colors.push('yellow'); //再推入一项
alert(count); //3
var item = colors.pop(); //取得最后一项
alert(item); //yellow
alert(colors.length); //2[/code]
队列方法 队列数据结构的访问规则是先进先出。队列在列表的末端添加项,从列表的前端移除项。由于push()是向数组末端添加项的方法,因此要模拟队列只需一个从数组前端取得项的方法。实现这一操作的数组方法就是shift(),它能够移除数组中的第一个项并返回该项,同时将数组长度减1。结合使用shift()和push()方法,可以像使用队列一样使用数组:
[code=html] var colors = new Array(); //创建一个数组
var count = colors.push('red','blue'); //推入两项
alert(count); //2
count = colors.push('yellow'); //再推入一项
alert(count); //3
var item = colors.shift(); //取得第一项
alert(item); //red
alert(colors.length); //2[/code]
JavaScript还为数组提供了一个unshift()方法。顾名思义,unshift()与shift()的用途相反:它能在数组前端添加任意个项并返回新数组的长度。因此,同时使用unshift()和pop()方法,可以从反方向来模拟队列,即在数组的前端添加项,从数组的末端移除项,例如:
[code=html] var colors = new Array(); //创建一个数组
var count = colors.unshift('red','blue'); //推入两项
alert(count); //2
count = colors.unshift('yellow'); //再推入一项
alert(count); //3
var item = colors.pop(); //取得第一项
alert(item); //blue
alert(colors.length); //2[/code]
注意:IE对JavaScript的实现中存在一个偏差,其unshift()方法总是返回undefined而不是数组的新长度。
重排序方法 数组中已经存在两个可以直接用来重排序的方法:reverse()和sort(),reverse()方法会反转数组项的顺序。
[code=html] var values = [1,2,3,4,5];
values.reverse();
alert(values); //5,4,3,2,1[/code]
在默认情况下,sort()方法按升序排列数组项——即最小的值位于最前面,最大的值排在最后面。为了实现排序,sort()方法会调用每个数组项的toString()转型方法,然后比较得到的字符串,以确定如何排序。即使数组中的每一项都是数值,sort()方法比较的也是字符串,如下所示:
[code=html] var values = [0,1,5,10,15];
values.sort();
alert(values); //0,1,10,15,5[/code]
可见,即使例子中值的顺序没有问题,但sort()方法也会根据测试字符串的结果改变原来的顺序。因为数值5虽然小于10,但在进行字符串比较时,“10”则位于“5”的前面。因此sort()方法可以接收一个比较函数作为参数,以便我们指定哪个值位于哪个值的前面。
[code=html] function compare(value1,value2){
if(value1 < value2){
return 1;
} else if(value1 > value2){
return -1;
} else{
return 0;
}
}
var values = [0,1,5,10,15];
values.sort(compare);
alert(values); //15,10,5,1,0[/code]
对于数值类型或者其valueOf()方法会返回数值类型的对象类型,可以使用一个更简单的比较函数。这个函数主要用第二个值减第一个值即可。
[code=html] function compare(value1,value2){
return value2 - value1;
}[/code]
操作方法 JavaScript对操作数组提供了很多方法。其中,concat()方法可以基于当前数组中的所有项创建一个新数组,如果传递给concat()方法的是一或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中。如果传递的值不是数组,这些值就会被简单地添加到结果数组的末尾。
[code=html] var colors = ['red','green','blue'];
var colors2 = colors.concat('yellow',['black' , 'brown']);
alert(colors); //red,green,blue
alert(colors2); //red,green,blue,yellow,black,brown[/code]
slice()方法能够基于当前数组中的一或多个项创建一个新数组。slice()方法可以接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下,slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之前的项——但不包括结束位置的项。
[code=html] var colors = ['red','green','blue','yellow','black','brown'];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
alert(colors2); //green,blue,yellow,black,brown
alert(colors3); //green,blue,yellow[/code]
下面我们来介绍splice()方法,这个方法恐怕要算是最强大的数组方法了,splice()主要用途是向数组的中部插入项,但使用这种方法的方式则有如下3种。
删除——可以删除任意数量的项,只需指定2个参数:要删除的第一项的位置和要删除的项数。例如,splice(0,2)会删除数组中的前两项。
插入——可以向指定位置插入任意数量的项,只需提供3个参数:起始位置、0(要删除的项数)、要插入的项。如果要插入多个项,可以再传入第四、第五,以致任意多个项。例如,splice(2,0,'red','green')会从当前数组的位置2开始插入字符串'red'和'green'。
替换——可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如,splice(2,1,'red','green')会删除当前数组位置2的项,然后再从位置2开始插入字符串'red'和'green'。
[code=html] var colors = ['red','green','blue'];
var removed = colors.splice(0,1); //删除第一项
alert(colors); //green,blue
alert(removed); //red
removed = colors.splice(1,0,'yellow','black'); //从位置1开始插入两项
alert(colors); //green,yellow,black,blue
alert(removed); //返回一个空数组
removed = colors.splice(1,1,'red','brown'); //插入两项,删除一项
alert(colors); //green,red,brown,black,blue
alert(removed); //yellow[/code]
|
|