程序员都应该了解的一种数据格式之 JSON

者 | 猪哥

责编 | maozz

JSON的诞生原因是因为XML整合到HTML中各个浏览器实现的细节不尽相同，所以道格拉斯·克罗克福特（Douglas Crockford）和奇普·莫宁斯达（Chip Morningstar）一起从JS的数据类型中提取了一个子集，作为新的数据交换格式，因为主流的浏览器使用了通用的JavaScript引擎组件，所以在解析这种新数据格式时就不存在兼容性问题，于是他们将这种数据格式命名为 “JavaScript Object Notation”，缩写为 JSON，由此JSON便诞生了！

今天我们来学习一下JSON的结构形式、数据类型、使用场景以及注意事项吧！

JSON格式

上面我们知道JSON是从JavaScript的数据类型中提取出来的子集，那JSON有几种结构形式呢？又有哪些数据类型呢？他们又分别对应着JavaScript中的哪些数据类型呢？

JSON的2种结构形式，键值对形式和数组形式。

举了一个JSON的实例，就是键值对形式的，如下：

{
"person": {
"name": "pig",
"age": "18",
"sex": "man",
"hometown": {
"province": "江西省",
"city": "抚州市",
"county": "崇仁县"
}
}
}

这种结构的JSON数据规则是：一个无序的“‘名称/值’对”集合。一个对象以 {左括号开始， }右括号结束。每个“名称”后跟一个 :冒号；“‘名称/值’ 对”之间使用 ,逗号分隔。

因为大多数的时候大家用的JSON可能都是上面那种key-value形式，所以很多人在讲解JSON的时候总是会忽略数组形式，这一点是需要注意的。

那JSON的数组形式是怎么样的呢？举一个实例吧！

["pig", 18, "man", "江西省抚州市崇仁县"]

数组形式的JSON数据就是值（value）的有序集合。一个数组以 [左中括号开始， ]右中括号结束。值之间使用 ,逗号分隔。

JOSN的6种数据类型

上面两种JSON形式内部都是包含value的，那JSON的value到底有哪些类型，而且上期我们说JSON其实就是从Js数据格式中提取了一个子集，那具体有哪几种数据类型呢？

string：字符串，必须要用双引号引起来。
number：数值，与JavaScript的number一致，整数（不使用小数点或指数计数法）最多为 15 位，小数的最大位数是 17。
object：JavaScript的对象形式，{ key:value }表示方式，可嵌套。
array：数组，JavaScript的Array表示方式[ value ]，可嵌套。
true/false：布尔类型，JavaScript的boolean类型。
：空值，JavaScript的。

以上数据形式图片来源JSON官方文档：http://www.json.org/json-zh.html

JSON使用场景

介绍完JSON的数据格式，那我们来看看JSON在企业中使用的比较多的场景。

接口返回数据和序列化。JSON用的最多的地方莫过于Web了，现在的数据接口基本上都是返回的JSON，具体细化的场景有：

Ajxa异步访问数据
RPC远程调用
前后端分离后端返回的数据
开放API，如百度、高德等一些开放接口
企业间合作接口

这种API接口一般都会提供一个接口文档，说明接口的入参、出参等，

一般的接口返回数据都会封装成JSON格式，比如类似下面这种

{
"code": 1,
"msg": "success",
"data": {
"name": "pig",
"age": "18",
"sex": "man",
"hometown": {
"province": "江西省",
"city": "抚州市",
"county": "崇仁县"
}
}
}

程序在运行时所有的变量都是保存在内存当中的，如果出现程序重启或者机器宕机的情况，那这些数据就丢失了。一般情况运行时变量并不是那么重要丢了就丢了，但有些内存中的数据是需要保存起来供下次程序或者其他程序使用。

保存内存中的数据要么保存在数据库，要么保存直接到文件中，而将内存中的数据变成可保存或可传输的数据的过程叫做序列化，在Python中叫pickling，在其他语言中也被称之为serialization，marshalling，flattening等等，都是一个意思。

正常的序列化是将编程语言中的对象直接转成可保存或可传输的，这样会保存对象的类型信息，而JSON序列化则不会保留对象类型！

为了让大家更直观的感受区别，猪哥用代码做一个测试，大家一目了然

Python对象直接序列化会保存class信息，下次使用loads加载到内存时直接变成Python对象。
JSON对象序列化只保存属性数据，不保留class信息，下次使用loads加载到内存可以直接转成dict对象，当然也可以转为Person对象，但是需要写辅助方法。

