扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >一文搞懂JSON(JavaScript Object Notation)
  • 200

0
分享到

一文搞懂JSON(JavaScript Object Notation)

2024-04-02 19:04:59 200人浏览 八月长安
摘要

目录JSON出现json结构Json对象Json对象与javascript对象JSON 和 JavaScript 对象互转Json数组复杂数组类型复杂对象数组组合对象包含数组数组包含

JSON（JavaScript Object Notation, JS 对象标记）是一种轻量级的数据交换格式，通常用于服务端向网页传递数据 。与 XML 一样，JSON 也是基于纯文本的数据格式。

Json 文件的文件后缀是 .Json，Json 文本的 MIME 类型是 application/Json。

JSON出现

在JSON出现之前，大家一直用XML来传递数据。因为XML是一种纯文本格式，所以它适合在网络上交换数据。XML本身不算复杂，但是，加上DTD、XSD、XPath、XSLT等一大堆复杂的规范以后，任何正常的软件开发人员碰到XML都会感觉头大了，最后大家发现，即使你努力钻研几个月，也未必搞得清楚XML的规范。

终于，在2002年的一天，道格拉斯·克罗克福特（Douglas Crockford）同学为了拯救深陷水深火热同时又被某几个巨型软件企业长期愚弄的软件工程师，发明了JSON这种超轻量级的数据交换格式。

由于JSON非常简单，很快就风靡WEB世界，并且成为ECMA标准。几乎所有编程语言都有解析JSON的库，而在JavaScript中，我们可以直接使用JSON，因为JavaScript内置了JSON的解析。

Json结构

Json 有两种基本的结构，即 Json对象 和 Json 数组。通过 Json 对象和 Json 数组这两种结构的组合可以表示各种复杂的结构。

Json对象

对象结构以{开始、以}结束，中间部分由 0 个或多个以英文,分隔的 key/value 对构成，key 和 value 之间以英文:分隔。对象结构的语法结构如下：

在这里插入图片描述

其中，key 必须为 String 类型，需使用双引号。value 可以是 String、Number、Object、Array 等数据类型。例如，一个 person 对象包含姓名、密码、年龄等信息，使用 JSON 的表示形式如下


{
    "pname":"张三",
    "passWord":"123456",
    "page":40
}

JSON 对象保存在大括号内。

就像在 JavaScript 中, 对象可以保存多个 键/值 对

Json对象与JavaScript对象

JavaScript 中的所有事物都是对象，比如字符串、数字、数组、日期等等。在 JavaScript 中，对象是拥有属性和方法的数据。

我们通常说的 Json 对象，是 Json 格式的 JavaScript 对象或是符合 Json 数据结构要求的 JavaScript 对象。

