Javascript的數組與字典用法與遍曆對象的屬性技巧

來源:互聯網
上載者:User

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

複製代碼 代碼如下:var a = new Array();
a[0] = "Acer";
a[1] = "Dell";
for (var i = 0; i < a.length; i++) {
alert(a[i]);
}

下面再看一下字典的用法。 複製代碼 代碼如下:var computer_price = new Array();
computer_price["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 < l; 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 遍曆數組被認為是不好的代碼習慣並傾向於產生錯誤和導致效能問題。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.