打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
Javascript[0x04] -- JSON必知必会
userphoto

2023.02.03 浙江

关注

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="//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/

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
《JSON 必知必会》阅读摘要记录 | 国光
JSON 入门指南(1)
为什么使用JSON
Asp.net C# 使用Newtonsoft.Json 实现DataTable转Json格式数据
瓜瓜笔记 | 让你彻彻底底搞懂 JSON
Json格式—教程(必须知道)
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服