对于JSON序列化不能保存class信息的特点，那JSON序列化还有什么用？答案是当然有用，对于不同编程语言序列化读取有用，比如：我用Python爬取数据然后转成对象，现在我需要将它序列化磁盘，然后使用Java语言读取这份数据，这个时候由于跨语言数据类型不同，所以就需要用到JSON序列化。

存在即合理，两种序列化可根据需求自行选择！

最后就是生成Token和配置文件

首先声明Token的形式多种多样，有JSON、字符串、数字等等，只要能满足需求即可，没有规定用哪种形式。

JSON格式的Token最有代表性的莫过于JWT（JSON Web Tokens）。

随着技术的发展，分布式web应用的普及，通过Session管理用户登录状态成本越来越高，因此慢慢发展成为Token的方式做登录身份校验，然后通过Token去取Redis中的缓存的用户信息，随着之后JWT的出现，校验方式更加简单便捷化，无需通过Redis缓存，而是直接根据Token取出保存的用户信息，以及对Token可用性校验，单点登录更为简单。

使用JWT做过app的登录系统，大概的流程就是：

用户输入用户名密码
app请求登录中心验证用户名密码
如果验证通过则生成一个Token，其中Token中包含：
用户的uid、Token过期时间、过期延期时间等，然后返回给app
app获得Token，保存在cookie中，下次请求其他服务则带上
其他服务获取到Token之后调用登录中心接口验证
验证通过则响应

JWT登录认证有哪些优势：

性能好：服务器不需要保存大量的session
单点登录（登录一个应用，同一个企业的其他应用都可以访问）：使用JWT做一个登录中心基本搞定，很容易实现。
兼容性好：支持移动设备，支持跨程序调用，Cookie 是不允许垮域访问的，而 Token 则不存在这个问题。
安全性好：因为有签名，所以JWT可以防止被篡改。更多JWT相关知识自行在网上学习，本文不过多介绍！

说实话JSON作为配置文件使用场景并不多，最具代表性的就是npm的package.json包管理配置文件了，下面就是一个npm的package.json配置文件内容。

{
"name": "server", //项目名称
"version": "0.0.0",
"private": true,
"main": "server.js", //项目入口地址，即执行npm后会执行的项目
"scripts": {
"start": "node ./bin/www" ///scripts指定了运行脚本命令的npm命令行缩写
},
"dependencies": {
"cookie-parser": "~1.4.3", //指定项目开发所需的模块
"debug": "~2.6.9",
"express": "~4.16.0",
"http-errors": "~1.6.2",
"jade": "~1.11.0",
"morgan": "~1.9.0"
}
}

但其实JSON并不合适做配置文件，因为它不能写注释、作为配置文件的可读性差等原因。

配置文件的格式有很多种如：toml、yaml、xml、ini等，目前很多地方开始使用yaml作为配置文件格式。

JSON在Python中的使用

最后我们来看看Python中操作JSON的常用方法有哪些，在Python中操作JSON时需要引入json标准库。

import json

类型转换

Python类型转JSON：json.dump

# 1、Python的dict类型转JSON
person_dict = {'name': 'pig', 'age': 18, 'sex': 'man', 'hometown': '江西抚州'}
# indent参数为缩进空格数
person_dict_json = json.dumps(person_dict, indent=4)
print(person_dict_json, '\n')
# 2、Python的列表类型转JSON
person_list = ['pig', 18, 'man', '江西抚州']
person_list_json = json.dumps(person_list)
print(person_list_json, '\n')
# 3、Python的对象类型转JSON
person_obj = Person('pig', 18, 'man', '江西抚州')
# 中间的匿名函数是获得对象所有属性的字典形式
person_obj_json = json.dumps(person_obj, default=lambda obj: obj.__dict__, indent=4)
print(person_obj_json, '\n')

执行结果：

JSON转Python类型：json.loads

# 4、JSON转Python的dict类型
person_json = '{ "name": "pig","age": 18, "sex": "man", "hometown": "江西抚州"}'
person_json_dict = json.loads(person_json)
print(type(person_json_dict), '\n')
# 5、JSON转Python的列表类型
person_json2 = '["pig", 18, "man", "江西抚州"]'
person_json_list = json.loads(person_json2)
print(type(person_json_list), '\n')
# 6、JSON转Python的自定义对象类型
person_json = '{ "name": "pig","age": 18, "sex": "man", "hometown": "江西抚州"}'
# object_hook参数是将dict对象转成自定义对象
person_json_obj = json.loads(person_json, object_hook=lambda d: Person(d['name'], d['age'], d['sex'], d['hometown']))
print(type(person_json_obj), '\n')

