當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS数组”(array)和“对象”(object)
生活随笔
收集整理的這篇文章主要介紹了
JS数组”(array)和“对象”(object)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
比如有一個數組a=[1,2,3,4]，還有一個對象a={0:1,1:2,2:3,3:4}，然后你運行alert(a[1])，兩種情況下的運行結果是相同的！這就是說，數據集合既可以用數組表示，也可以用對象表示，那么我到底該用哪一種呢？
??????? 數組表示有序數據的集合，而對象表示無序數據的集合。如果數據的順序很重要，就用數組，否則就用對象。
??????? 當然，數組和對象的另一個區別是，數組中的數據沒有“名稱”（name），對象中的數據有“名稱”（name）。但是問題是，很多編程語言中，都有一種叫做“關聯數組”（associative array）的東西。這種數組中的數據是有名稱的。
比如在javascript中，可以這樣定義一個對象：
???????????? var a={"城市":"北京","面積":16800,"人口":1600};
但是，也可以定義成一個關聯數組：
a["城市"]="北京";?? ?? a["面積"]=16800;?? ?? ?a["人口"]=1600;??
????????? 在Javascript語言中，關聯數組就是對象，對象就是關聯數組。這一點與php語言完全不同，在php中，關聯數組也是數組。
比如運行下面這段javascript：
??
var?a=[1,2,3,4];?? ?? ???a['foo']='Hello?World';?? ?? ???alert(a.length);??
最后的結果是4，也就是說，數組a的元素個數是4個。
但是，運行同樣內容的php代碼就不一樣了：
?
$a=array(1,2,3,4);?? ?? ??$a["foo"]="Hello?world";?? ?? ??echo?count($a);??
最后的結果是5，也就是說，數組a的元素個數是5個。
遍歷方法:
一：
var?news?=?{?id:'101',?title:'這是標題',?content:'這里是內容'}?? ??????for(var?n?in?news){?? ??????????document.write(n+'---'+news[n]+'<br>')?? ??????}??
二：
var?news?=?{?? 0:{id:'101',?title:'這是標題111',?content:'這里是內容111'},?? 1:{id:'101',?title:'這是標題222',?content:'這里是內容222'},?? 2:{id:'101',?title:'這是標題333',?content:'這里是內容333'}?? }?? ??????for(var?n?in?news){?? ??????????document.write(n+'---'+news[n].title+'<br>')?? ??????}?? /調用值的方法?news.id?或?news['id']??
字符轉成對象
s???=???'{"address":"","email":"123@123.com","name":"test5","id":"6"};';???? ??eval('o='+s);???? ??alert(o.name);???? 或：?? data=eval('('?+s+?')');??
-------------------------------------------------------------
對象是一種復合數據類型．
創建對象最簡單的方法是你的javascript代碼中包含對象直接量，也可以通過運算符new創建。
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??
創建對象后，我們可以通過"."運算符，在對象中創建新屬性、引用已有屬性、設置屬性值等。
var?book?=?new?Object();??? //創建對象?? book.title="JavaScript:?The?Definitive?Guide";?? book.chapter1=new?Object();???//作為對象屬性的，嵌套對象?? 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);?????????????????? ?從對象中讀取一些屬性.??
在上例中，需注意，可以通過把一個值賦給對象的一個新屬性來創建它．
在JavaScript語句中提到過用for/in語句可以遍歷對象的屬性和方法。
用in運算符檢查屬性是否存在．如：
if ("x" in o) o.x = 1;//如果存在就設置其屬性值為1．
如果這樣寫:o.x=undefined //屬性x是存在的，但是沒有值．我常常會這樣寫：if (o.x !== undefined) o.x = 1;
另外，!= =常代替!=．!= =和= = = 區別在于undefined和null,不用區分時可以省略，如：if (o.doSomething) o.doSomething();
刪除屬性：delete book.chapter2;
作為關聯數組的對象：object.property 和object["property"]是等價的．
通用對象的屬性和方法
constructor屬性：var d = new Date();d.constructor == Date; // true
由于構造函數定義了一個對象的類，所以屬性constructor在有助于確定給定對象的類型．如，可以使用如下代碼來確定一個未知對象的類型：if ((typeof o == "object") && (o.constructor == Date)),也可以用instanceof運算符：if ((typeof o == "object") && (o instanceof Date))
toString()方法：返回一個字符串，該字符串代表了調用它的對象的類型或值．當javascript需要將一個對象轉換成字符串時就調用這個對象的toString()方法．例如當用"＋"連接一個字符和一個對象時，或者把一個對象傳遞給alert()或document.write()方法時，就會調用toString().
默認的toString()方法提供的信息并不多．例如下面的代碼只能得到字符串"[object Object]"：var s = { x:1, y:1 }.toString();所以許多類都定義了自己的toString()方法，例如，當一個數組被轉換成一個字符串時，就得到一個數組元素列表，其中每個元素都被轉換成了字符串，當一個函數被轉換成字符串時，就會獲得該函數的源代碼．第九章將詳細講述．
toLocaleString()方法：返回該對象局部化的字符串表示．Oject類定義的默認toLocaleString()方法自身不做任何局部化，返回的結果與toString() 方法返回的完全相同，但是Object 類的子類則可能定義自己的toLocaleString()方法．
valueOf()方法：與toString()相似，當javascript需要將一個對象轉換成字符串之外的原始類型（通常是數字）時，就需要調用它．
hasOwnProperty方法：如果對象局部定義一個非繼承的屬性，屬性名是由一個字符串實際參數指定的，那么該方法將返回true，否則，它將返回false.如：
var?o?=?{};?? o.hasOwnProperty("undef");?????//?false:?沒有定義該屬性?? o.hasOwnProperty("toString");?//?false:?toString是一個繼承屬性?? Math.hasOwnProperty("cos");????//?true:?Math對象有cos屬性??
propertyIsEnumerable()方法：如果對象定義了一個屬性，屬性名是由一個字符串實際參數指定的，而且該屬性可以用for/in循環枚舉出來，那么該方法返回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()方法：如果調用對象是實際參數指定的對象的原型對象，該方法返回true,否則返回false.該方法的用途和對象的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??
數組方法：
?? join():可以把一個數組的所有元素都轉換成字符串，然后再把它們連接起來，你可以指定一個可選字符串來分隔結果字符串中的元素．如果沒有指定分隔字符串，那么可以使用逗號分隔元素．
reverse()：將顛倒數組元素的順序并返回顛倒后的數組．它在原數組上執行這一操作，也就是說，它并不 創建一個重排了元素的新數組，而是在已經存在的數組中對數組元素進行重排．
sort()：是在原數組上對數組元素進行排序，返回排序后的數組．如果調用sort()時不傳遞給它參數，那么它將按照字母順序對數組元素進行排序（如果必要的話，可以暫時將元素轉成字符串以執行比較操作）
concat()：能創建并返回一個數組．這個數組包含了調用concat()的原始數組的元素，其后跟隨的是concat()的參數．如果其中有些參數是數組，那么它就將被展開，其元素將被添加到返回的數組中．但是要注意，concat()并不能遞歸地展開一個元素為數組．
slice()：返回的是指定數組是一個片段．
splice()：插入或刪除數組元素的通用方法．它在原數組上修改數組．
push()和pop()：使我們可以像使用棧那樣來使用數組．方法push()可以將一個或多個新元素附加到數組的尾部．然后返回數組的新長度．方法pop()恰恰相反．
unshift()和shift()：與push()和pop() 非常相似，只不過它們是在數組的頭部進行元素的插入和刪除，而不是在尾部進行元素的插入和刪除．
toString()和toLocaleString()：注意，在輸出的結果中，數組值的周圍沒有方括號或者其他定界符．
數組附加：indexof()和lastIndexof(),forEach(),map(),filter()
///
對象實例:
<script>?? var?news?={?? ?1:{id:101,title:'這是標題1',content:'這里是內容1'},?? ?2:{id:102,title:'這是標題2',content:'這里是內容2'},?? ?3:{id:103,title:'這是標題3',content:'這里是內容3'},?? ?4:{id:104,title:'這是標題4',content:'這里是內容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>?
??????? 數組表示有序數據的集合，而對象表示無序數據的集合。如果數據的順序很重要，就用數組，否則就用對象。
??????? 當然，數組和對象的另一個區別是，數組中的數據沒有“名稱”（name），對象中的數據有“名稱”（name）。但是問題是，很多編程語言中，都有一種叫做“關聯數組”（associative array）的東西。這種數組中的數據是有名稱的。
比如在javascript中，可以這樣定義一個對象：
???????????? var a={"城市":"北京","面積":16800,"人口":1600};
但是，也可以定義成一個關聯數組：
????????? 在Javascript語言中，關聯數組就是對象，對象就是關聯數組。這一點與php語言完全不同，在php中，關聯數組也是數組。
比如運行下面這段javascript：
??
最后的結果是4，也就是說，數組a的元素個數是4個。
但是，運行同樣內容的php代碼就不一樣了：
?
最后的結果是5，也就是說，數組a的元素個數是5個。
遍歷方法:
一：
二：
字符轉成對象
-------------------------------------------------------------
對象是一種復合數據類型．
創建對象最簡單的方法是你的javascript代碼中包含對象直接量，也可以通過運算符new創建。
創建對象后，我們可以通過"."運算符，在對象中創建新屬性、引用已有屬性、設置屬性值等。
在上例中，需注意，可以通過把一個值賦給對象的一個新屬性來創建它．
在JavaScript語句中提到過用for/in語句可以遍歷對象的屬性和方法。
用in運算符檢查屬性是否存在．如：
if ("x" in o) o.x = 1;//如果存在就設置其屬性值為1．
如果這樣寫:o.x=undefined //屬性x是存在的，但是沒有值．我常常會這樣寫：if (o.x !== undefined) o.x = 1;
另外，!= =常代替!=．!= =和= = = 區別在于undefined和null,不用區分時可以省略，如：if (o.doSomething) o.doSomething();
刪除屬性：delete book.chapter2;
作為關聯數組的對象：object.property 和object["property"]是等價的．
通用對象的屬性和方法
constructor屬性：var d = new Date();d.constructor == Date; // true
由于構造函數定義了一個對象的類，所以屬性constructor在有助于確定給定對象的類型．如，可以使用如下代碼來確定一個未知對象的類型：if ((typeof o == "object") && (o.constructor == Date)),也可以用instanceof運算符：if ((typeof o == "object") && (o instanceof Date))
toString()方法：返回一個字符串，該字符串代表了調用它的對象的類型或值．當javascript需要將一個對象轉換成字符串時就調用這個對象的toString()方法．例如當用"＋"連接一個字符和一個對象時，或者把一個對象傳遞給alert()或document.write()方法時，就會調用toString().
默認的toString()方法提供的信息并不多．例如下面的代碼只能得到字符串"[object Object]"：var s = { x:1, y:1 }.toString();所以許多類都定義了自己的toString()方法，例如，當一個數組被轉換成一個字符串時，就得到一個數組元素列表，其中每個元素都被轉換成了字符串，當一個函數被轉換成字符串時，就會獲得該函數的源代碼．第九章將詳細講述．
toLocaleString()方法：返回該對象局部化的字符串表示．Oject類定義的默認toLocaleString()方法自身不做任何局部化，返回的結果與toString() 方法返回的完全相同，但是Object 類的子類則可能定義自己的toLocaleString()方法．
valueOf()方法：與toString()相似，當javascript需要將一個對象轉換成字符串之外的原始類型（通常是數字）時，就需要調用它．
hasOwnProperty方法：如果對象局部定義一個非繼承的屬性，屬性名是由一個字符串實際參數指定的，那么該方法將返回true，否則，它將返回false.如：
propertyIsEnumerable()方法：如果對象定義了一個屬性，屬性名是由一個字符串實際參數指定的，而且該屬性可以用for/in循環枚舉出來，那么該方法返回true,否則，返回false．例如：
isPrototypeOf()方法：如果調用對象是實際參數指定的對象的原型對象，該方法返回true,否則返回false.該方法的用途和對象的constructor屬性相似．例如：
數組方法：
?? join():可以把一個數組的所有元素都轉換成字符串，然后再把它們連接起來，你可以指定一個可選字符串來分隔結果字符串中的元素．如果沒有指定分隔字符串，那么可以使用逗號分隔元素．
reverse()：將顛倒數組元素的順序并返回顛倒后的數組．它在原數組上執行這一操作，也就是說，它并不 創建一個重排了元素的新數組，而是在已經存在的數組中對數組元素進行重排．
sort()：是在原數組上對數組元素進行排序，返回排序后的數組．如果調用sort()時不傳遞給它參數，那么它將按照字母順序對數組元素進行排序（如果必要的話，可以暫時將元素轉成字符串以執行比較操作）
concat()：能創建并返回一個數組．這個數組包含了調用concat()的原始數組的元素，其后跟隨的是concat()的參數．如果其中有些參數是數組，那么它就將被展開，其元素將被添加到返回的數組中．但是要注意，concat()并不能遞歸地展開一個元素為數組．
slice()：返回的是指定數組是一個片段．
splice()：插入或刪除數組元素的通用方法．它在原數組上修改數組．
push()和pop()：使我們可以像使用棧那樣來使用數組．方法push()可以將一個或多個新元素附加到數組的尾部．然后返回數組的新長度．方法pop()恰恰相反．
unshift()和shift()：與push()和pop() 非常相似，只不過它們是在數組的頭部進行元素的插入和刪除，而不是在尾部進行元素的插入和刪除．
toString()和toLocaleString()：注意，在輸出的結果中，數組值的周圍沒有方括號或者其他定界符．
數組附加：indexof()和lastIndexof(),forEach(),map(),filter()
///
對象實例:
總結
以上是生活随笔為你收集整理的JS数组”(array)和“对象”(object)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 详解js中typeof、instance
- 下一篇： js实践篇：例外处理Try{}catch