资讯专栏INFORMATION COLUMN

5分钟了解JSON那些事儿

ad6623 / 1272人阅读

摘要:简介是对象表示法的缩写是一种数据格式而不是一种编程语言用来表示结构化数据是的一个严格子集并不从属于很多编程语言都可以用数据格式语法语法可以表示以下三种类型的值简单值字符串数值布尔值但是不支持对象数组不支持变量函数对象实例简单值字符串数字布尔

JSON 简介

JSON是JavaScript Object Notation(JavaScript对象表示法)的缩写

JSON是一种数据格式, 而不是一种编程语言, 用来表示结构化数据

JSON是JavaScript的一个严格子集

JSON并不从属于JavaScript, 很多编程语言都可以用JSON数据格式

语法

JSON语法可以表示以下三种类型的值:

简单值: 字符串/数值/布尔值/null, 但是不支持undefined

对象

数组

JSON不支持变量/函数/对象实例

简单值

字符串

"Hello JSON"

数字

66

布尔值

true

null

null
对象

和JavaScript对比来看 ->

JavaScript表示对象

键值对的键可以加引号也可以不加, 如果加引号, 可以加单引号也可以加双引号

// 最常见就这么写
const obj1 = {
  foo: "bar",
  num: 66,
  status: true
};
// 这么写也oconstet obj2 = {
  "foo": "bar",
  "num": 66,
  "status": true
};
// 这么写也ok
const obj1 = {
  "foo": "bar",
  "num": 66,
  "status": true
};

JSON表示对象

键值对的键必须加双引号(手写JSON时一定要注意)

对象没有变量声明, 因为JSON根本就没有变量的概念(它不是一个编程语言)

末尾没有分号

{
  "foo": "bar",
  "num": 66,
  "status": true
}

和JavaScript相似, 对象可以嵌套对象

{
  "foo": "bar",
  "num": 66,
  "status": true,
  "baz": {
    "num": 88
  }
}

注, 同名属性可以在不同的对象中, 但是不能出现在同一个对象中

数组

和JavaScript对比来看 ->

JavaScript表示数组

let arr = ["hello", 66, true];

JSON表示数组

同样没有变量声明和结尾的分号, 同时注意字符串简单值要加双引号

["hello", 66, true]

数组和对象结合起来可以构成复杂的集合, 比如students.json文件中可能是这样婶儿的

[
  {
    "name": "小明",
    "age": 10,
    "score": {
      "math": 88,
      "english": 99
    }
  },
  {
    "name": "小强",
    "age": 11,
    "score": {
      "math": 98,
      "english": 96
    }
  }
]

看到以上同JavaScript的不同之处, 我们可以知道为什么说JSON是JavaScript的一个严格子集了吧

JSON序列化与解析 基本用法

ECMAScript5定义了全局对象JSON, 用来解析JSON字符串

简单来说, JSON对象有两个方法

JSON.stringify(): 把JavaScript对象序列化为JSON字符串

JSON.parse(): 把JSON字符串解析为原生JavaScript值

const book = {
  name: "Learn JavaScript in One Day",
  pages: 1
};

const jsonText = JSON.stringify(book); // 序列化
// "{"name":"Learn JavaScript in One Day","pages":1}"

const parseText = JSON.parse(jsonText); // 解析
// {name: "Learn JavaScript in One Day", pages: 1}

默认情况下, JSON.stringify()输出的JSON字符串不包含任何空格字符或缩进(是不是给我们提供了一种将去除数据中无用的空白和缩进的方法呢).

在序列化JavaScript对象时, 所有函数及原型成员都会被有意忽略, 不体现在结果中. 此外, 值为undefined的任何属性也都会被跳过. 结果中最终都是值为有效JSON数据类型的实例属性.

const book = {
  name: "Learn JavaScript in One Day",
  pages: 1,
  foo: undefined
};

const jsonText = JSON.stringify(book); // 序列化
// "{"name":"Learn JavaScript in One Day","pages":1}"
// foo的值为undefined, 所被忽略掉了

将JSON字符串直接传递给JSON.parse()就可以得到相应的JavaScript值.

JSON.parse()就是JSON.stringify()的逆向操作. 将一个JavaScript值序列化之后再解析JSON.parse(JSON.stringify(foo))和原来的foo几乎一样.

注意, 为什么说是几乎一样呢?

如果foo是一个对象或数组, 那么这么一折腾就变成了两个不同的对象或数组了;

这就提供了一种克隆对象和数组的方法

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103341.html

相关文章

  • 在开始第一个机器学习项目之前就了解那些事儿

    摘要:此外,与训练机器学习模型的作业相比,作业具有不同的执行配置文件。此外,还制作了一个界面,以便控制机器学习的参数指定用于训练的数据量等。 摘要: 一份机器学习过来人的经验清单分享,主要是包含一些关于构建机器学习工作流以及Apache Spark应该注意的一些事项,希望这个清单能够帮助那些正在学习机器学习的相关人员少走一些弯路,节约一些时间。 showImg(https://segment...

    BearyChat 评论0 收藏0
  • [聊一聊系列]聊一聊前端模板与渲染那些事儿

    摘要:欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面不仅仅是代码作为现代应用,的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板。我们今天就来聊聊,拼装与渲染模板的那些事儿。一改俱改,一板两用。 欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面(不仅仅是代码):https://segmentfault.com/blog...

    UCloud 评论0 收藏0
  • [聊一聊系列]聊一聊前端模板与渲染那些事儿

    摘要:欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面不仅仅是代码作为现代应用,的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板。我们今天就来聊聊,拼装与渲染模板的那些事儿。一改俱改,一板两用。 欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面(不仅仅是代码):https://segmentfault.com/blog...

    Yangder 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<