详解JSON.stringify()的5个秘密特性

详解JSON.stringify()的5个秘密特性

JSON.stringify() 是将一个 JavaScript 对象或值转换为 JSON 字符串的方法。但是,如果您不了解 JSON.stringify() 的所有“秘密特性”,则无法在实际开发中充分利用它的性能和灵活性。以下是5个最重要的“秘密特性”。

1. JSON.stringify() 可以通过选项参数输出特定的 JSON 字符串格式

在使用 JSON.stringify() 转换对象时,您可以传递一个选项参数(可以是一个对象)。这使您可以修改组合生成的 JSON 字符串的行为。例如,您可以使用选项参数缩进并统一生成的 JSON 字符串中属性/值对的执行方式。以下是一个示例:

const person = {
  name: "Alice",
  age: 30,
  interests: ["coding", "reading"],
  address: {
    city: "Shanghai",
    country: "China"
  }
};

const jsonStr = JSON.stringify(person, null, 2); 
console.log(jsonStr);

这段代码会将 person 对象转换成 JSON 格式,其中第二个参数 null 指定了过滤器函数(这个示例不使用过滤器)。第三个参数 2 指示输出应该使用两个空格的缩进格式,输出的结果如下:

{
  "name": "Alice",
  "age": 30,
  "interests": [
    "coding",
    "reading"
  ],
  "address": {
    "city": "Shanghai",
    "country": "China"
  }
}

2. JSON.stringify() 可以处理“循环引用”的情况

如果您尝试将有循环引用的对象(例如,一个对象引用了一个对象,而前面的对象又引用了后者)编码为 JSON 字符串,您会遇到错误。但是,如果您使用 JSON.stringify(),将对象作为“引用”进行编码,可以避免这个问题,并确保循环引用得到正确处理。以下是一个示例:

const person = {
  name: "Alice",
  friends: []
};

person.friends.push(person);

const jsonStr = JSON.stringify(person); 
console.log(jsonStr);

这段代码会输出以下 JSON 字符串:

{
  "name": "Alice",
  "friends": [
    "[Circular ~]"
  ]
}

注意,这里的 [Circular ~] 表示对该对象的引用。

3. JSON.stringify() 可以替换对象属性的值

您可以提供一个转换函数,该函数将处理对象期望序列化的属性值(例如,剥离一个影响性能的日期对象)。以下是一个示例:

const person = {
  name: "Alice",
  age: 30,
  dateOfBirth: new Date("1993/01/01")
};

const jsonStr = JSON.stringify(person, function replacer(key, value) {
  if (key === "dateOfBirth") {
    return value.getFullYear();
  }
  return value;
}, 2); 
console.log(jsonStr);

这段代码会将 person 对象转换成 JSON 格式,受到转换函数的影响,dateOfBirth 属性的值被替换为出生日期的年份。输出的结果如下:

{
  "name": "Alice",
  "age": 30,
  "dateOfBirth": 1993
}

4. JSON.stringify() 可以序列化函数

JSON.stringify() 没有办法序列化函数。但是,您可以增加一个选项参数,获得函数源代码的序列化字符串。以下是一个示例:

const func = function sayHello() { console.log("Hello, world!"); }
const jsonStr = JSON.stringify(func, function(key, value) {
  if (typeof value === 'function') {
    return value.toString();
  }
  return value;
}, 2);

console.log(jsonStr);

这段代码将输出以下 JSON 字符串:

"function sayHello() { console.log(\"Hello, world!\"); }"

5. JSON.stringify() 可以重写原型的 toJSON 方法

您可以轻松地改写对象原型的 toJSON 方法,以自定义在使用 JSON.stringify() 序列化该对象时的行为。以下是一个示例:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  toJSON() {
    return {
      name: this.name.toUpperCase(),
      age: this.age
    };
  }
}

const alice = new Person("Alice", 30);
const jsonStr = JSON.stringify(alice, null, 2); 
console.log(jsonStr);

这段代码会将带有 toJSON()Person 类型的对象转换成 JSON 格式。受到 toJSON() 的影响,输出的结果如下:

{
  "name": "ALICE",
  "age": 30
}

总结

