只需添加元素即可更改數組大小，無需推送javascript

Question

我知道更改數組大小的通用方法是使用.push() 。

但是，今天我在angularJS中看到了一段代碼：

var service = {
   pages: [],
   doSmth: doSmth
};

doSmth();

function doSmth() {
   service.pages[1] = "abc";
   service.pages[5] = "def";
}

我在瀏覽器上運行調試器，發現在doSmth()之前， pages[1]未定義，但在此之后， pages[1]被賦值，沒有任何錯誤。

這怎么可能？

Answer 1

這只是JavaScript允許的魔力。 如果你來自Java或C這樣的語言，這可能看起來像一個奇怪的想法，但你可以隨時設置數組中任何索引的值，並且數組將擴展到那個大小！

考慮：

var t = [];
t.length === 0;
t[10000] = 'value';
t.length === 10001;

JavaScript只是在幕后處理這個問題。 值得一提的是，這種行為並非特定於JavaScript。 在其他解釋語言中也可以看到這一點。 例如，Ruby允許您執行相同的操作。

此外，在JavaScript中， length是數組的可寫屬性，因此您可以輕松截斷或清除整個數組：

var t = [1];
t[4] = 0;
t === [1, undefined, undefined, undefined, 0];
t.length = 2;
t === [1, undefined];
t.length = 0;
t === [];

將長度設置為0是清除陣列的最快速和最簡單的方法之一。 它可能不是最直觀的解決方案，但它是我的首選。

Answer 2

JavaScript中的數組只是一個具有一些特殊屬性的對象。 實質上，它們只是具有正整數屬性名稱的對象。 還有一些其他的主要區別，但想法是你可以這樣做：

var obj = { };
obj['1'] = 'abc';

所以你可以用一個數組做同樣的事情。

然而！ 你不應該。 現代JavaScript引擎通常通過快速的本機實現來支持它們來優化數組。 通過設置當前未分配的索引，可以將代碼去優化為更像對象的東西，這要慢得多。

Answer 3

function doSmth()中的頁面與service頁面不在同一名稱空間中，即service.pages 。

你的pages[1]在其他地方被宣布為全球性的。

但是，您將pages初始化為空（但現有）數組： pages: [],

var service = {
    pages: [],
    doSmth: doSmth
};

doSmth();

function doSmth() {
    pages[1] = "abc";
    pages[5] = "def";
}