详解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 相关文章推荐
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
使用socket.io实现简单聊天室案例
Jan 02 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 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
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
javascript闭包的理解和实例
2010/08/12 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
Python+django实现文件下载
2016/01/17 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
django 多数据库配置教程
2018/05/30 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
美国存储和组织商店:The Container Store
2017/08/16 全球购物
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
标准毕业生自荐信
2014/06/24 职场文书
最美护士演讲稿
2014/08/27 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
远程教育培训心得体会
2016/01/09 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript