JSON 入门教程

作者: 刘星
日期: 2017年4月05日

JSON 的全称是”JavaScript Object Notation”,意思是 JavaScript 对象表示法,它是一种基于文本,独立于语言的轻量级数据交换格式,类似 XML 但比 XML 更小、更快,更易解析

初识

JSON 是 Web 开发领域最知名的技术权威 Douglas Crockford 创造

  • JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
  • JSON 是轻量级的文本数据交换格式
  • JSON 独立于语言
  • JSON 具有自我描述性,更易理解

JSON 建构于两种结构:

  • “名称/值”对的集合(A collection of name/value pairs)。不同的语言中,它被理解为对象(object),纪录(record),结构(struct),字典(dictionary),哈希表(hash table),有键列表(keyed list),或者关联数组 (associative array)。
  • 值的有序列表(An ordered list of values)。在大部分语言中,它被理解为数组(array)。

这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。

JSON 语法

两种表示结构

JSON 有两种表示结构,对象和数组。

  • 对象是一个无序的“‘名称/值’对”集合。一个对象以{(左括号)开始,}(右括号)结束。每个“名称”后跟一个:(冒号);“‘名称/值’ 对”之间使用,(逗号)分隔。

    {
        "name": "xing",
        "age": 999
    }
    

  • 数组是值(value)的有序集合。一个数组以[(左中括号)开始,](右中括号)结束。值之间使用,(逗号)分隔。

    [
        {
            key1:value1,
            key2:value2 
        },
        {
             key3:value3,
             key4:value4   
        }
    ]
    

语法规则

  • 数据在名称/值对中
  • 数据由逗号分隔
  • 大括号保存对象
  • 中括号保存数组

JSON 值可以是

  • 数字(整数或浮点数)
  • 字符串(在双引号中)
  • 逻辑值(true 或 false)
  • 数组(在中括号中)
  • 对象(在大括号中)
  • null

在 JavaScript 中使用 JSON

JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串。我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象,使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串.

  • JSON.parse(text[, reviver])
    
  • JSON.stringify(value[, replacer[, space]])
    
  • eval()方法 存在性能和安全问题不建议使用

首先我们定义一个对象,由于 JSON 使用用 JavaScript 编写的,所以对 JSON 的操作无异于 JavaScript 对数组与对象的操作

let Obj = {  
  name: "xing", 
  age: "99", 
  hobby: ["吃", "喝", "玩"]
}

服务器一般返回 JSON 字符串,我们用 JSON.stringify()将这个对象转换成 JSON 字符串模拟服务器返回的数据,然后再用JSON.parse()解析成 JSON 对象来使用

let jsonStr = JSON.stringify(Obj) // string: {"name":"xing","age":"99","hobby":["吃","喝","玩"]}
let jsonObj = JSON.parse(jsonStr) // Obect: { name: 'xing', age: '99', hobby: [ '吃', '喝', '玩' ] }

JSON 增删改查

// 读取
let myName = jsonObj.name
console.log(myName) // xing
// 新增
josnObj.sex = "male"
console.log(josnObj) //{ name: 'xing', age: '99', hobby: [ '吃', '喝', '玩' ], sex: 'female' }
// 修改
josnObj.sex = "female"
console.log(josnObj) // { name: 'xing', age: '99', hobby: [ '吃', '喝', '玩' ], sex: 'female' }
// 删除
delete josnObj.sex
console.log(josnObj) // { name: 'xing', age: '99', hobby: [ '吃', '喝', '玩' ] }

for in遍历 JSON 数据

for(let x in jsonObj){
  console.log(`${x}:${jsonObj[x]}`)
}
/*
name:xing
age:99
hobby:吃,喝,玩
*/

到此,我们了解 JSON 的使用,JSON 已经是 JavaScript 标准的一部分。目前,主流的浏览器对 JSON 支持都非常完善。应用 JSON,我们可以从 XML 的解析中摆脱出来,对那些应用 AJAX 的 Web 2.0 网站来说,JSON 是目前最灵活的轻量级方案。

参考链接

文档信息

版权声明:署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0)

原文链接:https://www.liuxing.io/blog/json-tutorial/

发表日期:2017年04月05日


相关文章

Node 命令行工具开发【看段子】

Node 命令行工具开发【看段子】 你有没有上班想看笑话却又怕领导发现的经历?现在我们就用几十行代码写一个命令行看笑话段子的小程序,从此无需担心领导的视察。这篇文章和上一篇差不多都是命令行小工具开发,不过本篇更偏向于小爬虫的开发

2017年3月18日

node 命令行小工具开发【翻译小工具】

node 命令行工具开发 NodeJs 有许多命令行工具。它们全局安装,并提供一个命令供我们使用,完成相应的功能。 现在我们就用 node 来开发一个实用的命令行小工具

2017年3月16日

最近更新

Curl 使用指南

Curl 是一个常用的命令行数据传输工具, 可以方便的从命令行创建网络请求

2021年5月04日

JavaScript 中的分号

JavaScript 代码到底加不加分号。本文带你了解 JavaScript 的分号自动插入机制,以及哪些情况必须加分号

2021年5月02日