详解JavaScript对象和数组

许多高级编程语言都是面向对象的,比如C++、C#和Java等高级程序设计语言,那么一种面向对象语言有哪些基本要求呢?下面我们就通宿地说一下面向对象的一些知识。 一种面向对象语言需要向开发者提供四种基本能力:

  • (1)封装:把相关的信息(无论数据或方法)存储在对象中的能力
  • (2)聚集:把一个对象存储在另一个对象内的能力
  • (3)继承:由另一个类(或多个类)得来类的属性方法的能力
  • (4)多态:编写能以多种方法运行的函数方法的能力

由于ECMAScript支持这些要求,因此可被是看做面向对象的。在ECMAScript中,不能访问对象的物理表示,只能访问对象的引用。每次创建对象,存储在变量中的都是该对象的引用,而不是对象本身。因此JavaScript是基于面向对象的一种弱类型的网页脚本语言。

一、Object类型

Object类型是包含属性(也可以叫字段)和方法(也可以叫函数)。因此在创建Object类型的时候一定是要说明的要点。 一般创建Object类型数的方法有两种: (1)使用new运算符

rush:js;"> var Box=new Object(); Box.name="张三";//创建属性以及初始化 Box.age=23; Box.run=running();//创建方法 function running(){ return "我是中国人!"; } document.write(typeof Box+"
"); document.write(Box.name+"
"); document.write(Box.age+"
"); document.write(Box.run);

输出:object 张三 23 我是中国人! (2)字面量表示法

rush:js;"> var Box={ name:"张三",age:23,run:function(){ return "我是中国人!"; } }; document.write(typeof Box+"
"); document.write(Box.name+"
"); document.write(Box.age+"
"); document.write(Box.run());

输出:同上 (3)综合使用 我们在传递多个参数的情况下,需要我们按顺序依次输入,为了解决这个繁琐的过程,我们可以将多个参数封装 到一个Object类型中,使用Object类型作为参数,对于不存在或多出的参数我们也可以进行判断,这样方便了调用函 数及传递参数。

rush:js;"> function Box(obj){ if(obj.name!=undefined)document.write(obj.name+"
"); if(obj.age!=undefined)document.write(obj.age+"
"); if(obj.love!=undefined)document.write(obj.love+"
"); } var obj={ name:"张三",age:23 }; Box(obj);

输出:张三 23

二、Array类型

ECMAScript中的数组和其他的语言有着很大的差别,JS中的数组中的元素可以是任何数据类型,数组的大小也 是可以调整的。从侧面反映出了JS是一种弱类型语言。创建Array类型数的方法有两种: (1)使用new运算符(new可以省略)

rush:js;"> var Box=new Array(1,2,3,4); document.write(typrof Box+"
");//Array属于Object类型 document.write(Box);//输出1,4

索引下标从0开始

rush:js;"> var Box=new Array(1,4); document.write(Box[0]+Box[1]+Box[2]+Box[3]);//输出1,4

创建一个包含十个元素的数组

rush:js;"> var Box=new Array(10);//创建数组认必须是数字,必须是一位数字 Box[3]=4;//初始化数组中的元素 Box[5]=6; document.write(Box);//输出,4,6,

(2)使用字面量创建数组

rush:js;"> var Box=[1,4]; document.write(typrof Box+"
");//输出Object document.write(Box.length+"
");//输出数组的长度为4 document.write(Box);//输出1,4

创建一个复杂的数组(可以是各种各样的类型)

rush:js;"> var Box=[ { name:"张三",age:23 },//Object类型 [1,4],//Array类型 "JS",//String类型 25+25,//Number类型 new Array(1,3)//Array类型 ]; document.write(typeof Box+"
"); document.write(Box[0].name+"
"); document.write(Box[3]);

页面输出的结果为:

三、对象中的方法

(1)转换方法 对象或数组都具有toLocaleString(),toString()和valueOf()方法。其中toString()和valueOf()无论重写了谁,都会返 回相同的值。数组会将每个值进行字符串形式的拼接,以逗号隔开。

rush:js;"> var Box=[1,4]; document.write(Box+"
");//输出1,4 document.write(Box.toString()+"
");//输出1,4 document.write(Box.valueOf()+"
");//输出1,4 document.write(Box.toLocaleString());//输出1,4

认的情况下,数组字符串都会以逗号隔开。如果使用join()方法可以使用不同的分割符来构建这个字符串

rush:js;"> var Box=[1,4]; document.write(Box+"
"); document.write(typeof Box+"
"); document.write(Box.join("-")+"
"); document.write(typeof Box.join("-"));

页面输出的结果为:

(2)栈方法

ECMAScript数组提供了一种让数组的行为类似于其他数据结构的方法。也就是说,可以让数组像栈一样,可以限 制插入和删除想的数据结构。栈是一种后进先出的数据结构,也就是最新添加的元素最早被移除。而栈元素的插入和 移除,只发生在栈的顶部。ECMAScript为数组专门提供了push()和pop()方法。 栈操作数组元素的图片

