我们来详细讲解 JS 中操作 JSON 的完整攻略。
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,常用于前后端数据传输,也被广泛应用于配置文件、日志文件等数据交换场景。在 JavaScript 中,我们可以直接操作 JSON,完成数据的解析、修改、序列化等操作。下面我们来逐步介绍相关知识点。
JSON 基础
JSON 格式及基本语法
JSON 是一种基于面向对象的轻量级数据交换格式,因此其格式与 JavaScript 中的对象很相似。 JSON 的基本语法如下所示:
{
"name": "Bob",
"age": 18,
"gender": "male"
}
其中使用花括号 {}
表示一个 JSON 对象,可以包含多个属性,每个属性由一个键值对组成,键名和键值之间使用英文冒号 :
分隔。键名必须为字符串类型,键值可以是字符串、数字、布尔值、数组、对象等。
JSON 的数据类型和数据结构
JSON 中的数据类型和数据结构包括:
- 对象(object):使用花括号
{}
表示,包含多个键值对。 - 数组(array):使用方括号
[]
表示,包含多个值,可以是字符串、数字、对象、数组等类型。 - 字符串(string):使用双引号包裹,表示一个文本字符串。
- 数字(number):表示一个数字类型,可以是整型、浮点型等。
- 布尔值(boolean):表示一个 true 或 false 的逻辑值。
- 空值(null):表示一个空值。
JSON 的序列化和反序列化
在 JavaScript 中,我们可以将一个 JSON 对象序列化为一个 JSON 字符串,也可以将一个 JSON 字符串反序列化为一个 JSON 对象。
序列化可以使用 JSON.stringify()
方法,反序列化可以使用 JSON.parse()
方法。例如:
const jsonObj = {
"name": "Bob",
"age": 18,
"gender": "male"
};
// 将 jsonObj 转为 JSON 字符串
const jsonString = JSON.stringify(jsonObj);
console.log(jsonString); // 输出:"{\"name\":\"Bob\",\"age\":18,\"gender\":\"male\"}"
// 将 JSON 字符串反序列化为 JSON 对象
const json = JSON.parse(jsonString);
console.log(json); // 输出:{ name: 'Bob', age: 18, gender: 'male' }
JSON 操作
访问 JSON 对象的属性
访问 JSON 对象的属性和访问 JavaScript 对象的属性非常类似,使用 obj.key
或 obj["key"]
的语法即可。例如:
const jsonObj = {
"name": "Bob",
"age": 18,
"gender": "male"
};
// 访问 jsonObj 的 name 属性
console.log(jsonObj.name); // 输出:Bob
// 访问 jsonObj 的 age 属性
console.log(jsonObj["age"]); // 输出:18
修改和新增 JSON 对象的属性
修改或新增 JSON 对象的属性,同样可以使用 obj.key
或 obj["key"]
的语法。例如:
const jsonObj = {
"name": "Bob",
"age": 18,
"gender": "male"
};
// 修改 jsonObj 的 age 属性
jsonObj.age = 20;
// 新增或修改 jsonObj 的 phone 属性
jsonObj["phone"] = "123456789";
console.log(jsonObj); // 输出:{ name: 'Bob', age: 20, gender: 'male', phone: '123456789' }
删除 JSON 对象的属性
删除 JSON 对象的属性可以使用 JavaScript 中的 delete
关键字。例如:
const jsonObj = {
"name": "Bob",
"age": 18,
"gender": "male"
};
// 删除 jsonObj 的 age 属性
delete jsonObj.age;
console.log(jsonObj); // 输出:{ name: 'Bob', gender: 'male' }
循环遍历 JSON 的键值对
使用 for...in
循环可以遍历 JSON 对象的所有键值对。例如:
const jsonObj = {
"name": "Bob",
"age": 18,
"gender": "male"
};
// 遍历 jsonObj 的所有键值对
for (const key in jsonObj) {
console.log(`${key}: ${jsonObj[key]}`);
}
输出结果为:
name: Bob
age: 18
gender: male
复杂 JSON 对象的访问和修改
复杂的 JSON 对象可能包含多重嵌套,访问和修改起来会比较复杂。这时可以结合数组下标和对象属性的方式访问和修改 JSON 对象。
例如,对于以下 JSON 对象:
const jsonObj = {
"name": "Bob",
"age": 18,
"contacts": [
{
"type": "phone",
"value": "123456789"
},
{
"type": "email",
"value": "bob@example.com"
}
]
};
可以使用以下代码访问和修改各个属性:
// 访问 jsonObj 中联系方式数组的第一个元素的值属性
console.log(jsonObj.contacts[0].value); // 输出:123456789
// 修改 jsonObj 中联系方式数组的第二个元素的值属性
jsonObj.contacts[1].value = "bob@example.org";
// 新增 jsonObj 中联系方式数组的第三个元素
jsonObj.contacts.push({
"type": "wechat",
"value": "BobWeChat"
});
console.log(jsonObj); // 输出修改后的 JSON 对象
示例说明
示例一:从后端接口获取 JSON 数据
假设我们有一个客户端应用,需要从后端接口获取 JSON 数据,然后渲染到页面上。我们可以使用 JavaScript 中的 fetch
方法获取 JSON 数据,然后使用 JSON.parse
方法将其转换为 JSON 对象,最后根据需要对 JSON 对象进行操作、修改和渲染。
以下是一个示例代码:
fetch("/api/user/1")
.then(response => response.json())
.then(jsonData => {
console.log(jsonData); // 输出从后端接口获取的 JSON 数据
// 将从后端接口获取的 JSON 数据渲染到页面中
const nameEl = document.getElementById("name");
const ageEl = document.getElementById("age");
const genderEl = document.getElementById("gender");
nameEl.textContent = jsonData.name;
ageEl.textContent = jsonData.age;
genderEl.textContent = jsonData.gender;
});
示例二:将表单数据序列化为 JSON 字符串
假设我们有一个包含表单的页面,用户填写表单后需要将表单数据序列化为 JSON 字符串,然后提交到后端保存。我们可以使用 JavaScript 中的 FormData
对象获取表单数据,然后根据需要构建 JSON 对象,最后使用 JSON.stringify
方法将其转换为 JSON 字符串。
以下是一个示例代码:
<form id="myForm">
<label for="name">姓名:</label>
<input type="text" name="name" id="name">
<br>
<label for="age">年龄:</label>
<input type="number" name="age" id="age">
<br>
<label for="gender">性别:</label>
<select name="gender" id="gender">
<option value="male">男</option>
<option value="female">女</option>
</select>
<br>
<button type="submit">提交</button>
</form>
<script>
const formEl = document.getElementById("myForm");
formEl.addEventListener("submit", event => {
event.preventDefault();
const formData = new FormData(formEl);
const jsonObj = {};
for (const [key, value] of formData.entries()) {
jsonObj[key] = value;
}
const jsonString = JSON.stringify(jsonObj);
console.log(jsonString); // 输出序列化后的 JSON 字符串
// 将序列化后的 JSON 字符串提交到后端保存
// ...
});
</script>
以上是对操作 JSON 的一些基本介绍和实践。操作 JSON 对于前端开发非常常见,能熟练掌握 JSON 的基础知识和常见操作方法是非常必要的。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS中操作JSON总结 - Python技术站