Maison > interface Web > js tutoriel > Vous amène à comprendre JSON.stringify et à voir comment l'utiliser

Vous amène à comprendre JSON.stringify et à voir comment l'utiliser

青灯夜游
Libérer: 2022-03-10 19:37:25
avant
2344 Les gens l'ont consulté

Savez-vous vraiment comment utiliser la puissante méthode JSON.stringify ? L'article suivant vous donnera une compréhension détaillée de JSON.stringify et vous présentera comment l'utiliser. J'espère qu'il vous sera utile !

Vous amène à comprendre JSON.stringify et à voir comment l'utiliser

JSON.stringify En tant que méthode souvent utilisée dans le développement quotidien, pouvez-vous vraiment l'utiliser de manière flexible ? JSON.stringify 作为日常开发中经常使用的方法,你真的能灵活运用它吗?

学习本文之前,小包想让大家带着几个问题,一起来深入学习 stringify 。【相关推荐:javascript视频教程

  • stringify 函数有几个参数,每个参数分别有啥用啊?
  • stringify 序列化准则有哪些啊?
    • 函数序列化中会如何处理?
    • null、undefined、NaN 等特殊的值又会如何处理?
    • ES6 后增加的 Symbol 类型、BigInt 序列化过程中会有特别处理吗?
  • stringify 为什么不适合做深拷贝?
  • 你能想到那些 stringify 的妙用?

整个文章的脉络跟下面思维导图一致,大家可以先留一下印象。

Vous amène à comprendre JSON.stringify et à voir comment lutiliser

三参数

在日常编程中,我们经常 JSON.stringify 方法将某个对象转换成 JSON 字符串形式。

const stu = {
    name: 'zcxiaobao',
    age: 18
}

// {"name":"zcxiaobao","age":18}
console.log(JSON.stringify(stu));
Copier après la connexion

stringify 真的就这么简单吗?我们先来看一下 MDN 中对 stringify 的定义。

MDN 中指出: JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串,如果指定了一个 replacer 函数,则可以选择性地替换值,或者指定的 replacer 是数组,则可选择性地仅包含数组指定的属性。

看完定义,小包就一惊,stringfy 不止一个参数吗?当然了,stringify 有三个参数。

咱们来看一下 stringify 语法和参数介绍:

JSON.stringify(value[, replacer [, space]])
Copier après la connexion
  • value: 将要序列后成 JSON 字符串的值。
  • replacer(可选)
    • 如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理;

    • 如果该参数是一个数组,则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中

    • 如果该参数为 null 或者未提供,则对象所有的属性都会被序列化。

  • space(可选): 指定缩进用的空白字符串,用于美化输出
    • 如果参数是个数字,它代表有多少的空格。上限为10。

    • 该值若小于1,则意味着没有空格

    • 如果该参数为字符串(当字符串长度超过10个字母,取其前10个字母),该字符串将被作为空格

    • 如果该参数没有提供(或者为 null),将没有空格

replacer

我们来尝试一下 replacer 的使用。

  • replacer 作为函数

replacer 作为函数,它有两个参数,键(key) 和 值(value),并且两个参数都会被序列化。

在开始时,replacer 函数会被传入一个空字符串作为 key 值,代表着要被 stringify 的这个对象。理解这点很重要,replacer 函数并非是上来就把对象解析成键值对形式,而是先传入了待序列化对象。随后每个对象或数组上的属性会被依次传入。 如果函数返回值为undefined或者函数时,该属性值会被过滤掉,其余按照返回规则。

// repalcer 接受两个参数 key value
// key value 分别为对象的每个键值对
// 因此我们可以根据键或者值的类型进行简单筛选
function replacer(key, value) {
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}
// function 可自己测试
function replacerFunc(key, value) {
  if (typeof value === "string") {
    return () => {};
  }
  return value;
}
const foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
const jsonString = JSON.stringify(foo, replacer);
Copier après la connexion

JSON 序列化结果为 {"week":45,"month":7}

但如果序列化的是数组,若 replacer 函数返回 undefined 或者函数,当前值不会被忽略,而将会被 null 取代。

const list = [1, '22', 3]
const jsonString = JSON.stringify(list, replacer)
Copier après la connexion

JSON 序列化的结果为 '[1,null,3]'

  • replacer

    Avant d'étudier cet article, Xiaobao aimerait que tout le monde réponde à quelques questions et en apprend davantage sur stringify. [Recommandations associées : tutoriel vidéo javascript]
  • < ul>
  • La fonction stringify a plusieurs paramètres. A quoi sert chaque paramètre ?
  • stringify Quelles sont les directives de sérialisation ?
  • source:juejin.cn
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal