JavaScript：奇怪的（邊緣？）混合陣列/對象案例

Question

今天我在同事代碼的維護期間第一次看到這個（或第一次注意到它）。

本質上，「怪異」的部分是一樣的，如果你嘗試運行這段代碼：從nfiredly.com

var arr = []; 
arr[0] = "cat"; // this adds to the array 
arr[1] = "mouse"; // this adds to the array 
arr.length; // returns 2 

arr["favoriteFood"] = "pizza"; // this DOES NOT add to the array. Setting a string parameter adds to the underlying object 
arr.length; // returns 2, not 3 

得到這個例子中，我不知道是什麼的技術術語，這個「案例」是我無法在這裏或谷歌上找到關於它的任何額外信息，但它讓我非常奇怪，這種「行爲」完全可以在JavaScript中存在;陣列和對象（或關聯陣列）之間的一種「混合」。

它在上面的代碼片斷中指出那Setting a string parameter adds to the underlying object，因此不會影響「數組」本身的長度。

這種模式是什麼？
爲什麼這是可能的？這是一個奇怪的JS怪癖還是故意的？
爲什麼你會「混合」這些類型？

Answer 1

這是可能的，因爲數組是具有一些特殊行爲但對象的對象。

15.4 Array Objects

然而，如果啓動的陣列上使用非陣列的特性，一些實施方式可以底層數據結構改變到散列。然後數組操作可能會變慢。

Answer 2

在JavaScript中，數組，函數和對象都是對象。數組是使用數組構造函數創建的對象。

E.g.

var a = new Array(); 

或者，使用快捷數組文本，

var a = []; 

兩者都是相同的。他們都創建對象。但是，特殊的對象。它具有長度屬性和數字屬性以及相應的數值元素。

此對象（數組）具有像push，pop等方法，您可以使用它來操作該對象。

將非數字屬性添加到此數組對象時，不會影響其長度。但是，您確實爲對象添加了新屬性。

所以，如果你有

var a = [1]; 

a.x = 'y'; 

console.log(Object.keys(a)); // outputs ["0", "x"] 
console.log(a); // outputs [1];