js一維數(shù)組、多維數(shù)組和對(duì)象的混合使用方法
這篇文章的主要目的是講解JavaScript數(shù)組和對(duì)象的混合使用,由于JS的弱檢查特性,因此在JS數(shù)組中可以同時(shí)存儲(chǔ)不同類(lèi)型的變量,比如你可以把數(shù)字、字符串、字符、對(duì)象等內(nèi)容放在同一個(gè)數(shù)組中。對(duì)象也可以做同樣的事情,區(qū)別是對(duì)象可以指定對(duì)象里每一個(gè)成員的別名,這樣在編程的時(shí)候數(shù)據(jù)更易讀,比如:
var arr1 = ["飛魚(yú)", 25, 172, "江蘇"]; var person = {name:"飛魚(yú)",age: 25, height:172,province: "江蘇"};
這樣,person.name是不是比arr1[0]更易讀,更易使用?當(dāng)然數(shù)組和對(duì)象各有優(yōu)勢(shì),本文的重點(diǎn)是將二者的優(yōu)勢(shì)結(jié)合起來(lái),綜合使用。
一維數(shù)組
下面的代碼創(chuàng)建名為 cars 的數(shù)組:先創(chuàng)建數(shù)組,再一一賦值
var cars=new Array(); cars[0]="Audi"; cars[1]="BMW"; cars[2]="Volvo";
或者 (condensed array):在創(chuàng)建數(shù)組對(duì)象的時(shí)候賦值
var cars=new Array("Audi","BMW","Volvo");
或者 (literal array):不創(chuàng)建變量,直接輔助,不過(guò)注意創(chuàng)建對(duì)象時(shí)用的小括號(hào)“( )”,而直接賦值時(shí)用的是方括號(hào)“[ ]”,這個(gè)一不小心就容易出錯(cuò)。
實(shí)例
var cars=["Audi","BMW","Volvo"];
上面是一維數(shù)組的三種創(chuàng)建方式。由于JS的弱檢查性,你可以在一維數(shù)組中放不同類(lèi)型的變量。
二維和多維數(shù)組:
1、 創(chuàng)建二維數(shù)組方法一:先創(chuàng)建一個(gè)一維數(shù)組,然后該一維數(shù)組的所有成員再創(chuàng)建一維數(shù)據(jù)
var persons = new Array(); persons[0] = new Array(); persons[1] = new Array(); persons[2] = new Array(); persons[0][0] = "zhangsan"; persons[0][1] = 25; persons[1][0] = "lisi"; persons[1][1] = 22; persons[2][0] = "wangwu"; persons[2][1] = 32; persons[0] = ["zhangsan", 25]; persons[1] = ["lisi", 21]; persons[2] = ["wangwu", 32];
相比較上一種方法,這個(gè)要簡(jiǎn)單易讀多了。
persons.length = 3
2、創(chuàng)建二維數(shù)組方法二:先創(chuàng)建一個(gè)一維數(shù)組,然后該一維數(shù)組的所有成員直接賦值
var persons = new Array();
3、創(chuàng)建二維數(shù)組方法三:直接賦值
var persons = [["zhangsan", 25], ["lisi", 21], ["wangwu", 32]];
4、總結(jié)
第一種和第二種方法雖然麻煩一些,但貴在可以先創(chuàng)建一個(gè)空的多維數(shù)組,然后在for循環(huán)中根據(jù)自己的需求進(jìn)行賦值。第三種方法對(duì)于枚舉數(shù)據(jù)來(lái)說(shuō)就比較簡(jiǎn)單易用了。
二維數(shù)組的最后一個(gè)問(wèn)題,就是二維數(shù)組或多維數(shù)組的長(zhǎng)度是多少?我們測(cè)試一下下面的代碼:
document.write("persons = " + persons + "<br />persons.length = " + persons.length);
輸出的結(jié)果是:
persons = zhangsan,25,lisi,21,wangwu,32
也就是說(shuō),多維數(shù)組的length屬性返回的是多維數(shù)組第一維的長(zhǎng)度,而不是多維數(shù)組中元素的個(gè)數(shù)。
5、如何返回多維數(shù)組的元素個(gè)數(shù)
如下數(shù)組:
var persons = [["zhangsan", 25], ["lisi", 21], ["wangwu", 32]];
通過(guò)維數(shù)(此處是3)乘以每維元素的個(gè)數(shù)(此處是2)就可以得出該多維數(shù)組的元素個(gè)數(shù)是6了。但是這并不是保險(xiǎn)的做法,因?yàn)槎嗑S數(shù)組中每一個(gè)維度的元素個(gè)數(shù)是可以不一樣的,如:
var persons = [["zhangsan", 25], ["lisi", 21, 172], ["wangwu", 32]];
該數(shù)組的第一維的第二個(gè)元素?cái)?shù)組包含三個(gè)元素,其他的只有兩個(gè),這再使用length來(lái)計(jì)算還是3,因?yàn)榈谝痪S的元素個(gè)數(shù)沒(méi)變嘛。但是再使用上面的方法計(jì)算該多維數(shù)組的元素個(gè)數(shù)就不對(duì)了。
因此多維數(shù)組的length屬性和一維數(shù)組一樣,永遠(yuǎn)返回第一維數(shù)組的元素個(gè)數(shù)。計(jì)算多維數(shù)組的元素個(gè)數(shù),可以自己創(chuàng)建一個(gè)或多個(gè)嵌套for循環(huán)來(lái)計(jì)算,如:
在知道數(shù)組的維度的情況下,可以針對(duì)該數(shù)組寫(xiě)算法,如二維數(shù)組:
var persons = [["zhangsan", 25], ["lisi", 21], ["wangwu", 32]]; function getArr2ElementNum(arr) { var eleNum = 0; if (arr == null) { return 0; } for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr[i].length; j++) { eleNum++; } } return eleNum; } alert(getArr2ElementNum(persons));
在多維數(shù)組維度過(guò)多,嵌套復(fù)雜時(shí),通過(guò)上面的方法來(lái)寫(xiě)針對(duì)的算法就太累了,特別是當(dāng)這個(gè)復(fù)雜的多維數(shù)組還可能隨時(shí)變換維度的情況下。如下這個(gè)復(fù)雜的多重嵌套的多維數(shù)組:
var arrN = [["zhangsan", 25, [1, "wangyuchu", 54, [123, 34, 16]], 43], ["lisi", 21, 172], ["wangwu", 32, "suzhou"]];
甚至,有些多維嵌套數(shù)組比這個(gè)還復(fù)雜,那怎么計(jì)算數(shù)組元素個(gè)數(shù)呢,我寫(xiě)了一個(gè)求數(shù)組元素個(gè)數(shù)的函數(shù),不管是一維還多維,也不管是多么復(fù)雜的嵌套多維數(shù)組,都可以計(jì)算出來(lái),算法不麻煩,主要用到了遞歸的理念:
//判斷某個(gè)對(duì)象是不是數(shù)組
function isArray(obj) { return obj && ( typeof obj === 'object') && (obj.constructor == Array); } //eleNum變量初始值為0,用來(lái)統(tǒng)計(jì)數(shù)組元素個(gè)數(shù) var eleNum = 0; //遞歸計(jì)算某個(gè)數(shù)組元素是不是下一維數(shù)組,如果是,則繼續(xù)遞歸下去;如果不是,統(tǒng)計(jì)元素個(gè)數(shù)。 function recursion(obj) { if (isArray(obj)) { for (var j = 0; j < obj.length; j++) { if (!isArray(obj[j])) { eleNum++; continue; } recursion(obj[j]); } } else { eleNum++; } } //arr為要計(jì)算數(shù)組元素個(gè)數(shù)的一維或多維數(shù)組,通過(guò)調(diào)用遞歸函數(shù)recursion返回?cái)?shù)組元素個(gè)數(shù) function getArrNElementNum(arr) { if (arr == null) { return 0; } recursion(arr); return eleNum; } //隨意定義一個(gè)復(fù)雜的多維嵌套數(shù)組 var arrN = [["zhangsan", 25, [1, "wangyuchu", 54, [123, 34, 16]], 43], ["lisi", 21, 172], ["wangwu", 32, "suzhou"]]; //打印出來(lái)數(shù)組元素個(gè)數(shù) alert(getArrNElementNum(arrN));
對(duì)象:
對(duì)象由花括號(hào)分隔。在括號(hào)內(nèi)部,對(duì)象的屬性以名稱和值對(duì)的形式 (name : value) 來(lái)定義。屬性由逗號(hào)分隔:
var person={firstname:"Bill", lastname:"Gates", id:5566};
上面例子中的對(duì)象 (person) 有三個(gè)屬性:firstname、lastname 以及 id。
空格和折行無(wú)關(guān)緊要。聲明可橫跨多行:
var person={ firstname : "Bill", lastname : "Gates", id : 5566 };
對(duì)象屬性有兩種尋址方式:
實(shí)例
name=person.lastname; name=person["lastname"];
對(duì)象和多維數(shù)組的混合使用:
想象這么一個(gè)場(chǎng)景,要枚舉并統(tǒng)計(jì)清華大學(xué)(qinghua)、北京大學(xué)(beida)、浙江大學(xué)(zheda)三所大學(xué)一共有多少個(gè)系,怎么做?
首先,建立一個(gè)數(shù)組,數(shù)組中包括著三所學(xué)校:
var departments = [qinghua, beida, zheda];
每個(gè)學(xué)校又有很多不同或相同的學(xué)院(xx),如何表示?在這里就要用到數(shù)組包含對(duì)象了:
var departments = [qinghua{xx1, xx2, xx3}, beida{xx4, xx5,
xx6, xx7}, zheda{xx8, xx9}];
每個(gè)學(xué)院又有不同的系(d),如何表示?
var departments = [qinghua{xx1:[d1, d2], xx2[d3, d5],
xx3:[d7, d8]}, beida{xx4, xx5, xx6, xx7}, zheda{xx8,
xx9}];
//只是舉個(gè)例子,后面兩個(gè)大學(xué)我就不表示了
上述例子就是一個(gè)數(shù)組,該數(shù)組的元素是學(xué)校對(duì)象,學(xué)校對(duì)象有N個(gè)學(xué)院屬性,而每個(gè)學(xué)院屬性又是一個(gè)包含多個(gè)系的數(shù)組,這就是一個(gè)典型的多維數(shù)組和對(duì)象混合使用的例子,可以簡(jiǎn)單明了的說(shuō)明和列表學(xué)校、學(xué)院和系之間的級(jí)別、歸屬和數(shù)量關(guān)系。
相關(guān)文章
JavaScript遞歸函數(shù)解“漢諾塔”算法代碼解析
這篇文章主要介紹了JavaScript遞歸函數(shù)解“漢諾塔”算法代碼解析,需要的朋友可以參考下2018-07-07js常用函數(shù)push()、pop()、shift()、unshift()、slice()和splice()等詳解
這篇文章主要給大家介紹了關(guān)于js常用函數(shù)push()、pop()、shift()、unshift()、slice()和splice()等的相關(guān)資料,js中數(shù)組操作函數(shù)還是非常多的,今天忽然想到來(lái)總結(jié)一下,也算是溫故而知新吧,需要的朋友可以參考下2023-11-11Js得到radiobuttonlist選中值的兩種方法(推薦)
下面小編就為大家?guī)?lái)一篇Js得到radiobuttonlist選中值的兩種方法(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08JavaScript實(shí)現(xiàn)監(jiān)控上傳和下載進(jìn)度
這篇文章主要介紹了JavaScript實(shí)現(xiàn)監(jiān)控上傳和下載進(jìn)度,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值需要的小伙伴可以參考一下2022-05-05利用js的Node遍歷找到repeater的一個(gè)字段實(shí)例介紹
本文教大家使用js的Node遍歷找到repeater的一個(gè)字段的具體實(shí)現(xiàn)思路,感興趣的朋友可參考下,希望可以幫助到你2013-04-04js 數(shù)組 find,some,filter,reduce區(qū)別詳解
區(qū)分清楚Array中filter、find、some、reduce這幾個(gè)方法的區(qū)別,根據(jù)它們的使用場(chǎng)景更好的應(yīng)用在日常編碼中。具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06使用微信小程序開(kāi)發(fā)彈出框應(yīng)用實(shí)例詳解
本文通過(guò)實(shí)例代碼給大家介紹了使用微信小程序開(kāi)發(fā)彈出框功能,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10