专栏首页前端路桥Javascript[0x04] -- JSON必知必会

Javascript[0x04] -- JSON必知必会

JSON是一种蛮理想的数据交换语言。

通常在写简历的时候,对于某项技术而言,我们可以用“精通”,“熟悉”和”了解“三种词汇来描述你对它的掌握情况,在写这篇文章的时候,是笔者阅读完《JSON必知必会》后,认为自己熟悉JSON而写下的基于Javascript范畴的技术成长文章(PS:关于自己实现JSON序列化和反序列化的方法暂时还没有完全掌握,遂称为熟悉),不足之处,请多包涵。

带着疑问去学习

如果你去了解过Javascript,你会发现它和Javascript中的对象简直是神似啊。这个时候ataola童鞋就产生疑问了 ,那么,什么是JSON?什么又是对象?例如在Express的res.json()方法中,你可以在里面搞对象,你也可以在里面搞个JSON,都是可以发出去了,它们之间似乎有着很亲密的关系嘛。在我们了解完楼上这些点以后,什么样的JSON格式是正确的?怎么写JSON是符合期望的?这些都是我们关心的,对吧。最后,还是转换为生产力输出,我们期望它能给我们的工作和生活做些什么?就是它有什么用啦。之后我们又回去担心,一些问题,例如它安不安全?数据交换要是不符合预期的格式咋办?今天,带着这些问题,跟ataola童鞋一起往下看。

什么是JSON?

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。(摘自JSON官网介绍)。

一共有三句是吧,我们一句一句来。

首先,第一句告诉你JSON在数据交换方面造诣很深,是个不错的选手。其完整的英文是Javascript Object Notation,也就是JavaScript对象表示法,字面上理解下好像是在说“你好,我是JSON,我是用来表示Javascript 对象的”。真的是在这样子的吗?很显然还是有一定的区别的,Javascript中的对象Object是8种数据类型中的一种(根据最新的ECMA标准,Javascript中的数据类型有原始类型Boolean、Null、Undefined、Number、BigInt、String、Symbol以及Object),形如楼下这种的就是一个长得蛮标致的Object。

//这个相亲还很有意思,blind瞎的,男女初次被安排相亲,盲选的一天,你我十年前都不认识。
var blind_date_info = {
    name: "ataola",
    sex: "male",
    age: 23,
    address: "Hangzhou",
    motto: "江上有云,涛声依旧"
}

紧接着我们读下第二句,易于人阅读和编写。说明它通俗易懂,大家好才是真的好,对吧。也就是说字面上几个意思就是几个意思,我们不妨来解读一下楼下这段JSON告诉我们的信息,它翻译成一句完整的语句就是,我的网名叫”ataola",性别男,芳龄23,目前住在杭州,座右铭是“江上有云,涛声依旧”,单身可撩啊。是不是写起来很简单,看上去也很easy对吧。

 {
    "name": "ataola",
    "sex": "male",
    "age": 23,
    "address": "Hangzhou",
    "motto": "江上有云,涛声依旧"
}

那我们接着来理解下什么是字面量?我给你举个例子,“先顶个小目标,我先挣它一个亿。“ 对绝大多数人都很虚是吧,你能感受到一个亿吗?很显然大部分人耗尽一辈子积蓄也不一定能够感受的到。再来看看,晚上回去有点饿,去东方通信对面的小摊上买了一根6块钱的烤玉米,这个6块钱,是客观存在的,你掏出零钱给他的吧,你能感受得到它的存在对吧。差不多字面量就是这个意思,引申到编程上就是说,它不是一个变量,因为变量你也不知道下一秒它是个什么东西,所以你无法理解它的字面意思。

最后一句,同样也易于机器解析和生成。它是想告诉你,目前,大部分语言都是支持的,即使不支持也会以扩展的形式被引用,例如在Javascript中,你可以调用JSON.parse()JSON.stringify()来对它进行序列号和反序列化。

怎么表示JSON?

