前言

在以前的web开发中,我们多数选择纯文本XML作为我们的提交的数据格式,大多数是XML,少数纯文本。其实从AJAX(Asynchronous JavaScript and XML)的命名我们也知道,数据交换是大多数通过XML格式进行的。但是XML格式有一个缺点,就是文档构造复杂,需要传输比较多的字节数,并且解析起来也比较麻烦。所以就创建了JSON这种数据描述格式,可以很简单的就描述很复杂的数据。同时独立于语言,这样就可以在多种语言内使用。也正是因为这个,JSON的轻便性逐渐得到重视,后来替代XML成为最主要的数据传输格式。

ps: 当然,虽然说了很多JSON的好处,你就以为不用学习XML了吗?肯定不是啦,微信公共平台接口中的有是有相当一部分接口使用了XML的。

JSON对象包含两个方法: 用于解析 JavaScript Object Notation (JSON) 的 parse() 方法,以及将对象/值转换为 JSON 字符串的 stringify() 方法。除了这两个方法, JSON 这个对象本身并没有其他作用,也不能被调用或者作为构造函数调用。

ps: JSON:并不是 JavaScript 的子集。尽管不是严格意义上的子集,JSON 非常接近 JavaScript 语法的子集。

JavaScript 与 JSON 的区别

JavaScript类型 JSON 的不同点
对象和数组 属性名称必须是双引号括起来的字符串;最后一个属性后不能有逗号。
数值 禁止出现前导零(JSON.stringify 方法自动忽略前导零,而在 JSON.parse 方法中将会抛出 SyntaxError);如果有小数点, 则后面至少跟着一位数字。

针对于这两点,我们举个例子,对于对象和数组类型:

// 属性名称必须是双引号括起来的字符串
const test1 = "['1','1']"
JSON.parse(test1) // Uncaught SyntaxError: Unexpected token ' in JSON at position 1 const test2 = "{'name':'gating'}"
JSON.parse(test2) // Uncaught SyntaxError: Unexpected token o in JSON at position 1 const test3 = '["2","1"]'
JSON.parse(test3) // ["2","1"] const test4 = '{"name":"gating"}'
JSON.parse(test3) // {name: "gating"} // 最后一个属性后不能有逗号
const test5 = '["2","1",]'
JSON.parse(test5) // Uncaught SyntaxError: Unexpected token ] in JSON at position 9
const test6 = '{"name":"gating",}'
JSON.parse(test6) // Uncaught SyntaxError: Unexpected token } in JSON at position 17

对于数值类型:

// 禁止出现前导零
const test7 = [00010, 1]
JSON.stringify(test7) // "[8,1]" const test8 = "[00010, 1]"
JSON.parse(test8) // SyntaxError: Unexpected number in JSON at position 2** // 如果有小数点,则后面至少跟着一位数字。
const test9 = [1, 1.]
JSON.stringify(test9) // "[1,1]" const test10 = "[1, 1.]"
JSON.parse(test10) // Uncaught SyntaxError: Unexpected token ] in JSON at position 6

ps: 0+数字表示8进制,- -所以上面打印出来的是8,同样的有:0b+数字(二进制)0x+数字(16进制),其实0o+数字也可以表示8进制

其实还有一个字符串类型,JavaScriptJSON处理是不一致的,这里为啥我只写两点呢?是因为还有现在在新版的Chrome已经可以解析正常,但是想具体可以查看下面参考链接自行了解,这里就不展开了

参考:JavaScript 与 JSON 的区别,字符串那一点我在Chrome 85.0.4183.83以及可以正常解析

stringify

stringify() 方法用于将JavaScript值转换为JSON字符串。

虽然我们经常用这个方法,但我想估计有不少人不知道它居然有三个参数之多吧?分别是valuereplacerspace

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

  • value

    • 将要序列化成 一个 JSON 字符串的值。
  • replacer 可选
    • 如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理;如果该参数是一个数组,则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中;如果该参数为 null 或者未提供,则对象所有的属性都会被序列化。
  • space 可选
    • 指定缩进用的空白字符串,用于美化输出(pretty-print);如果参数是个数字,它代表有多少的空格;上限为10。该值若小于1,则意味着没有空格;如果该参数为字符串(当字符串长度超过10个字母,取其前10个字母),该字符串将被作为空格;如果该参数没有提供(或者为 null),将没有空格。