执行结果如下：

对应的数据类型

上面我们演示了Python类型与JSON的相互转换，最开始的时候我们讲过JSON有6种数据类型，那这6种数据类型分别对应Python中的哪些数据类型呢？

需要注意的点

JSON的键名和字符串都必须使用双引号引起来，而Python中单引号也可以表示为字符串，所以这是个比较容易犯的错误！

Python类型与JSON相互转换的时候到底是用load/dump还是用loads\dumps？

他们之间有什么区别？
什么时候该加s什么时候不该加s？

这个我们可以通过查看源码找到答案：

不加s的方法入参多了一个fp表示filepath，最后多了一个写入文件的操作。

所以我们在记忆的时候可以这样记忆：

加s表示转成字符串(str)，不加s表示转成文件。

Python自定义对象与JSON相互转换的时候需要辅助方法来指明属性与键名的对应关系，如果不指定一个方法则会抛出异常！

相信有些看的仔细的同学会好奇上面使用json.dumps方法将Python类型转JSON的时候，如果出现中文，则会出现：

\u6c5f\u897f\u629a\u5dde

这种东西，这是为什么呢？

原因是：Python 3中的json在做dumps操作时，会将中文转换成unicode编码，并以16进制方式存储，而并不是UTF-8格式！

总结

今天我们学习了JSON的2种形式，切记JSON还有[...]这种形式的。

学习了JSON的6种数据类型他们分别对于Python中的哪些类型。

了解了JSON的一些使用场景以及实际的例子。

还学习了在Python中如何使用JSON以及需要注意的事项。

一个JSON知识点却分两篇长文（近万字）来讲，其重要性不言而喻。因为不管你是做爬虫、还是做数据分析、web、甚至前端、测试、运维，JSON都是你必须要掌握的一个知识点

本文为作者投稿，版权归作者个人所有。

设我们有一个复杂的对象，我们希望将其转换为字符串，以通过网络发送，或者只是为了在日志中输出它。

当然，这样的字符串应该包含所有重要的属性。

我们可以像这样实现转换：

let user = {
  name: "John",
  age: 30,

  toString() {
    return `{name: "${this.name}", age: ${this.age}}`;
  }
};

alert(user); // {name: "John", age: 30}

……但在开发过程中，会新增一些属性，旧的属性会被重命名和删除。每次更新这种 toString 都会非常痛苦。我们可以尝试遍历其中的属性，但是如果对象很复杂，并且在属性中嵌套了对象呢？我们也需要对它们进行转换。

幸运的是，不需要编写代码来处理所有这些问题。这项任务已经解决了。

JSON.stringify

JSON（JavaScript Object Notation）是表示值和对象的通用格式。在 RFC 4627 标准中有对其的描述。最初它是为 JavaScript 而创建的，但许多其他编程语言也有用于处理它的库。因此，当客户端使用 JavaScript 而服务器端是使用 Ruby/PHP/Java 等语言编写的时，使用 JSON 可以很容易地进行数据交换。

JavaScript 提供了如下方法：

JSON.stringify 将对象转换为 JSON。
JSON.parse 将 JSON 转换回对象。

例如，在这里我们 JSON.stringify 一个 student 对象：

let student = {
  name: 'John',
  age: 30,
  isAdmin: false,
  courses: ['html', 'css', 'js'],
  wife: null
};

let json = JSON.stringify(student);

alert(typeof json); // we've got a string!

alert(json);
/* JSON 编码的对象：
{
  "name": "John",
  "age": 30,
  "isAdmin": false,
  "courses": ["html", "css", "js"],
  "wife": null
}
*/

方法 JSON.stringify(student) 接收对象并将其转换为字符串。

得到的 json 字符串是一个被称为 JSON 编码（JSON-encoded） 或 序列化（serialized） 或 字符串化（stringified） 或 编组化（marshalled） 的对象。我们现在已经准备好通过有线发送它或将其放入普通数据存储。

请注意，JSON 编码的对象与对象字面量有几个重要的区别：

字符串使用双引号。JSON 中没有单引号或反引号。所以 'John' 被转换为 "John"。
对象属性名称也是双引号的。这是强制性的。所以 age:30 被转换成 "age":30。

JSON.stringify 也可以应用于原始（primitive）数据类型。

