javascript json教程

2022/1/28 17:35:19

编程Tag： javascript 教程 JSON 对象数组 name myobj

本文主要是介绍javascript json教程，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

二.json语法

二.一与xml相同之处

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

二.二与 XML 不同之处

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

二.三为什么使用 JSON？

二.三.1

JSON 比 XML 更快更易使用

二.三.2使用json

读取 JSON 字符串
用 eval() 处理 JSON 字符串

三. json 语法

JSON 语法是 JavaScript 语法的子集。

JSON 语法规则

JSON 语法是 JavaScript 对象表示语法的子集。

数据在名称/值对中
数据由逗号分隔
大括号 {} 保存对象
中括号 [] 保存数组，数组可以包含多个对象

JSON 名称/值对

JSON 数据的书写格式是：

key : value

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

"name" : "菜鸟教程"

这很容易理解，等价于这条 JavaScript 语句：

name = "菜鸟教程"

JSON 值

JSON 值可以是：

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

JSON 数字

JSON 数字可以是整型或者浮点型：

{ "age":30 }

JSON 对象

JSON 对象在大括号 {} 中书写：

{key1 : value1, key2 : value2, ... keyN : valueN }

对象可以包含多个名称/值对：

{ "name":"菜鸟教程" , "url":"www.runoob.com" }

这一点也容易理解，与这条 JavaScript 语句等价：

name = "菜鸟教程" url = "www.runoob.com"

JSON 数组

JSON 数组在中括号 [] 中书写：

数组可包含多个对象：

[
    { key1 : value1-1 , key2:value1-2 }, 
    { key1 : value2-1 , key2:value2-2 }, 
    { key1 : value3-1 , key2:value3-2 }, 
    ...
    { key1 : valueN-1 , key2:valueN-2 }, 
]
{ "sites": [ { "name":"菜鸟教程" , "url":"www.runoob.com" }, { "name":"google" , "url":"www.google.com" }, { "name":"微博" , "url":"www.weibo.com" } ] }

在上面的例子中，对象 sites 是包含三个对象的数组。每个对象代表一条关于某个网站（name、url）的记录。

JSON 布尔值

JSON 布尔值可以是 true 或者 false：

{ "flag":true }

JSON null

JSON 可以设置 null 值：

{ "runoob":null }

JSON 使用 JavaScript 语法

因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。

通过 JavaScript，您可以创建一个对象数组，并像这样进行赋值：

实例

var sites = [ { "name":"runoob" , "url":"www.runoob.com" }, { "name":"google" , "url":"www.google.com" }, { "name":"微博" , "url":"www.weibo.com" } ];

可以像这样访问 JavaScript 对象数组中的第一项（索引从 0 开始）：

sites[0].name;

返回的内容是：

runoob

可以像这样修改数据：

sites[0].name="菜鸟教程";

四.json对象

实例

{ "name":"runoob", "alexa":10000, "site":null }

JSON 对象使用在大括号({})中书写。
对象可以包含多个 key/value（键/值）对。
key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
key 和 value 中使用冒号(:)分割。
每个 key/value 对使用逗号(,)分割。

访问对象值

你可以使用点号（.）来访问对象的值：

var myObj, x; myObj = { "name":"runoob", "alexa":10000, "site":null };

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 += x + "<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":"m.runoob.com", "site3":"c.runoob.com" } }

你可以使用点号(.)或者中括号([])来访问嵌套的 JSON 对象。

x = myObj.sites.site1; // 或者 x = myObj.sites["site1"];

修改值

你可以使用点号(.)来修改 JSON 对象的值：

myObj.sites.site1 = "www.google.com";

你可以使用中括号([])来修改 JSON 对象的值：

myObj.sites["site1"] = "www.google.com";

删除对象属性

我们可以使用 delete 关键字来删除 JSON 对象的属性：

delete myObj.sites.site1;

你可以使用中括号([])来删除 JSON 对象的属性：

delete myObj.sites["site1"]

六.json数组

数组作为 JSON 对象

[ "Google", "Runoob", "Taobao" ]

JSON 数组在中括号中书写。

JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。

JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式，包括函数，日期，及 undefined。

JSON 对象中的数组

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

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

我们可以使用索引值来访问数组：

x = myObj.sites[0];

