JSON方法

一月 20, 2020 JSON学习本文总阅读量次

注意需要JSON.parse()处理的场景，并不是所有情况下json对象都需要parse转为js对象才能使用js方法

使用注意事项

本地定义的json对象，不需要JSON.parse()处理可直接用js方法
- 因为本地定义的 JSON 对象，它已经是一个有效的 JavaScript 对象，所以可以直接使用 JavaScript 方法来操作和访问这个对象
如果你从外部来源（如服务器响应）获取到的是 JSON 字符串，那么你需要使用 JSON.parse() 方法将其转换为 JavaScript 对象，才能进行操作
- 注意：在默认情况下，Axios 会自动将接收到的 JSON 数据转换为 JavaScript 对象，所以使用axios获取的也不需要手动转

parse()将JSON字符串转换为 JS 对象（接受服务器数据）

JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是JSON字符串（JSON字符串长的很像JS对象）。
我们可以使用 JSON.parse() 方法将JSON字符串数据转换为 JavaScript 对象。

语法

JSON.parse(text[, reviver])
参数：
text:必需，一个有效的 JSON 字符串。（确保你的数据是标准的 JSON 格式，否则会解析出错）
reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数。(例子在下面“JSON 不能存储 Date 对象的解决方法”中)

例子

例如我们从服务器接收了这样的JSON字符串数据：

1	{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }

使用 JSON.parse() 方法处理以上数据，将其转换为 JavaScript 对象：

1	var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');

注意：解析前要确保你的数据是标准的 JSON 格式，否则会解析出错。
可以使用在线工具检测：https://c.runoob.com/front-end/53。
完整例子

从服务端接收 JSON 数据

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
xmlhttp.send();

可以使用 AJAX 从服务器请求 JSON 数据，并解析为 JavaScript 对象。
完整例子

从服务端接收数组的 JSON 数据

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myArr = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myArr[1];
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true);
xmlhttp.send();

完整例子

JSON 不能存储 Date 对象的解决方法

JSON 不能存储 Date 对象。
如果你需要存储 Date 对象，需要将其转换为字符串,之后再将字符串转换为 Date 对象。

例子（完整例子点击这里）：

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text);//将其转换为字符串
obj.initDate = new Date(obj.initDate);//再将字符串转换为 Date 对象
 
document.getElementById("demo").innerHTML = obj.name + "创建日期: " + obj.initDate;//Runoob创建日期: Sat Dec 14 2013 08:00:00 GMT+0800 (中国标准时间)

可以启用 JSON.parse 的第二个参数 reviver，一个转换结果的函数，对象的每个成员调用此函数：

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
//将其转换为字符串
var obj = JSON.parse(text, function (key, value) {
//每个对象都走一遍，遇到initDate时将字符串值转换为 Date 对象
    if (key == "initDate") {
        return new Date(value);
    } else {
        return value;
}});
 
document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.initDate;

（完整例子点击这里）

JSON解析函数的方法

首先，不建议在 JSON 中使用函数。JSON 不允许包含函数！！

但你可以将函数作为字符串存储，之后再将字符串转换为函数：

var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.alexa = eval("(" + obj.alexa + ")");
 
document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa();

eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。如果参数是一个表达式，eval()函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。
完整例子

stringify()将 JS 对象转换为JSON字符串(向服务器发送数据)

JSON 通常用于与服务端交换数据。
在向服务器发送数据时一般是JSON字符串。
我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为JSON字符串。

语法

1	JSON.stringify(value[, replacer[, space]])

value:
必需，要转换的 JavaScript 值（通常为对象或数组）。

replacer:
可选。用于转换结果的函数或数组。
如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：””。
如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。

space:
可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

JavaScript 对象转换为JSON字符串

例如我们向服务器发送以下JS对象数据：

1	var obj = { name:"hlz", alexa:10000, site:"www.baidu.com"};

使用 JSON.stringify() 方法处理以上JS对象，将其转换为字符串：

1	var myJSON = JSON.stringify(obj);

myJSON 为JSON字符串。

完整例子:

1
2
3

var obj = { name:"hlz", alexa:10000, site:"www.baidu.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;//{"name":"hlz","alexa":10000,"site":"www.baidu.com"}

JavaScript 数组转换为 JSON 字符串

也可以将 JavaScript 数组转换为 JSON 字符串,myJSON 为JSON字符串：

1
2
3

var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];
var myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;

(完整例子)

JSON 不能存储 Date 对象的解决方法

JSON 不能存储 Date 对象。

可以使用 JSON.stringify() 将所有日期转换为JSON字符串myJSON：

1
2
3

var obj = { name:"Runoob", initDate:new Date(), site:"www.runoob.com"};//obj是一个JS对象
var myJSON = JSON.stringify(obj);//将所有日期转换为JSON字符串myJSON
document.getElementById("demo").innerHTML = myJSON;//{"name":"Runoob","initDate":"2020-01-20T14:04:12.438Z","site":"www.runoob.com"}

之后可以再将JSON字符串myJSON转换为 Date 对象。（完整例子）。

解析函数的方法

JSON 不允许包含函数,不建议在 JSON 中使用函数。

JSON.stringify() 会删除 JavaScript 对象的函数，包括 key 和 value(完整例子):

var obj = { name:"Runoob", alexa:function () {return 10000;}, site:"www.runoob.com"};
var myJSON = JSON.stringify(obj);
 
document.getElementById("demo").innerHTML = myJSON;//{"name":"Runoob","site":"www.runoob.com"}

解决方法：

方法1：可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免以上问题的发生(完整例子)：

var obj = { name:"Runoob", alexa:function () {return 10000;}, site:"www.runoob.com"};
obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);
 