value参数

通常我们最常用的就是第一个参数,也就是value参数,但是你知道它的运算规则是怎么样的吗?闲话不多说,直接上例子

NaN 和 Infinity 格式的数值及 null 都会被当做 null

JSON.stringify([NaN, Infinity, null]) // [null,null,null]

undefined、任意的函数以及 symbol 值的处理

出现在非数组对象的属性值中时,在序列化过程中会被忽略

JSON.stringify({x: undefined, y: Object, z: Symbol("")}) // "{}"

出现在数组中时被转换成null

JSON.stringify([undefined, Object, Symbol("")])  // "[null,null,null]"

单独出现则会返回undefined

JSON.stringify(undefined)  // undefined
JSON.stringify(Object) // undefined
JSON.stringify(Symbol("")) // undefined

所有以 symbol 为属性键的属性都会被完全忽略掉,即便 replacer 参数中强制指定包含了它们。

JSON.stringify({[Symbol("foo")]: "foo"}) // "{}"
JSON.stringify({[Symbol.for("foo")]: "foo"}, [Symbol.for("foo")]) // "{}"

转换值如果有 toJSON() 方法,该方法定义什么值将被序列化。

JSON.stringify({
toJSON: function() {
return 'gating'
}
}) // "gating" const name = {
age: 18,
toJSON: function () {
return 'gating'
},
}
JSON.stringify({ name }) // {"name":"gating"}

又因为Date对象上挂载了一个toJSON方法,所以针对于Date类型,它默认就会调用Date类型上的toJSON方法(同Date.toISOString())

JSON.stringify(new Date("2020/01/01")) // "2019-12-31T16:00:00.000Z" 因为中国在东八区,所以相差了8小时

ps: 东八区(UTC/GMT+08:00)是比世界协调时间(UTC)/格林尼治时间(GMT)快8小时的时区

其他类型的对象,仅会序列化对象可枚举的属性,包括 Map/Set/WeakMap/WeakSet

JSON.stringify(
Object.create(null, {
x: { value: 'x'}, // enumerable 默认为不可枚举
y: { value: 'y', enumerable: true },
})
) // "{"y":"y"}" const map = new Map()
Object.defineProperty(map, 'name', {
value: 'gating',
enumerable: true
})
Object.defineProperty(map, 'age', {
value: 18
})
JSON.stringify(map) // {"name":"gating"}
JSON.stringify(new Set) // {}
JSON.stringify(new RegExp) // {}

看到这里,你基本已经知道运算规则是怎么样滴了,也就知道了为什么JSON.stringify + JSON.parse不能转换函数、正则、Error等对象了吧?

那么接下来就要了解下更有意思的东西啦,就是stringify第二个参数replacer

replacer参数

replacer 参数可以用来来更改默认的字符串化的行为。它可以是一个函数或者一个数组。如果该参数为 null 或者未提供,则对象所有的属性都会被序列化。

作为函数

在开始时, replacer 函数会被传入一个空字符串作为 key 值,代表着要被 stringify 的这个对象。随后每个对象或数组上的属性会被依次传入。

这句话看不太懂?不要紧,举个例子你就懂了

function replacer(key, value) {
console.log('[' + key + ']:' + value)
return value
} JSON.stringify({ name: 'gating', age: 18 }, replacer)
// []:[object Object]
// [name]:gating
// [age]:18

上面例子中,他会执行三次,也就是一开始他会默认传一个空字符串作为键,而键值是整个对象;第二次键为name,键值为gating,以此类推。

当然,这里也有个特别需要注意的点,就是返回的是一个对象的时候,该对象递归地序列化成 JSON 字符串,对每个属性调用replacer方法。除非该对象是一个函数,这种情况将不会被序列化成 JSON 字符串。

比如:

function replacer(key, value) {
return {a:1}
}
JSON.stringify({}, replacer)

因为我们每次返回的都是对象,那么每次都会调用replacer,所以会造成堆栈溢出,那么我们举个不会溢出的小栗子例子吧

