详解JavaScript对象和数组

许多高级编程语言都是面向对象的,比如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]);

页面输出的结果为:

三、对象中的方法
(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("-"));

页面输出的结果为:

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

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);

输出:

(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);

输出:

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);

输出:

(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对象和数组的详细介绍,希望对大家的学习有所帮助。

(0)

相关推荐

  • 判断js的Array和Object的实现方法

    var a = ['hello','world']; console.log(typeof a); // object console.log(a.toString()); // hello,word 字符串 console.log(Object.prototype.toString.call(a)); //[object Array] var b = {'hello':'world'}; console.log(typeof b); // object console.log(b.toStri

  • Js的Array数组对象详解

    本文为大家分享了关于Js的Array数组对象的相关资料,供大家参考,具体内容如下 1. 介绍 1.1 说明 数组是值的有序集合.每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引.JavaScript数组是无类型:数组元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的类型. --<JavaScript权威指南(第六版)> 1.2 定义方式 var names = new Array("张三", "李四", "王五&

  • javascript object array方法使用详解

    Array.prototype.push push向数组尾部添加一项并更新length ,返回数组长度. 如果Object使用push会怎样? 看下面代码, obj好像数组一样工作了.length会自动更新. 复制代码 代码如下: var push = Array.prototype.push; var obj = {}; push.call(obj, "hello"); // 返回值 1 // obj {"0":"hello", length:

  • JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解

    废话不多说了,直奔主题,你,具体代码如下所示: <script> //----------------for用来遍历数组对象-- var i,myArr = [1,2,3]; for (var i = 0; i < myArr.length; i++) { console.log(i+":"+myArr[i]); }; //---------for-in 用来遍历非数组对象 var man ={hands:2,legs:2,heads:1}; //为所有的对象添加cl

  • 详谈js中数组(array)和对象(object)的区别

    •object 类型: ◦ 创建方式: /*new 操作符后面Object构造函数*/ var person = new Object(); person.name = "lpove"; person.age = 21; /*或者用对象字面量的方法*/ var person = { name: "lpove"; age : 21; } •array类型 ◦ 创建方式: `var colors = new Array("red","blu

  • Javascript中判断变量是数组还是对象(array还是object)

    怎样判断一个JavaScript变量是array还是obiect? 答案: 1.如果你只是用typeof来检查该变量,不论是array还是object,都将返回'objec'. 此问题的一个可行的答案是是检查该变量是不是object,并且检查该变量是否有数字长度(当为空array时长度也可能为0). 然而,参数对象[arguments object](传给制定函数的所有参数),也可能会适用于上述方法,技术上来说,参数对象并不是一个array. 此外,当一个对象有a.length属性的时候,这个方

  • JavaScript中的Array 对象(数组对象)

     1.创建Array对象方法: --->var arr = [1,2,3];//简单的定义方法 此时可以知道 arr[0] == 1; arr[1] == 2; arr[2] == 3; --->new Array(); var arr = new Array();//定义一个没有任何内容的数组对象,然后以下面的方式为其赋值 arr[0] = "arr0"; arr[1] = "arr1"; arr[2] = "arr2"; ---&

  • 详解JavaScript对象和数组

    许多高级编程语言都是面向对象的,比如C++.C#和Java等高级程序设计语言,那么一种面向对象语言有哪些基本要求呢?下面我们就通宿地说一下面向对象的一些知识. 一种面向对象语言需要向开发者提供四种基本能力: (1)封装:把相关的信息(无论数据或方法)存储在对象中的能力 (2)聚集:把一个对象存储在另一个对象内的能力 (3)继承:由另一个类(或多个类)得来类的属性和方法的能力 (4)多态:编写能以多种方法运行的函数或方法的能力 由于ECMAScript支持这些要求,因此可被是看做面向对象的.在EC

  • js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

    这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕. 平时发的文章基本都是开发中遇到的问题和对最佳解决方案的探讨,终于忍不住要写一篇基础概念类的文章了. 本文探讨以下问题,在座的朋友各取所需,欢迎批评指正: 1.创建对象 2.__proto__与prototype 3.继承与原型链 4.对象的深度克隆 5.一些Object的方法与需要注意的点 6.ES6新增特性 下面反复提到实例对象和原型对象,通过构造函数 new

  • 详解 javascript对象创建模式

    创建模式 在javascript中,主要有以下几种创建模式: 工厂模式 构造函数模式 原型模式 组合模式 动态原型模式 寄生构造函数模式 稳妥构造模式 工厂模式 工厂模式是软件工程领域一种广为人知的设计模式.javascript实现方式: function createPerson(name, obj, job) { var o = new Object(); o.name = name; o.obj = obj; o.job = job; o.sayName = function() { al

  • 详解JavaScript中的数组合并方法和对象合并方法

    1 数组合并 1.1 concat 方法 var a=[1,2,3],b=[4,5,6]; var c=a.concat(b); console.log(c);// 1,2,3,4,5,6 console.log(a);// 1,2,3 不改变本身 1.2 循环遍历 var arr1=['a','b']; var arr2=['c','d','e']; for(var i=0;i<arr2.length;i++){ arr1.push(arr2[i]) } console.log(arr1);/

  • 详解JavaScript对象的深浅复制

    前言 从层次上来看,对象的复制可以简单地分为浅复制和深复制,顾名思义,浅复制是指只复制一层对象的属性,不会复制对象中的对象的属性,对象的深复制会复制对象中层层嵌套的对象的属性. 在复制对象时,除了要复制对象的属性外,还要兼顾到是否保留了对象的constructor属性,是否对每一种数据类型(JavaScript常见的数据类型有String,Number,Boolean,Data,RegExp,Array,Funtion,Object)都实现正确的复制.项目中,我们可以根据实际情况,决定需要实现什

  • 详解JavaScript对象序列化

    一.什么是对象序列化? 对象序列化是指将对象的状态转换为字符串(来自我这菜鸟的理解,好像有些书上也是这么说的,浅显易懂!): 序列化(Serialization)是将对象的状态信息转换为可以存储或传输的形式的过程(来自"百度百科-序列化",学术性强,略显高端): 二.为什么会有对象序列化? 世间万物,都有其存在的原因.为什么会有对象序列化呢?因为程序猿们需要它.既然是对象序列化,那我们就先从一个对象说起: var obj = {x:1, y:2}; 当这句代码运行时,对象obj的内容会

  • 详解JavaScript对象类型

    JavaScrtip有六种数据类型,一种复杂的数据类型(引用类型),即Object对象类型,还有五种简单的数据类型(原始类型):Number.String.Boolean.Undefined和Null.其中,最核心的类型就是对象类型了.同时要注意,简单类型都是不可变的,而对象类型是可变的.  什么是对象  一个对象是一组简单数据类型(有时是引用数据类型)的无序列表,被存储为一系列的名-值对(name-value pairs).这个列表中的每一项被称为 属性(如果是函数则被称为 方法).  下面是

  • 详解JavaScript对象转原始值

    目录 Object.prototype.valueOf() Object.prototype.toString() Symbol.toPrimitive 对象转换原始值 1. 预期被转换成字符串类型 2. 预期被转换成数字类型 3. 预期被转换成默认类型(其他) 三种方法触发的顺序 总结 Object.prototype.valueOf() 对象的valueOf旨在返回对象的原始值,会在需要将对象转换成原始值的地方自动执行.详细点这里. Object.prototype.toString() t

  • 详解JavaScript中Arguments对象用途

    目录 前言 Arguments 的基本概念 Arguments 的作用 获取实参和形参的个数 修改实参值 改变实参的个数 检测参数合法性 函数的参数个数不确定时,用于访问调用函数的实参值 遍历或访问实参的值 总结 在实际开发中,Arguments 对象非常有用.灵活使用 Arguments 对象,可以提升使用函数的灵活性,增强函数在抽象编程中的适应能力和纠错能力. JavaScript 中 Arguments 对象的用途总结. 前言 相信我们很多人在代码开发的过程中都使用到过一个特殊的对象 --

  • 详解JavaScript面向对象实战之封装拖拽对象

    目录 概述 1.如何让一个DOM元素动起来 2.如何获取当前浏览器支持的transform兼容写法 3.如何获取元素的初始位置 5.我们需要用到哪些事件? 6.拖拽的原理 7. 我又来推荐思维导图辅助写代码了 8.代码实现 part1.准备工作 part2.功能函数 part3.声明三个事件的回调函数 9.封装拖拽对象 概述 为了能够帮助大家了解更多的方式与进行对比,我会使用三种不同的方式来实现拖拽. 不封装对象直接实现: 利用原生JavaScript封装拖拽对象: 通过扩展jQuery来实现拖

随机推荐