前端javascript 專案中json 資料如何轉為數組

作者：Eve Cole 更新時間：2025-03-17 04:00:03

Downcodes小編帶你了解前端JavaScript中JSON資料轉為陣列的幾種方法。在前端開發中，經常需要將從伺服器取得的JSON資料轉換為JavaScript數組進行處理。本文將詳細介紹三種常用的方法：JSON.parse()、Object.keys()和Object.entries()，並結合實例程式碼講解如何使用這些方法將JSON資料有效率地轉換為數組，以及如何利用數組方法進行後續數據處理。此外，文章也提供了相關的常見問題解答，幫助你更好地理解和應用這些方法。

在前端JavaScript專案中，將JSON資料轉為陣列是一種非常常見且有價值的操作。這可以透過使用JSON.parse()方法、使用Object.keys()方法、以及利用ES6的Object.entries()方法來實現。這些方法可以簡單、有效率地將JSON轉換為陣列形式，以便於後續的資料處理和操作。使用JSON.parse()方法是最直接且常用的一個方法，孟學武具體展開。透過JSON.parse()，我們可以將JSON格式的字串解析成JavaScript物件或陣列。它是處理伺服器返回資料和實現複雜資料結構轉換的重要手段。

一、 JSON.PARSE()方法

JSON.parse()方法能夠將一個JSON格式的字串解析成JavaScript的物件或陣列。這對於前端開發是極為重要的，因為從伺服器取得的資料通常是JSON字串形式，而前端需要將這些資料轉換為JavaScript能夠操作的物件或陣列以便使用。首先，簡單地呼叫JSON.parse()並傳遞一個JSON字串作為參數，即可得到一個JavaScript陣列或物件。

具體步驟包括從伺服器取得JSON格式的字串，然後使用JSON.parse()對其進行解析。例如，如果你有一個JSON字串表示的使用者列表，你可以將這個字串傳遞給JSON.parse()，從而獲得一個JavaScript數組，每個數組元素都是一個使用者物件。

const jsonString = '[{name: John Doe, age: 30}, {name: Jane Doe, age: 25}]';

const jsonArray = JSON.parse(jsonString);

console.log(jsonArray);

// 輸出: [ { name: 'John Doe', age: 30 }, { name: 'Jane Doe', age: 25 } ]

二、 OBJECT.KEYS()方法

當你擁有一個JSON對象，並且想要將其鍵或值轉換為數組，Object.keys()方法就非常有用了。這個方法傳回一個包含所有給定物件本身可枚舉屬性名的陣列。

詳細操作是先使用Object.keys()取得物件的所有鍵，然後可以透過映射這些鍵來取得對應的值，最終形成一個新的陣列。這個技巧對於將JSON物件的資料轉換為陣列格式，以便於使用陣列的各種方法進行操作是很有幫助的。

const userObject = { 1: John Doe, 2: Jane Doe };

const keysArray = Object.keys(userObject);

console.log(keysArray);

// 輸出: ['1', '2']

const valuesArray = keysArray.map(key => userObject[key]);

console.log(valuesArray);

// 輸出: ['John Doe', 'Jane Doe']

三、 OBJECT.ENTRIES()方法

ES6引入了Object.entries()方法，這為將JSON物件轉換成陣列提供了另一種簡單途徑。它傳回一個數組，數組中的每個元素都是另一個包含兩個元素的數組，第一個元素是物件的鍵，第二個元素是對應的值。

使用Object.entries()方法可以直接得到一個二維數組，非常適合需要同時操作鍵和值的場景。

const userObject = { 1: John Doe, 2: Jane Doe };

const entriesArray = Object.entries(userObject);

console.log(entriesArray);

// 輸出: [ ['1', 'John Doe'], ['2', 'Jane Doe'] ]

四、使用陣列方法處理轉換後的數據

一旦JSON資料被轉換為數組，就可以利用JavaScript數組提供的豐富方法對這些資料進行進一步的處理了。例如，使用map()、filter()和reduce()等高階函數對陣列進行遍歷、過濾和累加操作。

數組的各種操作方法可以實現複雜的資料處理邏輯。透過map()方法可以對數組的每個元素進行轉換，filter()方法可以依據條件過濾出數組中符合條件的元素，而reduce()方法可以累加處理數組中的元素，實現從數組到某個單一值的轉換。

const jsonArray = [{'id': 1, 'score': 90}, {'id': 2, 'score': 80}, {'id': 3, 'score': 85}];

// 使用map()增加分數

const increasedScores = jsonArray.map(user => ({ ...user, score: user.score + 10 }));

console.log(increasedScores);

// 輸出: [{id: 1, score: 100}, {id: 2, score: 90}, {id: 3, score: 95}]

// 使用filter()過濾出分數超過85的用戶

const highScores = increasedScores.filter(user => user.score > 85);

console.log(highScores);

// 輸出: [{id: 1, score: 100}, {id: 3, score: 95}]

// 使用reduce()計算總分

const totalScore = increasedScores.reduce((total, user) => total + user.score, 0);

console.log(totalScore);

// 輸出: 285

透過上述方法，從JSON.parse()到陣列的方法處理，可以實作從JSON資料到數組，再到數組的深入處理，建構起一套強大的資料處理流程。這對於前端開發不僅是一個技術問題，更是一個能夠提升資料操作彈性與效率的解決方案。

前端javascript 專案中json 資料如何轉為數組

一、 JSON.PARSE()方法

二、 OBJECT.KEYS()方法

三、 OBJECT.ENTRIES()方法

四、 使用陣列方法處理轉換後的數據

相關問答FAQs：

四、使用陣列方法處理轉換後的數據