在 JavaScript 中使用 JSON 物件陣列
JSON 物件是一個簡單的 JavaScript 物件。我們可以建立一個包含許多類似 JSON 物件的陣列。與 C、C++、Java 等語言不同，在 javascript 中，處理 JSON 物件陣列很容易。它類似於 C 語言中的結構陣列或 Java 中的類物件陣列。在本文中，我們將討論如何通過迭代並在其中查詢元素來建立 JSON 物件陣列。
建立 JSON 物件陣列
我們可以通過將 JSON 陣列分配給變數或使用 .push() 運算子在物件陣列中動態新增值來建立 JSON 物件陣列，或者使用迴圈結構在陣列的索引處新增物件，例如 for 迴圈或 while 迴圈。參考以下程式碼更好理解。
var months = [ {"id":1,"name":"January"}, {"id":2,"name":"February"} ];
console.log(JSON.stringify(months));
var monthNames = ["January", "February"];
var month = {};
var monthsArray = [];
for (let i = 0; i < 2; i++) {
month.id = (i + 1);
month.name = monthNames[i];
monthsArray.push({...month});
}
console.log(JSON.stringify(monthsArray));
輸出：
[{"id":1,"name":"January"},{"id":2,"name":"February"}]
[{"id":1,"name":"January"},{"id":2,"name":"February"}]
在上面的程式碼中，months 變數儲存顯式分配的 JSON 物件陣列，而 monthsArray 是通過在 for 迴圈內分配值建立的 JSON 物件陣列。我們使用 .push() 陣列函式將生成的 javascript 物件新增到 monthsArray 的末尾。請注意，當使用 JavaScript console.log() 語句記錄時，這兩個陣列顯示相同的結構。JSON.stringify() 函式將 JSON 陣列轉換為字串格式，使其成為人類可讀的格式。
從 JSON 物件陣列訪問物件
我們已經建立了一個 JSON 物件陣列。讓我們看看如何訪問這個陣列的元素。該方法與我們對簡單字串陣列或數字陣列所做的相同。我們可以使用陣列索引（從 0 開始）訪問陣列物件，並在該索引處操作物件值。參考以下程式碼。
var months = [ {"id":1,"name":"January"}, {"id":2,"name":"February"} ];
console.log(months[0].id);
console.log(months[0].name);
months[0].id = 3;
months[0].name = "March";
console.log(months[0].id);
console.log(months[0].name);
輸出：
1
January
3
March
在程式碼中，我們通過使用 array Index 訪問 months 陣列的第一個索引來更改物件引數的值。類似地，我們可以使用其索引更改陣列中任何其他物件的值。
迭代 JSON 物件陣列
我們可以像處理字串陣列或數字陣列一樣迭代物件陣列。我們可以使用 for 迴圈 或 while 迴圈 來達到我們的目的。我們可以使用陣列索引訪問元素。我們將陣列從第 0 個索引迭代到陣列長度。.length 屬性也返回物件陣列的長度。請參考以下程式碼，其中顯示了迭代陣列並列印其中每個物件的值。
var months = [ {"id":1,"name":"January"}, {"id":2,"name":"February"} ];
for (let i = 0; i < months.length; i++) {
console.log(`${i} id:${months[i].id}, name:${months[i].name}`)
}
輸出：
0 id:1, name:January
1 id:2, name:February
將物件新增到 JSON 物件陣列
我們建立了一個物件陣列並迭代它們。現在讓我們看看如何向 JSON 陣列新增元素。我們可以使用 .push() 函式將一個 JSON 物件新增到陣列的末尾。.unshift() 函式在 JSON 陣列的開頭新增一個元素。.splice() 在陣列中的指定索引處插入一個物件。請參考以下描述這些函式用法的程式碼。
var months = [ {"id":1,"name":"January"}, {"id":2,"name":"February"} ];
months.push({"id":4,"name":"April"});
console.log(JSON.stringify(months));
months.unshift({"id":12,"name":"December"})
console.log(JSON.stringify(months));
months.splice(3, 0, {"id":3,"name":"March"});
console.log(JSON.stringify(months));
輸出：
[{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":4,"name":"April"}]
[{"id":12,"name":"December"},{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":4,"name":"April"}]
[{"id":12,"name":"December"},{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":3,"name":"March"},{"id":4,"name":"April"}]
請注意，我們可以使用 .splice() 函式將陣列中的物件替換為作為引數傳遞的新值。.splice() 方法的第一個引數是我們執行操作的索引。作為第二個引數，我們提到了我們希望替換的元素數量。最後一個引數是我們插入到陣列中的值。
從 JSON 物件陣列中刪除物件
我們可以以類似於簡單 JavaScript 陣列的方式從物件陣列中刪除元素。我們可以使用 javascript 的 .pop() 方法從 JSON 物件陣列的末尾刪除元素。.shift() 從 JSON 物件陣列的開頭刪除一個物件。.splice() 函式刪除 JSON 陣列指定索引處的元素。參考以下程式碼。
var months = [{"id":12,"name":"December"},{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":3,"name":"March"},{"id":4,"name":"April"}];
months.shift();
console.log(JSON.stringify(months));
months.pop();
console.log(JSON.stringify(months));
months.splice(1,1);
console.log(JSON.stringify(months));
輸出：
[{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":3,"name":"March"},{"id":4,"name":"April"}]
[{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":3,"name":"March"}]
[{"id":1,"name":"January"},{"id":3,"name":"March"}]
從 JSON 物件陣列中搜尋元素
我們可以使用 .indexOf() 或 includes() 來檢查一個元素是否存在於一個簡單的字串陣列中。但是這些方法不適用於物件陣列。我們可以使用某些類似的函式，如 .filter()、.find()、findIndex() 來檢查陣列中是否存在元素。我們可以手動迭代陣列並使用迴圈結構（如 for、while 迴圈等）檢查元素是否存在，但這可能是最後一個要考慮的選項，因為它會導致大量程式碼。javascript 內建函式如 .filter()、.find()、findIndex() 可用於在 JSON 物件陣列中搜尋物件。.filter() 函式返回一個包含滿足特定條件的物件的陣列，.find() 返回滿足作為行內函數傳遞給它的條件的物件，.findIndex() 將返回如果可以在陣列中找到物件的索引，則返回 -1。因此，通過了解函式的返回型別，我們可以在 JSON 物件陣列中設計搜尋功能。參考以下程式碼可以更好地理解 .filter()、.find()、findIndex() 的用法。
var months = [{"id":12,"name":"December"},{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":3,"name":"March"},{"id":4,"name":"April"}];
(months.filter(i => i.name === "April").length) ? console.log("April month found") : console.log("Not found");
(months.find(i => i.name==="January") != {}) ? console.log("January month found") : console.log("Not found");
(months.findIndex(i => i.name==="April") > -1) ? console.log("April month found") : console.log("Not found");
輸出：
April month found
January month found
April month found