Javascript的陣列與字典用法與遍歷物件的屬性技巧_javascript技巧

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

複製程式碼 程式碼如下:

var a = new Array();


var a = new Array();
a [0] = "Acer";
a[1] = "Dell";
for (var i = 0; i alert(a[i]);
}

下面再看一下字典的用法。 複製程式碼

程式碼如下:


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

alert(computer_price["Acer"]);

我們甚至可以同樣像上面那樣歷一樣這個陣列（字典） 複製程式碼

程式碼如下:


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

}


這裡的i 即為字典的每個鍵值。輸出結果為：
Acer: 500
Dell: 600

另外 computer_price 是字典對象，而它的每個鍵值就是一個屬性。也就是說 Acer 是 computer_price 的性質。我們可以這樣使用它：
computer_price.Acer

再來看字典和陣列的簡化宣告方式。
var array = [1, 2, 3]; // 陣列
var array2 = { "Acer": 500, "Dell": 600 }; // 字典
alert(array2.Acer); // 500
這樣對字典的宣告是和前面的一樣的。在我們的例子中，Acer又是鍵值，也可是作為字典物件的屬性了。

下面再來看看如何對一個物件的屬性進行遍歷。我們可以用 for in 來遍歷物件的屬性。 複製程式碼

程式碼如下:


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有兩個屬性，brand 和price.所以輸出結果為：
computer[brand]=Acer
computer[price]=500
上面的這種用法可以用來查看一個物件都有哪些屬性。當你已經知道Computer物件有brand屬性時，就可以用
mycomputer.brand
或 mycomputer[brand]
來取得屬性值了。
總結：Javascript中的陣列也可以用來做字典。字典的鍵值也是字典物件的屬性。對一個物件的屬性進行遍歷時，可以用for in。

數組遍歷與屬性
雖然在 JavaScript 中數組是是對象，但是沒有好的理由去使用 for in 循環 遍歷數組。
相反，有一些好的理由不去使用 for in 遍歷陣列。
注意: JavaScript 中陣列不是 關聯數組。
JavaScript 中只有物件 來管理鍵值的對應關係。但是關聯數組是保持順序的，而物件不是。
由於 for in 迴圈會列舉原型鏈上的所有屬性，唯一過濾這些屬性的方式是使用hasOwnProperty 函數，
因此會比普通的 for 迴圈慢上好多倍。
遍歷
為了達到遍歷數組的最佳效能，建議使用經典的 for 迴圈。

複製程式碼

程式碼如下:

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

上面程式碼有一個處理，就是透過l = list.length 來快取陣列的長度。
雖然 length 是陣列的屬性，但是在每次循環中存取它還是有效能開銷。
可能最新的 JavaScript 引擎在這點上做了優化，但是我們沒辦法保證自己的程式碼是否運行在這些最近的引擎之上。
實際上，不使用快取數組長度的方式比快取版本慢很多。
length 屬性
length 屬性的 getter 方式會簡單的傳回陣列的長度，而 setter 方式會截斷陣列。

複製程式碼

程式碼如下:

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

譯者註：
在Firebug 中查看此時foo 的值是： [1, 2 , 3, undefined, undefined, undefined]
但是這個結果並不準確，如果你在Chrome 的控制台查看foo 的結果，你會發現是這樣的： [1, 2, 3]
因為在JavaScript 中undefined 是變數，注意變數不是關鍵字，因此上面兩個結果的意義是完全不相同的。
// 譯者註：為了驗證，我們來執行下面程式碼，看序號 5 是否存在於 foo 中。
5 in foo; // 不管在Firebug 或Chrome 都回傳false
foo[5] = undefined;
5 in foo; // 不管在Firebug 或Chrome 都回傳true
為length 設定一個更小的值會截斷數組，但是增加length 屬性值不會對數組產生影響。
結論
為了更好的效能，建議使用普通的 for 迴圈並快取數組的 length 屬性。
使用 for in 遍歷數組被認為是不好的程式碼習慣並傾向於產生錯誤和導致效能問題。