快捷導(dǎo)航

Javascript的數(shù)組與字典用法與遍歷對(duì)象的技巧

更新時(shí)間：2012年11月07日 10:02:57 投稿：whsnow

Javascript 的數(shù)組Array,既是一個(gè)數(shù)組，也是一個(gè)字典(Dictionary)。先舉例看看數(shù)組的用法

Javascript 的數(shù)組Array,既是一個(gè)數(shù)組，也是一個(gè)字典(Dictionary)。先舉例看看數(shù)組的用法。

var a = new Array();
a[0] = "Acer";
a[1] = "Dell";
for (var i = 0; i < a.length; i++) {
alert(a[i]);
}

下面再看一下字典的用法。

復(fù)制代碼代碼如下:

var computer_price = new Array();
computer_price["Acer"] = 500;
computer_price["Dell"] = 600;
alert(computer_price["Acer"]);

我們甚至可以同樣象上面那樣遍歷這個(gè)數(shù)組（字典）

復(fù)制代碼代碼如下:

for (var i in computer_price) {
alert(i + ": " + computer_price[i]);
}

這里的 i 即為字典的每個(gè)鍵值。輸出結(jié)果為：
Acer: 500
Dell: 600

另外 computer_price 是一個(gè)字典對(duì)象，而它的每個(gè)鍵值就是一個(gè)屬性。也就是說(shuō) Acer 是 computer_price 的一個(gè)屬性。我們可以這樣使用它：
computer_price.Acer

再來(lái)看一下字典和數(shù)組的簡(jiǎn)化聲明方式。
var array = [1, 2, 3]; // 數(shù)組
var array2 = { "Acer": 500, "Dell": 600 }; // 字典
alert(array2.Acer); // 500
這樣對(duì)字典的聲明是和前面的一樣的。在我們的例子中，Acer又是鍵值，也可是作為字典對(duì)象的屬性了。

下面再來(lái)看看如何對(duì)一個(gè)對(duì)象的屬性進(jìn)行遍歷。我們可以用 for in 來(lái)遍歷對(duì)象的屬性。

復(fù)制代碼代碼如下:

function Computer(brand, price) {
this.brand = brand;
this.price = price;
}
var mycomputer = new Computer("Acer", 500);
for (var prop in mycomputer) {
alert("computer[" + prop + "]=" + mycomputer[prop]);
}

上面的代碼中，Computer有兩個(gè)屬性，brand 和 price.所以輸出結(jié)果為：
computer[brand]=Acer
computer[price]=500
上面的這種用法可以用來(lái)查看一個(gè)對(duì)象都有哪些屬性。當(dāng)你已經(jīng)知道Computer對(duì)象有一個(gè)brand屬性時(shí)，就可以用
mycomputer.brand
或 mycomputer[brand]
來(lái)獲取屬性值了。
總結(jié)：Javascript中的數(shù)組也可以用來(lái)做字典。字典的鍵值也是字典對(duì)象的屬性。對(duì)一個(gè)對(duì)象的屬性進(jìn)行遍歷時(shí)，可以用for in。

數(shù)組遍歷與屬性
雖然在 JavaScript 中數(shù)組是是對(duì)象，但是沒有好的理由去使用 for in 循環(huán) 遍歷數(shù)組。
相反，有一些好的理由不去使用 for in 遍歷數(shù)組。
注意: JavaScript 中數(shù)組不是關(guān)聯(lián)數(shù)組。
JavaScript 中只有對(duì)象來(lái)管理鍵值的對(duì)應(yīng)關(guān)系。但是關(guān)聯(lián)數(shù)組是保持順序的，而對(duì)象不是。
由于 for in 循環(huán)會(huì)枚舉原型鏈上的所有屬性，唯一過(guò)濾這些屬性的方式是使用hasOwnProperty 函數(shù)，
因此會(huì)比普通的 for 循環(huán)慢上好多倍。
遍歷
為了達(dá)到遍歷數(shù)組的最佳性能，推薦使用經(jīng)典的 for 循環(huán)。

復(fù)制代碼代碼如下:

var list = [1, 2, 3, 4, 5, ...... 100000000];
for(var i = 0, l = list.length; i < l; i++) {
console.log(list[i]);
}

上面代碼有一個(gè)處理，就是通過(guò) l = list.length 來(lái)緩存數(shù)組的長(zhǎng)度。
雖然 length 是數(shù)組的一個(gè)屬性，但是在每次循環(huán)中訪問它還是有性能開銷。
可能最新的 JavaScript 引擎在這點(diǎn)上做了優(yōu)化，但是我們沒法保證自己的代碼是否運(yùn)行在這些最近的引擎之上。
實(shí)際上，不使用緩存數(shù)組長(zhǎng)度的方式比緩存版本要慢很多。
length 屬性
length 屬性的 getter 方式會(huì)簡(jiǎn)單的返回?cái)?shù)組的長(zhǎng)度，而 setter 方式會(huì)截?cái)鄶?shù)組。

復(fù)制代碼代碼如下:

var foo = [1, 2, 3, 4, 5, 6];
foo.length = 3;
foo; // [1, 2, 3]
foo.length = 6;
foo; // [1, 2, 3]

譯者注：
在 Firebug 中查看此時(shí) foo 的值是： [1, 2, 3, undefined, undefined, undefined]
但是這個(gè)結(jié)果并不準(zhǔn)確，如果你在 Chrome 的控制臺(tái)查看 foo 的結(jié)果，你會(huì)發(fā)現(xiàn)是這樣的： [1, 2, 3]
因?yàn)樵?JavaScript 中 undefined 是一個(gè)變量，注意是變量不是關(guān)鍵字，因此上面兩個(gè)結(jié)果的意義是完全不相同的。
// 譯者注：為了驗(yàn)證，我們來(lái)執(zhí)行下面代碼，看序號(hào) 5 是否存在于 foo 中。
5 in foo; // 不管在 Firebug 或者 Chrome 都返回 false
foo[5] = undefined;
5 in foo; // 不管在 Firebug 或者 Chrome 都返回 true
為 length 設(shè)置一個(gè)更小的值會(huì)截?cái)鄶?shù)組，但是增大 length 屬性值不會(huì)對(duì)數(shù)組產(chǎn)生影響。
結(jié)論
為了更好的性能，推薦使用普通的 for 循環(huán)并緩存數(shù)組的 length 屬性。
使用 for in 遍歷數(shù)組被認(rèn)為是不好的代碼習(xí)慣并傾向于產(chǎn)生錯(cuò)誤和導(dǎo)致性能問題。