首页 前端知识 非常详细!JSON简介(适合小白学习)

非常详细!JSON简介(适合小白学习)

2024-05-14 23:05:41 前端知识 前端哥 609 828 我要收藏

JSON简介

什么是JSON

  • JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
  • JSON 是轻量级的文本数据交换格式
  • JSON 独立于语言:JSON 使用 Javascript语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态(PHP,JSP,.NET)编程语言都支持JSON。JSON 具有自我描述性,更易理解。

与XML相同之处

  • JSON是纯文本
  • JSON具有“自我描述性”(人类可读)
  • JSON具有层级结构(值中存在值)
  • JSON可通过JavaScript进行解析
  • JSON数据可使用AJAX进行传输

与XML不同之处

  • 没有结束标签
  • 更短
  • 读写速度更快
  • 能够使用内建的JavaScript eval()方法进行解析
  • 使用数据
  • 不适用保留字

JSON语法

json语法规则

数据是在名称/值对中

数据由逗号,分隔

使用斜杠\来转义字符

大括号{}保存对象

中括号[]保存数组,数组可以包含多个对象

JSON的两种结构

  1. 对象:大括号{}保存的对象是一个无序的名称/值对记号个。一个对象以左括号{开始,右括号}结束,每个“键”后跟一个冒号:,名称/值对使用逗号,分隔。
    在这里插入图片描述
  2. 数组:中括号[]保存的数组是值(value)的有序集合。一个数组以左括号[开始,右括号]结束,值中间使用逗号,分隔。
    在这里插入图片描述
    值(value)可以是双引号括起来的字符串(string),数值(number)、true、false、null、对象(object)或者数组(array),它们可以嵌套。
    在这里插入图片描述

JSON的名称/值对

JSON数据的书写格式是:
"name":"菜鸟教程

JSON值

JSON值可以是:

  • 数字(整数或浮点数)
  • 字符串(在双引号中)
  • 逻辑值 (true或false)
  • 数组(在中括号中)
  • 对象(在大括号中)
  • null

JSON数字

JSON数字可以是整型或者浮点型:
{"age":30}

JSON对象

JSON对象在大括号{}中书写:
{key1:value1,key2:value2,key3:value3, ... heyN:valueN}
对象可以包含多个名称/值对:
{"name":"菜鸟教程, "url":"www.runoob.com"}"

JSON数组

JSON数组在中括号[]中书写:
数组可包含多个对象:

[
	{key1:value-1, key2:value-2},
	{key1:value-1, key2:value-2},
	{key1:value-1, key2:value-2},
	{key1:value-1, key2:value-2},
	...
	{key1:value-1, key2:value-2},
]
{
	"sites":[
		{"name":"runoob", "url":"runoob.com"},
		{"name":"google", "url":"google.com"},
		{"name":"weibo", "url":"weibo.com"}
	]
}

在上面的例子中,对象sites是包含三个对象的数组。每个对象代表关于某个网站(name、url)的记录。

JSON null

JSON可以设置null值:
"runoob":null

JSON对象

对象语法

  • JSON对象使用在大括号{}中书写。
  • 对象可以包含多个key/value(键/值)对。
  • key必须是字符串,value可以是合法的JSON数据类型(字符串,数字,对象,数组,布尔值或null)。
  • key和value中使用冒号:分割。
  • 每个key/value对使用逗号分割。
    实例:
    {"name":"runoob", "alexa":10000, "site":null}
    在这里插入图片描述

访问对象值

可以用.来访问对象的值:

var mvOBJ, x;
myOBJ = {"name":"runoob", "a"};
x = myOBJ.name;

也可以使用中括号([])来访问对象的值:

var myOBJ, x;
myOBJ = {"name":"runoob", "alexa":10000, "site":null};
x = myOBJ["name"];

循环对象

可以使用for-in来循环对象的属性:

var myOBJ = {"name":"runoob", "alexa":10000, "site":null};
for (x in myOBJ){
	document.getElementById("demo").innerHTML += "<br>";
}

在for-in循环对象的属性时,使用中括号([])来访问属性的值:

var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
	document.getElementById("demo").innerHTML += myObj[x] + "<br>";
}

嵌套JSON对象

JSON对象可以包含另外一个JSON对象:

myOBJ = {
	"name":"runoob",
	"alexa":10000,
	"sites":{
		"site1":"www.runoob.com",
		"site2":"runoob.com",
		"site3":"runoob2.com"
	}		
}

JSON数组

数组作为JSON对象

实例:["Google", "Runoob", "Taobao"]
JSON数组在中括号中书写。
中括号[]保存的数组是值(value)的有序集合。一个数组以左中括号[开始,右中括号]结束,值之间使用逗号,分隔。
在这里插入图片描述
JSON数组中必须是合法的JSON数据类型(字符串,数字,对象,数组,布尔值或null)。

JSON对象中的数组

对象属性的值可以是一个数组:

{
	"name":"web",
	"num":3,
	"sites":["Google", "Runoob", "Taobao"]
}

嵌套JSON对象中的数组

JSON对象中数组可以包含另外一个数组,或者另外一个JSON对象:

mgOBJ = {
	"name":"网站",
	"num":3,
	"sites":[
		{"name":"google", "info":["android", "google地图" ]},
		{"name":"runoob", "info":"教程", "学习"},
		{"name":"taobao", "info":["网购", "在线"]}
	]
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/8716.html
评论
发布的文章

video 自定义视频播放控件

2024-05-26 01:05:25

HTML5 画布绘制海报

2024-05-26 01:05:13

HTML5学习(三)

2024-05-26 01:05:43

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!