將 JSON 物件轉換為 JavaScript 陣列

JSON 是一種文字格式。如果資料是 JSON 文字，請先使用 JSON.parse() 解析成 JavaScript 值，再選取屬性或建立陣列。如果你已經有 JavaScript 物件，就不必解析，直接依需求選擇陣列的形狀：鍵值組、只有值，或自訂選取。這些操作會根據屬性建立陣列，不會自動把所有種類的物件都轉成陣列。

JavaScript 陣列是含有索引元素的物件。陣列位置從零開始，而物件列舉方法回傳的屬性名稱是字串。例如，即使物件使用看似數字的鍵，轉成條目後的鍵仍是字串。

將 JSON 文字解析為 JavaScript 物件

將有效的 JSON 字串傳給 JSON.parse()。解析結果可能是物件、陣列或其他 JSON 值，取決於字串的內容。以下範例會解析一個物件，再使用其中的欄位建立條目陣列。

執行以下範例：

本節中的程式碼以及顯示的標籤或輸出仍為英文。

const jsonText = '{"name":"Ada","role":"engineer"}';
const person = JSON.parse(jsonText);
const entries = Object.entries(person);
console.log(entries);

[ [ 'name', 'Ada' ], [ 'role', 'engineer' ] ]

如果輸入的 JSON 格式錯誤，解析時會擲出 SyntaxError；請在資料進入應用程式時驗證或處理資料。不要對已經是物件的值呼叫 JSON.parse()。詳細資訊請參閱 JSON.parse() 參考文件。

使用 Object.entries() 將物件轉成鍵值組

如果每個結果都需要包含屬性名稱和值，請使用 Object.entries(object)。它會回傳由雙元素陣列組成的陣列，例如 [key, value]。結果包含物件本身可列舉且以字串為鍵的屬性，但不包含繼承而來的屬性或以 Symbol 為鍵的屬性。看似數字的屬性名稱在回傳的鍵值組中仍是字串。

如果後續操作需要名稱和值兩者，例如用值呈現標籤，或轉換每個鍵值組，這個方法就很實用。若要進一步了解條目陣列，請參閱 JavaScript array entries。

使用 Object.values() 將物件轉成值陣列

如果不需要鍵，請使用 Object.values(object)。它會依照 Object.entries() 使用的相同屬性順序，回傳物件本身可列舉且以字串為鍵的屬性值。結果是由值組成的一維陣列，而不是 [key, value] 鍵值組陣列。如果你只會處理或顯示值，請選用這個方法；如果還需要保留每個值與其鍵的關聯，則使用 Object.entries()。

例如，若物件有 name 和 role 屬性，Object.values(object) 會產生一個包含名稱和角色值的陣列。這裡是在說明其運作方式，並非宣稱已實際執行並觀察到結果。請參閱 Object.values() 參考文件。

使用 for…in 自訂迭代

for...in 迴圈會走訪可列舉且以字串為鍵的屬性，也包括透過原型鏈繼承而來的可列舉屬性。需要在迭代時執行自訂邏輯，就可以使用它。如果結果只應包含物件本身的屬性，請在加入每個項目前使用 Object.hasOwn() 檢查。這項檢查可避免收集到繼承而來的可列舉屬性。

本節中的程式碼以及顯示的標籤或輸出仍為英文。

const object = { name: 'Ada', role: 'engineer' };
const entries = [];

for (const key in object) {
  if (Object.hasOwn(object, key)) {
    entries.push([key, object[key]]);
  }
}

console.log(entries);

[ [ 'name', 'Ada' ], [ 'role', 'engineer' ] ]

對通過檢查的自有屬性而言，這個迴圈會建立與 Object.entries() 大致相同形狀的鍵值組，同時允許你在迴圈中逐項篩選或轉換資料。若不加檢查，也可能將繼承而來的可列舉屬性加入結果。若只需要一般的鍵值組轉換，Object.entries() 更簡潔，也能直接表明用途。關於迭代行為，請參閱 for...in 參考文件。

選擇所需的陣列形狀

先確認輸入類型：JSON 文字要用 JSON.parse() 解析，現成的物件則可直接使用。接著選擇結果：要鍵值組，使用 Object.entries()；只要值，使用 Object.values()；若迭代時需要自訂篩選或轉換，則使用 for...in 並加上自有屬性檢查。兩個內建方法都只會選取物件本身可列舉且以字串為鍵的屬性；未加檢查的 for...in 也會走訪繼承而來、可列舉且以字串為鍵的屬性。這些方法都不會包含以 Symbol 為鍵的屬性。了解這項差異可避免意外加入額外項目，並讓結果陣列符合後續步驟的資料需求。