push()方法可以接受任意数量的参数,把它们逐个添加到数组的末尾,并返回修改数组的长度。而pop()方法则从 数组末尾移除最后一个元素,减小数组的length值,然后返回移除的元素。

rush:js;"> var Box=[1,4]; document.write(Box+"
"); Box.push(5,6);//在数组末尾添加元素 document.write(Box+"
"); document.write(Box.push(7,8)+"
");//在数组末尾添加元素,并返回添加元素后数组的长度 document.write(Box+"
"); Box.pop();//移除数组末尾的元素 document.write(Box+"
"); document.write(Box.pop()+"
");//移除数组末尾的元素,并返回移除的元素 document.write(Box);

输出

(3)队列方法方法是后进先出,队列方法是先进先出。队列在数组的末端添加元素,从数组的前端移除元素。通过push()向 数组末端添加一个元素,然后通过shift()方法从数组的前端移除一个元素。 队列操作数组元素的图片

rush:js;"> var Box=[1,8)+"
");//在数组末尾添加元素,并返回添加元素后数组的长度 document.write(Box+"
"); Box.shift();//移除数组前端的一个元素 document.write(Box+"
"); document.write(Box.shift()+"
");//移除数组前端的一个元素,并返回移除的元素 document.write(Box);

输出

ECMAScript还为数组提供了一个unshift()方法,它和shift()方法功能完全相反。unshift()方法为数组的前端添加 一个元素。

rush:js;"> var Box=[1,4]; document.write(Box+"
"); Box.unshift(0);//在数组的前端添加一个元素 document.write(Box+"
"); document.write(Box.unshift(-1)+"
");//在数组的前端添加一个元素,并返回添加元素会数组的长度 document.write(Box+"
"); Box.pop();//在数组末尾移除元素 document.write(Box+"
"); document.write(Box.pop()+"
");//在数组末尾移除元素,并返回移除元素后数组的长度 document.write(Box);

输出

(4)重排序方法 数组中已经存在两个直接用来排序的方法:reverse()和sort()。 reverse():逆向排序

rush:js;"> var Box=[1,5]; Box.reverse(); document.write(Box+"
");//输出54321 document.write(Box.reverse());//再次进行逆序,输出12345

sort():从小到大排序

rush:js;"> var Box=[3,1,5]; Box.sort(); document.write(Box+"
");//输出1,5,6 document.write(Box.sort());//再次从小到大进行排序

如果我们实验次数多的话可能回遇到这样的问题,

rush:js;"> var Box=[0,15,10,5]; Box.sort(); document.write(Box);//输出0,1,10,15,5

我们从结果可以看出,这违背了我们想要的结果,解决方法

rush:js;"> function compare(value1,value2){ if(value1value2){ return 1; } else{ return 0; } } var Box=[0,5]; Box.sort(compare); document.write(Box);//输出0,15

(5)操作方法 JS为操作已经包含在数组中的元素提供了许多的方法。concat()方法可以基于当前数组创建一个新数组。slice()方 法可以基于当前数组获取指定区域元素并创建一个新数组。splice()方法主要用途是向数组的中部插入元素。 a

rush:js;"> var Box=[1,5]; var Box1=Box.concat(6);//创建新数组,并添加新元素 document.write(Box1+"
");//输出1,6, document.write(Box);//原数组不变化

b

rush:js;"> var Box=[1,5]; var Box1=Box.slice(2);//取出索引为2以后的元素组成新的数组 document.write(Box1+"
");//输出3,5 document.write(Box);//原数组不变化

c

rush:js;"> var Box=[1,5]; var Box1=Box.slice(2,3);//取出索引为2到3之间的元素组成新的数组 document.write(Box1+"
");//输出3 document.write(Box);//原数组不变化

splice中的删除功能

rush:js;"> var Box=[1,5]; var Box1=Box.splice(0,2);//截取索引为0开始的两个元素组成新的数组 document.write(Box1+"
");//返回截取的元素1,2 document.write(Box);//当前数组被截取的元素被删除输出3,5

splice中的插入功能

rush:js;"> var Box=[1,5]; var Box1=Box.splice(4,6);//索引为4的位置插入了一个元素 document.write(Box1+"
");//返回新的数组为空,并没有截取元素 document.write(Box);//当前数组索引为4的位置插入一个元素1,4,6,5

splice中的替换功

rush:js;"> var Box=[1,6);//索引为4的元素被替换,替换下来的元素组成新数组 document.write(Box1+"
");//返回新的数组5 document.write(Box);//被替换后的原数组1,6

以上就是关于JavaScript对象和数组的详细介绍,希望对大家的学习有所帮助。

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...