簡(jiǎn)單記錄javascript中對(duì)象的使用
一、創(chuàng)建對(duì)象
//創(chuàng)建一個(gè)空對(duì)象 var o={}; //創(chuàng)建一個(gè)含有兩個(gè)屬性的對(duì)象,x、y var o2={x:12,y:'12',name:'JS'}; //此對(duì)象中的author屬性的值還是一個(gè)對(duì)象 var o3={x:12,author:{name:'JS',age:23,address:'china'}}; //創(chuàng)建一個(gè)空對(duì)象和{}一樣 var o4=new Object(); //給對(duì)象增加name屬性 o4.name='JS'
上面使用了兩種方式創(chuàng)建對(duì)象,一種是字面量的方式,另一種是使用new創(chuàng)建對(duì)象,new后面的Object叫做構(gòu)造函數(shù)。
二、對(duì)象的訪問
從上面我們可以看到我們給對(duì)向o4增加了一個(gè)屬性name,使用的是點(diǎn)號(hào)的方式,即對(duì)象名.屬性名,這就是其中的一種訪問方式。訪問對(duì)象中的屬性值有兩種方式,第一種是使用點(diǎn)號(hào)(.),第二種是使用數(shù)組的方式(對(duì)象名[屬性名])。
//創(chuàng)建一個(gè)空對(duì)象 var o={}; //創(chuàng)建一個(gè)含有兩個(gè)屬性的對(duì)象,x、y var o2={x:12,y:'12',name:'JS'}; //此對(duì)象中的author屬性的值還是一個(gè)對(duì)象 var o3={x:12,author:{name:'JS',age:23,address:'china'}}; //創(chuàng)建一個(gè)空對(duì)象和{}一樣 var o4=new Object(); //給對(duì)象增加name屬性 o4.name='JS' /**訪問對(duì)象的屬性值 */ //1、使用點(diǎn)號(hào)的方式 var x=o2.x;//12 var authorOfName=o3.author.name;//JS var name=o4.name;//JS //2、使用數(shù)組的方式 var x2=o2['x'];//12 var authorOfName2=o3['author']['name'];//JS var name2=o4['name'];//JS
使用點(diǎn)號(hào)的方式來訪問對(duì)象中的屬性值比較好理解,但是使用數(shù)組的方式,不是太好理解,在javascript中,所有的對(duì)象都是關(guān)聯(lián)數(shù)組,所謂關(guān)聯(lián)數(shù)據(jù)就是這種方式看起來像是數(shù)組的訪問方式,只不過這種方式不是使用的索引而是字符串索引,為此叫做關(guān)聯(lián)數(shù)組。
上面訪問對(duì)象屬性值都是在知道對(duì)象屬性名的情況,如果不知道對(duì)象的屬性值呢?可以使用for/in循環(huán)遍歷對(duì)象中的值,
//創(chuàng)建一個(gè)含有兩個(gè)屬性的對(duì)象,x、y、name var o2={x:12,y:'12',name:'JS'}; for(p in o2) { var property=p; var value=o2[p]; console.log(property); console.log(value); }
打印結(jié)果為:
x12y12nameJS
可以看出一共有三個(gè)屬性,且都打印了其值。
假如對(duì)象比較復(fù)雜可以加入一些判斷,判斷是否存在一個(gè)屬性,那么如何判斷一個(gè)對(duì)象是否包含了某個(gè)屬性呢,由于對(duì)象都繼承了Object,在Object中有hasOwnProperty()方法,用來判斷對(duì)象中是否存在一個(gè)屬性,返回值是布爾類型(boolean),注意此方法只會(huì)判斷是否存在對(duì)象自己的屬性,不會(huì)判斷對(duì)象繼承的屬性。
//創(chuàng)建一個(gè)含有兩個(gè)屬性的對(duì)象,x、y、name var o2={x:12,y:'12',name:'JS'}; var b=o2.hasOwnProperty('name')//true var b2=o2.hasOwnProperty('age')//false
三、新增、刪除屬性
在最開始我們給對(duì)象o4新增了一個(gè)name屬性,新增的方式其實(shí)和給屬性賦值是一樣的,還可以使用關(guān)聯(lián)數(shù)組的方式給對(duì)象增加屬性,
//創(chuàng)建一個(gè)含有兩個(gè)屬性的對(duì)象,x、y、name var o2={x:12,y:'12',name:'JS'}; //刪除name屬性 delete o2.name; var b=o2.hasOwnProperty('name')//false //新增name屬性 o2['name']='javascript'; //由于已經(jīng)存在了name屬性,這里是給name重新賦值 o2.name='js'; var b3=o2.hasOwnProperty('name');//true
上面,刪除了對(duì)象o2的name屬性,然后又使用關(guān)聯(lián)數(shù)組的方式新增了name屬性,接著使用點(diǎn)號(hào)的方式給name屬性重新賦值。
四、對(duì)象和字符串之間的轉(zhuǎn)化
在ECMAScript5中內(nèi)置了對(duì)象和字符串之間的相互轉(zhuǎn)化,現(xiàn)在大多數(shù)主流瀏覽器都支持ECMAScript5,如果不支持可以從網(wǎng)上下載json2.js類庫,把此類庫引入到文件中便可以使用。
對(duì)象和字符串之間的轉(zhuǎn)化叫做對(duì)象序列化,即將對(duì)象的狀態(tài)轉(zhuǎn)化為字符串或者將字符串轉(zhuǎn)化為對(duì)象,這些轉(zhuǎn)化都使用JSON作為數(shù)據(jù)交換格式,JSON的全稱是JavaScript Object Notation。
把對(duì)象轉(zhuǎn)化為字符串使用JSON.stringify();把字符串轉(zhuǎn)化為對(duì)象使用JSON.parse(),
//定義一個(gè)對(duì)象 var o={name:'JavaScript',age:24}; //此種方式在轉(zhuǎn)化為對(duì)象是報(bào)錯(cuò),必須使用下面的方式 //var str="{name:'JavaScript',age:24}"; //正確的定義對(duì)象字符串 var str='{"name":"JavaScript","age":24}'; //把對(duì)象轉(zhuǎn)化為字符串 var str2=JSON.stringify(o); console.log('str2:'+str2+',類型:'+(typeof str2));//str2:{"name":"JavaScript","age":24},類型:string //把字符串轉(zhuǎn)化為對(duì)象 var o2=JSON.parse(str); console.log('o2:'+o2+',類型:'+(typeof o2));//o2:[object Object],類型:object
上面實(shí)現(xiàn)了對(duì)象和字符串之間的相互轉(zhuǎn)化。
以上這篇淺談js中對(duì)象的使用就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注