文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JSON.parse和JSON.stringify怎么使用

2023-06-22 07:27

关注

本篇内容主要讲解“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') // trueJSON.parse('null') // null

JSON.parse 语法

JSON.parse(text[, reviver])

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

reviver 参数

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

转换过程:

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

基本类型的转换:

JSON.parse('5', function (key, value) {  console.log(`key:${key}, value:${value}`)})// key:, value:5JSON.parse('null', function (key, value) {  console.log(`key:${key}, value:${value}`)})// key:, value:nullJSON.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数据对值的类型和格式,都有严格的规定,具体的规则如下:

JSON.parse('"中国"')// '中国'JSON.parse(null) // nullJSON.parse(111.) // 111JSON.parse(0x12) // 18JSON.parse(true) // trueJSON.parse([])// Uncaught SyntaxError: Unexpected end of JSON input
JSON.parse('"String"')// 'String'JSON.parse('\'String\'')// Uncaught SyntaxError: Unexpected token ' in JSON at position 0
JSON.parse('111') // 111JSON.parse('0x12')// Uncaught SyntaxError: Unexpected token x in JSON at position 1JSON.parse('111.232') // 111.232JSON.parse('111.')// Uncaught SyntaxError: Unexpected end of JSON input
JSON.parse(undefined)// Uncaught SyntaxError: Unexpected token u in JSON at position 0JSON.parse(Symbol())// Uncaught TypeError: Cannot convert a Symbol value to a stringJSON.parse('12n')// Uncaught SyntaxError: Unexpected token n in JSON at position 2
JSON.parse('[]')// []JSON.parse('Object()')// Uncaught SyntaxError: Unexpected token O in JSON at position 0
JSON.parse('{"key": 1 }')// {key: 1}JSON.parse('{key: 1 }')// Uncaught SyntaxError: Unexpected token k in JSON at position 1
JSON.parse('[1, 2, 3, 4, ]')// VM2771:1 Uncaught SyntaxError: Unexpected token ] in JSON at position 13JSON.parse('{"key" : 1, }')// VM2779:1 Uncaught SyntaxError: Unexpected token } in JSON at position 12
JSON.parse('{"\u0066":333}')// {f: 333}
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]])

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

replacer参数

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

JSON.stringify({key: 'json'}, null, null) // '{"key":"json"}'JSON.stringify({key: 'json'}, true) // '{"key":"json"}'
const obj = {  json: 'JSON',  parse: 'PARSE',  stringify: 'STRINGIFY'}JSON.stringify(obj, ['parse', 'stringify'])// '{"parse":"PARSE","stringify":"STRINGIFY"}'

处理过程:

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的类型处理:

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 参数用来控制结果字符串里面的间距,美化输出。可以输入的值有以下三种情况:

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 特性

JSON.stringify(333) // '333'JSON.stringify(true) // 'true'JSON.stringify(new String('333')) //'"333"'JSON.stringify(Boolean(true)) // 'true'
JSON.stringify('json') === 'json' // falseJSON.stringify('json') === '"json"' // true
JSON.stringify(Symbol()) // undefinedJSON.stringify([Symbol(), Math.abs, undefined]) // '[null,null,null]'JSON.stringify({ [Symbol()]: Math.abs, key: undefined }) // '{}'
JSON.stringify(null) // 'null'JSON.stringify(NaN) // 'null'
const obj = {}Object.defineProperties(obj, {  'json': { value: 'JSON', enumerable: true },  'stringify': { value: 'STRINGIFY', enumerable: false }})JSON.stringify(obj)// '{"json":"JSON"}'
JSON.stringify({[Symbol()]: 333}) // '{}'
const a = { '1': 911, 'r': 822, '11': 9922}JSON.stringify(a)// '{"1":911,"11":9922,"r":822}'
const a = { key: 'json' }a.toJSON = () => 'JSON'JSON.stringify(a)// '"JSON"'
JSON.stringify(/\d/) // "{}"JSON.stringify(new Error())  // "{}"

想要序列化相应对象,需要设置实现toJSON方法才行。

RegExp.prototype.toJSON = RegExp.prototype.toStringJSON.stringify(/\d/) // '"/\\\\d/"'
JSON.stringify(new Date())// '"2021-12-31T02:24:05.477Z"'
const a = {}a.key = aJSON.stringify(a)// Uncaught TypeError: Converting circular structure to JSON
JSON.stringify(12n)// Uncaught TypeError: Do not know how to serialize a BigInt
const a = {'\u0066': 333}JSON.stringify(a)// '{"f":333}'

到此,相信大家对“JSON.parse和JSON.stringify怎么使用”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