带你读《现代Javascript高级教程》十八、深入理解JSON.stringify(1)

简介: 带你读《现代Javascript高级教程》十八、深入理解JSON.stringify(1)

十八、深入理解JSON.stringify

引言

在 JavaScript 中,JSON.stringify() 是一个内置函数,用于将 JavaScript 对象转换为 JSON 字符串。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,广泛用于前后端数据传输和存储。本文将详细介绍 JSON.stringify() 的属性、应用场景,并提供一个完整而优雅的实现,处理循环引用、特殊类型(如日期和正则表达式)以及性能相关的问题。同时,我们还将讨论注意事项和相关引用资料。

1. JSON.stringify() 属性

JSON.stringify() 函数具有以下属性:

replacer

replacer 是一个可选的参数,它可以是一个函数或一个数组。它用于指定需要序列化的对象的属性。当 replacer 是一个函数时,它将被应用于对象的每个属性,可以用来过滤、替换或转换属性的值。当 replacer 是一个数组时,只有数组中包含的属性才会被序列化。

 

示例:

const obj = {
  name: 'John',
  age: 25,
  address: {
    city: 'New York',
    country: 'USA'
  }};
const jsonString = JSON.stringify(obj, ['name', 'age']);
console.log(jsonString);// 输出: {"name":"John","age":25}

space

space 是一个可选的参数,用于控制生成的 JSON 字符串的缩进和格式化。它可以是一个数字表示缩进的空格数,或者是一个字符串表示缩进的字符串。如果 space 是一个非负整数,则每一级缩进使用指定数量的空格;如果 space 是一个字符串,则使用该字符串作为缩进符号。

 

示例:

 

const obj = { name: 'John', age: 25 };
const jsonString = JSON.stringify(obj, null, 2);
console.log(jsonString);// 输出:// {//   "name": "John",//   "age": 25// }

toJSON

 

如果要序列化的对象具有 toJSON() 方法,那么该方法将被调用,以便返回可序列化的值。toJSON() 方法可以在对象中定义,用于自定义对象在序列化过程中的行为。

 

示例:

 

const obj = {
  name: 'John',
  age: 25,
  toJSON: function() {
    return {
      fullName: this.name,
      yearsOld: this.age
    };
  }};
const jsonString = JSON.stringify(obj);
console.log(jsonString);// 输出: {"fullName":"John","yearsOld":25}

2. 应用场景

JSON.stringify() 在以下场景中非常有用:

数据传输

当需要将 JavaScript 对象转换为字符串,以便在网络中传输给后端或其他系统时,可以使用 JSON.stringify() 进行序列化。

 

const obj = { name: 'John', age: 25 };
const jsonString = JSON.stringify(obj);
console.log(jsonString);// 输出: {"name":"John","age":25}

数据存储

如果需要将 JavaScript 对象保存到本地存储(如浏览器的 LocalStorage 或数据库),可以使用 JSON.stringify() 将对象转换为 JSON 字符串后进行存储。

 

const obj = { name: 'John', age: 25 };
const jsonString = JSON.stringify(obj);
localStorage.setItem('user', jsonString);


带你读《现代Javascript高级教程》十八、深入理解JSON.stringify(2)https://developer.aliyun.com/article/1349574?groupCode=tech_library

相关文章
|
26天前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
26 2
2024年5月node.js安装(winmac系统)保姆级教程
|
4月前
|
JSON JavaScript 前端开发
JavaScript实现字符串转json对象的方法
JavaScript实现字符串转json对象的方法
|
2月前
|
存储 JSON JavaScript
JavaScript JSON
【10月更文挑战第7天】JSON 是 JavaScript 中非常重要的一个数据格式,它为数据的表示和传输提供了一种简单而有效的方式。掌握 JSON 的使用方法和特点,对于开发高质量的 JavaScript 应用具有重要意义。
|
5月前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
216 0
|
3月前
|
存储 JSON JavaScript
js中JSON的使用
介绍JSON的基本概念和在JavaScript中的使用方式,包括JSON格式的语法规则、使用`JSON.stringify()`和`JSON.parse()`方法进行对象与字符串的转换,以及处理JSON数组数据。
js中JSON的使用
|
2月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
42 4
|
2月前
|
JSON JavaScript 前端开发
js如何格式化一个JSON对象?
js如何格式化一个JSON对象?
102 3
|
3月前
|
XML JSON JavaScript
js的json格式
js的json格式
|
3月前
|
存储 JSON JavaScript
JavaScript JSON
JavaScript JSON
37 5
|
2月前
|
JavaScript 前端开发 Java
Node.js 教程
10月更文挑战第1天
49 0