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

JavaScrip将数组转为对象（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>
<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>

更多关于JavaScrip数组转对象、JSON对象字符串转数组方法请查看下面的相关链接

赞 (0)

相关推荐

  • JavaScript 弱引用强引用底层示例详解

    目录 正文 1. 弱引用 2. 强引用 3. JavaScript 的垃圾收集 3.1 可达性 4. Set VS WeakSet 5. Map VS WeakMap 6. WeakMap 的应用 6.1 缓存 6.2 额外的数据存储 7. 小结 正文 内存和性能管理是软件开发的重要方面,也是每个软件开发人员都应该注意的方面.虽然弱引用很有用,但在 JavaScript 中并不经常使用.在 ES6 版本中,JavaScript 引入了 WeakSet 和 WeakMap. 1. 弱引用 与强引用

  • JavaScript中原始值和引用值深入讲解

    JavaScript中原始值和引用值深入讲解

    目录 值和引用相关内容 1. 简单值(原始值) 2. 复杂值(引用值) 3. 访问方式 4. 比较方式 5. 动态属性 6. 变量赋值 灵魂拷问 总结 值和引用相关内容 在 JavaScript 中,数据类型整体上来讲可以分为两大类:基本类型和引用数据类型 基本数据类型,一共有 6 种: string,symbol,number,boolean,undefined,null 其中 symbol 类型是在 ES6 里面新添加的基本数据类型. 引用数据类型,就只有 1 种: object 基本数据类

  • Javascript Object对象类型使用详解

    目录 1. 生成方法 2. 操作属性 2.1 读取 2.2 赋值 2.3 删除 2.4 遍历 2.5 判断属性是否存在 3. with 语句 总结 1. 生成方法 对象是javaScript中的一种数据类型,它是key-value的合集,是无序的 const obj = { name: 'ian',age: 21}; //key使用变量 const gender = 'gender'; const obj = { [gender]: 'male'}; 对象的key必须符合标识符的规则,写的时候k

  • js中对象深拷贝方法总结

    快速克隆(存在数据丢失问题) – JSON.parse/stringify 如果不在对象中使用Date.functions.undefined.Infinity.RegExps.Maps.Sets.blob.FileLists.ImageDatas.或其他复杂类型,则深入克隆对象库可以使用非常简单的一行代码. 简单的来说有以下问题: 会忽略 undefined 会忽略 symbol 不能序列化函数 不能解决循环引用的对象 JSON.parse(JSON.stringify(object)) co

  • 纯 JS 实现的轻量化图片编辑器实例详解

    纯 JS 实现的轻量化图片编辑器实例详解

    目录 介绍 一款纯 JS 实现的轻量化图片编辑器 Optimizer 框架特点 Optimizer 框架使用 启动 场景管理器 (Scene) 页面事件Event 鼠标事件 键盘事件 注册组件 Component 使用组件 总结 介绍 因为一些特点的工作场景, 写文章的需要每次处理一些图片, 在上面加说明文字, 或者加一些图形 刚开始使用 PPT 来处理, 一张张复制过去, 做一些边框阴影处理, 再加一些图形, 然后再导出来复制到需要的地方, 而且导出后的图片之后可能不会再使用了还要清理. 图片

  • JavaScript代码优雅，简洁的编写技巧总结

    1. 强类型检查 用===代替 == // 如果处理不当,它会极大地影响程序逻辑.这就像,你想向左走,但由于某种原因,你向右走 0 == false // true 0 === false // false 2 == "2" // true 2 === "2" // false // 例子 const value = "500"; if (value === 500) { console.log(value); // 条件不成立,不会进入 } i

  • JavaScript日拱算法题解滑动窗口的最大值示例

    JavaScript日拱算法题解滑动窗口的最大值示例

    目录 题目: 题解: 第一反应 JavaScript 实现 第二反应 JS 实现 小结: 题目: 给定一个数组 nums 和滑动窗口的大小 k,请找出所有滑动窗口里的最大值. 示例: 输入: nums = [1,3,-1,-3,5,3,6,7], 和 k = 3 输出: [3,3,5,5,6,7] 解释: 滑动窗口的位置 最大值 --------------- ----- [1 3 -1] -3 5 3 6 7 3 1 [3 -1 -3] 5 3 6 7 3 1 3 [-1 -3 5] 3 6

  • 使用Java构造和解析Json数据的两种方法(详解一)

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包. 在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面首先介绍用json-lib构造和解析Json数据的方法

  • 使用Java构造和解析Json数据的两种方法(详解二)

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包. 在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面接着介绍用org.json构造和解析Json数据的方法

  • AJAX实现JSON与XML数据交换方法详解

    目录 1.JS中如何创建和访问JSON对象 2.基于JSON的数据交换 3.基于XML的数据交换 1.JS中如何创建和访问JSON对象 (1)在javascript语言中怎么创建一个json对象,语法是什么? "属性名" : 属性值,"属性名" : 属性值.........的格式! 注意:属性值的数据类型随意:可能是数字,可能是布尔类型,可能是字符串,可能是数组,也可能是一个json对象..... <!DOCTYPE html> <html lan

  • 对python中Json与object转化的方法详解

    python提供了json包来进行json处理,json与python中数据类型对应关系如下: 一个python object无法直接与json转化,只能先将对象转化成dictionary,再转化成json:对json,也只能先转换成dictionary,再转化成object,通过实践,源码如下: import json class user: def __init__(self, name, pwd): self.name = name self.pwd = pwd def __str__(s

  • Go语言JSON解析器gjson使用方法详解

    目录 gjson 安装 使用 gjson GJSON 是一个Go包,它提供了一种从json文档中获取值的快速简单的方法.它具有单行检索.点符号路径.迭代和解析 json 行等功能. 还可以查看SJSON以修改 json,以及JJ命令行工具. 本自述文件是如何使用 GJSON 的快速概述,有关更多信息,请查看GJSON 语法. github 的地址在这里. 安装 安装gjson,使用的是go传统的安装方法: go install github.com/tidwall/gjson@latest 在文

  • Python对象与json数据的转换问题实例详解

    目录 JSON 函数 使用 JSON 函数需要导入 json 库:import json. json.dumps 语法 实例 实例 实例 json.loads 语法 实例 实例 使用第三方库:Demjson 环境配置 JSON 函数 encode 语法 实例 实例 decode 语法 实例 实例 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写. JSON 函数 使用 JSON 函数需要导入 json 库:import json. 函

  • python实现对象列表根据某个属性排序的方法详解

    本文实例讲述了python实现对象列表根据某个属性排序的方法.分享给大家供大家参考,具体如下: 对于一个已有的python list, 里面的内容是一些对象,这些对象有一些相同的属性值, 在一些特定的情况下,需要自己选择特定的排序,也就是根据某一个具体的属性来排序,在网上找了下资料,一般来说有两种方法,但从根本上来说,还是调用了list.sort 方法来实现.下面是简单的测试代码片段: #coding:utf-8 class Person: def __init__(self,name,age,

  • 后端将数据转化为json字符串传输的方法详解

    前言 在写后端的c层返回字段断言的时候,进行对于user对象的isAdmin字段断言.相关实体类字段如下 /** * 是否是超级管理员 */ private Boolean isAdmin = false; public Boolean getAdmin() { return isAdmin; } public void setAdmin(Boolean admin) { isAdmin = admin; } 当我断言时,我断言isAdmin字段存在 但是他报错说不存在$.isAdmin. 后端

  • 探讨PHP JSON中文乱码的解决方法详解

    我们知道在使用Ajax技术与PHP后台交互时,中文乱码是常有的事,JSON作为与XML类似的数据交换格式,在PHP用来进行交互时也会出现中 文乱码的情况,解决PHP JSON中文乱码的方法思路其实与PHP Ajax传值中文字符乱码的解决方法类似,下面我以教程形式详细介绍下解决PHP JSON中文乱码的方法. 为什么PHP与JSON交互时会出现中文乱码? 由于JSON与JS一样,对于客户端的字符是以UTF8的形式处理,即JSON提交或接受返回的字符是以UTF8形式处理,当与PHP交互时,如果数据库

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

    JavaScrip将数组转为对象(JS数组转对象工作经常用) 我想获取一个元素数组,并将它们转换为一个对象.数组中的元素需要是对象的键,带有一些默认的空字符串,作为以后要更改的值. ['name','age','city', 'town', 'country'] { name: "", age: "", city: "", town: "", country: "" } 最后我发现我们可以使用数组的redu

随机推荐