整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

「JavaScript 从入门到精通」16.JSON对象介绍

置知识:

JSON是一种按照JavaScript对象语法的数据格式。

1.概念

概念有三点:

JSON全称JavaScript 对象表示法(JavaScript Object Notation)。

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快,更易解析。

———— 摘自 W3school JSON教程

JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

2.语法

JSON在使用过程中可作为一个对象或者字符串存在,当作为对象时,用于获取JSON中的数据,而作为字符串时常用于网络数据传输。

JSON语法规则:

  1. 数据在名称/值对中
  2. 数据由逗号分隔
  3. 花括号保存对象
  4. 方括号保存数组

通常,JSON数据书写格式是名称/键值:

"name" : "pingan"

而JSON的值可以是 :

  1. 数字(整数或浮点数)
  2. 字符串(在双引号中)
  3. 逻辑值(true 或 false)
  4. 数组(在方括号中)
  5. 对象(在花括号中)
  6. null

JSON常常有三种类型:

三种类型:简单之,对象和数组。

必须注意:JSON字符串必须是双引号,单引号会语法错误。

2.1 简单值

简单值可以是字符串:

"hello leo!"

也可以是数字,逻辑值:

1

2.2 对象类型

内容放在花括号内,是多个键值对。

JSON对象 与 js 对象的三个区别:

  1. JSON对象 必须加双引号,而 js 对象属性名可以不加双引号。
  2. JSON对象 没有变量声明,而 js 对象有。
  3. JSON对象 没有分号,而 js 对象有。

2.3 数组类型

内容放在方括号内。

JSON数组也没有分号和变量,常常可以把JSON数组和对象结合使用,构成更复杂的数据集合。

3. 使用

JSON最常见的用法就是,从服务端获取JSON数据,再将JSON数据转成JavaScrip对象使用。

JSON对象有两个方法:

  • JSON.stringify(): 序列化操作,将JavaScript对象转换成JSON字符串。
  • JSON.prase():反序列化操作,将JSON字符串解析成JavaScript值。

3.1 序列化操作

序列化操作常常使用JSON.stringify()。

简单例子:

注意:

  1. 默认情况下,JSON.stringify()输出的JSON字符串不包含任何空格字符或缩进,因此结果就像上面那样。
  2. 序列化JavaScript对象时,所有函数及原型成员都会被忽略,不体现在结果上。
  3. 值为undefined的任何属性都会被跳过。

因此,最终的值都是有效的JSON数据类型的实例属性。

3.2 反序列化操作

序列化操作常常使用JSON.parse()。

简单例子:

如果传入JSON.parse()的字符串不是有效的JSON,则会抛出错误。

注意:

虽然pingan和copyPingan属性相同,但两者独立,没有任何关系。

4.序列化选项

JSON.stringify()除了要传入序列化对象作为参数,还可以接收其他两个参数,用来指定序列化JavaScript对象的方式:

  1. 过滤器:可以是个数组,也可以是个函数。
  2. 选项:表示是否在JSON字符串中保留缩进。

单独或组合使用两者,可以更加全面深入的控制JSON的序列化。

4.1 过滤器

若过滤器的参数是数组,则JSON.stringify()返回的结果将只包含数组中的属性:

若过滤器的参数是函数,则情况就不一样了,传入的函数需有两个参数(属性名和属性值):

注意:使用switch的时候,必须指定default否则会返回undefined。

4.2 选项

JSON.stringify()第三个参数是个选项,控制结果中的缩进和空白符。

  1. 若选项只有一个值,则表示每个级别缩进的空格数,最大值为10,超过10则只会是10。

5.解析选项

JSON.parse()可以接收一个函数作为参数,对每个键值对调用,为了跟JSON.stringify()的过滤函数区别,这个函数成为还原函数。

  • 若还原函数返回undefined,则表示要从结果中删除对应的键。
  • 若还原函数返回其他值,则将该值插入结果中。

还原函数接收两个参数:属性名和属性值。

举例,在日期字符串转换为Date对象中,经常要用到还原函数:

公众号:前端自习课

往期回顾

「JavaScript 从入门到精通」1.语法和数据类型

「JavaScript 从入门到精通」2.流程控制和错误处理

「JavaScript 从入门到精通」3.循环和迭代

「JavaScript 从入门到精通」4.函数

「JavaScript 从入门到精通」5.表达式和运算符

「JavaScript 从入门到精通」6.数字

「JavaScript 从入门到精通」7.时间对象

「JavaScript 从入门到精通」8.字符串

「JavaScript 从入门到精通」9.正则表达式

「JavaScript 从入门到精通」10.数组

「JavaScript 从入门到精通」11.Map和Set对象

「JavaScript 从入门到精通」12.使用对象

「JavaScript 从入门到精通」13.迭代器和生成器

「JavaScript 从入门到精通」14.元编程

「JavaScript 从入门到精通」15.JS对象介绍

JavaScript中,你可以使用in运算符或hasOwnProperty()方法来检查一个JSON对象是否包含某个属性(字段)。如果对象包含该字段,你可以直接使用点符号(.)或方括号([])表示法来读取它的值。

以下是使用in运算符和hasOwnProperty()方法检查对象属性并读取其值的示例程序:

// 假设我们有一个JSON对象  
var jsonObject = {  
    "name": "Alice",  
    "age": 30,  
    "city": "New York"  
};  
  
// 要检查的字段名  
var fieldName = "age";  
  
// 使用 'in' 运算符检查字段是否存在  
if (fieldName in jsonObject) {  
    console.log("字段 '" + fieldName + "' 存在,其值为:" + jsonObject[fieldName]);  
} else {  
    console.log("字段 '" + fieldName + "' 不存在");  
}  
  
// 或者使用 'hasOwnProperty()' 方法检查字段是否存在  
if (jsonObject.hasOwnProperty(fieldName)) {  
    console.log("字段 '" + fieldName + "' 存在,其值为:" + jsonObject.age);  
    // 或者使用动态属性访问方式  
    console.log("字段 '" + fieldName + "' 存在,其值为:" + jsonObject[fieldName]);  
} else {  
    console.log("字段 '" + fieldName + "' 不存在");  
}  
  
// 如果要读取的字段名是动态的,则必须使用方括号表示法  
var dynamicFieldName = "city";  
if (dynamicFieldName in jsonObject) {  
    console.log("动态字段 '" + dynamicFieldName + "' 存在,其值为:" + jsonObject[dynamicFieldName]);  
}

在这个示例中,我们首先定义了一个名为jsonObject的JSON对象,然后定义了一个要检查的字段名fieldName。我们使用in运算符和hasOwnProperty()方法来检查该字段是否存在于对象中。如果存在,我们就使用点符号(在字段名已知且不是动态的情况下)或方括号表示法(在字段名是动态的情况下)来读取它的值。

请注意,虽然在这个例子中我们使用了术语“JSON对象”,但实际上jsonObject是一个普通的JavaScript对象。在JavaScript中,JSON(JavaScript Object Notation)通常用于表示数据的序列化格式,即字符串形式的对象表示。但是,一旦JSON字符串被解析成JavaScript对象(例如,通过JSON.parse()方法),你就可以像处理任何其他JavaScript对象一样处理它。

SON对象是什么?

JSON代表JavaScript对象表示法,是一种基于JavaScript对象语法的结构化数据的标准文本格式。JSON仅定义了两种数据结构:对象和数组。JSON对象是由花括号括起来的键/值对组成的数据类型。JSON数组是值的列表。当数据从服务器发送到网页或在文件或数据库中存储数据时,通常会使用JSON对象。JSON与JavaScript对象文字语法非常相似,但可以独立于JavaScript使用。许多编程环境支持读取和生成JSON。

JSON对象的特点

  • 它们以逗号分隔的键/值对形式编写。键是用双引号括起来的字符串,值必须是以下JSON数据类型字符串数字对象数组布尔值空值
  • 它们由花括号{}括起来。花括号也可以用于在对象内部嵌套对象,从而创建分层结构。
  • 数组用方括号[]括起来,它们的值用逗号(,)分隔。数组中的每个值可以是不同的类型,包括另一个数组或对象。
  • 它们区分大小写,这意味着键和值在拼写和大小写上必须完全匹配。
  • 它们不允许尾随逗号。简单来说,花括号外部或双引号内部不应该有任何不属于键/值对的文本。
  • 它们不允许注释。

JSON提供了几个优点,使其成为表示结构化数据的热门选择:

  • 简单易读:JSON简单直观,易于理解。与XML等更冗长的格式不同,JSON相对容易阅读。其简洁的语法允许高效的数据表示。
  • 解析简便:JSON的解析比XML更简单快速。
  • 灵活性:JSON支持各种数据类型和对象层次结构,并且关系可以在传输过程中保持并在接收端适当地重新组装。
  • 广泛应用:大多数现代API接受JSON请求并发出JSON响应,使其成为系统之间数据交换的通用格式。

JSON对象示例


基本JSON对象:{"name": "Natalie", "married": false, "age": 21, "city": "New York", "zip" : "10001", "awards": null}

嵌套JSON对象:这是一种由名称/值对列表组成的数据类型,其中一个或多个值是另一个JSON对象。{"person": {"name": "Natalie", "age": 21}, "address": {"street": "123 XYZ Street", "City": "New York", "State" : "NY", "zip": "10001"}}

JSON对象数组:[ { "name": "Natalie", "age": 21 }, { "name": "David", "age": 37 }, { "name": "Mark", "age": 43 } ]

解析JSON对象

解析是将JSON对象转换为本机JavaScript对象的方法。

JSON.parse()方法:JSON.parse()方法解析字符串并返回一个JavaScript对象。字符串必须是JSON格式。

语法:JSON.parse(string, function)

参数

必需/可选

描述

字符串

必需

以JSON格式编写的字符串

Reviver函数

可选

一个接受键和值作为参数并返回修改后的值或undefined以删除属性的函数。对每个项目调用该函数。任何嵌套对象在父对象之前转换。

示例

var text = '{"name": "Natalie", "married": false, "age": 21, "city": "New York", "zip" : "10001", "awards": null}';
var obj = JSON.parse(text, function (key, value) {
     if (key === "name") {
       return value.toUpperCase();
     } else {
       return value;
     }
});
console.log(obj);

输出

{
     name: 'NATALIE',
     married: false,
     age: 21,
     city: 'New York',
     zip: '10001',
     awards: null
}

JSON.stringify()方法

该方法将JavaScript对象转换为字符串。在将数据发送到Web服务器时,数据必须是字符串。JSON.stringify()也适用于数组。

语法:JSON.stringify(obj, replacer, space)

参数

必需/可选

描述

Obj

必需

要转换为字符串的值

Replacer

可选

用于转换结果的函数或数组。对每个项目调用replacer。

Space

可选

用作空格的字符串(最多10个字符)或数字,从0到10,表示要用作空格的空格字符数。

示例

var obj = {"name": "Natalie", "married": false, "age": 21, "city": "New York", "zip" : "10001", "awards": null};
var text = JSON.stringify(obj, function (key, value) {
     if (key === "name") {
       return value.toUpperCase();
     } else {
       return value;
     }
});
console.log(text);

输出

{"name":"NATALIE","married":false,"age":21,"city":"New York","zip":"10001","awards":null}

/*为每个空格插入单词SPACE:*/
var newText = JSON.stringify(obj, null, "space");
console.log(“Text with the word space “+ newText);

输出

Text with the word space {
space"name": "Natalie",
space"married": false,
space"age": 21,
space"city": "New York",
space"zip": "10001",
space"awards": null
}

JSON对象导航

可以使用点(.)或方括号([])表示法导航到其属性并访问它们的值。

// 使用点表示法访问名称
var obj = {"name": "Natalie", "married": false, "age": 21, "city": "New York", "zip" : "10001", "awards": null};
console.log(obj.name);                      输出:Natalie
// 使用点表示法访问城市
console.log(obj["city"];                      输出:New York
var obj_array = [ { "name": "Natalie", "age": 21 }, { "name": "David", "age": 37 }, { "name": "Mark", "age": 43 } ]
// 使用点和方括号表示法访问第一个成员的名称
console.log(obj_array[0].name);       输出:Natalie
// 使用点和方括号表示法访问第二个成员的年龄
console.log(obj_array[1][ "age"]);     输出:37

Object.keys()方法

keys()方法返回给定对象的自身可枚举字符串键属性的数组。作为静态方法的keys()方法使用Object类名调用。

语法:Object.keys(obj)

参数

必需/可选

描述

obj

必需

要返回其可枚举属性的对象

Object.values()方法

values()方法返回给定对象的自身可枚举字符串键属性值的数组。作为静态方法的values()方法使用Object类名调用。

语法:Object.values(obj)

参数

必需/可选

描述

obj

必需

要返回其可枚举属性的对象

Object.entries()方法

该方法返回对象的可枚举属性的键值对数组。作为静态方法的entries()方法使用Object类名调用。

语法:Object.entries(obj)

参数

必需/可选

描述

obj

必需

要返回其可枚举属性的对象

示例

var obj = {"name": "Natalie", "married": false, "age": 21, "city": "New York", "zip" : "10001", "awards": null};
var keys = Object.keys(obj);
var values = Object.values(obj);
var entries = Object.entries(obj);
console.log("Array of keys :");
console.log(keys);
console.log("Array of values :");
console.log(values);
console.log("Array of entries :");
console.log(entries);

输出

Array of keys :
[ 'name', 'married', 'age', 'city', 'zip', 'awards' ]
Array of values :
[ 'Natalie', false, 21, 'New York', '10001', null ]
Array of entries :
[
     [ 'name', 'Natalie' ],
     [ 'married', false ],
     [ 'age', 21 ],
     [ 'city', 'New York' ],
     [ 'zip', '10001' ],
     [ 'awards', null ]
]

for循环

for循环重复执行,直到指定的条件评估为false。

语法:for (初始化; 条件; 表达式) {要执行的代码块}

参数

必需/可选

描述

初始化

必需

在执行代码块之前执行一次

条件

必需

执行代码块的条件

表达式

必需

在执行代码块后每次执行

示例

var obj = [ { "name": "Natalie", "age": 21, "married": true }, { "name": "David", "age": 37, "married": false }, { "name": "Mark", "age": 43, "married": true } ];
for(var i=0; i<obj.length; i++) {
           console.log("Name:  " + obj[i]["name"]); //使用方括号表示法
           console.log("Married Status:     " + obj[i].married); //使用点表示法
}

输出

输出
Name:     Natalie
Married Status:  true
Name:     David
Married Status:  false
Name:     Mark
Married Status:  true

for…in循环

for...in语句遍历对象的所有可枚举字符串非符号属性,包括继承的可枚举属性。循环内部的代码块对每个属性执行一次。

语法:for (item in object) {要执行的代码块}

参数

必需/可选

描述

item

必需

用于迭代属性的变量

object

必需

要迭代的对象

示例

var obj = [ { "name": "Natalie", "age": 21, "married": true }, { "name": "David", "age": 37, "married": false }, { "name": "Mark", "age": 43, "married": true } ];
for(item in obj) {
           console.log("Name:  " + obj[item]["name"]); //使用方括号表示法
           console.log("Married Status:     " + obj[item].married); //使用点表示法
}

输出

Name:     Natalie
Married Status:  true
Name:     David
Married Status:  false
Name:     Mark
Married Status:  true

for…of循环

for..of循环按顺序操作来自可迭代对象的值。

语法:array.forEach(iterable object) {statement}

参数

必需/可选

描述

Variable

必需

对于每次迭代,下一个属性的值被赋给变量。变量可以使用const、let或var声明。

Iterable object

必需

循环操作的值来源。

Name: Natalie
Married Status: true
Name: David
Married Status: false
Name: Mark
Married Status: true

## `forEach()`**方法** 

`forEach()`方法对数组中的每个元素调用一个函数。它必须至少接受一个参数,该参数表示数组的元素。

*语法:*`array.forEach(function(currentValue, index, array), thisValue)`

|  |  |  |
| --- | --- | --- |
| **参数**  | **必需/可选**  | **描述**  |
| Function  | 必需 | 用于对数组每个元素运行的函数 |
| currentvalue | 必需 | 当前元素的值 |
| index | 可选 | 当前元素的索引 |
| Array | 可选 | 当前元素的数组 |
| Thisvalue | 可选 | 作为this值传递给函数的值。默认为undefined。 |

### 示例

```json
var obj = [ { "name": "Natalie", "age": 21, "married": true }, { "name": "David", "age": 37, "married": false }, { "name": "Mark", "age": 43, "married": true } ];
obj.forEach((item, index, arr) => {
       console.log("元素详情:     " +index);
       console.log("姓名:      "+arr[index]["name"]);
       console.log("年龄:      "+item.age);
});

输出

元素详情:  0
姓名:      Natalie
年龄:      21
元素详情:  1
姓名:      David
年龄:      37
元素详情:  2
姓名:      Mark
年龄:      43

结论

JSON通常用于在服务器和Web应用程序之间传输数据。JSON的灵活性、易解析性和简单性使软件开发人员能够在各种编程环境中高效地处理结构化数据。