快捷導(dǎo)航

JavaScript將數(shù)組轉(zhuǎn)為對象與JSON對象字符串轉(zhuǎn)數(shù)組方法詳解

更新時間：2022年11月14日 22:42:00 投稿：wdc

這篇文章主要介紹了JavaScript將數(shù)組轉(zhuǎn)為對象與JSON對象字符串轉(zhuǎn)數(shù)組方法詳解,需要的朋友可以參考下

JavaScript將數(shù)組轉(zhuǎn)為對象（JS數(shù)組轉(zhuǎn)對象工作經(jīng)常用）

我想獲取一個元素數(shù)組，并將它們轉(zhuǎn)換為一個對象。數(shù)組中的元素需要是對象的鍵，帶有一些默認的空字符串，作為以后要更改的值。

['name','age','city', 'town', 'country']

{
  name: "",
  age: "",
  city: "",
  town: "",
  country: ""
}

最后我發(fā)現(xiàn)我們可以使用數(shù)組的reduce方法。

我們可以創(chuàng)建一個空對象，傳遞數(shù)組項并使用它們動態(tài)創(chuàng)建對象鍵。

const userChoices = ['name','age','city', 'town', 'country'];

const result = userChoices.reduce((acc, curr) => {
    acc[curr] = ""
    return acc
}, {})

result.name = "calvin"

console.log(result)

空對象用作累加器，該累加器被傳遞回函數(shù)并填充數(shù)組中的下一項。

acc是我們試圖填充并返回的東西，而curr是我們正在迭代的數(shù)據(jù)中處理的當前項。

js中JSON對象字符串轉(zhuǎn)數(shù)組

給定一個JSON字符串，任務(wù)是將JSON字符串轉(zhuǎn)換為JSON對象數(shù)組。

這個數(shù)組包含在JavaScript的幫助下從JSON字符串中獲得的JavaScript對象的值。解決這一問題的方法有兩種:

方法一

首先使用JSON. parse()方法將JSON字符串轉(zhuǎn)換為JavaScript對象，然后使用push()方法取出對象的值并將它們推入數(shù)組。

<!DOCTYPE HTML>  
<html>  
  
<head>  
    <title>  
        How to convert JSON string to array 
        of JSON objects using JavaScript? 
    </title> 
</head>  
  
<body style = "text-align:center;">  
      
    <h1 style = "color:green;" >  
        GeeksForGeeks  
    </h1> 
      
    <p id = "GFG_UP"></p> 
      
    <button onclick = "myGFG()"> 
        Click Here 
    </button> 
      
    <p id = "GFG_DOWN"></p> 
      
    <script> 
        var up = document.getElementById("GFG_UP"); 
          
        var JS_Obj =  
        '{"prop_1":"val_1", "prop_2":"val_2", "prop_3" : "val_3"}'; 
          
        up.innerHTML = "JSON string - '" + JS_Obj + "'"; 
          
        var down = document.getElementById("GFG_DOWN"); 
          
        function myGFG() { 
            var obj = JSON.parse(JS_Obj); 
            var res = []; 
              
            for(var i in obj) 
                res.push(obj[i]); 
              
            down.innerHTML = "Array of values - [" 
                            + res + "]"; 
        } 
    </script>  
</body>  
  
</html>

方法二

此方法也是相似的，只是使用不同的方法。使用eval()方法將JSON字符串轉(zhuǎn)換為JavaScript對象，然后取出對象的值并使用push()方法將它們推到數(shù)組中。

<!DOCTYPE HTML>  
<html>  
  
<head>  
    <title>  
        How to convert JSON string to array 
        of JSON objects using JavaScript? 
    </title> 
</head>  
  
<body style = "text-align:center;">  
      
    <h1 style = "color:green;" >  
        GeeksForGeeks  
    </h1> 
      
    <p id = "GFG_UP"></p> 
      
    <button onclick = "myGFG()"> 
        Click Here 
    </button> 
      
    <p id = "GFG_DOWN"></p> 
      
    <script> 
        var up = document.getElementById("GFG_UP"); 
          
        var JS_Obj =  
        '{"prop_1":"val_1", "prop_2":"val_2", "prop_3" : "val_3"}'; 
          
        up.innerHTML = "JSON string - '" + JS_Obj + "'"; 
          
        var down = document.getElementById("GFG_DOWN"); 
          
        function myGFG() { 
            var obj = eval('(' + JS_Obj + ')'); 
            var res = []; 
              
            for(var i in obj) 
                res.push(obj[i]); 
              
            down.innerHTML = "Array of values - [" 
                            + res + "]"; 
        } 
    </script>  
</body>  
  
</html>

更多關(guān)于JavaScript數(shù)組轉(zhuǎn)對象、JSON對象字符串轉(zhuǎn)數(shù)組方法請查看下面的相關(guān)鏈接

您可能感興趣的文章: