JSON.stringify的应用说明

前言

JSON.stringify() 方法将 JavaScript 对象转换为字符串,在日常开发中较常用，但JSON.stringify其实有三个参数，后两个参数，使用较少，今天来介绍一下后两个参数的使用场景和示例。

语法及参数说明

JSON.stringify()：将 JavaScript 对象或数组转换为字符串。

语法

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

参数说明：

value:
必需，要转换的 JavaScript 值（通常为对象或数组）。
replacer:
可选。用于转换结果的函数或数组。
如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：“”。
如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。
space:
可选，文本添加缩进、空格和换行符。如果是数字，则表示每个级别的缩进空格数。space 也可以使用非数字，如：\t、\n、\r。

使用示例

JavaScript 对象转换，space参数的使用

const obj = {
  name: "Runoob",
  price: 10000,
  suport: "China",
};
console.log("默认转换", JSON.stringify(obj));
console.log("空格缩进", JSON.stringify(obj, null, 4));
console.log("/t缩进", JSON.stringify(obj, null, "\t"));
console.log("/n缩进", JSON.stringify(obj, null, "\n"));
console.log("/r缩进", JSON.stringify(obj, null, "\r"));

输出结果：
在这里插入图片描述

repalce参数的使用

JSON 不允许包含函数，JSON.stringify() 会删除 JavaScript 对象的函数，包括 key 和 value。
如果需要保留函数，可以使用 replacer 函数。如果要保留对象中的函数，可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免被删除。

var obj2 = {
  name: "Runoob",
  alexa: function () {
    return 10000;
  },
  suport: "China",
};
console.log("默认转换", JSON.stringify(obj2));

输出结果： {"name":"Runoob","suport":"China"}
从结果中可以看到，javascript中的函数被自动删除了，如果我们要保留，可以使用第二个参数replace来处理。

var obj2 = {
  name: "Runoob",
  alexa: function () {
    return 10000;
  },
  suport: "China",
};
//使用第二个参数，处理function函数
var toJsonStr = JSON.stringify(obj2, (key, value) => {
  if (typeof value === "function") {
    return value.toString();
  }
  return value;
});
console.log("使用replacer函数转字符串", toJsonStr);
//{"name":"Runoob","alexa":"function() {\n        return 1e4;\n      }","suport":"China"}

// 将JSON字符串转换为JavaScript对象
let toObj = JSON.parse(toJsonStr);
// 转换为函数,此处也可以使用函数处理
toObj.alexa = eval("(" + toObj.alexa + ")");
console.log("log内容toObj.alexa()", toObj.alexa()); //10000