JSON.parse 和 JSON.stringify 详解

这篇具有很好参考价值的文章主要介绍了JSON.parse 和 JSON.stringify 详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

JSON格式,(简写JavaScript Object Notation),是一种用于数据交换的文本格式,书写简单。
基于JavaScript原生语法,能够序列化对象、数组、数值、字符串、布尔值和 null。

在ES5中,增加了一个JSON对象,专门用来处理JSON格式的数据。
JSON是一个对象,但只有两个方法:parse 和 stringify,不能作为构造函数,也无属性。

typeof JSON === 'object'

JSON.parse

JSON.parse() 用来解析JSON字符串,得到对应的JavaScript值或对象。

JSON.parse('{}') // {}
JSON.parse('true') // true
JSON.parse('null') // null

JSON.parse 语法

JSON.parse(text[, reviver])
  • text:要被解析成的字符串。
    如果传入数字则会转换成十进制数字输出。
    如果传入布尔值则直接输出。
    如果传入null则输出null。
    不支持其他类型的值,否则报错。
  • reviver: 可选,转换器, 可以用来修改解析生成的原始值。

返回值: JavaScript对象/值, 对应给定JSON文本的对象/值。

reviver 参数

reviver函数,用于转换处理解析到的JavaScript值,处理完后返回最终的结果。

转换过程:

  • 解析的值本身和它可能包含的所有属性,按照一定遍历顺序分别调用reviver函数,属性名和值作为参数两个参数 key 和 value 传入。
    遍历顺序:按照层级,从内往外遍历,最终到达最顶层,则是解析值本身。
  • reviver返回undefined,则删除该对象,如果返回了其他值,则该值会成为当前属性的新值。
  • 当遍历到最顶层时,因为没有属性了,参数key是空字符串'',参数value则是当前解析值。

对于reviver函数的两个参数 key 和 value,不同的数据类型:

  • 基本值类型数据(string、number、boolean)和null,以及空对象{}和空数组[]
    则key是空字符串,value是对应解析值。
    因为已经是最顶层,并没有别的属性。
  • Object对象:
    则key和value都存在,与属性名和值各自对应。
    最顶层会返回一个参数key为空的值。
  • 数组:
    key对应数组索引,value对应元素值。
    最顶层会返回一个参数key为空的值。

基本类型的转换:

JSON.parse('5', function (key, value) {
  console.log(`key:${key}, value:${value}`)
})
// key:, value:5
JSON.parse('null', function (key, value) {
  console.log(`key:${key}, value:${value}`)
})
// key:, value:null
JSON.parse('{}', function (key, value) {
  console.log(`key:${key}, value:`, value)
})
// key:, value:{}

Object对象和数组:

JSON.parse('[1, 2]', function (key, value) {
  console.log(`key:${key}, value:`, value)
})
// key:0, value: 1
// key:1, value: 2
// key:, value: (2) [empty × 2]

JSON.parse('{ "user": "张三", "info": { "age": 25, "sex": 1 } }', function (key, value) {
  console.log(`key:${key}, value::`, value)
})
// key:user, value:: 张三
// key:age, value:: 25
// key:sex, value:: 1
// key:info, value:: {}
// key:, value:: {}

数据处理:

JSON.parse('[1, 2]', function (key, value) {
  if(key === '') {
    return value
  }
  return value + 3
})
// [4, 5]

JSON.parse 特性

在解析JSON字符串的时候,需要注意到JSON格式的一些规范,不然就容易报错。
JSON数据对值的类型和格式,都有严格的规定,具体的规则如下:

  1. 该方法使用字符串类型JSON格式数据。
    该方法也支持数字、布尔值和null三个类型的值,转换出对应的字面值。
    不支持其他类型。
JSON.parse('"中国"')
// '中国'
JSON.parse(null) // null
JSON.parse(111.) // 111
JSON.parse(0x12) // 18
JSON.parse(true) // true
JSON.parse([])
// Uncaught SyntaxError: Unexpected end of JSON input
  1. 字符串必须使用双引号,不能使用单引号。
JSON.parse('"String"')
// 'String'
JSON.parse('\'String\'')
// Uncaught SyntaxError: Unexpected token ' in JSON at position 0
  1. 只支持十进制的字符串,但小数点后必须跟上数字。
