在 JavaScript 中將兩個陣列轉換為 JSON 物件

給定兩個陣列，任務是將這兩個陣列轉換為一個 JSON 物件。其中第一個陣列的元素是物件的鍵，第二個陣列的元素是物件的值。

輸入-輸出場景

讓我們看看如何將兩個陣列轉換為 JSON 物件的場景。假設有兩個陣列包含一些元素。現在，我們需要將這兩個陣列轉換為一個 JSON 物件。

Array1 = [1, 2, 3, 4]; 
Array2 = ['A', 'B', 'C', 'D']; 
Output = {"1":"A", "2":"B", "3":"C", "4":"D"} //JSON object

在本文中，我們將討論在 Javascript 中使用不同方法將兩個陣列轉換為 JSON 物件的不同方法。

使用 forEach() 方法

forEach() 方法將為陣列中的每個元素執行指定的函式一次。以下是 forEach() 方法的語法。

forEach((ele, index) => { /* … */ })

其中，

  • ‘ele’ 表示正在處理的陣列的當前元素。

  • ‘index’ 是當前陣列元素的索引。

返回值為 undefined。

示例

為了將兩個陣列轉換為 JSON 物件，我們使用了 forEach() 方法來迭代第一個陣列。我們使用了索引從第二個陣列中獲取元素。在每次迭代中，forEach() 方法都會將鍵值對分配給 JSON 物件。

以下是將兩個陣列轉換為 JSON 物件的示例。

<!DOCTYPE html> 
<html> 
<head> 
   <title>Converting two arrays into a JSON object in JavaScript</title>
</head> 
<body> 
   <p id="para"></p>  
   <script> 
      const arr1 = ['Item', 'color', 'weight', 'cost']; 
      const arr2 = ['Washing machine', 'White', 60, '20000'];  
      function func(arr1, arr2){ 
         const obj = {};  
         arr1.forEach((Curr_element, index) => { 
            obj[Curr_element] = arr2[index]}) 
            return obj; 
      }; 
      document.getElementById("para").innerHTML = JSON.stringify(func(arr1, arr2)); 
   </script> 
</body> 
</html>

使用 object.assign() 方法

JavaScript 中的 object.assign() 方法會將一個或多個源物件的所有可列舉屬性複製到目標物件。

示例

在下面的示例中，我們建立了兩個陣列並將這兩個陣列作為引數傳遞給函式。然後我們使用擴充套件運算子 (… ) 複製第一個陣列，並使用 map() 方法中傳遞的函式將第一個陣列的每個元素與第二個陣列的元素關聯。然後 Object.assign() 會將這些陣列值轉換為具有鍵值對的物件。

<!DOCTYPE html> 
<html> 
<head> 
   <title>Converting two arrays into a JSON object in JavaScript</title> 
</head> 
<body> 
   <p id="para"></p>  
   <script> 
      let Stud = ['Nik', 'Tej', 'Krish']; 
      let Rno = [7, 3, 10];  
      function func(Stud, Rno){ 
         return Object.assign(...Stud.map((element, index)=>({[element]: Rno[index]}) )); 
      }; 
      document.getElementById("para").innerHTML = JSON.stringify(func(Stud, Rno)); 
   </script> 
</body> 
</html>

使用 push() 方法和 for 迴圈

JavaScript 中的 push() 方法用於向陣列新增新元素。在以下示例中，我們嘗試將陣列轉換為 JSON 物件。

const options = ['A', 'B', 'C', 'D']; 
const values = [true, false, false, false]; 
const mapArrays = (options, values) => { 
   const res = []; 
   for(let i = 0; i < options.length; i++){ 
      res.push({ 
         opt: options[i], 
         val: values[i] 
      }); 
   }; 
   return res; 
}; 
console.log(mapArrays(options, values));

更新於: 2022-09-23

5K+ 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告