练习 JSON - JavaScript

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，它具有易于理解和编写的特点，而且广泛应用于前端和后端开发中。

在 JavaScript 中，使用 JSON 格式存储数据是一种非常常见的操作。在本文中，我们将介绍如何使用 JavaScript 处理 JSON 数据。

JSON 格式

JSON 格式一般表示为一个对象，可以包含多个属性和值，如下所示：

{
  "name": "John",
  "age": 30,
  "city": "New York"
}

在 JavaScript 中，可以使用 JSON.parse() 方法将 JSON 格式的数据转换成 JavaScript 对象，如下所示：

const jsonStr = '{ "name": "John", "age": 30, "city": "New York" }';
const jsonObj = JSON.parse(jsonStr);
console.log(jsonObj); // { name: 'John', age: 30, city: 'New York' }

同样地，也可以使用 JSON.stringify() 方法将 JavaScript 对象转换成 JSON 格式的数据，如下所示：

const jsonObj = { name: 'John', age: 30, city: 'New York' };
const jsonStr = JSON.stringify(jsonObj);
console.log(jsonStr); // '{"name":"John","age":30,"city":"New York"}'

JSON 文件

除了直接在 JavaScript 中处理 JSON 数据外，还可以将 JSON 数据存储在文件中，再进行操作。

可以使用 Node.js 的 fs 模块读取和写入文件。例如，读取一个 JSON 文件并将其转换成对象：

const fs = require('fs');

const data = fs.readFileSync('data.json');
const jsonObj = JSON.parse(data);

console.log(jsonObj);

或者，将一个 JavaScript 对象转换成 JSON 格式的数据并写入到一个文件中：

const fs = require('fs');

const jsonObj = { name: 'John', age: 30, city: 'New York' };
const jsonStr = JSON.stringify(jsonObj);

fs.writeFileSync('data.json', jsonStr);

JSONP

JSONP 是一种使用 JSON 格式传递数据的方法，它使用了函数调用的方式进行传递。

一般地，JSONP 请求的 URL 中包含一个参数，其值为回调函数的名称，如下所示：

http://example.com/data?callback=handleData

服务器返回的数据包含在一个函数调用中，函数名称就是 URL 参数中指定的回调函数名称，如下所示：

handleData({ "name": "John", "age": 30, "city": "New York" });

在 JavaScript 中，可以定义对应的回调函数，如下所示：

function handleData(data) {
  console.log(data);
}

然后，可以通过动态创建 <script> 标签的方式发起 JSONP 请求，如下所示：

const script = document.createElement('script');
script.src = 'http://example.com/data?callback=handleData';
document.head.appendChild(script);

总结

在 JavaScript 中操作 JSON 数据是一种非常常见的操作。通过 JSON.parse() 和 JSON.stringify() 方法可以将 JSON 格式的数据转换成 JavaScript 对象和字符串。同时，也可以将 JSON 数据存储在文件中进行操作。另外，JSONP 是一种通过函数调用的使用 JSON 数据的方式，在前端开发中也非常常见。