详解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 相关文章推荐
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 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 download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
js实现聊天对话框
2020/02/08 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
python 截取 取出一部分的字符串方法
2017/03/01 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
介绍一下Python下range()函数的用法
2013/11/07 面试题
2014年五四青年节活动方案
2014/03/29 职场文书
房屋转让协议书
2014/04/11 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
个人欠条范本
2015/07/03 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
php 原生分页
2021/04/01 PHP
Python 多线程之threading 模块的使用
2021/04/14 Python
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS