詳解JavaScript對象和數(shù)組

更新時間：2015年12月03日 14:52:35 作者：丿木呈廣予口貝

這篇文章主要介紹了JavaScript對象和數(shù)組，需要的朋友可以參考下

許多高級編程語言都是面向對象的，比如C++、C#和Java等高級程序設計語言，那么一種面向對象語言有哪些基本要求呢？下面我們就通宿地說一下面向對象的一些知識。
一種面向對象語言需要向開發(fā)者提供四種基本能力：

(1)封裝：把相關的信息（無論數(shù)據(jù)或方法）存儲在對象中的能力
(2)聚集：把一個對象存儲在另一個對象內的能力
(3)繼承：由另一個類（或多個類）得來類的屬性和方法的能力
(4)多態(tài)：編寫能以多種方法運行的函數(shù)或方法的能力

由于ECMAScript支持這些要求，因此可被是看做面向對象的。在ECMAScript中，不能訪問對象的物理表示，只能訪問對象的引用。每次創(chuàng)建對象，存儲在變量中的都是該對象的引用，而不是對象本身。因此JavaScript是基于面向對象的一種弱類型的網(wǎng)頁腳本語言。
一、Object類型
Object類型是包含屬性(也可以叫字段)和方法(也可以叫函數(shù))。因此在創(chuàng)建Object類型的時候一定是要說明的要點。一般創(chuàng)建Object類型數(shù)的方法有兩種：
(1)使用new運算符

var box=new Object(); 
box.name="張三";//創(chuàng)建屬性以及初始化 
box.age=23; 
box.run=running();//創(chuàng)建方法 
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)綜合使用
我們在傳遞多個參數(shù)的情況下，需要我們按順序依次輸入，為了解決這個繁瑣的過程，我們可以將多個參數(shù)封裝
到一個Object類型中，使用Object類型作為參數(shù)，對于不存在或多出的參數(shù)我們也可以進行判斷，這樣方便了調用函
數(shù)及傳遞參數(shù)。

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中的數(shù)組和其他的語言有著很大的差別，JS中的數(shù)組中的元素可以是任何數(shù)據(jù)類型，數(shù)組的大小也
是可以調整的。從側面反映出了JS是一種弱類型語言。創(chuàng)建Array類型數(shù)的方法有兩種：
(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

創(chuàng)建一個包含十個元素的數(shù)組

var box=new Array(10);//創(chuàng)建數(shù)組默認必須是數(shù)字，必須是一位數(shù)字 
box[3]=4;//初始化數(shù)組中的元素 
box[5]=6; 
document.write(box);//輸出,,,4,,6,,,,

(2)使用字面量創(chuàng)建數(shù)組

var box=[1,2,3,4]; 
document.write(typrof box+"<br/>");//輸出Object 
document.write(box.length+"<br/>");//輸出數(shù)組的長度為4 
document.write(box);//輸出1,2,3,4

創(chuàng)建一個復雜的數(shù)組(可以是各種各樣的類型)

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)轉換方法
對象或數(shù)組都具有toLocaleString(),toString()和valueOf()方法。其中toString()和valueOf()無論重寫了誰，都會返
回相同的值。數(shù)組會將每個值進行字符串形式的拼接，以逗號隔開。

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

默認的情況下，數(shù)組字符串都會以逗號隔開。如果使用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數(shù)組提供了一種讓數(shù)組的行為類似于其他數(shù)據(jù)結構的方法。也就是說，可以讓數(shù)組像棧一樣，可以限
制插入和刪除想的數(shù)據(jù)結構。棧是一種后進先出的數(shù)據(jù)結構，也就是最新添加的元素最早被移除。而棧元素的插入和
移除，只發(fā)生在棧的頂部。ECMAScript為數(shù)組專門提供了push()和pop()方法。
棧操作數(shù)組元素的圖片：

push()方法可以接受任意數(shù)量的參數(shù)，把它們逐個添加到數(shù)組的末尾，并返回修改數(shù)組的長度。而pop()方法則從
數(shù)組末尾移除最后一個元素，減小數(shù)組的length值，然后返回移除的元素。

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

輸出：

(3)隊列方法
棧方法是后進先出，隊列方法是先進先出。隊列在數(shù)組的末端添加元素，從數(shù)組的前端移除元素。通過push()向
數(shù)組末端添加一個元素，然后通過shift()方法從數(shù)組的前端移除一個元素。
隊列操作數(shù)組元素的圖片

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

輸出：

ECMAScript還為數(shù)組提供了一個unshift()方法，它和shift()方法的功能完全相反。unshift()方法為數(shù)組的前端添加
一個元素。

var box=[1,2,3,4]; 
document.write(box+"<br/>"); 
box.unshift(0);//在數(shù)組的前端添加一個元素 
document.write(box+"<br/>"); 
document.write(box.unshift(-1)+"<br/>");//在數(shù)組的前端添加一個元素，并返回添加元素會數(shù)組的長度 
document.write(box+"<br/>"); 
box.pop();//在數(shù)組末尾移除元素 
document.write(box+"<br/>"); 
document.write(box.pop()+"<br/>");//在數(shù)組末尾移除元素，并返回移除元素后數(shù)組的長度 
document.write(box);

輸出：

(4)重排序方法
數(shù)組中已經(jīng)存在兩個直接用來排序的方法：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());//再次從小到大進行排序

如果我們實驗次數(shù)多的話可能回遇到這樣的問題，

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為操作已經(jīng)包含在數(shù)組中的元素提供了許多的方法。concat()方法可以基于當前數(shù)組創(chuàng)建一個新數(shù)組。slice()方
法可以基于當前數(shù)組獲取指定區(qū)域元素并創(chuàng)建一個新數(shù)組。splice()方法主要用途是向數(shù)組的中部插入元素。
a

var box=[1,2,3,4,5]; 
var box1=box.concat(6);//創(chuàng)建新數(shù)組，并添加新元素 
document.write(box1+"<br/>");//輸出1,2,3,4,5,6， 
document.write(box);//原數(shù)組不變化

var box=[1,2,3,4,5]; 
var box1=box.slice(2);//取出索引為2以后的元素組成新的數(shù)組 
document.write(box1+"<br/>");//輸出3,4,5 
document.write(box);//原數(shù)組不變化

var box=[1,2,3,4,5]; 
var box1=box.slice(2,3);//取出索引為2到3之間的元素組成新的數(shù)組 
document.write(box1+"<br/>");//輸出3 
document.write(box);//原數(shù)組不變化

splice中的刪除功能

var box=[1,2,3,4,5]; 
var box1=box.splice(0,2);//截取索引為0開始的兩個元素組成新的數(shù)組 
document.write(box1+"<br/>");//返回截取的元素1,2 
document.write(box);//當前數(shù)組被截取的元素被刪除，輸出3,4,5

splice中的插入功能

var box=[1,2,3,4,5]; 
var box1=box.splice(4,0,6);//索引為4的位置插入了一個元素 
document.write(box1+"<br/>");//返回新的數(shù)組為空，并沒有截取元素 
document.write(box);//當前數(shù)組索引為4的位置插入一個元素1,2,3,4，6，5

splice中的替換功

var box=[1,2,3,4,5]; 
var box1=box.splice(4,1,6);//索引為4的元素被替換，替換下來的元素組成新數(shù)組 
document.write(box1+"<br/>");//返回新的數(shù)組5 
document.write(box);//被替換后的原數(shù)組1,2,3,4,6

以上就是關于JavaScript對象和數(shù)組的詳細介紹，希望對大家的學習有所幫助。

您可能感興趣的文章:

基于MVC4+EasyUI的Web開發(fā)框架形成之旅之界面控件的使用
一般Web界面包括的界面控件有：單行文本框、多行文本框、密碼文本框、下拉列表Combobox、日期輸入控件、數(shù)值輸入控件、單項選擇、復選框、表格控件DataGrid、樹形控件、布局控件、彈出式對話框、提示信息、列表控件等，這些界面控件的操作都有哪些不同，下面逐一介紹
2015-12-12
使用pcs api往免費的百度網(wǎng)盤上傳下載文件的方法
百度個人云盤空間大，完全免費，而且提供了pcs api供調用操作文件，在平時的項目里往里面保存一些文件是很實用的。通過本文給大家介紹使用pcs api往免費的百度網(wǎng)盤上傳下載文件的方法，感興趣的朋友一起學習吧
2016-03-03
JS實現(xiàn)簡單的右下角彈出提示窗口完整實例
這篇文章主要介紹了JS實現(xiàn)簡單的右下角彈出提示窗口的方法,可實現(xiàn)點擊連接右下角彈出提示框的功能,具有一定參考借鑒價值,需要的朋友可以參考下
2016-06-06
通過實例了解Javascript柯里化流程
這篇文章主要介紹了通過實例了解Javascript柯里化流程,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-03-03
JS小游戲之極速快跑源碼詳解
這篇文章主要介紹了JS小游戲之極速快跑源碼詳解,對游戲的主要流程及原理進行了較為詳細的講解,并附有完整實例源碼,需要的朋友可以參考下
2014-09-09
js substring()字符串截取函數(shù)
JavaScript中substring()函數(shù)方法是返回位于String對象中指定位置的子字符串
2013-04-04
輕松掌握JavaScript單例模式
這篇文章主要為大家詳細介紹了JavaScript單例模式，幫助大家輕松掌握JS單例模式，感興趣的小伙伴們可以參考一下
2016-08-08
微信小程序實現(xiàn)日期格式化和倒計時
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)日期格式化和倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-06-06
ASP中Sub和Function的區(qū)別說明
主要的區(qū)別是有返回值，一般sub是用來調用大量的內容的時候用sub，對于需要計算并需要返回值的時候用function，多用function定義函數(shù)。
2011-01-01
前端取消接口調用的方法示例
這篇文章主要介紹了前端取消接口調用的相關資料,講解了XMLHttpRequest和AbortController兩種取消HTTP請求的方法,XMLHttpRequest通過abort()方法取消請求,而AbortController提供了一個更現(xiàn)代和靈活的解決方案,需要的朋友可以參考下
2025-03-03