失眠网 > JavaScript JSON 对象使用详解 JSON. parse() JSON. stringify()

JavaScript JSON 对象使用详解 JSON. parse() JSON. stringify()

时间：2023-10-17 09:04:14

JSON 概述与语法

JSON 对象 CRUD

对象创建与添加属性

删除属性

修改属性

查询与遍历

JSON. parse() 、JSON. stringify()

异常处理：XML Parsing Error:not well-formed

JSON 概述与语法

1、JSON(JavaScriptObject Notation)--JS对象导航，是一种轻量级的数据交换格式

2、JSON采用完全独立于语言的文本格式，是理想的数据交换语言，易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。

3、在 JavaScript 中处理 JSON 数据不须要任何特殊的 API 或工具包，可以直接使用

4、Java 后台操作Json 较常用的类库有：net-sf-Json、Gson、Jackson、FastJson等，其中Gson 与FastJson无疑是其中的佼佼者之一

JSON 语法

1、JSON 语法是 JavaScript 对象表示语法的子集，可以直接使用。

2、一个花括号表示一个JSON对象，{}表示一个JSON对象，[{}] 表示json数组

3、键与值用冒号分隔，每个数据之间用逗号分隔；

4、使用方括号保存 JSON 数组，数组值使用“,”分割；

5、JSON 数据使用’”键”：”值”’ 形式，其中键名必须是字符串，而值可以是以下任意类型：1）数值（整数，浮点数）2）字符串（在双引号中）3）逻辑值（true/false）4）数组（在方括号中）5）对象（在花括号中）

JSON 对象 CRUD

1、在 Java 后台使用 Gson、FastJson 等库来操作 JSON 是非常方便的，前台 JS 中有时也需要进行创建JSON对象，然后增加、修改、删除、查看等操作。

对象创建与添加属性

1、json 对象创建：var jsonObj = {} ;

2、添加属性时，如果key已经存在，则直接覆盖

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">// 创建一个空的json对象let jsonObj1 = {};//添加属性与取值相对应，同样是两种方式，推荐第二种 []jsonObj1.name = "华安";jsonObj1["age"] = 35;console.log("jsonObj1：" + JSON.stringify(jsonObj1));</script></head><body></body></html>

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">// 创建一个空的数组对象,用于存放 json 对象let jsonArray = [];for (let i = 0; i < 2; i++) {let jsonObj = {};// json 对象操作属性推荐方式["key"]，不用".key"jsonObj["name"] = "华安" + i;jsonObj["age"] = 35;// 数组对象也是js内置的对象,push方法为数组添加元素jsonArray.push(jsonObj);}console.log("jsonObj："+JSON.stringify(jsonArray));</script></head><body></body></html>

删除属性

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="/jquery/3.3.1/jquery.min.js"></script><style type="text/css"></style><script type="text/javascript">let json1 = {"name": "华安", "age": 35};console.log(JSON.stringify(json1));// 删除name属性delete json1.name;console.log(JSON.stringify(json1));// 删除age属性delete json1["age"];console.log(JSON.stringify(json1));</script></head><body></body></html>

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">let json2 = [{"name": "华安", "age": 35}, {"name": "宁王", "age": 55}];console.log(JSON.stringify(json2));// 删除json数组第一个json对象的name属性delete json2[0].name;console.log(JSON.stringify(json2));// 删除json数组第二个json对象的age属性delete json2[1]["age"];console.log(JSON.stringify(json2));</script></head><body></body></html>

修改属性

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">let json2 = [{"name": "华安", "age": 35}, {"name": "宁王", "age": 55}];console.log(JSON.stringify(json2));// 为json对象添加属性时，如果属性已经存在，在直接覆盖json2[0]["name"] = "华太师";json2[1]["age"] = "66";console.log(JSON.stringify(json2));</script></head><body></body></html>

查询与遍历

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">let json2 = [{"name": "华安", "age": 35, "isMarry": true, "addr": null}, {"name": "宁王", "age": 55, "addr": "西湖"}];console.log(JSON.stringify(json2));let loopJsonObj = null;// 循环json 数组对象for (let i = 0; i < json2.length; i++) {// 取 json 对象loopJsonObj = json2[i];// json 对象取值，[key]、.key两种方式； key 不存在时返回 undefinedconsole.log(loopJsonObj["name"] + ":" + loopJsonObj.age + ":" + loopJsonObj["isMarry"] + ":" + loopJsonObj["addr"]);}</script></head><body></body></html>

json 对象遍历：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">//json 对象遍历var json2 = {"name": "华安", "age": 35, "isMarry": true, "addr": null};for (var key in json2) {console.log(key + "=" + json2[key]);}</script></head><body></body></html>

JSON. parse() 、JSON. stringify()

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">// 手写一个具有json格式的字符串，此时里面value无论什么类型，都必须加双引号let jsonStr = "{\"id\":\"9527\",\"name\":\"华安\",\"isMarry\":\"true\"}";// 将json字符串转换json对象let jsonObj = JSON.parse(jsonStr);console.log(jsonObj["id"] + "::" + jsonObj["name"]+"::"+jsonObj["isMarry"]);</script></head><body></body></html>

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">let json1 = {"name": "华安", "age": 35};let json2 = [{"name": "华安", "age": 35}, {"name": "宁王", "age": 55}];// 将json 对象转为 json 字符串let jsonStr1 = JSON.stringify(json1);// 将json 数组转为 json 字符串let jsonStr2 = JSON.stringify(json2);console.log("jsonStr1："+jsonStr1);console.log("jsonStr2:"+jsonStr2);</script></head><body></body></html>