SON对象是什么?
JSON代表JavaScript对象表示法,是一种基于JavaScript对象语法的结构化数据的标准文本格式。JSON仅定义了两种数据结构:对象和数组。JSON对象是由花括号括起来的键/值对组成的数据类型。JSON数组是值的列表。当数据从服务器发送到网页或在文件或数据库中存储数据时,通常会使用JSON对象。JSON与JavaScript对象文字语法非常相似,但可以独立于JavaScript使用。许多编程环境支持读取和生成JSON。
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的灵活性、易解析性和简单性使软件开发人员能够在各种编程环境中高效地处理结构化数据。
SON对象是什么?
JSON代表JavaScript对象表示法,是一种基于JavaScript对象语法的结构化数据的标准文本格式。JSON仅定义了两种数据结构:对象和数组。JSON对象是由花括号括起来的键/值对组成的数据类型。JSON数组是值的列表。当数据从服务器发送到网页或数据存储在文件或数据库中时,通常会使用JSON对象。JSON与JavaScript对象文字语法非常相似,但可以独立于JavaScript使用。许多编程环境支持读取和生成JSON。
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中的变量) {语句}
参数 | 必需/可选 | 描述 |
变量 | 必需 | 对于每次迭代,下一个属性的值被赋给变量。变量可以使用const、let或var声明。 |
可迭代对象 | 必需 | 循环操作的值的来源。 |
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的灵活性、易解析性和简单性使软件开发人员能够在各种编程环境中高效地处理结构化数据。
ypeScript编程实践
一、JSON简介
基本概念:JavaScript对象简谱(JSON, JavaScript Object Notation)是一种轻量级的数据交换格式。JSON是基于ECMAScript的一个子集,以完全独立于编程语言的文本格式来存储和表示数据的。
简单概念:JSON是用于存储和传输数据的格式。
形式:文件(.json)或字符串
二、JSON语法
JSON是一个标记符的序列,包含六个构造字符([ ] { } : ,)、字符串、数字和三个字面名(true false null)。
JSON是一个序列化的对象或数组。
// 用JSON来表示两本书
[{
"title": "JavaScript高级程序设计",
"author": "Matt Frisbie",
"price": 129.00,
"count": 100,
"ebook": false
}, {
"title": "JavaScript权威指南",
"author": "David Flanagan",
"price": 139.00,
"count": 88,
"ebook": true
}]
// [] 表示数组
// {} 表示对象
// key: value 键值对
三、JSON和TypeScript(JavaScript)
/* JavaScript对象 */
let obj={ "name": "热巴", "age": 18, "gender": "female" }
/* JavaScript字符串,JSON字符串 */
let json='{ "name": "热巴", "age": 18, "gender": "female" }'
/* JSON字符串转JavaScript对象 */
let obj=JSON.parse(json)
/* JavaScript对象转JSON字符串 */
let json=JSON.stringify(obj)
当你想在你的代码中找到一个错误时,这很难;当你认为你的代码是不会有错误时,这就更难了。—Steve McConnell 《代码大全》
*请认真填写需求信息,我们会在24小时内与您取得联系。