对比 Json JavaScript
含义 仅仅是一种数据格式 表示类的实例
传输 可以跨平台数据传输，速度快 不能传输
表现 1.键必须加双引号
2.值不能是方法函数，不能是 undefined/NaN		 1.键不加引号
2.值可以是函数、对象、字符串、数字、 boolean 等
相互转换 Json转换JavaScript：
1. Json.parse(JsonStr); (不兼容IE7)
2. eval("("+JsonStr+")"); (兼容所有浏览器		 JavaScript对象转换Json：
Json.stringify(jsObj);

在这里插入图片描述

JSON 和 JavaScript 对象互转

在这里插入图片描述

Json数组

数组结构以[开始、以]结束，中间部分由 0 个或多个以英文,分隔的值的列表组成。数组结构的语法结构如下：

在这里插入图片描述

Json 数组的元素类型可以不一致，如 item1 可以是字符串类型， item2 可以是数字类型， item3 可以是对象类型。数组的最后一个元素后面不可以加逗号。

复杂数组类型

在这里插入图片描述

这里我们创建了一个包含三个对象的数组。

第一个为 html 对象，该对象同时也是一个包含 5 个元素的数组。第二个为 JavaScript 对象，该对象同时也是一个包含 4 个元素的数组。第三个为 Server 对象，该对象同时也是一个包含 3 个元素的数组。

复杂对象数组组合

上述两种（对象、数组）数据结构也可以分别组合构成更加复杂的数据结构。

对象包含数组

在这里插入图片描述

这里我们创建了一个复杂的 siteInfo 的对象。

siteInfo 的对象 siteUrl 属性的值为 www.haicoder.com，siteInfo 的对象 siteAddr 属性的值为 shanghai，siteInfo 的对象 sitePriority 属性的值为 1，siteInfo 的对象 siteModule 属性是一个数组。

siteModule 数组有两个元素，第一个元素是 HTML，第二个元素是 JavaScript。这两个元素也都是一个数组类型。

数组包含对象

就像在 JavaScript 中, 数组可以包含对象：


"employees":[  
    {"firstName":"John", "lastName":"Doe"},  
    {"firstName":"Anna", "lastName":"Smith"},  
    {"firstName":"Peter", "lastName":"Jones"}  
]

在以上实例中，对象 “employees” 是一个数组。包含了三个对象。

每个为个对象为员工的记录（姓和名）。

JSON 语法规则

  •  数据为 键/值 对。
  • 数据由逗号分隔。
  • 大括号保存对象方括号保存数组

为了统一解析，JSON的字符串规定必须用双引号""，Object的键也必须用双引号""。

Json键值对

Json 数据的书写格式是：名称/值对。就像 JavaScript 对象属性。一个名称对应一个值，名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值

在这里插入图片描述

Json值的数据类型

Json值可以是如下几种类型：

类型 描述
数字型（Number） Json 数字类型可以支持整型或者浮点型，但不能使用八进制和十六进制格式。 Json 数字类型也不能使用 NaN 和 Infinity。
字符串型（String） Json 字符串必须写在双引号之间，且只能是双引号。包裹的 Unicode 字符和反斜杠转义字符。在 Json 中没有字符型，字符型就是单个字符串。
布尔型（Boolean） Json 布尔值的 true 或者 false，只能小写。使用双引号引用的值，不是布尔值。
数组（Array） 【 有序的值序列 】 。
对象（Object） { 无序的键:值对集合。}
null 空。
JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。
文本可以被任何编程语言读取及作为数据格式传递。

道格拉斯同学长期担任雅虎的高级架构师，自然钟情于 JavaScript。他设计的 Json 实际上是 JavaScript语法的一个子集，是 JavaScript 对象的字符串表示法。Json 是使用文本表示一个 JavaScript 对象的信息，本质是一个字符串。

Json使用JavaScript语法

因为 Json 使用的是 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 Json。

在这里插入图片描述

这里我们通过 JavaScript，创建了一个对象数组，并对该对象数组进行了赋值。

访问内容

在这里插入图片描述

修改数据

修改对象的第二个元素的 cateGory：

modules[1].category = "es6";

Json与JavaScript对象遍历

Json 字符串的遍历 和 JavaScript对象 的遍历都是使用 for-in循环来遍历。

Json遍历

我们创建一个 haicoder.html 的文件，并输入以下代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Json遍历</title>
    <script type="text/javascript">
        console.log("嗨客网(www.haicoder.net)");
        var str = {"name":"haicoder", "url":"www.haicoder.net"};
        for (var k in str) {
            console.log(k + " -> " + str[k]);
        }
    </script>
</head>
<body>
</body>
</html>

首先，我们定义了一个 Json 字符串 str。接着，我们使用 for 循环，遍历该 Json 字符串，k 为 Json字符串中的 key，str[k] 为 Json字符串 key 对应的 value。

用浏览器打开该文件，浏览器输出如下图所示：

在这里插入图片描述

JavaScript对象遍历

我们创建一个 haicoder.html 的文件，并输入以下代码：


!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript对象遍历</title>
    <script type="text/javascript">
        console.log("嗨客网(www.haicoder.net)");
        var obj = {name:"haicoder", url:"www.haicoder.net"};
        for (var k in obj) {
            console.log(k + " -> " + obj[k]);
        }
    </script>
</head>
<body>
</body>
</html>

首先，我们定义了一个 JavaScript 对象 obj。接着，我们使用 for 循环，遍历该 JavaScript 对象 ，k 为 JavaScript 对象的 key，obj[k] 为 JavaScript 对象 key 对应的 value。

在这里插入图片描述

Json与JavaScript数组遍历

Json 数组的遍历和 JavaScript数组 的遍历都是使用 for-in 循环来遍历

Json数组遍历

我们创建一个 haicoder.html 的文件，并输入以下代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Json数组遍历</title>
    <script type="text/javascript">
        console.log("嗨客网(www.haicoder.net)");
        var jsonArr = [
            {"mod":"json", "url":"www.haicoder.net/json"},
            {"mod":"Vue", "url":"www.haicoder.net/vue"},
            {"mod":"python", "url":"www.haicoder.net/Python"}
        ]
        for (var k in jsonArr) {
            console.log(k + " -> " + jsonArr[k].mod + " -> " + jsonArr[k].url);
        }
    </script>
</head>
<body>
</body>
</html>

首先，我们定义了一个 Json 数组，该数组里面每一个元素都是一个对象。接着，我们使用 for 循环遍历该 Json 数组，k 为 Json 数组的下标，jsonArr[k] 为 Json数组下标 key 对应的 value。

Json 数组中的每一个对象的值我们使用 . 来获取。

在这里插入图片描述

JavaScript对象数组遍历


var Js_Result = [
  {
    name: "haicoder",
    url: "www.haicoder.net",
    age: 20
  },
  {
    name: "JavaScript",
    url: "www.JavaScript.net",
    age: 30
  }
]
for (var i in Js_Result ){             //  i为数组角标  
 console.log(i+" "+Js_Result[i].firstName
 +" "+Js_Result[i].lastName
 +" "+Js_Result[i].age);
}
//结果输出为
0 haicoder www.haicoder.net 20
1 JavaScript www.JavaScript.net 30

将 JavaScript 对象保存到数组 Js_Result 使用 for 循环遍历 Json_Result,，i 为数组角标，通过 Js_Result[i].firstName 的方式获取对应的值 。

序列化

把任何JavaScript对象变成JSON，就是把这个对象序列化成一个JSON格式的字符串，这样才能够通过网络传递给其他计算机。

让我们先把小明这个对象序列化成JSON格式的字符串：

在这里插入图片描述

要输出得好看一些，可以加上参数，按缩进输出：

JSON.stringify(xiaoming, null, '  ');

结果：

{
  "name": "小明",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": "\"W3C\" Middle School",
  "skills": [
    "JavaScript",
    "Java",
    "Python",
    "Lisp"
  ]
}

还可以传入一个函数，这样对象的每个键值对都会被函数先处理：


function convert(key, value) {
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
    return value;
}

JSON.stringify(xiaoming, convert, '  ');

上面的代码把所有属性值都变成大写：


{
  "name": "小明",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": "\"W3C\" MIDDLE SCHOOL",
  "skills": [
    "JAVASCRIPT",
    "JAVA",
    "PYTHON",
    "LISP"
  ]
}

如果我们还想要精确控制如何序列化小明，可以给xiaoming定义一个toJSON()的方法，直接返回JSON应该序列化的数据：


var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
    toJSON: function () {
        return { // 只输出name和age，并且改变了key：
            'Name': this.name,
            'Age': this.age
        };
    }
};

JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}'

反序列化

通常我们从服务器中读取 JSON 数据，并在网页中显示数据。

拿到一个JSON格式的字符串，我们直接用JSON.parse()把它变成一个JavaScript对象：


JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45

JSON.parse()还可以接收一个函数，用来转换解析出的属性：

在这里插入图片描述

Json的特性

  1. Json 易于机器的解析和生成，客户端 JavaScript 可以简单的通过 eval() 进行 Json 数据的读取。
  2. Json 天生具有自我描述性，易于人的阅读和编写。
  3. Json 采用完全独立于语言的文本格式。格式都是压缩的，占用带宽小。
  4. Json 解析器和 Json 库支持许多不同的编程语言， 目前几乎所有的编程语言都支持 Json。
  5. 因为 Json 格式能够直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量， 但是完成的任务不变，且易于维护。
  6. Json 比 XML 更小、更快，更易解析。
  7. Json 还规定了字符集必须是 UTF-8，这样表示多语言就没有问题了。

到此这篇关于一文搞懂JSON(JavaScript Object Notation)的文章就介绍到这了,更多相关JSON(JavaScript Object Notation)内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: 一文搞懂JSON(JavaScript Object Notation)

本文链接: https://lsjlt.com/news/155858.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 一文搞懂JSON(JavaScript Object Notation)
    目录JSON出现Json结构Json对象Json对象与JavaScript对象JSON 和 JavaScript 对象互转Json数组复杂数组类型复杂对象数组组合对象包含数组数组包含...
    99+
    2024-04-02
  • 一文搞懂Java顶层类之Object类的使用
    目录概述toString方法方法摘要覆盖重写equals方法方法摘要默认地址比较对象内容比较Objects类概述 java.lang.Object类是Java语言中的根类，即所有类的...
    99+
    2022-11-16
    Java Object类使用 Java Object类
  • 一文带你搞懂Java中Object类和抽象类
    目录一、抽象类是什么二、初始抽象类2.1 基本语法2.2 继承抽象类三、抽象类总结四、Object类4.1 初始Object4.2 toString4.3 equals4.4 has...
    99+
    2024-04-02
  • 一文搞懂JavaScript中的内存泄露
    目录什么是内存泄漏怎么检测内存泄漏PerformanceMemory内存泄漏的场景垃圾回收算法引用计数循环引用标记清除闭包是内存泄漏吗总结以前我们说的内存泄漏，通常发生在后端，但是不...
    99+
    2024-04-02
  • 一文搞懂HBA卡
    HBA卡是一个简称，准确叫法应该是：主机总线适配器(Host Bus Adapter,HBA)，也叫做FC-HBA卡（俗称：光纤网卡）、iSCSI-HBA卡（RJ45接口）。这是一个在服务器和存储装置间提供输入/输出(I/O)处理和物理连接...
    99+
    2023-08-31
    服务器
  • 一文搞懂Python读取text,CSV,JSON文件的方法
    目录前言打开文件Python 中的文件读取模式读取文本文件读取 CSV 文件读取 JSON 文件总结前言 文件是无处不在的，无论我们使用哪种编程语言，处理文件对于每个程序员都是必不可...
    99+
    2024-04-02
  • 一文搞懂JavaScript中原型与原型链
    目录前言构造函数创建对象prototype__proto__constructor实例与原型原型链总结constructor_proto_前言 js中的原型与原型链应该是老生常谈的话...
    99+
    2024-04-02
  • 一文搞懂JavaScript中bind,apply,call的实现
    目录bind、call和apply的用法bindcall&apply实现bind实现call和apply总结bind、call和apply都是Function原型链上面的方法...
    99+
    2024-04-02
  • 一文搞懂JavaScript中的this指向问题
    一、全局环境下的this指向在全局作用域下，this始终指向全局对象window，无论是否是严格模式！congsole.log()完整的写法是window.console.log(),window可以省略，window调用了console....
    99+
    2023-05-14
    javascript
  • 一文搞懂JavaScript中的this绑定规则
    目录前言  this四大绑定规则一.默认绑定二.隐式绑定三.new绑定四.显示绑定绑定规则优先级面试题题1题2题3题4前言  首先我们来看一个示例。定义...
    99+
    2024-04-02
  • 一文搞懂 Elasticsearch 之 Mapping
    作为 Elasticsearch 的“表结构定义”的 Mapping，你可能需要了解下！ 这篇文章主要介绍 Mapping、Dynamic Mapping 以及 ElasticSearch 是如何自动判...
    99+
    2018-08-02
    一文搞懂 Elasticsearch 之 Mapping
  • netstat命令,一文搞懂
    netstat命令是一个网络工具，用于显示计算机网络的连接状态和统计数据。它可以列出所有活动的网络连接，包括正在监听的端口、正在建立...
    99+
    2023-09-12
    netstat
  • 一文搞懂如何避免JavaScript内存泄漏
    目录一、什么是内存泄漏二、常见的内存泄漏1、意外的全局变量2、 计时器3、 闭包4、 事件监听器5、缓存6、分离的DOM元素三、识别内存泄漏1、使用性能分析器可视化内存消耗2、 识别...
    99+
    2024-04-02
  • 一文带你搞懂JavaScript中数组的特性
    目录前言基本介绍数组类型和判断判断为数组的方式数组索引值和长度索引值是字符串length属性数组的最大长度创建数组的三种方式数组字面量语法Array构造函数Array.of()空位(...
    99+
    2023-05-17
    JavaScript数组特性 JavaScript数组
  • mysql处理json格式的字段，一文搞懂mysql解析json数据
    文章目录 一、概述1、什么是JSON2、MySQL的JSON3、varchar、text、json类型字段的区别 二、JSON类型的创建1、建表指定2、修改字段 三、JSON类型的插入...
    99+
    2023-10-01
    mysql json adb
  • 一文搞懂MySQL预编译
    1、预编译的好处 　　大家平时都使用过JDBC中的PreparedStatement接口，它有预编译功能。什么是预编译功能呢？它有什么好处呢？ 　　当客户发送一条SQL语句给服务器后，服务器总是需要校验SQL语句的语...
    99+
    2022-05-23
    MySQL 预编译 MySQL 编译
  • 一文搞懂Spring中的JavaConfig
    目录配置类注册组件扫描包配置事务注解驱动单元测试加载配置类properties配置文件加载（了解）aspectj注解开关传统spring一般都是基于xml配置的，不过后来新增了许多J...
    99+
    2024-04-02
  • 一文搞懂JavaScript如何实现图片懒加载
    目录实现思路准备知识data-*getBoundingClientRect()throttlewindow.innerHeight完整代码js部分CSS部分运行结果总结图片懒加载，往...
    99+
    2024-04-02
  • 一文带你彻底搞懂JavaScript正则表达式
    目录正则表达式的概述什么是正则表达式正则表达式的作用正则表达式的特点正则表达式在js中的使用创建正则表达式测试正则表达式 test正则表达式中的特殊字符正则表达式的组成边界符字符类量...
    99+
    2024-04-02
  • 一文搞懂Python Sklearn库使用
    目录1、LabelEncoder2、OneHotEncoder3、sklearn.model_selection.train_test_split随机划分训练集和测试集4、pipeline5 perdict...
    99+
    2022-06-03
    Python Sklearn库 Python Sklearn库使用
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作