JavaScript中如何正确处理JSON

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中的变量) {语句}

参数	必需/可选	描述
变量	必需	对于每次迭代，下一个属性的值被赋给变量。变量可以使用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的灵活性、易解析性和简单性使软件开发人员能够在各种编程环境中高效地处理结构化数据。

. 正则匹配ip地址

<script type="text/javascript">
/*匹配ip地址
//192.35.61.137
//第一段：1--223
个位数： 1-9 [1-9]
十位数： 10-99 [1-9]\d
百位数： 100-199 1\d\d
二百位1：200-219 2[01]\d
二百位2：220-223 22[0-3]
var reg=/^([1-9]|[1-9]\d|1\d\d|2[01]\d|22[0-3])$/;
//第二、三、四段：0--255
个位数： 0-9 \d
十位数： 10-99 [1-9]\d
百位数： 100-199 1\d\d
二百位1: 200-249 2[0-4]\d
二百位2: 250-255 25[0-5]
var reg=/^(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/;
*/
var reg=/^([1-9]|[1-9]\d|1\d\d|2[01]\d|22[0-3])(\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])){3}$/;
var str="2.0.157.239";
var rst=str.match(reg);
document.write(rst);
</script>

2.正则匹配邮箱

<script type="text/javascript">
/*匹配邮箱
tom@163.com
mary_999@qq.com
_linken123@sohu234.com
2973293@qq.com
xiaoming_555@163.com.cn
Aobama@whitehouce.com
规则：第一个内容是 字母 或 数字 或 下划线
后边跟许多字母、数字、下划线
中间有@符号
后边有域名为：字母或数字混合
后缀：.字母字符串, 并且有多个
*/

var reg=/^\w{6,10}@[a-z0-9]+(\.[a-z]+)+$/;
var str="xiaoming";//null
var str="297283992@163.com";//["297283992@163.com", ".com"]
var str="_linken123@sohu234.com";//["_linken123@sohu234.com", ".com"]
var str="Aobama@whitehouce.com";//["Aobama@whitehouce.com", ".com"]
var rst=str.match(reg);
document.write(rst);
</script>

3.校验注册表单项目

么是JavaScript

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

JavaScript特点

是一种解释性脚本语言（代码不进行预编译）。

主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

JavaScript组成

JavaScript日常用途

1、嵌入动态文本于HTML页面。

2、对浏览器事件做出响应。

3、读写HTML元素。

4、在数据被提交到服务器之前验证数据。

5、检测访客的浏览器信息。

6、控制cookies，包括创建和修改等。

7、基于Node.js技术进行服务器端编程。

JavaScript的基本结构

<script type="text/javascript">
 <!—
 JavaScript 语句;
 —>
</script >

示例：

……
<title>初学JavaScript</title>
</head>
<body>
<script type="text/javascript">
 document.write("初学JavaScript");
 document.write("<h1>Hello，JavaScript</h1>");
</script>
</body>
</html>

<script>…</script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可

JavaScript的执行原理

网页中引用JavaScript的方式

1、使用<script>标签

2、外部JS文件

<script src="export.js" type="text/javascript"></script>

3.直接在HTML标签中

<input name="btn" type="button" value="弹出消息框" 
 onclick="javascript：alert('欢迎你');"/>

JavaScript核心语法：

1. 变量

①先声明变量再赋值

var width;
width=5;
var － 用于声明变量的关键字
width － 变量名

②同时声明和赋值变量

var catName="皮皮";
var x, y, z=10;

③不声明直接赋值【一般不使用】

width=5;

变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用。

2. 数据类型

①undefined：示例：var width;

变量width没有初始值，将被赋予值undefined

②null：表示一个空值，与undefined值相等

③number：

var iNum=23; //整数

var iNum=23.0; //浮点数

④Boolean：true和false 但是JS会把他们解析成1；0

⑤String：一组被引号（单引号或双引号）括起来的文本 var string1="This is a string";

3. typeof运算符

typeof检测变量的返回值；typeof运算符返回值如下：

①undefined：变量被声明后，但未被赋值.

②string：用单引号或双引号来声明的字符串。

③boolean：true或false。

④number：整数或浮点数。

⑤object：javascript中的对象、数组和null。

在线咨询

上一篇：删除括号文字和竖向文字fnss 删除括号文字和竖向文
下一篇：HTML思想

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript中如何正确处理JSON

输出

结论

您的项目需求