JSON.parse('111') // 111
JSON.parse('0x12')
// Uncaught SyntaxError: Unexpected token x in JSON at position 1
JSON.parse('111.232') // 111.232
JSON.parse('111.')
// Uncaught SyntaxError: Unexpected end of JSON input
  1. 不能使用undefined、Symbol和BigInt,数字也不支持NaN、Infinity和-Infinity,都会报错。
JSON.parse(undefined)
// Uncaught SyntaxError: Unexpected token u in JSON at position 0
JSON.parse(Symbol())
// Uncaught TypeError: Cannot convert a Symbol value to a string
JSON.parse('12n')
// Uncaught SyntaxError: Unexpected token n in JSON at position 2
  1. 复合类型,只能是:[] 和 {} 这样的字面量。
    不能使用对象构造函数,因为会当作执行语句,不支持。
    不能使用Object和Array,也不能是函数、RegExp对象、Date对象、Error对象等。
JSON.parse('[]')
// []
JSON.parse('Object()')
// Uncaught SyntaxError: Unexpected token O in JSON at position 0
  1. 对象的属性名必须使用双引号。
JSON.parse('{"key": 1 }')
// {key: 1}
JSON.parse('{key: 1 }')
// Uncaught SyntaxError: Unexpected token k in JSON at position 1
  1. 数组或对象最后一个成员的后面,不能加逗号。
JSON.parse('[1, 2, 3, 4, ]')
// VM2771:1 Uncaught SyntaxError: Unexpected token ] in JSON at position 13
JSON.parse('{"key" : 1, }')
// VM2779:1 Uncaught SyntaxError: Unexpected token } in JSON at position 12
  1. 支持unicode转义。
JSON.parse('{"\u0066":333}')
// {f: 333}
  1. 部分控制字符、转义字符不支持,如'\n'、'\t'等。
JSON.parse('"\n"')
// Uncaught SyntaxError: Unexpected token 

解析的其他方法

将json字符串转成json对象(js对象值),还可以使用其他方法,但是非安全代码。

  const str = '{"name":"json","age":18}'
  const json = JSON.parse(str)
  const json = eval("(" + str + ")")
  const json = (new Function("return " + str))()

JSON.stringify

JSON.stringify() 将一个JavaScript对象或值转换为JSON格式字符串。

JSON.stringify 语法

JSON.stringify(value[, replacer [, space]])
  • value:将要序列化成 一个 JSON 字符串的JavaScript对象或值。
  • replacer 可选,用于处理将要序列化的值。
  • space 可选,指定缩进用的空白字符串,用于美化输出。

返回值: 一个表示给定值的JSON格式字符串。

replacer参数

replacer 参数可以以下三种情况:

  1. 如果是null、undefined或其他类型,则被忽略,不做处理;
JSON.stringify({key: 'json'}, null, null) // '{"key":"json"}'
JSON.stringify({key: 'json'}, true) // '{"key":"json"}'
  1. 如果是一个数组,则只有包含在这个数组中的属性名,才会最终被序列化到结果字符串中;
    只对对象的属性有效,对数组无效。
const obj = {
  json: 'JSON',
  parse: 'PARSE',
  stringify: 'STRINGIFY'
}
JSON.stringify(obj, ['parse', 'stringify'])
// '{"parse":"PARSE","stringify":"STRINGIFY"}'
  1. 如果是一个函数,被序列化的值的每个属性都会经过该函数的转换和处理;

处理过程:

  • 函数有两个参数,属性名(key)和属性值(value),都会被序列化;
  • 第一次调用时,key为空字符串,value则为需要序列化的整个对象;
  • 第二次处理时,会把第一次的的结果传过来,后续的每一次的处理都将接收上一次处理的结果;
  • 后面,将依次处理每个属性名和属性值,完成后返回。
JSON.stringify({ json: 1, stringify: { val: 'rr'} }, (key, value) => {
  console.log(`key:${key},value:`, value)
  return value
}) 
// key:,value: {json: 1, stringify: {…}}
// key:json,value: 1
// key:stringify,value: {val: 'rr'}
// key:val,value: rr
// '{"json":1,"stringify":{"val":"rr"}}'

value的类型处理:

  • 如果返回基本类型字符串、数字、布尔值、null,则直接被添加到序列化后的JSON字符串中;
  • 如果返回其他对象,则会在后续依次序列化该对象的属性,如果是函数则不作处理;
  • 如果返回或undefined,则不会输出该属性。
  • 序列化数组时,如果value返回undefined或者一个函数,将会被null取代。
