快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

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

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

result.name = "calvin"

console.log(result)

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

acc是我們?cè)噲D填充并返回的東西，而curr是我們正在迭代的數(shù)據(jù)中處理的當(dāng)前項(xiàng)。

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

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

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

方法一

首先使用JSON. parse()方法將JSON字符串轉(zhuǎn)換為JavaScript對(duì)象，然后使用push()方法取出對(duì)象的值并將它們推入數(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對(duì)象，然后取出對(duì)象的值并使用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)對(duì)象、JSON對(duì)象字符串轉(zhuǎn)數(shù)組方法請(qǐng)查看下面的相關(guān)鏈接

您可能感興趣的文章: