JavaScript中处理JSON的全面指南

欢迎大家来到IT世界,在知识的湖畔探索吧!

JSON对象是什么？

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对象

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

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

语法：JSON.parse(string, function)

示例

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);

欢迎大家来到IT世界,在知识的湖畔探索吧!

输出

欢迎大家来到IT世界,在知识的湖畔探索吧!{ name: 'NATALIE', married: false, age: 21, city: 'New York', zip: '10001', awards: null }

JSON.stringify()方法

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

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

示例

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}

欢迎大家来到IT世界,在知识的湖畔探索吧!/*为每个空格插入单词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对象导航

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

欢迎大家来到IT世界,在知识的湖畔探索吧!// 使用点表示法访问名称 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

欢迎大家来到IT世界,在知识的湖畔探索吧!var obj_array = [ { "name": "Natalie", "age": 21 }, { "name": "David", "age": 37 }, { "name": "Mark", "age": 43 } ]

// 使用点和方括号表示法访问第一个成员的名称 console.log(obj_array[0].name); 输出：Natalie

欢迎大家来到IT世界,在知识的湖畔探索吧!// 使用点和方括号表示法访问第二个成员的年龄 console.log(obj_array[1][ "age"]); 输出：37

Object.keys()方法

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

语法：Object.keys(obj)

Object.values()方法

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

语法：Object.values(obj)

Object.entries()方法

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

语法：Object.entries(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);

输出

欢迎大家来到IT世界,在知识的湖畔探索吧!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); //使用点表示法 }

输出

欢迎大家来到IT世界,在知识的湖畔探索吧!输出 Name: Natalie Married Status: true Name: David Married Status: false Name: Mark Married Status: true

for…in循环

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

语法：for (item in 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); //使用点表示法 }

输出

欢迎大家来到IT世界,在知识的湖畔探索吧!Name: Natalie Married Status: true Name: David Married Status: false Name: Mark Married Status: true

for…of循环

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

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

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); });

输出

欢迎大家来到IT世界,在知识的湖畔探索吧!元素详情: 0 姓名: Natalie 年龄: 21 元素详情: 1 姓名: David 年龄: 37 元素详情: 2 姓名: Mark 年龄: 43

结论

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