我先说说我自己的看法,在很长的一段时间里面,我认为正确的JSON格式应该如楼上的相亲信息一样。最外面一层大括号,由key-value键值对组成,其中key不同于Javascript中的对象,这里要加双引号,后空一格跟Value。

在这之前我并没有去认真地了解过JSON的知识,对它的认知更多地来自接口调用,接口文档以及配置文件等等。直到某天某后端W在项目中传值用的就是一个数组的JSON格式,形如楼下所示:

[
    {...},
    {...},
    {...}
]

我当时的观点是认为这样子写是错的,不是标准的JSON格式,这样写出去不知道会被人打死, 我当时认为这个就是典型的垃圾代码,因为从一些经验来看,我从没有见过一家官网的接口API是这样子构建的,更多的是形如这种

{
    "code": 1,
    "msg": "相亲成功",
    "data": [
        {...},
        {...},
        {...}
]
}

在读完《JSON必知必会》和查阅了一些相关资料,发现数组的写法也是正确的,你以为我是来给数组洗白的吗?不存在的,我还是坚持我原来的看法,只不过修饰词换了,称这种是不符合期望的JSON格式,到底有哪些不符合期望,我们后面接着讲。

JSON中的数据类型是怎么样的?

这句话的意思和问你JSON中Value的值可以有哪几种类型是一样的。

字符串

形如楼下这种的就是字符串在JSON Value值的表示

{
  "name": "ataola"
}
需要注意的点如下
  • 注意value值是"双引号,双引号,双引号",重要的事情说三遍,单引号GG
  • 关于转义、反斜杠以及 "",就例如”c:\nodejs"要写成这样 “c:\nodejs",还有换行回车啊等等

数值

JSON 中的数字可以是整数、小数、负数或者指数。

布尔值

注意是小写的truefalse,其他的JSON不认的

null

  • 要小写null
  • null既是空,空既是null
  • 结合undefined理解下,undefined是在尝试获取一些不存在的对象或变量时返回的结果,而null 则仅与对象或变量的值有关

数组

  • 这里JSON的数据类型是被限死的,但数组,哼哼管你放啥
  • 好像其他语言没有key后面跟数组的写法

对象

就是值是个对象哇,感觉没啥好讲的。就是回复楼上一句话,如果最外层是[]这种格式的,虽然合法啊,但是很危险,因为这样子以来也可以是可执行的Javascript脚本

验证写的JSON对不对

这里,有的童鞋可能还是有疑问,我怎么知道我写的JSON对不对?没事,往下看我给你整理的一些在线工具。

  • JSON Formatter & Validator 这是一个带有配置选项、能够高亮错误且UI 很棒的格式化工具。经过处理的JSON 会显示在两个窗口,一个用于展示JSON 的树/ 节点结构,类似于可视化工具,另一个用于复制/ 粘贴格式化后的代码。
  • JSON Editor Online 这是一个集验证、格式化和可视化工具于一身的JSON 工具。错误提示会显示在出错的那一行。除了验证以外,还会显示解析错误的详情。右边的可视化工具使用树/ 节点的形式来展示JSON。
  • JSONLint 这是一个毫不花哨的JSON 验证工具。简单地复制、粘贴、验证即可。也可以友好地格式化你的JSON。

JSON Schema - 让数据符合期望

就是说,我们在做一些Ajax请求的时候,有可能前后端传过来的数据并不是他们所期望的,也就是不符合格式要求,如果数据量非常的大,这是相当头大的事情,那么JSON Schema了解一下(仍在开发和草拟,但是你可以用)

就是在正常的JSON中加入一个Schema验证,类似以前HTML4.01中一坨很长的记也记不住的开头

{
    "$schema": "http://json-schema.org/draft-04/schema#",
    name: "ataola",
    sex: "male",
    age: 23,
    address: "Hangzhou",
    motto: "江上有云,涛声依旧"
}
关于JSON Schema的总结
  • JSON 验证器负责验证语法错误,JSON Schema 负责提供一致性检验。
  • JSON Schema 是数据接收方的第一道防线,也是数据发送方节约时间、保证数据正确的好工具。
  • JSON Schema 可以解决下列有关一致性验证的问题。
    • 值的数据类型是否正确?
    • 是否包含所需要的数据?
    • 值的形式是不是我需要的?

