如何使用 JavaScript 將物件陣列轉換為陣列？

我們可以使用 Object.values() 方法、Array push() 方法和 for…of 迴圈來使用 JavaScript 將物件陣列轉換為陣列。首先，我們使用 for…of 迴圈訪問每個物件，然後應用 Object.values() 方法來訪問單個物件的 value。然後使用 Array push() 方法將值新增到陣列中。在本文中，我們將詳細討論這種方法。

讓我們來看一個例子，以便了解這個問題。

給定一個物件陣列，任務是將物件陣列轉換為物件值的陣列。以下是我們想要實現的示例。

給定的物件陣列 -

let carObj = [
   { name: "John", car: "Ford" },
   { name: "Mark", car: "BMW" },
   { name: "Ben", car: "Toyota" }
]

應該轉換為 -

let carObj = ["John", "Ford", "Mark", "BMW", "Ben", "Toyota" ]

有多種方法可以實現這一點。其中一些是 -

  • 使用 for...of 迴圈

  • 使用 array.map 方法

使用 for…of 迴圈

for…of 迴圈用於遍歷陣列或任何可迭代物件的 value。要使用 for...of 迴圈將物件陣列轉換為陣列，我們使用以下步驟。

步驟

  • 建立一個空陣列，我們在其中儲存結果值。

  • 使用 for...of 迴圈遍歷物件陣列

  • 我們知道陣列的項是物件，我們想要其值。

  • 透過 array.push 和 Object.values() 方法將當前物件的值推入空陣列。

示例

在這個例子中，我們有一個物件陣列。這些物件包含姓名和汽車型號。我們正在提取這些值並將它們分配到一個數組中，使用 for..of 迴圈。

<html>
<head>
   <title>How to convert Object’s array to an array using JavaScript?</title>
</head>
<body>
   <h3 id="demo">Converting Object’s array to an array using for...of loop</h3>
   <script>
      
      // The car object
      let carObj = [
         { name: "John", car: "Ford" },
         { name: "Mark", car: "BMW" },
         { name: "Ben", car: "Toyota" }
      ]
      
      // Initialize an empty array
      let arr = [];
      
      // Loop through the car object
      for (i of carObj) {
         
         // Push the values of every object into arr
         arr.push(...Object.values(i))
      }
      
      // Print the arr
      document.write("Final Array: " + arr) 
   </script>
</body>
</html>

使用 Array.map() 方法

Array.map() 方法對陣列的每個元素呼叫一個函式，然後返回一個新陣列。要使用 Array.map() 方法將物件陣列轉換為陣列，我們使用以下步驟。

  • 在物件陣列上應用 map 方法。

  • 每次迭代後，返回您要提取的鍵的值。

  • 您將獲得該特定鍵的所有值的陣列。

示例

在這個例子中，我們有一個物件陣列。這些物件包含姓名和汽車型號。我們正在一個單獨的陣列中提取所有汽車，並在另一個單獨的陣列中提取所有姓名。

<html>
<head>
   <title>Example- How to convert Object's array to an array using JavaScript</title>
</head>
<body>
   <h3 id="demo">Converting Object's array to an array using Array.map() method</h3>
   <script>
      
      // The car object
      let carObj = [
         { name: "John", car: "Ford" }, 
         { name: "Mark", car: "BMW" },
         { name: "Ben", car: "Toyota" }
      ]
      let nameArr = carObj.map((item) => item.name)
      let carArr = carObj.map((item) => item.car)
      
      // Print the Arrays
      document.write("Names Array : " + nameArr + "<br>")
      document.write("Cars Array : " + carArr)
   </script>
</body>
</html>

更新於: 2023年2月21日

8K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告