前端json对象数据处理方法汇总
在这篇文章中，讲解了如何在 JavaScript 中操作 JSON 数据，包括构建，添加、修改、删除和查找等操作。
# 前端 json 对象数据处理方法汇总
*数据分析案例*
在这篇文章中，讲解了如何在 JavaScript 中操作 JSON 数据，包括构建，添加、修改、删除和查找等操作。
## 目录
[TOC]
## 什么是 json？
JSON（JavaScript Object Notation，JS对象简谱）是一种轻量级的数据交换格式，它可以在各种编程语言中互相转换，同时其具有非常灵活的处理方式，能够像一个对象的包装类一样，也称之为是键值对结构，属性的名字通常是键，数值通常为值，如下面所示封装了很多的字段。
```json
{
"id":1,
"name":"zhao",
"sex":"男",
"age":20
}
```
json 甚至还可以包含嵌套的对象，就像下面一样，第一个用户的 ‘assistant’ 字段又嵌套着一个 json 对象。
```json
{
"id":1,
"name":"zhao",
"sex":"男",
"age":20,
"assistant":{
"id":2,
"name":"yang",
"sex":"女",
"age":22,
"assistant":{}
}
}
```
json 中也可以包含一个列表，只需要使用中括号来实现就可以，下面就是一个例子，在兴趣字段（interest）中对应的就是一个列表，里面存储了4个元素。
```json
{
"id":1,
"name":"zhao",
"sex":"男",
"age":20,
"interest":["吃", "喝", "玩", "乐"]
}
```
那么我们现在该思考一下，列表里面的数值类型可以变吗？当然是可以的，列表里面可以是任意类型，下面就是一个例子。
```json
{
"id":1,
"name":"zhao",
"sex":"男",
"age":20,
"interest":[1, 2, 3, 4]
}
```
有趣的地方又来了，能够体现出 json 灵活性的地方就是，列表里面的元素还可以是一个json对象 下面就是一个例子，assistant 字段对应的是一个列表，列表中的每一个元素是一个 json 对象。
```json
{
"id":1,
"name":"zhao",
"sex":"男",
"age":20,
"assistant":[
{
"id":2,
"name":"yang",
"sex":"女",
"age":22,
"assistant":{}
},
{
"id":3,
"name":"huai",
"sex":"男",
"age":20,
"assistant":{}
}
]
}
```
到这里我们已经见识到了 json 的各种格式，相信你也可以明白什么是 json 了。
## 如何使用 json
截止到目前，只是看过 json 数据的格式，以及体会了一下它的灵活性，但是并没有真正的上手使用过 json 数据，所以接下来我们就来进行 json 相关的知识培训！
### JS 中的 JSON 与 String 相互转换
我们知道在 JS 中 String 对象是一个常见的数据类型，而在很多情况下 json 数据也是字符串的形式，并不能够被直接使用，就像下面的JS代码一样，在这里我们就来展示如何将字符串转换为 json。
```JavaScript
// 这里的 json 是一个字符串 并不是一个 json 对象
let json = "{\"name\":\"zhao\"}"
// 所以在这里获取到 json 中的 name 属性的时候 会打印出 undefined ！因为这个根本就不是 JSON 没有 name 属性
// 这里的语法还没有学，不过不用担心，后面会讲到
console.info(json.name)
```
#### String -> json （JSON.parse）
JSON.parse 函数专用于将一个字符串解析为 json 对象，下面就是相关的示例
```
// 这里的 json 是一个字符串 并不是一个 json 对象
let json = "{\"name\":\"zhao\"}"
// 将 字符串 转换为 json 对象
json = JSON.parse(json)
// 在这里就可以打印出 zhao 了
console.info(json.name)
```
#### json -> String (JSON.stringify)
同样，既然一个 字符串可以被解析为 json 对象，那么一个 json 对象也可以被转换为一个字符串，下面就是一个示例
```
// 在这里准备一个 json 对象
let json = {"name":"zhao"}
// 将 JSON 对象转换为 字符串
json = JSON.stringify(json)
// 在这里就发现它变成字符串了 不可以打印出 其中的name属性了
console.info(json.name)
```
### 对 json 对象增加属性
截止到目前，我们已经实现了 json 对象的创建，也了解了什么是 json，但是json在创建之后可以修改吗？是可以的！接下来将开始演示 如何为 json 对象增加一个新的属性。
```JavaScript
// 在这里准备一个 json 对象
let json = {"name":"zhao"}
// 为 json 对象新增一个属性属性 age 其实之际赋值就可以了
json['age'] = 20
// 在这里我们打印出 json 对象
console.info(json)
```
运行之后的结果如下所示
```JavaScript
{
"name": "zhao",
"age": 20
}
```
### 删除 json 对象中的某个属性
在 js 中有一个 delete 关键字，通过对于此关键字的使用，可以实现将参数删除的效果，可以将它理解为C语言中的指针释放操作，使用语法为`delete <需要被删除的关键字>` 接下来就是一个具体的演示示例。
```javaScript
// 在这里准备一个 json 对象
let json = {"name":"zhao"}
// 为 json 对象新增一个属性属性 age 其实之际赋值就可以了
json['age'] = 18
// 删除掉 json 中的 name 参数
delete json['name']
// 在这里我们打印出 json 对象
console.info(json)
```
下面是运行结果，可以看到最终被删除的 name 参数消失了。
```
{
"age": 18
}
```
### 修改 json 对象中的某个属性
我们知道可以通过 `json对象名['属性名']`的方式来将 json 中的某个属性获取到，通过 `delete` 关键字的操作，相信各位也有了些猜测，`json对象名['属性名']`的方式获取到的不仅仅是一个值，可以将它理解为是一个内存地址，是属性对应的内存地址，因此删除和修改操作都是基于此进行的，根据这里的猜测，不难得出一个结论，修改 json 中的某个属性其实就是针对属性进行再一次赋值，下面就是示例。
```javaScript
// 在这里准备一个 json 对象
let json = {"name":"zhao"}
// 对于 json 中的 name 进行重新赋值
json['name'] = 'yang'
// 打印 json 对象
console.info(json)
```
而执行过程其实就如下所示，非常易于理解
```flow
pn=>start: ”json = {"name":"zhao"}“
op0=>operation: 打印：console.info(json)
op1=>operation: 打印：console.info(json)
op2=>operation: 修改：json['name'] = 'yang'
res1=>subroutine: ”json = {"name":"zhao"}“
res2=>subroutine: ”json = {"name":"yang"}“
cond=>condition: 是否要进行修改
pn->cond->e
cond(no)->res1
cond(yes)->op2->res2
```
下面是运行结果，name属性对应的数值已经成功的变为了 yang
```
{
"name": "yang"
}
```
### 迭代 json 对象
json 对象是一个可以迭代的对象，而此操作的本质其实就是取出所有的属性的名字，接下来将展示如何迭代一个 json。
```javaScript
// 在这里准备一个 json 对象
let json = {
"name1":"zhao",
"name2":"zhao",
"name3":"zhao",
"name4":"zhao",
"name5":"zhao",
}
// 开始迭代 json
for (let jsonKey in json) {
// 在迭代的时候 jsonKey 就是 json 中对应的所有的 key
console.info(jsonKey, jsonKey + '对应的值 = ' + json[jsonKey])
}
```
下面是运行结果
```
name1 name1对应的值 = zhao
name2 name2对应的值 = zhao
name3 name3对应的值 = zhao
name4 name4对应的值 = zhao
name5 name5对应的值 = zhao
```
## JSON 实战案例
### 题目
了解了如何进行 json 的基本使用 接下来进行一个案例的作答，接下来我们将提供一份数据，数据中的 ‘trends_all’ 包含很多的文章json对象，要求计算出 数据分析案例 专题 一共有多少个文章，数据分析案例的id为‘88842223’；
### 数据准备
```JavaScript
const dataset = {
"trends_all": [
{
"id": -46799614,
"title": "原神怎么达成《罗基艾威尔森及利亚姆》成就",
"sendDate": 1701319574000,
"sendId": 4,
"visibility": "所有人可见",
"dataFSPath": "/opt/web/LS-Web/user_space/zhao4/trends/-46799614/trends_text.txt",
"imagesSrc": [
"https://media.9game.cn/gamebase/ieu-gdc-pre-process/images/20231112/13/29/b9d4742f27682cc4496462aaf5af11d8.jpg"
],
"description": "发现了一拳超人，形似平民，恐怖至极，击败它即可！",
"ip": "中国 天津",
"count": 32,
"articleTopic": -44879746,
"status": "已发布"
},
{
"id": -15471917,
"title": "Axios与ECharts进行数据可视化案例",
"sendDate": 1701318683000,
"sendId": 1,
"visibility": "所有人可见",
"dataFSPath": "/opt/web/LS-Web/user_space/root1/trends/-15471917/trends_text.txt",
"imagesSrc": [
"https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1"
],
"description": "文章《 Axios 与 ECharts 进行 数据可视化 案例》主要介绍如何使用 Axios 和 ECharts 两个开源工具进行 数据可视化。演示了如何使用 Axios 处理数据，并使用 ECharts 创建图表来进行数据可视化。",
"ip": "中国 天津",
"count": 82,
"articleTopic": 88842223,
"status": "已发布"
},
{
"id": 60748618,
"title": "HUDI部署与spark集成",
"sendDate": 1701086002000,
"sendId": 1,
"visibility": "所有人可见",
"dataFSPath": "/opt/web/LS-Web/user_space/root1/trends/60748618/trends_text.txt",
"imagesSrc": [
"https://hudi.apache.org/assets/images/hudi-lake-overview-e39f80337517a0a1999d8eb5cd0ac965.png"
],
"description": "有关hudi 的部署 以及 spark hudi 集成的操作文档",
"ip": "中国 天津",
"count": 16,
"articleTopic": 83499744,
"status": "已发布"
},
{
"id": 34455384,
"title": "离线数据处理作答（第一章-公共）",
"sendDate": 1701085146000,
"sendId": 1,
"visibility": "所有人可见",
"dataFSPath": "/opt/web/LS-Web/user_space/root1/trends/34455384/trends_text.txt",
"imagesSrc": [
"http://lsb.lingyuzhao.top:8080/LS-WebBackEnd/resources_space/user_space/root1/trends/2402975/image/537558b6-f5dd-48ad-5ba1-21e93e582442.png?time=1701072387138"
],
"description": "涵盖了数据抽取，数据清洗与指标计算的题目以及作答详情",
"ip": "中国 天津",
"count": 19,
"articleTopic": 88842223,
"status": "已发布"
},
{
"id": 97871298,
"title": "原神，枫丹曲目谱子来啦！",
"sendDate": 1701012026000,
"sendId": 1,
"visibility": "所有人可见",
"dataFSPath": "/opt/web/LS-Web/user_space/root1/trends/97871298/trends_text.txt",
"imagesSrc": [
"http://lsb.lingyuzhao.top:8080/LS-WebBackEnd/resources_space/user_space/root1/trends/-19403739/image/%E9%8F%83%E7%8A%B3%E7%88%A3%E6%A3%B0%EF%BF%BD.png?time=1700141434098"
],
"description": "《苍水晶的行歌》《露景泉》为 原神 中的曲子！",
"ip": "中国 天津",
"count": 25,
"articleTopic": 20619125,
"status": "已发布"
},
{
"id": 62123467,
"title": "Java，枚举类（enum-class）的使用",
"sendDate": 1701011874000,
"sendId": 1,
"visibility": "所有人可见",
"dataFSPath": "/opt/web/LS-Web/user_space/root1/trends/62123467/trends_text.txt",
"imagesSrc": [
"http://lsb.lingyuzhao.top:8080/LS-WebBackEnd/resources_space/user_space/root1/trends/-90457712/image/ENUM.png"
],
"description": "在 Java 中，枚举，是一种特殊的类，是一个 常用的 JAVA-编程知识，我们将使用案例与解释让大家认识枚举 。",
"ip": "中国 天津",
"count": 12,
"articleTopic": -24041439,
"status": "已发布"
},
{
"id": -15790370,
"title": "正则表达式-Java篇",
"sendDate": 1700921451000,
"sendId": 1,
"visibility": "所有人可见",
"dataFSPath": "/opt/web/LS-Web/user_space/root1/trends/-15790370/trends_text.txt",
"imagesSrc": [
"http://lsb.lingyuzhao.top:8080/LS-WebBackEnd/resources_space/user_space/root1/trends/-84814346/image/%E5%A7%9D%EF%BD%85%E5%9E%AF%E7%81%8F%E4%BE%80%E6%BD%B01.jpg?time=1700141236279"
],
"description": "文章描述了有关 Java 处理 正则 相关的知识文库，敬请阅读！",
"ip": "中国 天津",
"count": 25,
"articleTopic": 17055036,
"status": "已发布"
},
{
"id": 55591292,
"title": "数组是什么？-Java版",
"sendDate": 1700913400000,
"sendId": 1,
"visibility": "所有人可见",
"dataFSPath": "/opt/web/LS-Web/user_space/root1/trends/55591292/trends_text.txt",
"imagesSrc": [
"https://img0.baidu.com/it/u=55005685,603479748&fm=253&fmt=auto&app=138&f=PNG?w=364&h=200"
],
"description": "数组 （ Array ） 是一种 数据结构 ，从名字中可以知道是 数字的组合 。本文使用 Java 演示数组使用。",
"ip": "中国 天津",
"count": 17,
"articleTopic": -24041439,
"status": "已发布"
},
{
"id": -80651947,
"title": "配置hosts文件以实现IP映射-本地域名配置",
"sendDate": 1700913207000,
"sendId": 1,
"visibility": "所有人可见",
"dataFSPath": "/opt/web/LS-Web/user_space/root1/trends/-80651947/trends_text.txt",
"imagesSrc": [
"https://img2.baidu.com/it/u=3561316732,1389843867&fm=253&fmt=auto&app=138&f=JPEG?w=475&h=245"
],
"description": "在计算机网络中， IP映射 是一种常见的网络配置，它可以将域名解析为对应的 IP地址 。然而，有时候我们可能需要在本地主机上进行 IP映射 ，以便更方便地进行网络通信。本文将介绍如何配置 hosts文件 以实现 IP映射 ，帮助您轻松地实现这一目标。",
"ip": "中国 天津",
"count": 16,
"articleTopic": -33572423,
"status": "已发布"
},
{
"id": 43641703,
"title": "正则表达式-常用正则表达式汇总",
"sendDate": 1700913075000,
"sendId": 1,
"visibility": "所有人可见",
"dataFSPath": "/opt/web/LS-Web/user_space/root1/trends/43641703/trends_text.txt",
"imagesSrc": [
"https://img0.baidu.com/it/u=4112365988,4219969191&fm=253&fmt=auto&app=138&f=JPEG?w=448&h=248"
],
"description": "你需要的 正则 有没有在这里呢？快来看一看吧！",
"ip": "中国 天津",
"count": 18,
"articleTopic": 17055036,
"status": "已发布"
},
{
"id": -90216728,
"title": "正则表达式-python篇",
"sendDate": 1700913041000,
"sendId": 1,
"visibility": "所有人可见",
"dataFSPath": "/opt/web/LS-Web/user_space/root1/trends/-90216728/trends_text.txt",
"imagesSrc": [
"http://lsb.lingyuzhao.top:8080/LS-WebBackEnd/resources_space/user_space/root1/trends/81846359/image/97bad9500b845ce3144b3702fb951983.jpeg?time=1700745933664"
],
"description": "文章描述了有关 python 处理 正则表达式 相关的知识文库，敬请阅读！",
"ip": "中国 天津",
"count": 9,
"articleTopic": 17055036,
"status": "已发布"
},
{
"id": 65428969,
"title": "【网站公告】关于网站交互功能暂时关闭-注册与登录服务暂停的通知",
"sendDate": 1700744829000,
"sendId": 1,
"visibility": "所有人可见",
"dataFSPath": "/opt/web/LS-Web/user_space/root1/trends/65428969/trends_text.txt",
"imagesSrc": [
"http://lsb.lingyuzhao.top:8080/LS-WebBackEnd/resources_space/user_space/root1/trends/24472230/image/%E9%8D%A5%E5%89%A7%E5%A2%961.png?time=1700744811893"
],
"description": "由于一些运营原因，我们的网站的对于普通用户的交互功能暂时关闭，故而无法进行注册和登录服务。对于网站中资源的访问，将不受影响，针对文章的发布，由管理者团队代发。",
"ip": "中国 天津",
"count": 14,
"articleTopic": 79268899,
"status": "已发布"
},
{
"id": -4633602,
"title": "文章功能开始上线啦",
"sendDate": 1700492691000,
"sendId": 4,
"visibility": "所有人可见",
"dataFSPath": "/opt/web/LS-Web/user_space/zhao4/trends/-4633602/trends_text.txt",
"imagesSrc": [
"http://lsb.lingyuzhao.top:8080/LS-WebBackEnd/resources_space/user_space/root1/trends/-756675/image/maxOutSizeImage.svg.png?time=1700128809156"
],
"description": "【全新功能上线！】打造更强大的文章体验，让您轻松创作、分享精彩内容！",
"ip": "中国 天津",
"count": 26,
"articleTopic": 79268899,
"status": "已发布"
},
{
"id": -90585683,
"title": "正则表达式-基础知识",
"sendDate": 1700492366000,
"sendId": 1,
"visibility": "所有人可见",
"dataFSPath": "/opt/web/LS-Web/user_space/root1/trends/-90585683/trends_text.txt",
"imagesSrc": [
"http://lsb.lingyuzhao.top:8080/LS-WebBackEnd/resources_space/user_space/root1/trends/-91799074/image/%E5%A7%9D%EF%BD%85%E5%9E%AF%E9%8D%A5%E7%82%AC%E7%88%A3.jpg?time=1700136030606"
],
"description": "文章描述了有关正则表达式相关的知识文库，敬请阅读！",
"ip": "中国 天津",
"count": 28,
"articleTopic": 17055036,
"status": "已发布"
},
{
"id": 86382276,
"title": "网站使用手册-第一篇-文章创作",
"sendDate": 1700473524000,
"sendId": 1,
"visibility": "所有人可见",
"dataFSPath": "/opt/web/LS-Web/user_space/root1/trends/86382276/trends_text.txt",
"imagesSrc": [
"http://lsb.lingyuzhao.top:8080/LS-WebBackEnd/resources_space/user_space/root1/trends/-38819245/image/%E7%81%8F%E4%BE%80%E6%BD%B0%202023-11-17%20220732.png?"
],
"description": "您可以在这里查询到有关网站中文章中心的一些信息，以及其使用方法！",
"ip": "中国 天津",
"count": 42,
"articleTopic": 79268899,
"status": "已发布"
},
{
"id": 28769805,
"title": "我是一只小小小鸟",
"sendDate": 1700237614000,
"sendId": 3,
"visibility": "所有人可见",
"dataFSPath": "/opt/web/LS-Web/user_space/Magic3/trends/28769805/trends_text.txt",
"imagesSrc": [
"image/defAcImage.svg"
],
"description": "Magic 最喜欢这首歌了 分享给你们",
"ip": "中国 天津",
"count": 35,
"articleTopic": 20619125,
"status": "已发布"
},
{
"id": 99790527,
"title": "【spark&algorithmStar】基于Spark与AS机器学习库进行常驻捐赠者数据挖掘",
"sendDate": 1700141508000,
"sendId": 1,
"visibility": "所有人可见",
"dataFSPath": "/opt/web/LS-Web/user_space/root1/trends/99790527/trends_text.txt",
"imagesSrc": [
"https://pic2.zhimg.com/80/v2-cae7aadd953bae48e793011563287f91_720w.webp"
],
"description": "【spark&algorithmStar】基于Spark与AS机器学习库进行常驻捐赠者数据挖掘，实现数据分析案例",
"ip": "中国 天津",
"count": 20,
"articleTopic": 88842223,
"status": "已发布"
}
],
"RES": "ok!!!!"
}
```
### 解答
```
// 准备一个计数器
let count = 0;
// 将 json 数据的 trends_all 属性提取出来
let datasetElement = dataset['trends_all'];
// trends_all 属性对应的是一个列表，列表中包含的就是文章 因此我们在这里直接迭代列表即可
for (let i = 0; i < datasetElement.length; i++) {
// 获取到每个文章 的 json
let obj = datasetElement[i];
// 在这里我们需要判断专题属性是否为 数据分析案例 的 id 88842223
if (obj['articleTopic'] === 88842223){
// 如果是就代表需要计数 这个文章就是我们需要的
count++;
}
}
// 最后打印结果
console.info("数据分析案例专题中的文章有：" + count + " 篇")
```
下面是运行结果
```
数据分析案例专题中的文章有：3 篇
```
=未完待续=
----
相关文章
- [《前端 json 对象数据处理方法汇总》](http://www.lingyuzhao.top/?/linkController=/articleController&link=-28687176 "《JavaScript 中的数据类型以及常见的数据处理手段》")
- [《JavaScript 中的数据类型以及常见的数据处理手段》](http://www.lingyuzhao.top/?/linkController=/articleController&link=15581853 "《JavaScript 中的数据类型以及常见的数据处理手段》")
- [《Axios与ECharts进行数据可视化案例》](http://www.lingyuzhao.top/?/linkController=/articleController&link=-15471917 "《Axios与ECharts进行数据可视化案例》")
------
***操作记录***
作者：[root](http://www.lingyuzhao.top//index.html?search=1 "root")
操作时间：2023-12-02 16:42:44 星期六
事件描述备注：保存/发布
[](如果不需要此记录可以手动删除，每次保存都会自动的追加记录)