• 售前

  • 售后

热门帖子
入门百科

详解JSON.parse和JSON.stringify用法

[复制链接]
敢想敢做敢拼 显示全部楼层 发表于 2022-1-8 03:58:29 |阅读模式 打印 上一主题 下一主题
目次


  • JSON.parse

    • JSON.parse 语法
    • reviver 参数
    • JSON.parse 特性
    • 解析的其他方法

  • JSON.stringify

    • JSON.stringify 语法
    • replacer参数
    • space 参数
    • JSON.stringify 特性

JSON格式,(简写JavaScript Object Notation),是一种用于数据交换的文本格式,誊写简朴。
基于JavaScript原生语法,能够序列化对象、数组、数值、字符串、布尔值和 null。
在ES5中,增加了一个JSON对象,专门用来处理JSON格式的数据。
JSON是一个对象,但只有两个方法:
  1. parse
复制代码
  1. stringify
复制代码
,不能作为构造函数,也无属性。
  1. typeof JSON === 'object'
复制代码
JSON.parse
  1. JSON.parse()
复制代码
用来解析JSON字符串,得到对应的JavaScript值或对象。
  1. JSON.parse('{}') // {}
  2. JSON.parse('true') // true
  3. JSON.parse('null') // null
复制代码
JSON.parse 语法
  1. JSON.parse(text[, reviver])
复制代码

  • text:要被解析成的字符串。如果传入数字则会转换成十进制数字输出。
    如果传入布尔值则直接输出。
    如果传入null则输出null。
    不支持其他范例的值,否则报错。
  • reviver: 可选,转换器, 可以用来修改解析天生的原始值。
返回值: JavaScript对象/值, 对应给定JSON文本的对象/值。

reviver 参数

reviver函数,用于转换处明白析到的JavaScript值,处理完后返回终极的结果。
转换过程:

  • 解析的值自己和它可能包含的全部属性,按照肯定遍历次序分别调用reviver函数,属性名和值作为参数两个参数
    1. key
    复制代码
    1. value
    复制代码
    传入。遍历次序:按照层级,从内往外遍历,终极到达最顶层,则是解析值自己。
  • reviver返回undefined,则删除该对象,如果返回了其他值,则该值会成为当前属性的新值。
  • 当遍历到最顶层时,由于没有属性了,参数key是空字符串
    1. ''
    复制代码
    ,参数value则是当前解析值。
对于reviver函数的两个参数
  1. key
复制代码
  1. value
复制代码
,差别的数据范例:

  • 根本值范例数据(string、number、boolean)和null,以及空对象
    1. {}
    复制代码
    和空数组
    1. []
    复制代码
    :则key是空字符串,value是对应解析值。
    由于已经是最顶层,并没有别的属性。
  • Object对象:则key和value都存在,与属性名和值各自对应。
    最顶层会返回一个参数key为空的值。
  • 数组:key对应数组索引,value对应元素值。
    最顶层会返回一个参数key为空的值。
根本范例的转换:
  1. JSON.parse('5', function (key, value) {
  2.   console.log(`key:${key}, value:${value}`)
  3. })
  4. // key:, value:5
  5. JSON.parse('null', function (key, value) {
  6.   console.log(`key:${key}, value:${value}`)
  7. })
  8. // key:, value:null
  9. JSON.parse('{}', function (key, value) {
  10.   console.log(`key:${key}, value:`, value)
  11. })
  12. // key:, value:{}
复制代码
Object对象和数组:
  1. JSON.parse('[1, 2]', function (key, value) {
  2.   console.log(`key:${key}, value:`, value)
  3. })
  4. // key:0, value: 1
  5. // key:1, value: 2
  6. // key:, value: (2) [empty × 2]
  7. JSON.parse('{ "user": "张三", "info": { "age": 25, "sex": 1 } }', function (key, value) {
  8.   console.log(`key:${key}, value::`, value)
  9. })
  10. // key:user, value:: 张三
  11. // key:age, value:: 25
  12. // key:sex, value:: 1
  13. // key:info, value:: {}
  14. // key:, value:: {}
复制代码
数据处理:
  1. JSON.parse('[1, 2]', function (key, value) {
  2.   if(key === '') {
  3.     return value
  4.   }
  5.   return value + 3
  6. })
  7. // [4, 5]
复制代码
JSON.parse 特性

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

  • 该方法利用字符串范例JSON格式数据。该方法也支持数字、布尔值和null三个范例的值,转换出对应的字面值。
    不支持其他范例。
  1. JSON.parse('"中国"')
  2. // '中国'
  3. JSON.parse(null) // null
  4. JSON.parse(111.) // 111
  5. JSON.parse(0x12) // 18
  6. JSON.parse(true) // true
  7. JSON.parse([])
  8. // Uncaught SyntaxError: Unexpected end of JSON input
复制代码

  • 字符串必须利用双引号,不能利用单引号。
  1. JSON.parse('"String"')
  2. // 'String'
  3. JSON.parse('\'String\'')
  4. // Uncaught SyntaxError: Unexpected token ' in JSON at position 0
复制代码

  • 只支持十进制的字符串,但小数点后必须跟上数字。
  1. JSON.parse('111') // 111
  2. JSON.parse('0x12')
  3. // Uncaught SyntaxError: Unexpected token x in JSON at position 1
  4. JSON.parse('111.232') // 111.232
  5. JSON.parse('111.')
  6. // Uncaught SyntaxError: Unexpected end of JSON input
复制代码

  • 不能利用undefined、Symbol和BigInt,数字也不支持NaN、Infinity和-Infinity,都会报错。
  1. JSON.parse(undefined)
  2. // Uncaught SyntaxError: Unexpected token u in JSON at position 0
  3. JSON.parse(Symbol())
  4. // Uncaught TypeError: Cannot convert a Symbol value to a string
  5. JSON.parse('12n')
  6. // Uncaught SyntaxError: Unexpected token n in JSON at position 2
复制代码

  • 复合范例,只能是:
    1. []
    复制代码
    1. {}
    复制代码
    如许的字面量。不能利用对象构造函数,由于会看成执行语句,不支持。
    不能利用Object和Array,也不能是函数、RegExp对象、Date对象、Error对象等。
  1. JSON.parse('[]')
  2. // []
  3. JSON.parse('Object()')
  4. // Uncaught SyntaxError: Unexpected token O in JSON at position 0
复制代码

  • 对象的属性名必须利用双引号。
  1. JSON.parse('{"key": 1 }')
  2. // {key: 1}
  3. JSON.parse('{key: 1 }')
  4. // Uncaught SyntaxError: Unexpected token k in JSON at position 1
复制代码

  • 数组或对象末了一个成员的背面,不能加逗号。
  1. JSON.parse('[1, 2, 3, 4, ]')
  2. // VM2771:1 Uncaught SyntaxError: Unexpected token ] in JSON at position 13
  3. JSON.parse('{"key" : 1, }')
  4. // VM2779:1 Uncaught SyntaxError: Unexpected token } in JSON at position 12
复制代码

  • 支持unicode转义。
  1. JSON.parse('{"\u0066":333}')
  2. // {f: 333}
复制代码

  • 部门控制字符、转义字符不支持,如'\n'、'\t'等。
  1. JSON.parse('"\n"')
  2. // Uncaught SyntaxError: Unexpected token
复制代码
解析的其他方法

将json字符串转成json对象(js对象值),还可以利用其他方法,但黑白安全代码。
  1.   const str = '{"name":"json","age":18}'
  2.   const json = JSON.parse(str)
  3.   const json = eval("(" + str + ")")
  4.   const json = (new Function("return " + str))()
复制代码
JSON.stringify
  1. JSON.stringify()
复制代码
将一个JavaScript对象或值转换为JSON格式字符串。

JSON.stringify 语法
  1. JSON.stringify(value[, replacer [, space]])
复制代码

  • value:将要序列化成 一个 JSON 字符串的JavaScript对象或值。
  • replacer 可选,用于处理将要序列化的值。
  • space 可选,指定缩进用的空缺字符串,用于美化输出。
返回值: 一个表现给定值的JSON格式字符串。

replacer参数

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

  • 如果是null、undefined或其他范例,则被忽略,不做处理;
  1. JSON.stringify({key: 'json'}, null, null) // '{"key":"json"}'
  2. JSON.stringify({key: 'json'}, true) // '{"key":"json"}'
复制代码

  • 如果是一个数组,则只有包含在这个数组中的属性名,才会终极被序列化到结果字符串中;只对对象的属性有效,对数组无效。
  1. const obj = {
  2.   json: 'JSON',
  3.   parse: 'PARSE',
  4.   stringify: 'STRINGIFY'
  5. }
  6. JSON.stringify(obj, ['parse', 'stringify'])
  7. // '{"parse":"PARSE","stringify":"STRINGIFY"}'
复制代码

  • 如果是一个函数,被序列化的值的每个属性都会经过该函数的转换和处理;
处理过程:

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

  • 如果返回根本范例字符串、数字、布尔值、null,则直接被添加到序列化后的JSON字符串中;
  • 如果返回其他对象,则会在后续依序次列化该对象的属性,如果是函数则不作处理;
  • 如果返回或undefined,则不会输出该属性。
  • 序列化数组时,如果value返回undefined大概一个函数,将会被null取代。
  1. JSON.stringify({ json: 1, stringify: 'rr' }, (key, value) => {
  2.   if (typeof value === 'number') {
  3.     return 'ss'
  4.   }
  5.   return value
  6. })
  7. // '{"json":"ss","stringify":"rr"}'
  8. JSON.stringify({ json: 1, stringify: 'rr' }, (key, value) => {
  9.   if (typeof value === 'number') {
  10.     value = undefined
  11.   }
  12.   return value
  13. })
  14. // '{"stringify":"rr"}'
复制代码
下面示例,是返回对象值时的处理:
  1. JSON.stringify({ json: 1, stringify: 'rr' }, (key, value) => {
  2.   if (typeof value === 'object') { // 第一次返回整个对象时,类型是object
  3.     return { parse: 'dd' }
  4.   }
  5.   return value
  6. })
  7. '{"parse":"dd"}'
复制代码
space 参数

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

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


  • 根本范例值字符串、数字、布尔值,以及String、Boolean、Number对象值,都会转成原始值字符串输出。
  1. JSON.stringify(333) // '333'
  2. JSON.stringify(true) // 'true'
  3. JSON.stringify(new String('333')) //'"333"'
  4. JSON.stringify(Boolean(true)) // 'true'
复制代码

  • 根本范例的字符串,转换结果会带双引号。由于在还原时,双引号会让JavaScript知道是字符串,而不是变量。
  1. JSON.stringify('json') === 'json' // false
  2. JSON.stringify('json') === '"json"' // true
复制代码

  • undefined、函数、symbol以及XML对象:


  • 出如今Object对象中时,会被忽略;
  • 出如今数组中时,会被序列化成null;
  • 单独出现时,会返回undefined。
  1. JSON.stringify(Symbol()) // undefined
  2. JSON.stringify([Symbol(), Math.abs, undefined]) // '[null,null,null]'
  3. JSON.stringify({ [Symbol()]: Math.abs, key: undefined }) // '{}'
复制代码

  • NaN、Infinity和-Infinity等值,还有null,都会被序列化成null。
  1. JSON.stringify(null) // 'null'
  2. JSON.stringify(NaN) // 'null'
复制代码

  • Object对象,以及
    1. Map/Set/WeakMap/WeakSet
    复制代码
    等复合范例对象,序列化时会忽略对象的不可遍历属性。
  1. const obj = {}
  2. Object.defineProperties(obj, {
  3.   'json': { value: 'JSON', enumerable: true },
  4.   'stringify': { value: 'STRINGIFY', enumerable: false }
  5. })
  6. JSON.stringify(obj)
  7. // '{"json":"JSON"}'
复制代码

  • 以symbol为属性名的属性将被忽略。
  1. JSON.stringify({[Symbol()]: 333}) // '{}'
复制代码

  • 除了数组,其他对象的属性在序列化时,次序可能会乱。
  1. const a = { '1': 911, 'r': 822, '11': 9922}
  2. JSON.stringify(a)
  3. // '{"1":911,"11":9922,"r":822}'
复制代码

  • 转换的对象如果界说了
    1. toJSON()
    复制代码
    方法,则该方法的返回值就是转换对象的序列化结果。该过程会忽略其他属性。
  1. const a = { key: 'json' }
  2. a.toJSON = () => 'JSON'
  3. JSON.stringify(a)
  4. // '"JSON"'
复制代码

  • RegExp对象、Error对象都会序列化为空对象字符串。
  1. JSON.stringify(/\d/) // "{}"
  2. JSON.stringify(new Error())  // "{}"
复制代码
想要序列化相应对象,须要设置实现toJSON方法才行。
  1. RegExp.prototype.toJSON = RegExp.prototype.toString
  2. JSON.stringify(/\d/) // '"/\\\\d/"'
复制代码

  • Date对象已经界说了toJSON(),并将其转换为string字符串,因此可被序列化。同
    1. Date.toISOString()
    复制代码

  1. JSON.stringify(new Date())
  2. // '"2021-12-31T02:24:05.477Z"'
复制代码

  • 循环引用的对象执行此方法,会抛堕落误。对象之间相互引用,形成无穷循环。
  1. const a = {}
  2. a.key = a
  3. JSON.stringify(a)
  4. // Uncaught TypeError: Converting circular structure to JSON
复制代码

  • 转换BigInt范例的值会抛出TypeError错误。BigInt值不能JSON序列化
  1. JSON.stringify(12n)
  2. // Uncaught TypeError: Do not know how to serialize a BigInt
复制代码

  • 更好的支持unicode转义符
  1. const a = {'\u0066': 333}
  2. JSON.stringify(a)
  3. // '{"f":333}'
复制代码
到此这篇关于详解JSON.parse和JSON.stringify用法的文章就先容到这了。盼望对各人的学习有所资助,也盼望各人多多支持草根技术分享。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作