深度使用JSON.stringify()

按照 JSON 的规范,使用 JSON.stringify() 做对象序列化时,如果一个属性为函数,那这个属性就会被忽略。

const data1 = {
  a: ‘aaa‘,
  fn: function() {
    return true
  }
}
JSON.stringify(data)

// 结果是  "{"a":"aaa"}"

还有一种情况,一个属性的值为 undefined

const data2 = {
  a: ‘abc‘,
  b: undefined
}
JSON.stringify(data2)

// 结果是  "{"a":"abc"}"

如果属性为 null 则可以正常序列化这个属性:

const data3 = {
  a: ‘abc‘,
  b: null
}
JSON.stringify(data3)

// 结果是  "{"a":"abc","b":null}"

因为 null 可表示已经赋值,而 undefined 表示未定义、未赋值,所以执行 JSON.stringify 不会处理。

stringify 函数

stringify 函数的定义为 JSON.stringify(value [, replacer [, space]])

后面还带有我不常用两个可选参数 replacer 和 space

value 参数不多解释,replacer 其实就是一个自定义函数,可以改变 JSON.stringify 的行为,space 就是格式化输出,最大值为 10,非整数时取值为 1

stringify 输出 Function

本质上无论怎么改,stringify 还是不会输出 Function,但是 Function 可以调用 toString() 方法的,所以思路就很明了了。

const data1 = {
  a: ‘aaa‘,
  fn: function() {
    return true
  }
}

const replace = function(k ,v) {
  if(typeof v === ‘function‘) {
    return Function.prototype.toString.call(v)
  }
  return v
}

JSON.stringify(data1, replace)

// 结果  "{"a":"aaa","fn":"function () {\n    return true\n  }"}"

同理可证 undefined 也能输出了

const replace = function(k ,v) {
  if(v === undefined){
    return ‘undefined‘
  }
  return v
}

stringify 格式化输出

JSON.stringify 的第三个参数很简单,相当于我们编辑器的 tab_size

const data4 = {
  a: ‘abc‘,
  b: null,
  c: {
    x: ‘xxx‘,
    y: ‘yyy‘,
    z: 2046
  },
  d: 9527
}

JSON.stringify(data4, null, 2);

// 输出结果

/*
"{
  "a": "abc",
  "b": null,
  "c": {
    "x": "xxx",
    "y": "yyy",
    "z": 2046
  },
  "d": 9527
}"
*/

toJSON 方法

toJSON 是个覆盖函数,尽量少用,看了代码就懂了:

const data5 = {
  a: ‘abc‘,
  b: null,
  c: {
    x: ‘xxx‘,
    y: ‘yyy‘,
    z: 2046
  },
  d: 9527,
  toJSON: function() {
    return ‘WTF‘
  }
}

JSON.stringify(data5, null, 2);

// 结果返回  "WTF"
时间: 2024-10-25 01:56:09

深度使用JSON.stringify()的相关文章

JSON.stringify()的深度使用

在使用JSON.stringify()对JSON数据进行序列化时 1> 如果里面的属性是function,则会被忽略 const data = { a: 'a', fn: funciton() { return true } } JSON.stringify(data); // "{"a":"a"}" *******fn属性被忽略了********** 2> 如果里面的属性的值是undefined, 也是会被忽略的 const dat

angular,,以及深度拷贝问题;JSON.parse,JSON.stringify灵活运用

问题: $scope.list = [];$scope.listTree = {};$scope.dataTree = []; //获取listTree的数据$scope.getList = function () { serviceStruct.getAll({},path).then(function (res) { $scope.listTree = res.data || res.data.result; getGroup($scope.listTree); }).then(functi

JSON.stringify

作用:这个函数的作用主要是为了系列化对象的. 可能有些人对系列化这个词过敏,我的理解很简单.就是说把原来是对象的类型转换成字符串类型(或者更确切的说是json类型的).就这么简单.打个比方说,你有一个类,那么你可以通过这个方法转换成相应的json类型的.很简单吧. 接着看. 语法: JSON.stringify(value [, replacer] [, space]) value:是必须要的字段.就是你输入的对象,比如数组啊,类啊等等. replacer:这个是可选的.它又分为2种方式,一种是

JSON.parse()和JSON.stringify()

JSON.parse(): 把json格式的字符 解析成json对象. 例如: var str = '{'a':1, 'b': 2}';  JSON.parse(str ) 结果为: Object:  {a:1 , b:2} JSON.stringify() : 把一个对象解析成字符串. 例如: var a = {a:1,b:2}  JSON.stringify(a) //结果为  '{'a':1,'b':2}' 应用:可以使用这两种方法,处理cookie等数据,转化成对象易于读取,字符串用于存

浅谈JSON.parse()、JSON.stringify()和eval()的作用

相信大家对于JSON应该不陌生,度娘对这个名词的解释大致如下: “JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集.因为采用独立于语言的文本格式,也使用了类似于C语言家族的习惯,拥有了这些特性使JSON成为理想的数据交换语言,作用是易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率).” 今天在这里笔者想简单谈谈jquery里面的JSON.parse()和JSON.stringify()函数,顺便

JSON.stringify 函数

作用:将对象(JSON对象)转换成字符串(JSON字符串) 例子: var person = new Object(); person.name = "zhangan"; person.age = "20"; console.info(person); // Object {name: "zhangan", age: "20"} console.info(JSON.stringify(person)); // {"n

JSON.stringify()执行出错是如何产生的?

本文和大家分享的主要是JSON.stringify()执行出错相关内容,一起来看看吧,希望对大家学习json有所帮助. Uncaught TypeError: Converting circular structure to JSON 这个错误是执行JSON.stringify() 时抛出的异常信息 JSON.stringify()用于将json格式转换为string格式,与JSON.parser()相辅相成. 两种方式会导致该错误: 1.json格式数据存在循环调用. 举个例子: var ob

JSON.parse() 和 JSON.stringify()使用

1.parse()是用于从一个字符串中解析出json对象 定义一个字符串:var str = '{"name":"superman","age":"23"}'; 通过JSON.parse(str)后变成一个对象: 取值可以用JSON.parse(str).name 或者 JSON.parse(str)["age"] 注意:单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常. 2.stringify(

有了JSON.stringify(),处理json将变得更简单!!

之前处理json 需要拼接json字符串,但是,如果用上JSON.stringify()的话,忘了json语法以没关系了..... 1 @{ 2 ViewBag.Title = "GetStr"; 3 } 4 5 <html> 6 <head> 7 <title> </title> 8 <script type="text/javascript" src="~/Scripts/jquery-1.7.1.