document.getElementById("demo").innerHTML = myJSON;//{"name":"Runoob","alexa":"function () {return 10000;}","site":"www.runoob.com"}

方法2：json中存函数名，页面定义函数内容，接收到json对象中有定函数名的执行相关函数

什么时候用json文件存储数据

常用场景

数据传输和API交互：在客户端和服务器之间传输数据时，通常使用JSON格式。客户端可以将数据序列化为JSON字符串进行传输，服务器端则可以将接收到的JSON字符串解析为对象进行处理。API通常也会以JSON格式返回数据，以便客户端能够轻松解析和使用。
- 注意：在默认情况下，Axios 会自动将接收到的 JSON 数据转换为 JavaScript 对象
配置文件：JSON格式可以用于存储配置信息。通过将配置数据（如应用程序配置、界面配置等）存储为JSON文件，可以轻松地读取和修改配置信息。许多应用程序和框架使用JSON作为配置文件的标准格式。
数据存储：JSON可以用于将结构化数据存储在数据库中或持久化到磁盘。许多数据库支持存储和查询JSON数据类型，这使得存储和检索复杂的数据结构变得更加灵活和方便。
前端开发：在前端开发中，JSON经常用于表示和处理数据。通过将后端返回的数据转换为JSON对象，前端可以轻松地操作和展示数据。JSON也可以作为配置数据或静态数据直接嵌入到前端应用程序中。

工作场景

我感觉，配置文件包括数量略大且不需要频繁更改的数据，这种场景可以使用json文件进行数据存储
优势：将这些数据与代码分离，可以方便后续快速定位进行维护和修改
比如：
- 定义vxe-table的表头、列字段名、是否需要忽略缓存强制更新等等配置项，可以给每张表定义一个json文件存储相关配置，在vue中引入json文件赋值给配置项。后续新增列都可直接修改json文件
- 权限控制中，字段名、字段中文名、权限id，我们需要通过字段名可快速获取到对应字段中文名和权限id，权限字段数量多，可以新建json文件来存储。在vue中import引入后可直接使用json对象，甚至都不用进行转换，很方便

不与后端交互却仍然使用JSON来存储数据的情况

本地存储：前端可以使用浏览器提供的本地存储机制（如localStorage、sessionStorage）将数据存储在客户端。在这种情况下，通常会将数据转换为JSON格式进行存储和检索。这样可以方便地在客户端持久化数据，以供后续使用。
缓存数据：前端应用程序可能需要缓存某些数据以提高性能和用户体验。通过将数据转换为JSON格式，可以将数据存储在内存或浏览器缓存中，以便在后续页面加载或用户操作时快速访问。
- 注意：json数据不会自动缓存在浏览器，但vue import引入json数据不需要缓存，webpack打包将其转为静态资源存在最终构建文件中
- 如果需要缓存，可以利用浏览器的缓存机制来存储和访问JSON数据：
  - 本地存储：浏览器提供了本地存储机制，如localStorage和sessionStorage。可以将JSON数据转换为字符串，并使用这些机制将其存储在客户端。这样可以在浏览器关闭后仍然保留数据，并且可以在需要时快速检索
    - 对于sessionStorage/localStorage来说，它的值只能存储字符串。当你尝试将非字符串值存储到sessionStorage中时，它会自动将其转换为字符串进行存储
      1
      2
      3
      // 例子
      sessionStorage.setItem("testObj", {a:"1"});
      sessionStorage.getItem("testObj"); // '[object Object]' 此时无法再转回我们期望的数据
    - 如果你要存储非字符串类型的值（例如数字、对象或数组），你可以使用JSON.stringify()方法将其转换为字符串，然后再存储到sessionStorage中。当需要使用这些值时，你可以使用JSON.parse()方法将存储的字符串重新转换为原始的数据类型。
      1
      2
      3
      4
      // 例子
      sessionStorage.setItem("testObj", JSON.stringify({a:"1"}));
      sessionStorage.getItem("testObj"); // '{"a":"1"}'
      JSON.parse(sessionStorage.getItem("testObj")) // {a: '1'}
  - 缓存控制：通过在HTTP响应头中设置缓存相关的标头（如Cache-Control、Expires、ETag等），可以指示浏览器在一段时间内缓存JSON数据。这样可以减少对后端的请求，并提高应用程序的性能
  - Service Worker
表单数据管理：当前端应用程序中需要管理大量的表单数据时，可以使用JSON对象来组织和存储表单数据。这样可以方便地对表单数据进行操作、验证和处理。
配置数据：前端应用程序中的配置数据（如应用程序配置、界面配置等）可以以JSON格式存储。这样可以将配置数据与代码分离，方便维护和修改。
数据模拟和测试：JSON文件的独立性和可读性使其在数据模拟和测试方面非常有用。您可以为不同的测试场景创建不同的JSON文件，模拟不同的数据情况，从而更方便地进行单元测试、集成测试和模拟数据的开发。

vue import引入json数据

使用import语句在Vue项目中引入JSON文件时，Webpack（或其他构建工具）会将该JSON文件打包到最终的构建文件中，而不会在运行时发起额外的网络请求
所以不存在需要缓存的问题，通过Webpack打包的JSON数据是作为静态资源包含在最终的构建文件中的

特别的使用场景

可参考MDN，官方推荐使用console.log(JSON.parse(JSON.stringify(obj)))
控制台console.log打印对象变量时，在控制台中得到的是对该对象的引用，这不一定是你调用 console.log() 时该对象的“值”，但它一定是该对象在你打开控制台时的值
如果不想打断点进行查看，可以使用JSON.parse()将该变量转为字符串打印出来，即可观察到实时情况而不是延后情况