< p >JavaScript 是一門廣泛應用于網頁前端開發的編程語言，它的靈活性和動態性使得其對網頁交互、數據加工的功能支持非常好。在 JavaScript 中，有一種特殊的數組叫做帶 key 的二維數組。本文將探討這種數組的基本概念和使用方法，并舉例說明它的實際應用。< p >帶 key 的二維數組，也叫做關聯數組，是一種可以通過指定 key（鍵）來訪問數組元素的數組。其中，key 與其對應的值之間可以是任何數據類型。使用帶 key 的二維數組，可以讓我們愉快地避免遍歷數組來尋找目標元素所在的維度。下面我們來看看它的語法：< pre >// 創建一個帶 key 的二維數組 var myArray = [ {key1: "value 1", key2: "value 2"}, {key1: "value 3", key2: "value 4"}, {key1: "value 5", key2: "value 6"} ]; // 訪問數組元素并輸出 console.log(myArray[0].key1); // 輸出 "value 1" console.log(myArray[1].key2); // 輸出 "value 4"< p >上面的例子中，我們創建了一個三行兩列的帶 key 的二維數組，其中每一行都有兩個 key 值。我們使用 myArray[0].key1 的方式訪問了數組第一行第一個元素的值，輸出了 "value 1"。同理，我們使用 myArray[1].key2 的方式訪問了數組第二行第二個元素的值，輸出了 "value 4"。< p >帶 key 的二維數組在實際應用中非常便利。例如，我們可以使用它來存儲不同種類的物品和它們的數量，并在需要時動態調整數量：< pre >// 創建一個存儲三種水果和它們的數量的帶 key 的二維數組 var fruitCount = [ {fruitName: "蘋果", count: 8}, {fruitName: "香蕉", count: 12}, {fruitName: "葡萄", count: 20} ]; // 輸出現有的水果種類和數量 for (var i = 0; i< fruitCount.length; i++) { console.log(fruitCount[i].fruitName + ": " + fruitCount[i].count); } // 增加水果數量并再次輸出 fruitCount[1].count += 8; console.log("加了8個香蕉之后："); for (var i = 0; i< fruitCount.length; i++) { console.log(fruitCount[i].fruitName + ": " + fruitCount[i].count); }< p >上面的例子中，我們先創建了一個帶 key 的二維數組 fruitCount，隨后通過 for 循環輸出了現有的水果種類和數量。最后，我們通過 fruitCount[1].count += 8 的語句來增加香蕉數量，再次輸出更新后的水果種類和數量。< p >JavaScript 中的帶 key 的二維數組，是一種非常靈活和實用的數據結構，通常可以用于向圖表、數據表格、樹狀結構等數據可視化組件提供適合的數據。在實際開發中應該善加利用，它會讓我們的代碼更加清晰，更具條理性。