JSON.stringify({ json: 1, stringify: 'rr' }, (key, value) => {
  if (typeof value === 'number') {
    return 'ss'
  }
  return value
}) 
// '{"json":"ss","stringify":"rr"}'

JSON.stringify({ json: 1, stringify: 'rr' }, (key, value) => {
  if (typeof value === 'number') {
    value = undefined
  }
  return value
}) 
// '{"stringify":"rr"}'

下面示例,是返回对象值时的处理:

JSON.stringify({ json: 1, stringify: 'rr' }, (key, value) => {
  if (typeof value === 'object') { // 第一次返回整个对象时,类型是object
    return { parse: 'dd' }
  }
  return value
}) 
'{"parse":"dd"}'

space 参数

space 参数用来控制结果字符串里面的间距,美化输出。可以输入的值有以下三种情况:

  • 如果是一个数字, 序列化时,每一层级比上一层级多缩进对应数字值的空格,范围在 1 - 10,即最小1个最大10个空格;
  • 如果是一个字符串,序列化时,该字符串会添加在每行前面,每一层级比上一层级多缩进该字符串,最多是个字符,超过则截取字符串;
  • 如果是null、undefined或其他类型,则被忽略,不做处理。
JSON.stringify({key: 'json'}, null, 2)
// '{\n  "key": "json"\n}'
JSON.stringify({key: 'json', list: { str: 'str' } }, null, '|-')
// '{\n|-"key": "json",\n|-"list": {\n|-|-"str": "str"\n|-}\n}'
JSON.stringify({key: 'json'}, null, null)
// '{"key":"json"}'

JSON.stringify 特性

  1. 基本类型值字符串、数字、布尔值,以及String、Boolean、Number对象值,都会转成原始值字符串输出。
JSON.stringify(333) // '333'
JSON.stringify(true) // 'true'
JSON.stringify(new String('333')) //'"333"'
JSON.stringify(Boolean(true)) // 'true'
  1. 基本类型的字符串,转换结果会带双引号。
    因为在还原时,双引号会让JavaScript知道是字符串,而不是变量。
JSON.stringify('json') === 'json' // false
JSON.stringify('json') === '"json"' // true
  1. undefined、函数、symbol以及XML对象:
  • 出现在Object对象中时,会被忽略;
  • 出现在数组中时,会被序列化成null;
  • 单独出现时,会返回undefined。
JSON.stringify(Symbol()) // undefined
JSON.stringify([Symbol(), Math.abs, undefined]) // '[null,null,null]'
JSON.stringify({ [Symbol()]: Math.abs, key: undefined }) // '{}'
  1. NaN、Infinity和-Infinity等值,还有null,都会被序列化成null。
JSON.stringify(null) // 'null'
JSON.stringify(NaN) // 'null'
  1. Object对象,以及Map/Set/WeakMap/WeakSet等复合类型对象,序列化时会忽略对象的不可遍历属性。
const obj = {}
Object.defineProperties(obj, {
  'json': { value: 'JSON', enumerable: true },
  'stringify': { value: 'STRINGIFY', enumerable: false }
})
JSON.stringify(obj)
// '{"json":"JSON"}'
  1. 以symbol为属性名的属性将被忽略。
JSON.stringify({[Symbol()]: 333}) // '{}'
  1. 除了数组,其他对象的属性在序列化时,顺序可能会乱。
const a = { '1': 911, 'r': 822, '11': 9922}
JSON.stringify(a)
// '{"1":911,"11":9922,"r":822}'
  1. 转换的对象如果定义了 toJSON() 方法,则该方法的返回值就是转换对象的序列化结果。
    该过程会忽略其他属性。
const a = { key: 'json' }
a.toJSON = () => 'JSON'
JSON.stringify(a)
// '"JSON"'
  1. RegExp对象、Error对象都会序列化为空对象字符串。
JSON.stringify(/\d/) // "{}"
JSON.stringify(new Error())  // "{}"

想要序列化相应对象,需要设置实现toJSON方法才行。文章来源地址https://www.toymoban.com/news/detail-647650.html

RegExp.prototype.toJSON = RegExp.prototype.toString
JSON.stringify(/\d/) // '"/\\\\d/"'
  1. Date对象已经定义了toJSON(),并将其转换为string字符串,因此可被序列化。
    Date.toISOString()
JSON.stringify(new Date())
// '"2021-12-31T02:24:05.477Z"'
  1. 循环引用的对象执行此方法,会抛出错误。
    对象之间相互引用,形成无限循环。