JSON 支持以下数据类型：

Objects { ... }
Arrays [ ... ]
Primitives：strings，numbers，boolean values true/false，null。

例如：

// 数字在 JSON 还是数字
alert( JSON.stringify(1) ) // 1

// 字符串在 JSON 中还是字符串，只是被双引号扩起来
alert( JSON.stringify('test') ) // "test"

alert( JSON.stringify(true) ); // true

alert( JSON.stringify([1, 2, 3]) ); // [1,2,3]

JSON 是语言无关的纯数据规范，因此一些特定于 JavaScript 的对象属性会被 JSON.stringify 跳过。

即：

函数属性（方法）。
Symbol 类型的属性。
存储 undefined 的属性。

let user = {
  sayHi() { // 被忽略
    alert("Hello");
  },
  [Symbol("id")]: 123, // 被忽略
  something: undefined // 被忽略
};

alert( JSON.stringify(user) ); // {}（空对象）

通常这很好。如果这不是我们想要的方式，那么我们很快就会看到如何自定义转换方式。

最棒的是支持嵌套对象转换，并且可以自动对其进行转换。

例如：

let meetup = {
  title: "Conference",
  room: {
    number: 23,
    participants: ["john", "ann"]
  }
};

alert( JSON.stringify(meetup) );
/* 整个解构都被字符串化了
{
  "title":"Conference",
  "room":{"number":23,"participants":["john","ann"]},
}
*/

重要的限制：不得有循环引用。

例如：

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  participants: ["john", "ann"]
};

meetup.place = room;       // meetup 引用了 room
room.occupiedBy = meetup; // room 引用了 meetup

JSON.stringify(meetup); // Error: Converting circular structure to JSON

在这里，转换失败了，因为循环引用：room.occupiedBy 引用了 meetup，meetup.place 引用了 room：

排除和转换：replacer

JSON.stringify 的完整语法是：

let json = JSON.stringify(value[, replacer, space])

value要编码的值。replacer要编码的属性数组或映射函数 function(key, value)。space用于格式化的空格数量

大部分情况，JSON.stringify 仅与第一个参数一起使用。但是，如果我们需要微调替换过程，比如过滤掉循环引用，我们可以使用 JSON.stringify 的第二个参数。

如果我们传递一个属性数组给它，那么只有这些属性会被编码。

例如：

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  participants: [{name: "John"}, {name: "Alice"}],
  place: room // meetup 引用了 room
};

room.occupiedBy = meetup; // room 引用了 meetup

alert( JSON.stringify(meetup, ['title', 'participants']) );
// {"title":"Conference","participants":[{},{}]}

这里我们可能过于严格了。属性列表应用于了整个对象结构。所以 participants 是空的，因为 name 不在列表中。

让我们包含除了会导致循环引用的 room.occupiedBy 之外的所有属性：

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  participants: [{name: "John"}, {name: "Alice"}],
  place: room // meetup 引用了 room
};

room.occupiedBy = meetup; // room 引用了 meetup

alert( JSON.stringify(meetup, ['title', 'participants', 'place', 'name', 'number']) );
/*
{
  "title":"Conference",
  "participants":[{"name":"John"},{"name":"Alice"}],
  "place":{"number":23}
}
*/

现在，除 occupiedBy 以外的所有内容都被序列化了。但是属性的列表太长了。

幸运的是，我们可以使用一个函数代替数组作为 replacer。

该函数会为每个 (key,value) 对调用并返回“已替换”的值，该值将替换原有的值。如果值被跳过了，则为 undefined。

在我们的例子中，我们可以为 occupiedBy 以外的所有内容按原样返回 value。为了 occupiedBy，下面的代码返回 undefined：

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  participants: [{name: "John"}, {name: "Alice"}],
  place: room // meetup 引用了 room
};

room.occupiedBy = meetup; // room 引用了 meetup

alert( JSON.stringify(meetup, function replacer(key, value) {
  alert(`${key}: ${value}`);
  return (key == 'occupiedBy') ? undefined : value;
}));

/* key:value pairs that come to replacer:
:             [object Object]
title:        Conference
participants: [object Object],[object Object]
0:            [object Object]
name:         John
1:            [object Object]
name:         Alice
place:        [object Object]
number:       23
*/

请注意 replacer 函数会获取每个键/值对，包括嵌套对象和数组项。它被递归地应用。replacer 中的 this 的值是包含当前属性的对象。