JSON.stringify() 不仅能简单地将 JavaScript 对象转化为 JSON 格式字符串,还具有灵活性强,表现力丰富的特性,它可以方便地实现对象的自定义序列化,处理循环引用、json格式控制和函数序列化等问题。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解JSON.stringify()的5个秘密特性 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • JS实现躲避粒子小游戏

    JS实现躲避粒子小游戏的完整攻略可以分为以下几个步骤: 设计游戏画面和规则首先,需要设计出游戏的画面和规则。例如,游戏中应该有一个主角(比如小球),还应该有多个敌人(比如其他小球),主角需要躲避敌人并尽可能多地存活下来。游戏可以通过计算主角与敌人的距离来判断是否碰撞,同时也可以设置主角的生命值,当生命值为0时游戏结束。 编写HTML和CSS其次,需要按照游戏…

    JavaScript 2023年6月10日
    00
  • JavaScript window.location对象

    JavaScript中的window.location对象用于获取或设置浏览器当前打开页面的URL地址信息,它包含了当前页面的所有信息,如:协议、主机名、路径、查询字符串等等。接下来我们将详细讲述该对象的使用。 获取当前页面信息 我们可以使用window.location对象来获取当前页面的相关信息,如下所示: // 获取当前页面的协议,如:http、htt…

    JavaScript 2023年5月27日
    00
  • JavaScript 正则表达式详解

    JavaScript 正则表达式详解 什么是正则表达式 正则表达式(Regular Expression)是一种用来描述、匹配一系列符合某个规律的字符串的表达式。在许多编程语言中,如JavaScript、Python、Java等,都支持正则表达式。 在JavaScript中,我们可以使用RegExp对象来创建正则表达式,并通过match、test等方法进行匹…

    JavaScript 2023年5月19日
    00
  • js中格式化日期时间型数据函数代码

    要在JavaScript中格式化日期时间型数据,可以使用Date对象自带的方法,也可以使用第三方库如Moment.js。下面将分别介绍这两种方法的使用。 使用Date对象自带的方法 使用Date对象自带的方法可以方便地获取当前的日期时间或指定日期时间的格式化值。以下是一些常用的Date对象方法及其返回值: Date.getFullYear() 获取指定日期的…

    JavaScript 2023年5月27日
    00
  • JS简单判断字符在另一个字符串中出现次数的2种常用方法

    让我来介绍一下JS简单判断字符串在另一个字符串中出现次数的2种常用方法。下面将结合代码给出具体的示例: 1. 方法一:for循环遍历字符串 // 定义待匹配字符和被匹配字符 const targetStr = "hello"; const sourceStr = "hello world, hello everyone&quot…

    JavaScript 2023年5月28日
    00
  • javascript表单事件处理方法详解

    JavaScript表单事件处理方法详解 什么是表单事件 表单事件是指当用户与表单元素交互时,浏览器会触发一些事件以响应用户的行为。表单事件可以是用户输入、用户点击、用户提交表单等等。 常见的表单事件 以下是一些常见的表单事件: focus:当元素获得焦点时 blur:当元素失去焦点时 change:当元素值发生改变时 keydown、keyup:按下或松开…

    JavaScript 2023年6月10日
    00
  • 详细教你微信公众号正文页SVG交互开发技巧

    详细教你微信公众号正文页SVG交互开发技巧 介绍 在微信公众号开发中,SVG(Scalable Vector Graphics)是很方便的一种图形格式,可以实现图片的高清缩放以及交互式效果。本文将介绍如何利用SVG开发微信公众号正文页的交互功能。 使用技巧 1. SVG基础知识 SVG是一种使用XML描述2D图形的语言,它定义了诸如图形、文本、滤镜和动画等可…

    JavaScript 2023年6月10日
    00
  • javascript实现图片左右滚动效果【可自动滚动,有左右按钮】

    下面是详细讲解“javascript实现图片左右滚动效果【可自动滚动,有左右按钮】”的完整攻略: 1. 确定HTML结构 首先需要确定HTML结构,一般来说,我们可以使用 ul 和 li 标签来实现一个图片轮播图。如下所示: <div class="container"> <ul class="img-list…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部