首页 > 网络编程 > JavaScript > 基础知识 > JavaScript将数组转为对象与JSON对象字符串转数组

JavaScript将数组转为对象与JSON对象字符串转数组方法详解

投稿:wdc

这篇文章主要介绍了JavaScript将数组转为对象与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是我们正在迭代的数据中处理的当前项。

js中JSON对象字符串转数组

给定一个JSON字符串,任务是将JSON字符串转换为JSON对象数组。

这个数组包含在JavaScript的帮助下从JSON字符串中获得的JavaScript对象的值。解决这一问题的方法有两种:

首先使用JSON. parse()方法将JSON字符串转换为JavaScript对象,然后使用push()方法取出对象的值并将它们推入数组。

<!DOCTYPE HTML>  
    <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  
    <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>  
    <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  
    <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对象字符串转数组方法请查看下面的相关链接

您可能感兴趣的文章:
  • ES6基础语法之函数介绍
    ES6基础语法之函数介绍
    2022-05-05
  • JavaScript中变量的作用域详解
    JavaScript中变量的作用域详解
    2022-03-03
  • javascript中undefined与null的区别
    javascript中undefined与null的区别
    2022-06-06
  • typescript常见高级技巧总结
    typescript常见高级技巧总结
    2022-10-10
  • 关于uni-app页面Page和组件Component生命周期执行的先后顺序
    关于uni-app页面Page和组件Component生命周期执行的先后顺序
    2022-10-10
  • 关于JavaScript的URL.createObjectURL()的使用方法
    关于JavaScript的URL.createObjectURL()的使用方
    2022-10-10
  • 关于前端要知道的 AST知识
    关于前端要知道的 AST知识
    2022-10-10
  • 关于什么是javascript模块化以及为何使用模块化开发
    关于什么是javascript模块化以及为何使用模块化开发
    2022-10-10
  • 美国设下计谋,用娘炮文化重塑日本,已影响至中国
    美国设下计谋,用娘炮文化重塑日本,已影响至中国
    2021-11-19
  • 时空伴随者是什么意思?时空伴随者介绍
    时空伴随者是什么意思?时空伴随者介绍
    2021-11-09
  • 工信部称网盘企业免费用户最低速率应满足基本下载需求,天翼云盘回应:坚决支持,始终
    工信部称网盘企业免费用户最低速率应满足基本下载需求,天翼云盘回应:坚决支持,始终
    2021-11-05
  • 2022年放假安排出炉:五一连休5天 2022年所有节日一览表
    2022年放假安排出炉:五一连休5天 2022年所有节日一览表
    2021-10-26
  • 电脑版 - 返回首页

    2006-2023 脚本之家 JB51.Net , All Rights Reserved.
    苏ICP备14036222号