將 JSON 物件轉換為 JavaScript 陣列

Shraddha Paghdar 2023年1月30日 2022年5月10日
  1. 使用 for...in 迴圈將 JSON 物件轉換為 JavaScript 中的陣列
  2. 使用 Object.entries() 迴圈將 JSON 物件轉換為 JavaScript 中的陣列
將 JSON 物件轉換為 JavaScript 陣列

與許多其他程式語言一樣,JavaScript 中的物件可以與現實生活中的物件進行比較。在 JavaScript 中,物件是具有屬性和型別的獨立實體。

例如,將其與杯子進行比較。汽車是具有屬性的物件。汽車具有顏色、設計、型號、品牌等。同樣,JavaScript 物件可以具有定義其特徵的屬性。

陣列是特殊型別的物件,其鍵以數字形式預定義。任何 Javascript 物件都可以轉換為陣列。陣列必須使用整數而不是字串作為元素索引。

在本文中,我們將學習如何將 JSON 物件轉換為陣列。

使用 for...in 迴圈將 JSON 物件轉換為 JavaScript 中的陣列

要將物件轉換為陣列,可以使用 JavaScript 中的 for...in 迴圈。它遍歷物件的所有字串編碼的可列舉屬性,包括繼承的可列舉屬性。例如,讓我們建立一個具有兩個屬性的物件,並使用 for...in 迴圈將其轉換為陣列。請參閱下面的程式碼。

語法:

for (variable in object) {
  statement
}

該函式迭代 object變數 在每次迭代期間被分配一個不同的屬性名稱。此方法僅從 object 中提取可列舉屬性。有關更多資訊,請閱讀 for...in 方法的文件。

const object = {
  1: 'Hello',
  2: "World"
};
const array = [];

for(var i in object) {
    array.push([i,object[i]]);
}
console.log(array)

在上面的示例中,我們定義了物件 1 和 2 的兩個屬性。當你迭代物件時,會檢查物件中的所有屬性,並將鍵與值一起推送到陣列中。當你在任何瀏覽器中執行上述程式碼時,它會列印出類似這樣的內容。

輸出:

[["1", "Hello"], ["2", "World"]]

使用 Object.entries() 迴圈將 JSON 物件轉換為 JavaScript 中的陣列

Object.entries() 方法返回特定於給定物件的字串鍵可列舉屬性對陣列。它對應於帶有 for...in 迴圈的迭代。唯一的區別是 for...in 迴圈還列出了原型字串的屬性。

Object.entries() 以與 for...in 迴圈提供的順序相同的順序返回陣列。

語法:

Object.entries(obj);

entries() 方法將 Object 作為引數,返回其自己的可列舉字串鍵屬性對。它返回給定物件自己的可列舉字串鍵屬性對的陣列。Object.entries() 返回一個陣列,其元素是物件中的可列舉字串鍵屬性對。

有關更多資訊,請閱讀 Object.entries() 方法的文件。

const object = {
  1: 'Hello',
  2: "World"
};

const array = []

for (const [key, value] of Object.entries(object)) {
    array.push([`${key}`, `${value}`]);
}
console.log(array)

在上面的例子中,我們定義了一個陣列的兩個屬性。當你使用條目迭代物件時,它將為你提供要推送到陣列的鍵和屬性。當你在任何瀏覽器中執行上述程式碼時,它會列印出類似這樣的內容。

輸出:

[["1", "Hello"], ["2", "World"]]
Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

相關文章 - JavaScript JSON

相關文章 - JavaScript Object