目录

5. JSON

5.1 定义

5.2 语法规则

5.3 JSON 数据- 名称和值

5.4 JSON数据类型

5.5 JSON文件

5.6 JSON.parse():字符串转JS对象

5.7 JSON.stringify():JS对象转字符串

5.8 JSON对象

5.9 JSON数组


【写在前面】

前文链接:前端基础(四):JS(对象)

5. JSON

5.1 定义

(1)什么是JSON?

JavaScript Object Notation(JavaScript 对象标记法), 是一种存储和交换数据的语法。

JSON是一个特殊格式的字符串,这个字符串可以被任意的语言所识别,并且可以转换为任意语言中的对象,JSON在打开中主要用来进行数据的交互。

(2)浏览器和服务器之间的交换数据

当数据在浏览器与服务器之间进行交换时,这些数据只能是文本。

JSON 属于文本,我们能够把任何 JavaScript 对象转换为 JSON,然后将 JSON 发送到服务器。

我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。

以这样的方式,我们能够把数据作为 JavaScript 对象来处理,无需复杂的解析和转译。

(3)为什么使用 JSON?

因为 JSON 格式仅仅是文本,它能够轻松地在服务器和浏览器之间传输,并用作任何编程语言的数据格式。

5.2 语法规则

JSON 语法衍生于 JavaScript 对象标记法语法:

数据在名称/值对中

数据由逗号分隔

花括号容纳对象

方括号容纳数组

5.3 JSON 数据- 名称和值

(1)JSON数据格式

JSON 数据是以 名称/值对 的形式出现的:名称:值

JSON 字符串中属性名称必须双引号。而 JavaScript 名称不需要。

(2)JSON和JS的区别

JSON – 求值为 JavaScript 对象

JSON 格式几乎等同于 JavaScript 对象。

JSON 中键必须是字符串,由双引号包围。JavaScript 中,键可以是字符串、数字或标识符名称。

5.4 JSON数据类型

在 JSON 中,值必须是以下数据类型之一:

字符串,数字,布尔,null,对象(JSON 对象),数组

在 JavaScript 中,以上所列均可为值,外加其他有效的 JavaScript 表达式,包括:

undefined,函数,日期

注意:

在 JSON 中,字符串值必须由双引号编写。在 JavaScript 中,字符串可用双引号或单引号。

JSON 中的数字必须是整数或浮点数。

JSON 中作为值的对象必须遵守与 JSON 对象相同的规则。

5.5 JSON文件

JSON 文件的文件类型是 ".json"

JSON 文本的 MIME 类型是 "application/json"

5.6 JSON.parse():字符串转JS对象

(1)JSON 的常规用途是同 web 服务器进行数据传输。

(2)在从 web 服务器接收数据时,数据永远是字符串。需要将字符串转换为JS对象。

通过 JSON.parse() 解析数据,这些数据会成为 JavaScript 对象。

即:字符串-->JavaScript对象

使用 JavaScript 函数 JSON.parse() 把文本/字符串转换为 JavaScript 对象

(3)举例:

var obj = JSON.parse('{ "name":"Bill Gates", "age":62, "city":"Seattle"}');
<p id="demo"></p>
<script>
        document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>

(4)JSON 的数组

在对衍生自数组的 JSON 使用 JSON.parse() 后,此方法将返回 JavaScript 数组,而不是 JavaScript 对象。

(5)解析日期

JSON 中不允许日期对象。如果需要包含日期,请写为字符串,然后将其转换回日期对象:

var text =  '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';  //单引号括起来,成为字符串
var obj = JSON.parse(text); //先将字符串转为JS对象
obj.birth = new Date(obj.birth); //取对象的属性值,作为具体制定日期给Date

或者可以使用 JSON.parse() 函数的第二个参数,称为 reviver。这个参数是函数,在返回值之前,它会检查每个属性。

var text =  '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text, function (key, value) {
    if  (key == "birth") {
        return new Date(value);
    } else {
         return value;
   }});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

(6)解析函数

JSON 中不允许函数。如果需要包含函数,请把它写作字符串,然后可以把它转换回函数。

但是:应避免在 JSON 中使用函数,函数会丢失它们的作用域,而且还需要使用 eval() 把它们转换回函数

var text =  '{ "name":"Bill Gates", "age":"function () {return 62;}", "city":"Seattle"}';  //单引号括起来
var obj = JSON.parse(text);   //先将字符串转为JS对象
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " +  obj.age();

5.7 JSON.stringify():JS对象转字符串

(1)JSON 的常规用途是同 web 服务器进行数据交换。

(2)在向 web 服务器发送数据时,数据必须是字符串。需要先将JS对象转为字符串。

通过JavaScript 中的函数 JSON.stringify() 把 JavaScript 对象转换为字符串。

即:JavaScript对象-->字符串

结果将是遵守 JSON 标记法的一段字符串。

(3)举例

var obj = { name:"Bill Gates", age:62, city:"Seattle"};
var myJSON =  JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

(3)对 JavaScript 数组进行字符串化

得到的结果是 遵守 JSON 标记法的字符串。

var arr = [ "Bill Gates", "Steve Jobs", "Elon Musk" ];
var myJSON =  JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON

(4)日期字符串化

在 JSON 中,不允许日期对象。

JSON.stringify() 函数将把任何日期转换为字符串。可以在接收端把字符串转换回日期对象。

(5)函数字符串化

在 JSON 中,不允许函数作为对象值。

JSON.stringify() 函数将从 JavaScript 对象删除任何函数,包括键和值

但是:应避免在 JSON 中使用函数,函数会失去其作用域,而且还需要使用 eval() 将它们转换回函数。如果在运行 JSON.stringify() 函数前已将函数转换为字符串,这个环节可以省略。

var obj =  { "name":"Bill Gates", "age":function () {return 62;}, "city":"Seattle"};
obj.age = obj.age.toString();
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

5.8 JSON对象

(1)JSON 对象被花括号 { } 包围。

(2)JSON 对象以键/值对书写。

键必须是字符串

值必须是有效的 JSON 数据类型(字符串、数字、对象、数组、布尔或 null)。

键和值由冒号分隔。

每个键/值对由逗号分隔。

(3)访问对象值

可以通过使用点号(.)来访问对象值。

也可以使用方括号([ ])来访问对象值。

(4)遍历对象

能够通过使用 for-in 遍历对象属性。

在 for-in 循环中,请使用括号标记法来访问属性值。

(5)嵌套的 JSON 对象

一个 JSON 对象中的值可以是另一个 JSON 对象。

能够通过使用点号和括号访问嵌套的 JSON 对象。

(6)修改值

能够使用点号来修改 JSON 对象中的任何值。

也可以使用括号来修改 JSON 对象中的值。

(7)删除对象属性

使用 delete 关键词来删除 JSON 对象的属性。

5.9 JSON数组

(1)JSON 中的数组几乎与 JavaScript 中的数组相同。

(2)数组值的类型:

在 JSON 中,数组值的类型必须属于:字符串、数字、对象、数组、布尔或 null。

在 JavaScript 中,数组值可以是以上所有类型,外加任何其他有效的 JavaScript 表达式,包括函数、日期和 undefined。

(4)数组可以是对象属性的值。

(5)访问数组值:可以通过使用索引号来访问数组值。

(6)遍历数组:可以通过使用 for-in 循环来访问数组值。或者可以使用 for 循环。

(7)JSON 对象中的嵌套数组:数组中的值也可以另一个数组,或者甚至另一个 JSON 对象。

(8)修改数组值:请使用索引号来修改数组。

(9)删除数组项目:请使用 delete 关键词来删除数组中的项目。