當(dāng)前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
JS数组”(array)和“对象”(object)
生活随笔
收集整理的這篇文章主要介紹了
JS数组”(array)和“对象”(object)
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
比如有一個(gè)數(shù)組a=[1,2,3,4],還有一個(gè)對(duì)象a={0:1,1:2,2:3,3:4},然后你運(yùn)行alert(a[1]),兩種情況下的運(yùn)行結(jié)果是相同的!這就是說,數(shù)據(jù)集合既可以用數(shù)組表示,也可以用對(duì)象表示,那么我到底該用哪一種呢?
??????? 數(shù)組表示有序數(shù)據(jù)的集合,而對(duì)象表示無序數(shù)據(jù)的集合。如果數(shù)據(jù)的順序很重要,就用數(shù)組,否則就用對(duì)象。
??????? 當(dāng)然,數(shù)組和對(duì)象的另一個(gè)區(qū)別是,數(shù)組中的數(shù)據(jù)沒有“名稱”(name),對(duì)象中的數(shù)據(jù)有“名稱”(name)。但是問題是,很多編程語言中,都有一種叫做“關(guān)聯(lián)數(shù)組”(associative array)的東西。這種數(shù)組中的數(shù)據(jù)是有名稱的。
比如在javascript中,可以這樣定義一個(gè)對(duì)象:
???????????? var a={"城市":"北京","面積":16800,"人口":1600};
但是,也可以定義成一個(gè)關(guān)聯(lián)數(shù)組:
a["城市"]="北京";?? ?? a["面積"]=16800;?? ?? ?a["人口"]=1600;??
????????? 在Javascript語言中,關(guān)聯(lián)數(shù)組就是對(duì)象,對(duì)象就是關(guān)聯(lián)數(shù)組。這一點(diǎn)與php語言完全不同,在php中,關(guān)聯(lián)數(shù)組也是數(shù)組。
比如運(yùn)行下面這段javascript:
??
var?a=[1,2,3,4];?? ?? ???a['foo']='Hello?World';?? ?? ???alert(a.length);??
最后的結(jié)果是4,也就是說,數(shù)組a的元素個(gè)數(shù)是4個(gè)。
但是,運(yùn)行同樣內(nèi)容的php代碼就不一樣了:
?
$a=array(1,2,3,4);?? ?? ??$a["foo"]="Hello?world";?? ?? ??echo?count($a);??
最后的結(jié)果是5,也就是說,數(shù)組a的元素個(gè)數(shù)是5個(gè)。
遍歷方法:
一:
var?news?=?{?id:'101',?title:'這是標(biāo)題',?content:'這里是內(nèi)容'}?? ??????for(var?n?in?news){?? ??????????document.write(n+'---'+news[n]+'<br>')?? ??????}??
二:
var?news?=?{?? 0:{id:'101',?title:'這是標(biāo)題111',?content:'這里是內(nèi)容111'},?? 1:{id:'101',?title:'這是標(biāo)題222',?content:'這里是內(nèi)容222'},?? 2:{id:'101',?title:'這是標(biāo)題333',?content:'這里是內(nèi)容333'}?? }?? ??????for(var?n?in?news){?? ??????????document.write(n+'---'+news[n].title+'<br>')?? ??????}?? /調(diào)用值的方法?news.id?或?news['id']??
字符轉(zhuǎn)成對(duì)象
s???=???'{"address":"","email":"123@123.com","name":"test5","id":"6"};';???? ??eval('o='+s);???? ??alert(o.name);???? 或:?? data=eval('('?+s+?')');??
-------------------------------------------------------------
對(duì)象是一種復(fù)合數(shù)據(jù)類型.
創(chuàng)建對(duì)象最簡單的方法是你的javascript代碼中包含對(duì)象直接量,也可以通過運(yùn)算符new創(chuàng)建。
var?empty?=?{};?//?An?object?with?no?properties?? var?point?=?{?x:0,?y:0?};?? var?circle?=?{?x:point.x,?y:point.y+1,?radius:2?};?? var?homer?=?{?? ????"name":?"Homer?Simpson",?? ????"age":?34,?? ????"married":?true,?? ????"occupation":?"plant?operator",?? ????'email':?homer@example.com?? };?? var?a?=?new?Array();?//?Create?an?empty?array?? var?d?=?new?Date();?//?Create?an?object?representing?the?current?date?and?time?? var?r?=?new?RegExp("javascript",?"i");?//?Create?a?pattern-matching?object??
創(chuàng)建對(duì)象后,我們可以通過"."運(yùn)算符,在對(duì)象中創(chuàng)建新屬性、引用已有屬性、設(shè)置屬性值等。
var?book?=?new?Object();??? //創(chuàng)建對(duì)象?? book.title="JavaScript:?The?Definitive?Guide";?? book.chapter1=new?Object();???//作為對(duì)象屬性的,嵌套對(duì)象?? book.chapter1.title?=?"Introduction?to?JavaScript";?? book.chapter1.pages?=?11;?? book.chapter2?=?{?title:?"Lexical?Structure",?pages:?6?};?? ??????????????alert("Outline:?"?+?book.title?+?"\n\t"?+?? "Chapter?1?"?+?book.chapter1.title?+?"\n\t"?+?? "Chapter?2?"?+?book.chapter2.title);?????????????????? ?從對(duì)象中讀取一些屬性.??
在上例中,需注意,可以通過把一個(gè)值賦給對(duì)象的一個(gè)新屬性來創(chuàng)建它.
在JavaScript語句中提到過用for/in語句可以遍歷對(duì)象的屬性和方法。
用in運(yùn)算符檢查屬性是否存在.如:
if ("x" in o) o.x = 1;//如果存在就設(shè)置其屬性值為1.
如果這樣寫:o.x=undefined //屬性x是存在的,但是沒有值.我常常會(huì)這樣寫:if (o.x !== undefined) o.x = 1;
另外,!= =常代替!=.!= =和= = = 區(qū)別在于undefined和null,不用區(qū)分時(shí)可以省略,如:if (o.doSomething) o.doSomething();
刪除屬性:delete book.chapter2;
作為關(guān)聯(lián)數(shù)組的對(duì)象:object.property 和object["property"]是等價(jià)的.
通用對(duì)象的屬性和方法
constructor屬性:var d = new Date();d.constructor == Date; // true
由于構(gòu)造函數(shù)定義了一個(gè)對(duì)象的類,所以屬性constructor在有助于確定給定對(duì)象的類型.如,可以使用如下代碼來確定一個(gè)未知對(duì)象的類型:if ((typeof o == "object") && (o.constructor == Date)),也可以用instanceof運(yùn)算符:if ((typeof o == "object") && (o instanceof Date))
toString()方法:返回一個(gè)字符串,該字符串代表了調(diào)用它的對(duì)象的類型或值.當(dāng)javascript需要將一個(gè)對(duì)象轉(zhuǎn)換成字符串時(shí)就調(diào)用這個(gè)對(duì)象的toString()方法.例如當(dāng)用"+"連接一個(gè)字符和一個(gè)對(duì)象時(shí),或者把一個(gè)對(duì)象傳遞給alert()或document.write()方法時(shí),就會(huì)調(diào)用toString().
默認(rèn)的toString()方法提供的信息并不多.例如下面的代碼只能得到字符串"[object Object]":var s = { x:1, y:1 }.toString();所以許多類都定義了自己的toString()方法,例如,當(dāng)一個(gè)數(shù)組被轉(zhuǎn)換成一個(gè)字符串時(shí),就得到一個(gè)數(shù)組元素列表,其中每個(gè)元素都被轉(zhuǎn)換成了字符串,當(dāng)一個(gè)函數(shù)被轉(zhuǎn)換成字符串時(shí),就會(huì)獲得該函數(shù)的源代碼.第九章將詳細(xì)講述.
toLocaleString()方法:返回該對(duì)象局部化的字符串表示.Oject類定義的默認(rèn)toLocaleString()方法自身不做任何局部化,返回的結(jié)果與toString() 方法返回的完全相同,但是Object 類的子類則可能定義自己的toLocaleString()方法.
valueOf()方法:與toString()相似,當(dāng)javascript需要將一個(gè)對(duì)象轉(zhuǎn)換成字符串之外的原始類型(通常是數(shù)字)時(shí),就需要調(diào)用它.
hasOwnProperty方法:如果對(duì)象局部定義一個(gè)非繼承的屬性,屬性名是由一個(gè)字符串實(shí)際參數(shù)指定的,那么該方法將返回true,否則,它將返回false.如:
var?o?=?{};?? o.hasOwnProperty("undef");?????//?false:?沒有定義該屬性?? o.hasOwnProperty("toString");?//?false:?toString是一個(gè)繼承屬性?? Math.hasOwnProperty("cos");????//?true:?Math對(duì)象有cos屬性??
propertyIsEnumerable()方法:如果對(duì)象定義了一個(gè)屬性,屬性名是由一個(gè)字符串實(shí)際參數(shù)指定的,而且該屬性可以用for/in循環(huán)枚舉出來,那么該方法返回true,否則,返回false.例如:
var?o?=?{?x:1?};?? o.propertyIsEnumerable("x");????????//?true:?property?exists?and?is?enumerable?? o.propertyIsEnumerable("y");????????//?false:?property?doesn't?exist?? o.propertyIsEnumerable("valueOf");?//?false:?property?is?inherited??
isPrototypeOf()方法:如果調(diào)用對(duì)象是實(shí)際參數(shù)指定的對(duì)象的原型對(duì)象,該方法返回true,否則返回false.該方法的用途和對(duì)象的constructor屬性相似.例如:
var?o?=?{}?? Object.prototype.isPrototypeOf(o);????????//?true:?o.constructor?==?Object?? Object.isPrototypeOf(o);??????????????????//?false?? o.isPrototypeOf(Object.prototype);????????//?false?? Function.prototype.isPrototypeOf(Object);?//?true:?Object.constructor==Function??
數(shù)組方法:
?? join():可以把一個(gè)數(shù)組的所有元素都轉(zhuǎn)換成字符串,然后再把它們連接起來,你可以指定一個(gè)可選字符串來分隔結(jié)果字符串中的元素.如果沒有指定分隔字符串,那么可以使用逗號(hào)分隔元素.
reverse():將顛倒數(shù)組元素的順序并返回顛倒后的數(shù)組.它在原數(shù)組上執(zhí)行這一操作,也就是說,它并不 創(chuàng)建一個(gè)重排了元素的新數(shù)組,而是在已經(jīng)存在的數(shù)組中對(duì)數(shù)組元素進(jìn)行重排.
sort():是在原數(shù)組上對(duì)數(shù)組元素進(jìn)行排序,返回排序后的數(shù)組.如果調(diào)用sort()時(shí)不傳遞給它參數(shù),那么它將按照字母順序?qū)?shù)組元素進(jìn)行排序(如果必要的話,可以暫時(shí)將元素轉(zhuǎn)成字符串以執(zhí)行比較操作)
concat():能創(chuàng)建并返回一個(gè)數(shù)組.這個(gè)數(shù)組包含了調(diào)用concat()的原始數(shù)組的元素,其后跟隨的是concat()的參數(shù).如果其中有些參數(shù)是數(shù)組,那么它就將被展開,其元素將被添加到返回的數(shù)組中.但是要注意,concat()并不能遞歸地展開一個(gè)元素為數(shù)組.
slice():返回的是指定數(shù)組是一個(gè)片段.
splice():插入或刪除數(shù)組元素的通用方法.它在原數(shù)組上修改數(shù)組.
push()和pop():使我們可以像使用棧那樣來使用數(shù)組.方法push()可以將一個(gè)或多個(gè)新元素附加到數(shù)組的尾部.然后返回?cái)?shù)組的新長度.方法pop()恰恰相反.
unshift()和shift():與push()和pop() 非常相似,只不過它們是在數(shù)組的頭部進(jìn)行元素的插入和刪除,而不是在尾部進(jìn)行元素的插入和刪除.
toString()和toLocaleString():注意,在輸出的結(jié)果中,數(shù)組值的周圍沒有方括號(hào)或者其他定界符.
數(shù)組附加:indexof()和lastIndexof(),forEach(),map(),filter()
///
對(duì)象實(shí)例:
<script>?? var?news?={?? ?1:{id:101,title:'這是標(biāo)題1',content:'這里是內(nèi)容1'},?? ?2:{id:102,title:'這是標(biāo)題2',content:'這里是內(nèi)容2'},?? ?3:{id:103,title:'這是標(biāo)題3',content:'這里是內(nèi)容3'},?? ?4:{id:104,title:'這是標(biāo)題4',content:'這里是內(nèi)容4'},?? ?jingdian:{101:'AAA',102:'BBB',103:'CCC',104:'DDD'}?? }?? var?jingdian?={?? ?101:{1101:'天',1102:'地',1103:'東'},?? ?102:{2101:'天2',2102:'地2',2103:'東2'},?? ?103:{3101:'天3',3102:'地3',3103:'東3'}?? }?? ?? for?(var?n?in?news){?? ?if(n!='jingdian'){?? ??document.write(n+"--"+news[n].id+"--"+news[n].title+'----'+news[n].content+'======'+get_jingdian(news[n].id)+'=========<br>');?? ?}?? }?? document.write('<hr>');?? document.write(news[1]['title']+'--');?? document.write(news[1].title);?? document.write('<hr>');?? ?? for?(var?J?in?news['jingdian']){?? ?document.write(news['jingdian'][J]+'<br>');?? ??? }?? document.write('<hr>');?? ?? function?get_jingdian(id){?? ?//document.write(id);?? ?//alert('id:'+id);?? ?var?str='';?? ?for?(var?j?in?jingdian){?? ??if(j==id){?? ???//alert(j+'----'+id);?? ???for?(j2?in?jingdian[id]){?? ????str+='<a?href='+j2+'>'+jingdian[id][j2]+'('+j2+')</a>?';?? ???}?? ??}?? ?}?? ?? ?? return?str;?? }?? ?? ?? </script>?
??????? 數(shù)組表示有序數(shù)據(jù)的集合,而對(duì)象表示無序數(shù)據(jù)的集合。如果數(shù)據(jù)的順序很重要,就用數(shù)組,否則就用對(duì)象。
??????? 當(dāng)然,數(shù)組和對(duì)象的另一個(gè)區(qū)別是,數(shù)組中的數(shù)據(jù)沒有“名稱”(name),對(duì)象中的數(shù)據(jù)有“名稱”(name)。但是問題是,很多編程語言中,都有一種叫做“關(guān)聯(lián)數(shù)組”(associative array)的東西。這種數(shù)組中的數(shù)據(jù)是有名稱的。
比如在javascript中,可以這樣定義一個(gè)對(duì)象:
???????????? var a={"城市":"北京","面積":16800,"人口":1600};
但是,也可以定義成一個(gè)關(guān)聯(lián)數(shù)組:
????????? 在Javascript語言中,關(guān)聯(lián)數(shù)組就是對(duì)象,對(duì)象就是關(guān)聯(lián)數(shù)組。這一點(diǎn)與php語言完全不同,在php中,關(guān)聯(lián)數(shù)組也是數(shù)組。
比如運(yùn)行下面這段javascript:
??
最后的結(jié)果是4,也就是說,數(shù)組a的元素個(gè)數(shù)是4個(gè)。
但是,運(yùn)行同樣內(nèi)容的php代碼就不一樣了:
?
最后的結(jié)果是5,也就是說,數(shù)組a的元素個(gè)數(shù)是5個(gè)。
遍歷方法:
一:
二:
字符轉(zhuǎn)成對(duì)象
-------------------------------------------------------------
對(duì)象是一種復(fù)合數(shù)據(jù)類型.
創(chuàng)建對(duì)象最簡單的方法是你的javascript代碼中包含對(duì)象直接量,也可以通過運(yùn)算符new創(chuàng)建。
創(chuàng)建對(duì)象后,我們可以通過"."運(yùn)算符,在對(duì)象中創(chuàng)建新屬性、引用已有屬性、設(shè)置屬性值等。
在上例中,需注意,可以通過把一個(gè)值賦給對(duì)象的一個(gè)新屬性來創(chuàng)建它.
在JavaScript語句中提到過用for/in語句可以遍歷對(duì)象的屬性和方法。
用in運(yùn)算符檢查屬性是否存在.如:
if ("x" in o) o.x = 1;//如果存在就設(shè)置其屬性值為1.
如果這樣寫:o.x=undefined //屬性x是存在的,但是沒有值.我常常會(huì)這樣寫:if (o.x !== undefined) o.x = 1;
另外,!= =常代替!=.!= =和= = = 區(qū)別在于undefined和null,不用區(qū)分時(shí)可以省略,如:if (o.doSomething) o.doSomething();
刪除屬性:delete book.chapter2;
作為關(guān)聯(lián)數(shù)組的對(duì)象:object.property 和object["property"]是等價(jià)的.
通用對(duì)象的屬性和方法
constructor屬性:var d = new Date();d.constructor == Date; // true
由于構(gòu)造函數(shù)定義了一個(gè)對(duì)象的類,所以屬性constructor在有助于確定給定對(duì)象的類型.如,可以使用如下代碼來確定一個(gè)未知對(duì)象的類型:if ((typeof o == "object") && (o.constructor == Date)),也可以用instanceof運(yùn)算符:if ((typeof o == "object") && (o instanceof Date))
toString()方法:返回一個(gè)字符串,該字符串代表了調(diào)用它的對(duì)象的類型或值.當(dāng)javascript需要將一個(gè)對(duì)象轉(zhuǎn)換成字符串時(shí)就調(diào)用這個(gè)對(duì)象的toString()方法.例如當(dāng)用"+"連接一個(gè)字符和一個(gè)對(duì)象時(shí),或者把一個(gè)對(duì)象傳遞給alert()或document.write()方法時(shí),就會(huì)調(diào)用toString().
默認(rèn)的toString()方法提供的信息并不多.例如下面的代碼只能得到字符串"[object Object]":var s = { x:1, y:1 }.toString();所以許多類都定義了自己的toString()方法,例如,當(dāng)一個(gè)數(shù)組被轉(zhuǎn)換成一個(gè)字符串時(shí),就得到一個(gè)數(shù)組元素列表,其中每個(gè)元素都被轉(zhuǎn)換成了字符串,當(dāng)一個(gè)函數(shù)被轉(zhuǎn)換成字符串時(shí),就會(huì)獲得該函數(shù)的源代碼.第九章將詳細(xì)講述.
toLocaleString()方法:返回該對(duì)象局部化的字符串表示.Oject類定義的默認(rèn)toLocaleString()方法自身不做任何局部化,返回的結(jié)果與toString() 方法返回的完全相同,但是Object 類的子類則可能定義自己的toLocaleString()方法.
valueOf()方法:與toString()相似,當(dāng)javascript需要將一個(gè)對(duì)象轉(zhuǎn)換成字符串之外的原始類型(通常是數(shù)字)時(shí),就需要調(diào)用它.
hasOwnProperty方法:如果對(duì)象局部定義一個(gè)非繼承的屬性,屬性名是由一個(gè)字符串實(shí)際參數(shù)指定的,那么該方法將返回true,否則,它將返回false.如:
propertyIsEnumerable()方法:如果對(duì)象定義了一個(gè)屬性,屬性名是由一個(gè)字符串實(shí)際參數(shù)指定的,而且該屬性可以用for/in循環(huán)枚舉出來,那么該方法返回true,否則,返回false.例如:
isPrototypeOf()方法:如果調(diào)用對(duì)象是實(shí)際參數(shù)指定的對(duì)象的原型對(duì)象,該方法返回true,否則返回false.該方法的用途和對(duì)象的constructor屬性相似.例如:
數(shù)組方法:
?? join():可以把一個(gè)數(shù)組的所有元素都轉(zhuǎn)換成字符串,然后再把它們連接起來,你可以指定一個(gè)可選字符串來分隔結(jié)果字符串中的元素.如果沒有指定分隔字符串,那么可以使用逗號(hào)分隔元素.
reverse():將顛倒數(shù)組元素的順序并返回顛倒后的數(shù)組.它在原數(shù)組上執(zhí)行這一操作,也就是說,它并不 創(chuàng)建一個(gè)重排了元素的新數(shù)組,而是在已經(jīng)存在的數(shù)組中對(duì)數(shù)組元素進(jìn)行重排.
sort():是在原數(shù)組上對(duì)數(shù)組元素進(jìn)行排序,返回排序后的數(shù)組.如果調(diào)用sort()時(shí)不傳遞給它參數(shù),那么它將按照字母順序?qū)?shù)組元素進(jìn)行排序(如果必要的話,可以暫時(shí)將元素轉(zhuǎn)成字符串以執(zhí)行比較操作)
concat():能創(chuàng)建并返回一個(gè)數(shù)組.這個(gè)數(shù)組包含了調(diào)用concat()的原始數(shù)組的元素,其后跟隨的是concat()的參數(shù).如果其中有些參數(shù)是數(shù)組,那么它就將被展開,其元素將被添加到返回的數(shù)組中.但是要注意,concat()并不能遞歸地展開一個(gè)元素為數(shù)組.
slice():返回的是指定數(shù)組是一個(gè)片段.
splice():插入或刪除數(shù)組元素的通用方法.它在原數(shù)組上修改數(shù)組.
push()和pop():使我們可以像使用棧那樣來使用數(shù)組.方法push()可以將一個(gè)或多個(gè)新元素附加到數(shù)組的尾部.然后返回?cái)?shù)組的新長度.方法pop()恰恰相反.
unshift()和shift():與push()和pop() 非常相似,只不過它們是在數(shù)組的頭部進(jìn)行元素的插入和刪除,而不是在尾部進(jìn)行元素的插入和刪除.
toString()和toLocaleString():注意,在輸出的結(jié)果中,數(shù)組值的周圍沒有方括號(hào)或者其他定界符.
數(shù)組附加:indexof()和lastIndexof(),forEach(),map(),filter()
///
對(duì)象實(shí)例:
總結(jié)
以上是生活随笔為你收集整理的JS数组”(array)和“对象”(object)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 详解js中typeof、instance
- 下一篇: javascript引用类型