第一个调用很特别。它是使用特殊的“包装对象”制作的：{"": meetup}。换句话说，第一个 (key, value) 对的键是空的，并且该值是整个目标对象。这就是上面的示例中第一行是 ":[object Object]" 的原因。

这个理念是为了给 replacer 提供尽可能多的功能：如果有必要，它有机会分析并替换/跳过整个对象。

格式化：space

JSON.stringify(value, replacer, spaces) 的第三个参数是用于优化格式的空格数量。

以前，所有字符串化的对象都没有缩进和额外的空格。如果我们想通过网络发送一个对象，那就没什么问题。space 参数专门用于调整出更美观的输出。

这里的 space = 2 告诉 JavaScript 在多行中显示嵌套的对象，对象内部缩紧 2 个空格：

let user = {
  name: "John",
  age: 25,
  roles: {
    isAdmin: false,
    isEditor: true
  }
};

alert(JSON.stringify(user, null, 2));
/* 两个空格的缩进：
{
  "name": "John",
  "age": 25,
  "roles": {
    "isAdmin": false,
    "isEditor": true
  }
}
*/

/* 对于 JSON.stringify(user, null, 4) 的结果会有更多缩进：
{
    "name": "John",
    "age": 25,
    "roles": {
        "isAdmin": false,
        "isEditor": true
    }
}
*/

spaces 参数仅用于日志记录和美化输出。

自定义 “toJSON”

像 toString 进行字符串转换，对象也可以提供 toJSON 方法来进行 JSON 转换。如果可用，JSON.stringify 会自动调用它。

例如：

let room = {
  number: 23
};

let meetup = {
  title: "Conference",
  date: new Date(Date.UTC(2017, 0, 1)),
  room
};

alert( JSON.stringify(meetup) );
/*
  {
    "title":"Conference",
    "date":"2017-01-01T00:00:00.000Z",  // (1)
    "room": {"number":23}               // (2)
  }
*/

在这儿我们可以看到 date (1) 变成了一个字符串。这是因为所有日期都有一个内置的 toJSON 方法来返回这种类型的字符串。

现在让我们为对象 room 添加一个自定义的 toJSON：

let room = {
  number: 23,
  toJSON() {
    return this.number;
  }
};

let meetup = {
  title: "Conference",
  room
};

alert( JSON.stringify(room) ); // 23

alert( JSON.stringify(meetup) );
/*
  {
    "title":"Conference",
    "room": 23
  }
*/

正如我们所看到的，toJSON 既可以用于直接调用 JSON.stringify(room) 也可以用于当 room 嵌套在另一个编码对象中时。

JSON.parse

要解码 JSON 字符串，我们需要另一个方法 JSON.parse。

语法：

let value = JSON.parse(str, [reviver]);

str要解析的 JSON 字符串。reviver可选的函数 function(key,value)，该函数将为每个 (key, value) 对调用，并可以对值进行转换。

例如：

// 字符串化数组
let numbers = "[0, 1, 2, 3]";

numbers = JSON.parse(numbers);

alert( numbers[1] ); // 1

对于嵌套对象：

let userData = '{ "name": "John", "age": 35, "isAdmin": false, "friends": [0,1,2,3] }';

let user = JSON.parse(userData);

alert( user.friends[1] ); // 1

JSON 可能会非常复杂，对象和数组可以包含其他对象和数组。但是它们必须遵循相同的 JSON 格式。

以下是手写 JSON 时的典型错误（有时我们必须出于调试目的编写它）：

let json = `{
  name: "John",                     // 错误：属性名没有双引号
  "surname": 'Smith',               // 错误：值使用的是单引号（必须使用双引号）
  'isAdmin': false                  // 错误：键使用的是单引号（必须使用双引号）
  "birthday": new Date(2000, 2, 3), // 错误：不允许使用 "new"，只能是裸值
  "friends": [0,1,2,3]              // 这个没问题
}`;

此外，JSON 不支持注释。向 JSON 添加注释无效。

还有另一种名为 JSON5 的格式，它允许未加引号的键，也允许注释等。但这是一个独立的库，不在语言的规范中。

常规的 JSON 格式严格，并不是因为它的开发者很懒，而是为了实现简单，可靠且快速地实现解析算法。

使用 reviver

想象一下，我们从服务器上获得了一个字符串化的 meetup 对象。

它看起来像这样：

// title: (meetup title), date: (meetup date)
let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';

……现在我们需要对它进行 反序列（deserialize），把它转换回 JavaScript 对象。

