【JavaScript】特殊格式的字符串—— JSON

简介: 特殊格式的字符串—— JSON

🏍️JSON概述

在我们进行网站开发过程中,往往离不开后端的影子,但是是否我们要思考一下,后端是如何识别前端语言,比如说后端语言如何获取 JS 数据对象。众所周知:JS中的对象只有JS自己认识,其它后端语言包括JAVA、Python、PHP等都不认识, 所有我们就需要一个能被任何语言识别的东西来作为两者互相交流的中间人。它便是 “JSON”。

JSON(JavaScript Object Notation   JS对象表示法就是一个特殊格式的字符串,这个字符串可以被任意的语言识别,并且可以被转换为任意语言的对象。说白了,JSON就是在开发用来进行数据的交互传递的。

🍇JSON分类

JSON 和 JS 对象格式一样,只不过 JSON 字符串中的属性名必须加双引号

JSON对象

varobj='{"name":"小张","age":18,"gender":"男"}'

JSON数组

vararr='[1,2,"hello",3,true]'

不管是对象还是数组,JSON只允许特定的值,否则后端语言识别不了,如下:

1、字符串    2、数值    3、布尔值    4、null    5、对象    6、数值

🍈JSON 和 XML的区别

JSON 和 XML 都用于接收 web 服务端的数据。其写法如下:

//JSON写法{
"Lists": [
    { "name":"张三" , "age":18 }, 
    { "name":"李四" , "age":18 }, 
    { "name":"王五" , "age":18 }
    ]
}
//XML<sites><site><name>张三</name> <age>18</age></site><site><name>李四</name> <age>18</age></site><site><name>王五</name> <age>18</age></site></sites>

JSON 与 XML 的相同点:

数据可以被大多数编程语言使用、数据都是有层次的结构易于理解。

JSON 与 XML 的不同点:

JSON不需要结束标签、读写速度更快、可以使用数组、更加简短。

XML 需要使用 XML 解析器来解析,JSON 可以使用标准的 JavaScript 函数来解析

🍌JSON使用

在JS中,为我们提供了一个工具类就叫JSON;这个对象可以帮助我们将一个JSON转换为JS对象,也可以将一个JS对象转换为JSON。

JSON.parse()

可以将JSON字符串转换为对象,需要一个json字符串作为参数

varjson='{"name":"张三","age":18,"gender":"男"}';
vararray='[1,2,3,"hello",true]';
varobj=JSON.parse(json);
console.log(obj.name);
vararr=JSON.parse(array);
console.log(arr[2]);

图片.pngJSON 不允许包含函数,但你可以将函数作为字符串存储,之后再将字符串转换为函数。不建议在 JSON 中使用函数

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><pid="demo"></p><script>vartext='{ "name":"boy", "content":"function () {return 100;}", "site":"www.baidu.com"}';
varobj=JSON.parse(text);
obj.content=eval("("+obj.content+")");
document.getElementById("demo").innerHTML=obj.name+" 分数是:"+obj.content();
</script></body></html>

图片.png

JSON.stringify()

可以将JS对象转换为JSON字符串,需要一个js对象作为参数

varobj= {"name":"张三","age":18,"gender":"男"};
vararray= [1,2,3,"hello",true];
varjson_obj=JSON.stringify(obj)
console.log(typeofjson_obj);
console.log(json_obj);
varjson_arr=JSON.stringify(array)
console.log(typeofjson_arr);
console.log(json_arr);

图片.png

JSON.stringify()不能存储 Date 对象,会将所有日期转换为字符串

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><pid="demo"></p><script>varobj= { "name":"当前日期", "initDate":newDate(), "site":"www.baidu.com"};
varJSON=JSON.stringify(obj);
document.getElementById("demo").innerHTML=JSON;
</script></body></html>

图片.png


🍉eval()使用

这个函数可以用来执行一段字符串形式的JS代码,并将执行结果返回

<script>varstr="alert('hello');";
eval(str)
</script>

图片.png

如果使用eval()执行的字符串中含有{},它会将{}当初代码块,如果我们不想让其当成代码块来执行,则需要在字符串前后各加一个()

<script>varobj='({"name":"张三","age":18,"gender":"男"})';
vararr=eval("("+obj+")")
console.log(arr);
</script>

图片.png

eval()这个函数的功能很强大,可以直接执行一个字符串中的js代码,但是在开发中尽量不要使用,首先它的执行性能比较差,其次它还具有安全隐患。

相关文章
|
3天前
|
XML JSON 前端开发
基于若依的ruoyi-nbcio流程管理系统仿钉钉流程json转bpmn的flowable的xml格式(支持并行网关)
基于若依的ruoyi-nbcio流程管理系统仿钉钉流程json转bpmn的flowable的xml格式(支持并行网关)
16 3
|
3天前
|
XML JSON 前端开发
基于若依的ruoyi-nbcio流程管理系统仿钉钉流程json转bpmn的flowable的xml格式(简单支持发起人与审批人的流程)
基于若依的ruoyi-nbcio流程管理系统仿钉钉流程json转bpmn的flowable的xml格式(简单支持发起人与审批人的流程)
10 2
基于若依的ruoyi-nbcio流程管理系统仿钉钉流程json转bpmn的flowable的xml格式(简单支持发起人与审批人的流程)
|
3天前
|
XML JSON 前端开发
基于若依的ruoyi-nbcio流程管理系统仿钉钉流程json转bpmn的flowable的xml格式(排它条件网关)
基于若依的ruoyi-nbcio流程管理系统仿钉钉流程json转bpmn的flowable的xml格式(排它条件网关)
11 3
基于若依的ruoyi-nbcio流程管理系统仿钉钉流程json转bpmn的flowable的xml格式(排它条件网关)
|
7天前
|
存储 JavaScript 前端开发
JavaScript字符串方法详解
JavaScript字符串方法详解
18 0
|
8天前
|
SQL 缓存 JavaScript
深入解析JavaScript中的模板字符串
深入解析JavaScript中的模板字符串
14 1
|
8天前
|
JavaScript 索引
js字符串操作的方法
js字符串操作的方法
11 0
|
8天前
|
JavaScript 前端开发 索引
js关于字符串的方法
js关于字符串的方法
11 0
|
8天前
|
JavaScript 前端开发
js关于字符串的方法
js关于字符串的方法
12 0
|
1月前
|
JSON 前端开发 Java
Json格式数据解析
Json格式数据解析
|
XML JSON 前端开发
ajax请求json和xml数据及对json和xml格式数据的解析
ajax请求json和xml数据及对json和xml格式数据的解析
158 0