JavaScript JSON的理解

1.什么是 JSON?
JSON 英文全称 JavaScript Object Notation。
JSON 是一种轻量级的数据交换格式。
JSON是独立的语言。
JSON 易于理解。

JSON 格式仅仅是一个文本。即字符串类型。
文本可以被任何编程语言读取及作为数据格式传递。
因为任何语言都有字符串，理论上都支持json格式。哪些语言支持json格式？
前后端语言支持json.
前端JavaScript，html支持json,
后端python,java,c#支持json

2.JSON 语法规则
数据为键/值对。
数据由逗号分隔。
大括号保存对象
方括号保存数组

3.JSON 数据：一个名称对应一个值
JSON 数据格式为键/值对，就像 JavaScript 对象属性。（变量名和变量值的映射关系）

键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：

"firstName":"John"

4.JSON 对象
JSON 对象保存在大括号内。

{"firstName":"John", "lastName":"Doe"}

将json字符串格式转换成对象：JSON.parse();

将对象转换成json字符串格式：JSON.stringify();

typeof 操作符查看 JavaScript 变量的数据类型。

<script>
var str1 = '{"name": "Alex", "age": 18}';//json格式的字符串即文本
var obj1 = {"name": "Alex", "age": 18};//原数据
document.write(str1 + typeof(str1)+"<br>")//打印类型并输出json格式的字符串
document.write(obj1 + typeof(str2)+"<br>")//打印类型并输出原数据

// JSON字符串转换成对象
var obj = JSON.parse(str1); 
document.write(obj+"<br>")

// 对象转换成JSON字符串
var str = JSON.stringify(obj1);
document.write(str)
</script>

在这里插入图片描述
5.JSON 数组
数组可以包含对象：

"employees":[        
    {"firstName":"John", "lastName":"Doe"},        
    {"firstName":"Anna", "lastName":"Smith"},     
    {"firstName":"Peter", "lastName":"Jones"}        
]

在以上实例中，对象 “employees” 是一个数组。包含了三个对象。

扫描二维码关注公众号，回复： 8720601 查看本文章

每个为个对象为员工的记录（姓和名）。

6.JSON 字符串转换为 JavaScript 对象
通常我们从服务器中读取 JSON 数据，并在网页中显示数据。

简单起见，在网页中直接设置 JSON 字符串。

首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：

var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

最后，在你的页面中使用新的 JavaScript 对象：

<h2>为 JSON 字符串创建对象</h2>
<p id="demo"></p>
<script>
var text = '{"employees":[' +
	'{"firstName":"John","lastName":"Doe" },' +
	'{"firstName":"Anna","lastName":"Smith" },' +
	'{"firstName":"Peter","lastName":"Jones" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
	obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

</body>

在这里插入图片描述

代码写注释的小猿

发布了478 篇原创文章 · 获赞 673 · 访问量 19万+

他的留言板关注

JavaScript JSON的理解

猜你喜欢