JavaScript数组转对象与JSON字符串转数组实现方法

作者:纸飞机

时间:2026-10-25

浏览:396

本文介绍JavaScript中两种常见数据转换技巧:利用reduce方法将数组元素动态转换为对象键,以及通过JSON.parse或eval将JSON字符串解析为对象数组。文章包含具体代码示例与操作步骤,帮助开发者快速掌握相关实现逻辑。

文章目录

JavaScript实现数组转换为对象(JS数组转对象在实际工作中应用广泛)

目标是将一组元素组成的数组转换为对象结构。数组中的每个元素应作为对象的键,并赋予默认的空字符串值,以便后续进行更新操作。

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

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

最终确定利用数组的reduce方法来实现这一转换。

通过初始化一个空对象,遍历数组项并利用其动态生成对象的键值对。

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

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

result.name = "calvin"

console.log(result)

空对象充当累加器角色,该累加器在每次迭代中被传递回函数,并依次填入数组中的下一项数据。

acc代表正在被填充并最终返回的目标对象,而curr代表当前迭代处理的数据项。

JavaScript中将JSON对象字符串转换为数组的方法

输入为一个JSON字符串,核心任务是将该字符串解析并转换为包含JSON对象的数组。

生成的数组包含从JSON字符串解析得到的JavaScript对象的具体值。解决此问题存在两种主要途径:

第一种方法

首先调用JSON.parse()方法将JSON字符串解析为JavaScript对象,随后利用push()方法提取对象的值并将其推入目标数组。

<!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字符串转换为JavaScript对象,提取对象值后使用push()方法将其推入数组。

<!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> 

如需了解更多关于JavaScript数组转对象及JSON对象字符串转数组的技术细节,请参阅下方的相关链接

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章