JS中有趣的内置对象-JSON的更多相关文章

  1. js中常用的内置对象

    Arguments 函数参数集合 arguments[ ] 函数参数的数组 Arguments 一个函数的参数和其他属性 Arguments.callee 当前正在运行的函数     Argument ...

  2. js中常见的内置对象

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. JS中的日期内置函数

    用JS中的日期内置函数实现在页面显示:“今天是:2013年9月26日14:32:45”. var date=new Date(Date.parse('9/26/2013 14:32:45'));   ...

  4. 在IDEA中使用JSP中的out内置对象,out.println()——println红色解决方法

    今天在学习JSP的时候,在jsp中使用out内置对象,开发工具用的是IDEA,结果如下图所示 郁闷了半天找度娘,可能关键字输的不准确,乱七八糟的方法一大堆,什么加依赖啊啥的,反正都不管用,最后找到一篇 ...

  5. js学习---常用的内置对象(API)小结 :

    内置对象(API): 日期 Date: getFullYear() 返回完整的4位的年份  如:2016 getMonth()    返回月份,从0开始 getDate()   返回当前月的第几天,当 ...

  6. 在jsp中常用的内置对象(5个)小总结和两种页面跳转方式(服务器端调转、客户端跳转)的区别

    jsp中常用的几个内置对象: 一.request对象 主要作用:  (1)获取请求页面的信息   比如:request.getParameter("参数名");  (2)获取客户端 ...

  7. Servlet中获取JSP内置对象

    方便自己查询,嫌低级的勿喷.... 1.request 在servlet的doGet和doPost的参数中就有HttpServletRequest req参数,而JSP内置request对象就是Htt ...

  8. Servlet中的jsp内置对象

    Servlet和jsp本质相同,那么为什么还要使用jsp呢,原来的servlet又有什么不好的呢. Servlet和jsp可以做完全相同的事情,就要借助jsp的内置对象们,比如request,resp ...

  9. jsp中9个内置对象与servlet对应关系及四个作用域

    参考:  <jsp&servlet学习笔记.第2版.林信良><JSR-245 JavaServer Pages 2.2 Maintenance Release Specifi ...

随机推荐

  1. Surface Pro 6 遇到的一系列问题

    当屏幕很烫的时候,触摸屏会部分失灵,越烫越明显,但是 Surface Pen 仍然可以使用,建议这个时候关机,等它冷静了再开机 不过不排除更新导致的触控失灵(新的更新没有考虑到老的硬件,微软也许之后永 ...

  2. 你真的理解索引吗?从数据结构层面解析mysql索引原理

    从<mysql存储引擎InnoDB详解,从底层看清InnoDB数据结构>中,我们已经知道了数据页内各个记录是按主键正序排列并组成了一个单向链表的,并且各个数据页之间形成了双向链表.在数据页 ...

  3. 剑指Offer顺时针打印矩阵

    题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数 ...

  4. Hyperledger Fabric 部署

    Hyperledger Fabric 部署 Hyperledger Fabric需要使用Docker.Go环境. Docker环境安装 Docker环境安装 直接查看这一篇,安装好之后将当前用户非ro ...

  5. C#LeetCode刷题之#62-不同路径(Unique Paths)

    目录 问题 示例 分析 问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3680 访问. 一个机器人位于一个 m x ...

  6. TypeScript 在vue中定义全局类型

    全局类型定义 路径 src/types/store.d.ts /** * 定义全局的State在 store.d.ts文件中 */ // 单独的state,导出为单独的module使用 export ...

  7. css中关于:nth-child()和:nth-of-type()的深入理解

    css中关于:nth-child()和:nth-of-type()的深入理解 在css中有这样一类属性,是以:nth-开头的,其中最常见的就是:nth-child() 和 :nth-of-type() ...

  8. 炼技术(9): 简约而不简单,永不停歇的测试 -- always_run

    最强战力,永不停歇的测试:always_run 许多工程师写完程序后,都不愿意对自己的程序做仔细测试. 很多测试说会做自动化测试,可能工作好几年都没真做过多少自动化测试. 我们的解决方案是,在系统的测 ...

  9. 【POJ2728】Desert King - 01分数规划

    Description David the Great has just become the king of a desert country. To win the respect of his ...

  10. 【BJOI2018】求和 - 倍增LCA

    题目描述 $master$ 对树上的求和非常感兴趣.他生成了一棵有根树,并且希望多次询问这棵树上一段路径上所有节点深度的$k$次方和,而且每次的$k$可能是不同的.此处节点深度的定义是这个节点到根的路 ...