循环数组

你可以使用 for-in 来访问数组：

for (i in myObj.sites) { x += myObj.sites[i] + "<br>"; }

你也可以使用 for 循环：

for (i = 0; i < myObj.sites.length; i++) { x += myObj.sites[i] + "<br>"; }

嵌套 JSON 对象中的数组

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

myObj = { "name":"网站", "num":3, "sites": [ { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] }, { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] }, { "name":"Taobao", "info":[ "淘宝", "网购" ] } ] }

我们可以使用 for-in 来循环访问每个数组：

for (i in myObj.sites) { x += "<h1>" + myObj.sites[i].name + "</h1>"; for (j in myObj.sites[i].info) { x += myObj.sites[i].info[j] + "<br>"; } }

修改数组值

你可以使用索引值来修改数组值：

myObj.sites[1] = "Github";

删除数组元素

我们可以使用 delete 关键字来删除数组元素：

delete myObj.sites[1];

七.json.string()

JSON 通常用于与服务端交换数据。

在向服务器发送数据时一般是字符串。

我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

语法

JSON.stringify(value[, replacer[, space]])

参数说明：

value:
必需，要转换的 JavaScript 值（通常为对象或数组）。
replacer:
可选。用于转换结果的函数或数组。

如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。
space:
可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

JavaScript 对象转换

例如我们向服务器发送以下数据：

var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};

我们使用 JSON.stringify() 方法处理以上数据，将其转换为字符串：

var myJSON = JSON.stringify(obj);

myJSON 为字符串。

我们可以将 myJSON 发送到服务器：

实例

var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"}; var myJSON = JSON.stringify(obj); document.getElementById("demo").innerHTML = myJSON;

JavaScript 数组转换

我们也可以将 JavaScript 数组转换为 JSON 字符串：

实例

var arr = [ "Google", "Runoob", "Taobao", "Facebook" ]; var myJSON = JSON.stringify(arr);

myJSON 为字符串。

我们可以将 myJSON 发送到服务器：

实例

var arr = [ "Google", "Runoob", "Taobao", "Facebook" ]; var myJSON = JSON.stringify(arr); document.getElementById("demo").innerHTML = myJSON;

异常

解析数据

JSON 不能存储 Date 对象。

JSON.stringify() 会将所有日期转换为字符串。

实例

var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"}; var myJSON = JSON.stringify(obj); document.getElementById("demo").innerHTML = myJSON;

解析函数

JSON 不允许包含函数，JSON.stringify() 会删除 JavaScript 对象的函数，包括 key 和 value。

八.json.parse()

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

语法

JSON.parse(text[, reviver])

参数说明：

text:必需，一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数。

JSON 解析实例

例如我们从服务器接收了以下数据：

{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }

我们使用 JSON.parse() 方法处理以上数据，将其转换为 JavaScript 对象：

var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');

内容来源:JSON.parse() | 菜鸟教程 (runoob.com)

这篇关于javascript json教程的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

javascript json教程

目录

一.json简介

一.一 什么是json

一.二 json 转换为js对象

二.json语法

二.一 与xml相同之处

二.二 与 XML 不同之处

二.三 为什么使用 JSON？

二.三.1

二.三.2使用json

三. json 语法

JSON 语法规则

JSON 语法是 JavaScript 对象表示语法的子集。

JSON 名称/值对

JSON 数据的书写格式是：

JSON 值

JSON 值可以是：

JSON 数字

JSON 对象

JSON 数组

JSON 布尔值

JSON null

JSON 使用 JavaScript 语法

实例

四.json对象

实例

访问对象值

循环对象

嵌套 JSON 对象

修改值

删除对象属性

六.json数组

数组作为 JSON 对象

JSON 对象中的数组

循环数组

嵌套 JSON 对象中的数组

修改数组值

删除数组元素

七.json.string()

语法

参数说明：

JavaScript 对象转换

实例

JavaScript 数组转换

实例

实例

异常

解析数据

实例

解析函数

八.json.parse()

语法

参数说明：

JSON 解析实例

内容来源:JSON.parse() | 菜鸟教程 (runoob.com)

相关编程文章

一.一什么是json

二.一与xml相同之处

二.二与 XML 不同之处

二.三为什么使用 JSON？