JavaScript JSON 数据交换格式详解与序列化反序列化

作者：拾光时间：2026-10-22 05:15:16浏览：171

本文详细介绍 JSON 数据交换格式的起源、数据类型及规范，重点讲解 JavaScript 中 JSON.stringify 和 JSON.parse 的使用方法。通过示例演示如何序列化对象、自定义属性筛选与转换，以及如何反序列化 JSON 字符串并处理数据，帮助开发者掌握前后端数据交互的核心技术。

JSON 概述与数据类型

JSON 全称为 JavaScript Object Notation，是一种轻量级的数据交换格式。

在 JSON 诞生之前，网络数据交换主要依赖 XML。XML 作为纯文本格式，适合网络传输，但其规范体系庞大，涉及 DTD、XSD、XPath、XSLT 等复杂标准，导致开发人员学习成本极高，往往难以在短时间内掌握。

2002 年，道格拉斯·克罗克福特（Douglas Crockford）为简化软件开发中的数据交互难题，设计了 JSON 这一超轻量级数据交换格式。

道格拉斯·克罗克福特曾任雅虎高级架构师，对 JavaScript 情有独钟。JSON 实际上是 JavaScript 语言的一个子集，仅包含以下几种数据类型：

number：与 JavaScript 的number类型完全一致；
boolean：对应 JavaScript 的true或false；
string：对应 JavaScript 的string类型；
null：对应 JavaScript 的null值；
array：对应 JavaScript 中Array类型的表示方式，即使用[]；
object：对应 JavaScript 中使用{ ... }的表示方式。

上述类型可以任意组合，形成复杂的数据结构。

此外，JSON 强制规定字符集必须为 UTF-8，从而支持多语言环境。为了确保解析的一致性，JSON 规定字符串必须使用双引号""，且 Object 的键名也必须使用双引号""。

由于 JSON 语法简洁，它迅速在 Web 领域普及，并成为 ECMA 标准。目前几乎所有编程语言都提供了 JSON 解析库，而在 JavaScript 中，由于语言内置了 JSON 支持，开发者可以直接使用。

将任意 JavaScript 对象转换为 JSON，即是将该对象序列化为 JSON 格式的字符串，以便通过网络传输给其他计算机。

当接收到 JSON 格式的字符串时，只需将其反序列化为 JavaScript 对象，即可在代码中直接使用该对象。

JSON 序列化详解

序列化过程

首先，我们将小明这个对象序列化为 JSON 格式的字符串：


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

JSON.stringify(xiaoming); // '{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}'

若希望输出结果更具可读性，可以传入参数以控制缩进格式：


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

输出结果如下：


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

第二个参数可用于控制筛选对象的键值。如果只需输出指定属性，可以传入一个数组：


JSON.stringify(xiaoming, ['name', 'skills'], ' ');

输出结果如下：


{
 "name": "小明",
 "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.parse('{"name":"小明","age":14}', function (key, value) {
  // 把number * 2:
  if (key === 'name') {
    return value + '同学';
  }
  return value;
}); // Object {name: '小明同学', age: 14}

在 JavaScript 中使用 JSON 非常简单，只需掌握上述序列化与反序列化的基本操作即可。

作者最新文章

JS处理含Emoji或中文的字符串转数组乱码问题

2026-11-05 16:12:28

JS怎么使用展开运算符合并对象

2026-11-05 14:42:18

ES6+环境下判断JS对象为空的简洁写法

2026-11-05 12:12:23

怎么通过replacer函数自定义JS中JSON的格式化输出

2026-11-05 11:19:44

JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符

2026-11-05 11:16:58