const a = {}
a.key = a
JSON.stringify(a)
// Uncaught TypeError: Converting circular structure to JSON
  1. 转换BigInt类型的值会抛出TypeError错误。
    BigInt值不能JSON序列化
JSON.stringify(12n)
// Uncaught TypeError: Do not know how to serialize a BigInt
  1. 更好的支持unicode转义符
const a = {'\u0066': 333}
JSON.stringify(a)
// '{"f":333}'

到了这里,关于JSON.parse 和 JSON.stringify 详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • npm库:safe-json-stringify处理JSON.stringify循环引用的报错

    解决方案: safe-json-stringify(比较新) json-stringify-safe 使用上面的包重写JSON.stringify ts下类型问题 使用场景: 请求返回的err错误处理

    2024年02月12日
    浏览(50)
  • 将对象转换为JSON字符串,即手写JSON.stringify

    分析: Date将转为string undefined、Symbol会直接过滤掉,但如果是数组项是undefined、Symbol、Function,那么则返回null 正则RegExp会返回空对象{} NaN、Function、null会返回null,但是呢,function会被过滤掉 Infinity会转为null 如果是数组的话,返回的是数组的序列化 string返回原始值 number、b

    2024年02月11日
    浏览(46)
  • JS中JSON序列化JSON.stringify的坑点和处理

    JSON.stringify的问题 在js中提到对象转JSON字符串,基本都会想到JSON.stringify这个方法,以及对应的解析方法JSON.parse方法,这个的转换也被不少人用于深拷贝的操作中。 但是随着这一对方法的使用,我们会发现它们存在的弊端,比如会丢失函数和undefined类型的内容,如下: 这里

    2024年02月06日
    浏览(91)
  • JS 将 json 对象转成字符串并保留格式 - JSON.stringify()

    JSON.stringify(value, replacer, space) value :将要序列化成一个 JSON 字符串的值。 replacer(可选) :如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理;如果该参数是一个数组,则只有包含在这个数组中的属性名才会被序列化到最终的

    2024年02月13日
    浏览(52)
  • js 给对象写 JSON.stringify 的方法

    但我们自己定义的对象,想要执行 JSON.stringify,没法被序列化的属性就会产生报错,这时候应该用 toJson() 来重写,具体代码是: 这样就会根据回调函数处理结果,如果还不理解,可以看看 toJSON 的用法详解。

    2024年02月09日
    浏览(29)
  • 【前端】Bad control character in string literal in JSON解决方案(详解),JSON.parse(str)/Uncaught SyntaxEr报错解决方法。

    JSON.parse(str) 报错:Uncaught SyntaxError: Bad control character in string literal in JSON at position JSON.parse()方法将 有效的 JSON 字符串 数据转换为 JavaScript 对象 。 内部不能包含转义字符。 text = text.replace(/[r|n|t]/g,“”) 这句把r,n,t 都替换为空。 因为我们这个是自己的数据库,输入的数

    2024年02月11日
    浏览(56)
  • JSON parse error: Cannot deserialize value of type `java.util.Date`

    不能解析我传递的日期数据:”2022-06-08“,它默认是要这样的\\\"yyyy-MM-dd HH:mm:ss\\\"。 直接在数据库对应的接受类对象和实体类对象上加日期转化的注解。 可能由于种种环境原因,不知道哪个一定正确,下面三个注解任选其一。 我发现我公司是用的DateUtil。

    2024年02月17日
    浏览(62)
  • 解决Post请求JSON列表参数格式报错:JSON parse error: Cannot deserialize value of type `java.util.ArrayList<x>

    今天在调试接口的时候,遇到一个问题。有一个post请求的json body参数, 然后vo里面只有两个属性,id和一个集合。 然后使用apifox调试接口的时候,发现json解析异常: 通过提示信息,可以发现是因为json结构不对导致解析不了。 我原来是这样传的,会报错: 应该给list加一层数

    2024年02月11日
    浏览(58)
  • HttpMessageNotReadableException: JSON parse error: Cannot deserialize value of type `java.util.List

     今天与到一个报错,分享一下这个报错的解决方案,都是自己学的太浅的原因导致卡了半个小时 如图: 在Post请求的过程中,前端是一个JSON对象以请求体的形式传到了后端,而后端是以一个列表接收,这样导致的问题就是接收的不是一个对象 在Post请求想要接收请求体的数

    2024年01月16日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包