JSON安全吗?

JSON开头和结尾都有大括号包裹的铠甲,看样子是长得很安全了,真正引起安全问题的是它的传输,大致是XSS和CSRF了。

JSONP又是啥玩意?

JSONP 指带有padding 的JSON,咋一看还是不懂,就不能说人话吗?咋还带了padding呢?最经典的一个解释是一位老哥曾经告诉我,哪有什么JSONP,无非就是利用了script标签不受限于浏览器的同源策略,前后端构造出来一种支持GET请求可以进行跨域请求的方式罢了。

  • 服务端 返回一个形如楼下的东西 getBlindDateInfo({ name: "ataola" })
  • 前端 写一个getBlindDateInfo()方法,然后script引入后端的接口 <script> function getBlindDateInfo(obj) { cosole.log(obj.name); } </script> <script src="http://jsoup.ataola.cn?callback=getBlindDateInfo"></script>

JSON有什么用?

  • 作为数据传输格式, 例如请求的接口
  • 配置文件, 例如Node.JS中的package.json

JSON有什么缺点?

对注释不是很友好。

参考文献

《JSON必知必会》

维基百科JSON:https://en.wikipedia.org/wiki/JSON#History

JSON官网:https://www.json.org/json-zh.html

JSON-Schema: https://json-schema.org/

本文分享自微信公众号 - 前端路桥(ataola),作者:丰臣正一

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 软件推荐(浏览器)-IE的消失

    我曾经体验过各式各样的浏览器,写这个文章是为了帮助我的朋友在合适的场合用合适的工具浏览,我曾经在大学给很多个小姐姐修过电脑,但我看到的是绝大部分还是在用...

    丰臣正一
  • React环境搭建

    React是当下前端生态圈流行的框架之一,与Vue和Angular并称前端三架马车。今天,我们就一起来学习下React,今天的主要内容有。

    丰臣正一
  • Javascript中的数据类型

    所谓值类型,其实指的是原始数据类型,它和后面讲的原始数据类型、基本数据类型是同一个东西。在语义理解上,基本和原始似乎能搭的上边,而值似乎不沾边,所有这里就分开来...

    丰臣正一
  • JS高级测试: 下列JSON说法不正确的是?

    使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

    舒克
  • JSON对象

    星辉
  • MySQL 5.7 JSON 实现简介

    本文主要介绍了MySQL在5.7.7之后引入的原生JSON支持的特性,说明了引入JSON类型的好处,并结合具体的示例介绍了MySQL在JSON类型上对外的接口以...

    腾讯云数据库团队
  • PHP json_encode 的使用方法

    今天在进行接口加签的时候,发现一个问题,数据一直加签失败; 再查找一番原因后发现原来 json_encode 对反斜杠进行了转义,导致数据一直加签失败 解决办法...

    hedeqiang
  • MySQL5.7 JSON实现简介

    本文主要介绍在MySQL 5.7.7开始引入的非结构化数据类型JSON的特性以及具体的实现方式(包括存储方式)。首先介绍为什么要引入JSON的原生数据类型的支持...

    ivansqwu
  • 9 款你不能错过的 JSON 工具

    JSON 吸引了工具构建者的注意,它们开发了用于重新格式化、验证和解析 JSON 的众多工具,这不足为奇。这些工具既有在 Web 浏览器中运行的在线实用程序,又...

    用户6543014
  • 9 款你不能错过的 JSON 工具

    JSON 吸引了工具构建者的注意,它们开发了用于重新格式化、验证和解析 JSON 的众多工具,这不足为奇。这些工具既有在 Web 浏览器中运行的在线实用程序,又...

    GitHubDaily

扫码关注云+社区

领取腾讯云代金券