详解JavaScript对象和数组


Posted in Javascript onDecember 03, 2015

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

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

       由于ECMAScript支持这些要求,因此可被是看做面向对象的。在ECMAScript中,不能访问对象的物理表示,只能访问对象的引用。每次创建对象,存储在变量中的都是该对象的引用,而不是对象本身。因此JavaScript是基于面向对象的一种弱类型的网页脚本语言。
 一、Object类型
       Object类型是包含属性(也可以叫字段)和方法(也可以叫函数)。因此在创建Object类型的时候一定是要说明的要点。 一般创建Object类型数的方法有两种:
 (1)使用new运算符

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

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

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

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

function box(obj){ 
  if(obj.name!=undefined)document.write(obj.name+"<br/>"); 
  if(obj.age!=undefined)document.write(obj.age+"<br/>"); 
  if(obj.love!=undefined)document.write(obj.love+"<br/>"); 
} 
var obj={ 
  name:"张三", 
  age:23 
}; 
box(obj);

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

var box=new Array(1,2,3,4); 
document.write(typrof box+"<br/>");//Array属于Object类型 
document.write(box);//输出1,2,3,4

索引下标从0开始

var box=new Array(1,2,3,4); 
document.write(box[0]+box[1]+box[2]+box[3]);//输出1,2,3,4

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

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

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

var box=[1,2,3,4]; 
document.write(typrof box+"<br/>");//输出Object 
document.write(box.length+"<br/>");//输出数组的长度为4 
document.write(box);//输出1,2,3,4

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

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

页面输出的结果为:

详解JavaScript对象和数组

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

var box=[1,2,3,4]; 
document.write(box+"<br/>");//输出1,2,3,4 
document.write(box.toString()+"<br/>");//输出1,2,3,4 
document.write(box.valueOf()+"<br/>");//输出1,2,3,4 
document.write(box.toLocaleString());//输出1,2,3,4

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

var box=[1,2,3,4]; 
document.write(box+"<br/>"); 
document.write(typeof box+"<br/>"); 
document.write(box.join("-")+"<br/>"); 
document.write(typeof box.join("-"));

页面输出的结果为:

详解JavaScript对象和数组

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

详解JavaScript对象和数组

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

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

        输出:

详解JavaScript对象和数组

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

var box=[1,2,3,4]; 
document.write(box+"<br/>"); 
box.push(5,6);//在数组末尾添加元素 
document.write(box+"<br/>"); 
document.write(box.push(7,8)+"<br/>");//在数组末尾添加元素,并返回添加元素后数组的长度 
document.write(box+"<br/>"); 
box.shift();//移除数组前端的一个元素 
document.write(box+"<br/>"); 
document.write(box.shift()+"<br/>");//移除数组前端的一个元素,并返回移除的元素 
document.write(box);

       输出:

详解JavaScript对象和数组

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

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

       输出:

详解JavaScript对象和数组

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

var box=[1,2,3,4,5]; 
box.reverse(); 
document.write(box+"<br/>");//输出54321 
document.write(box.reverse());//再次进行逆序,输出12345

sort():从小到大排序

var box=[3,2,6,4,1,5]; 
box.sort(); 
document.write(box+"<br/>");//输出1,2,3,4,5,6 
document.write(box.sort());//再次从小到大进行排序

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

var box=[0,15,10,1,5]; 
box.sort(); 
document.write(box);//输出0,1,10,15,5

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

function compare(value1,value2){ 
  if(value1<value2){ 
   return -1; 
  } 
  else if(value1>value2){ 
   return 1; 
  } 
  else{ 
   return 0;  
  }  
} 
var box=[0,15,10,1,5]; 
box.sort(compare); 
document.write(box);//输出0,1,5,10,15

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

var box=[1,2,3,4,5]; 
var box1=box.concat(6);//创建新数组,并添加新元素 
document.write(box1+"<br/>");//输出1,2,3,4,5,6, 
document.write(box);//原数组不变化

b

var box=[1,2,3,4,5]; 
var box1=box.slice(2);//取出索引为2以后的元素组成新的数组 
document.write(box1+"<br/>");//输出3,4,5 
document.write(box);//原数组不变化

c

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

splice中的删除功能

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

splice中的插入功能

var box=[1,2,3,4,5]; 
var box1=box.splice(4,0,6);//索引为4的位置插入了一个元素 
document.write(box1+"<br/>");//返回新的数组为空,并没有截取元素 
document.write(box);//当前数组索引为4的位置插入一个元素1,2,3,4,6,5

splice中的替换功

var box=[1,2,3,4,5]; 
var box1=box.splice(4,1,6);//索引为4的元素被替换,替换下来的元素组成新数组 
document.write(box1+"<br/>");//返回新的数组5 
document.write(box);//被替换后的原数组1,2,3,4,6

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

Javascript 相关文章推荐
Javascript 不能释放内存.
Sep 07 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
微信小程序picker组件两列关联使用方式
Oct 27 Javascript
java必学必会之static关键字
Dec 03 #Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 #Javascript
继续学习javascript闭包
Dec 03 #Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 #Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 #Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 #Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 #Javascript
You might like
Terran历史背景
2020/03/14 星际争霸
php反弹shell实现代码
2009/04/22 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
基于jQuery的倒计时插件代码
2011/05/07 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
Python functools模块学习总结
2015/05/09 Python
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
人民教师求职自荐信
2014/03/12 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
债务授权委托书范本
2014/10/17 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
对讲机知识
2022/04/07 无线电