让我们通过调用 JSON.parse 来完成：

let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';

let meetup = JSON.parse(str);

alert( meetup.date.getDate() ); // Error!

啊！报错了！

meetup.date 的值是一个字符串，而不是 Date 对象。JSON.parse 怎么知道应该将字符串转换为 Date 呢？

让我们将 reviver 函数传递给 JSON.parse 作为第二个参数，该函数按照“原样”返回所有值，但是 date 会变成 Date：

let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';

let meetup = JSON.parse(str, function(key, value) {
  if (key == 'date') return new Date(value);
  return value;
});

alert( meetup.date.getDate() ); // 现在正常运行了！

顺便说一下，这也适用于嵌套对象：

let schedule = `{
  "meetups": [
    {"title":"Conference","date":"2017-11-30T12:00:00.000Z"},
    {"title":"Birthday","date":"2017-04-18T12:00:00.000Z"}
  ]
}`;

schedule = JSON.parse(schedule, function(key, value) {
  if (key == 'date') return new Date(value);
  return value;
});

alert( schedule.meetups[1].date.getDate() ); // 正常运行了！

总结

JSON 是一种数据格式，具有自己的独立标准和大多数编程语言的库。
JSON 支持 object，array，string，number，boolean 和 null。
JavaScript 提供序列化（serialize）成 JSON 的方法 JSON.stringify 和解析 JSON 的方法 JSON.parse。
这两种方法都支持用于智能读/写的转换函数。
如果一个对象具有 toJSON，那么它会被 JSON.stringify 调用。

午办公室暖气很热，大家的工作状态都不是特别好，感觉每个人都像树懒一样或缓慢移动鼠标、或懒懒的打着瞌睡。小白也不在状态呆呆的盯着电脑，不知道该做些什么。经过一阵阵朦胧的困感之后，小白还是起身找到了老朱。

“朱哥，下午实在没状态，有没有简单点的知识，给我说一个呗！”

老朱也不在状态，布局方面的实在是不想说，思考了半天说道：“要不说一下JSON数据吧，这个简单，你只要了解了JSON数据接下来就可以说前端和后台通信的事了。”

“好啊！”，小白一听终于能做通信方面的事情后，脑袋一下清醒了不少。

老朱说：“JSON数据可以看作是对象的字符串形式。”

“既然有了对象Object还要JSON干嘛呢？”，小白问道。

“通过JSON串我们可以很方便的进行数据通信，比如通过ajax去加载一个页面，被加载的页面如果没有html标签只有JSON格式的字符串，我们就可以把JSON串转换为JavaScript对象轻松进行数据处理了。”

“听得有点晕！”

“你可以想象一下，你的个人信息都在数据库存着，有一个php页面可以把你的信息从数据取出来，现在让你通过js获取用户信息，你怎么办？”

“是不是通过JS加载获取用户信息的那个php页面？”

老朱说道：“没错，那你是希望php页面给你输出一个含有用户信息、html标签和CSS的，还是返回你的昵称、电话、头像信息你再在前端通过JS进行处理？”

“肯定是后者啊，这样我就能把用户信息放到页面任意想放的位置了。还有一个好处，只有用户的信息的数据字符串长度非常小，也有利于访问速度。”

“恩，理解的不错！就是这个意思。实际开发的时候JSON串不会像我们现在定义的JSON串那样简单，如果我们要获取一个文章列表页的JSON串，它里面可能会包含栏目的id、栏目标题、文章列表（可能会是一个数组，也可能是一个列表对象）、每页显示条数、文章总数、用户信息（一个对象，它里面又包含用户的昵称、电话、头像等）。”

“一般从外部加载的JSON串JavaScript会自动把JSON串转换为Object对象，如果是自定义的JSON字符串我们需要使用JSON.parse(JSON串)进行兑现转换。现在我们把刚刚定义的jstr串转换为对象控制台输出看一下。”

“最近一两天我们尝试做一次外部数据加载，看看你能不能理解，如果能理解我们就可以从一个小项目开始练习了。”

小白高兴的说道：“好啊！太期待了！”

最后给大家推荐一个前端内部学习群：675498134，进群找管理免费领取学习资料和视频。每天还是技术大牛直播分享前端项目开发经验。大佬小白都欢迎，大家一起学习共同进步！

在线咨询

上一篇：使用HTML添加表格3（间距与颜色）-零基础自学网页制作
下一篇：网页前端设计-16边框样式

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商