Introduction à l'utilisation de JSON.stringify()

Joueurs expérimentés, savez-vous que JSON.stringify possède également les deuxième et troisième paramètres optionnels ? Quels sont-ils? N'est-ce pas incroyable ? L'article suivant vous présentera des informations connexes sur JSON.stringify que vous ne connaissez peut-être pas. L'article le présente en détail via un exemple de code. Les amis qui en ont besoin peuvent s'y référer.

Avant-propos

JSON a progressivement remplacé XML et est largement utilisé par les développeurs du monde entier. Cet article explique en profondeur certains détails de l'utilisation de JSON.stringify en JavaScript. Tout d'abord, un bref aperçu de JSON et de JavaScript :

• Tous les JSON légaux ne sont pas des JavaScript valides

• JSON n'est qu'un format texte ; 🎜>

• Les nombres en JSON sont décimaux.

1.JSON.stringify

let foo = { a: 2, b: function() {} };
JSON.stringify(foo);
// "{ "a": 2 }"

JSON.stringify La fonction convertit un objet JavaScript en JSON textuel. Les propriétés qui ne peuvent pas être textualisées sont ignorées. La valeur de l'attribut b dans foo est la définition de la fonction et n'est pas convertie et est perdue.

Quels autres attributs ne peuvent pas être convertis ?

1. Référence circulaire

Si la valeur d'attribut d'un objet renvoie à l'objet lui-même d'une manière indirecte, alors il s'agit d'une référence circulaire. Par exemple :

var bar = {
 a: {
  c: foo
 }
};
var foo = {
 b: bar
};

L'attribut c pointe vers lui-même s'il est analysé couche par couche, il entrera dans une boucle infinie. Essayons de l'imprimer et de voir :

let fooStringified = JSON.stringify(foo);
console.log(fooStringified); // {"b":{"a":{}}}

L'attribut de c pointe vers l'objet foo, et l'attribut b dans l'objet foo pointe vers l'objet bar et ne peut pas être traité. L'intégralité est ignorée et renvoie un objet vide.

La définition suivante (exemple dans le texte original) ne peut pas être compilée :

let foo = {b : foo};

Message d'erreur :

ReferenceError: foo is not defined
 at repl:1:14

Dans le langage fonctionnel Haskell, une méthode de définition similaire peut être utilisée grâce à la technologie Lazy Evaluation.

2. Symbole et non défini

let foo = { b: undefined };
JSON.stringify(foo);
// {}
// Symbols
foo.b = Symbol();
JSON.stringify(foo);
// {}

Exception

dans In le tableau, les éléments qui ne peuvent pas être stringifiés sont remplis de null.

let foo = [Symbol(), undefined, function() {}, 'works']
JSON.stringify(foo);
// "[null,null,null,'works']"

Cela peut conserver la "forme" du tableau lui-même, c'est-à-dire l'index d'origine de chaque élément.

Pourquoi certains attributs ne peuvent-ils pas être stringifiés ?

Parce que JSON est un format de texte universel et n'a rien à voir avec le langage. Imaginez que si la définition de la fonction est également stringifiée, comment déterminer de quel langage il s'agit et le présenter de manière appropriée deviendra particulièrement compliqué. Surtout certaines fonctionnalités liées au langage, comme le symbole en JavaScript.

Les responsables d'ECMASCript ont également spécifiquement souligné ce point :

Il ne tente pas d'imposer les représentations de données internes d'ECMAScript à d'autres langages de programmation. Au lieu de cela, il partage un petit sous-ensemble des représentations textuelles d'ECMAScript avec toutes les autres programmations. langues.

2. Réécrire l'objet en fonction JSON

Un moyen de contourner l'incapacité de chaîner certaines propriétés d'un objet est d'implémenter le Méthode toJSON de l'objet pour personnaliser l'objet en cours de chaîne. Étant donné que presque tous les appels AJAX utilisent JSON.stringify, la maîtrise de cette technique sera d'une grande aide dans la gestion des interactions serveur.

Semblable à toString, qui vous permet de renvoyer des éléments d'un objet sous forme de chaîne, toJSON fournit une méthode pour convertir les attributs de l'objet qui ne peuvent pas être stringifiés en JSON qui est appelé ensuite stringify peut le convertir en. Format JSON.

function Person (first, last) {
 this.firstName = first;
 this.last = last;
}
 
Person.prototype.process = function () {
 return this.firstName + ' ' +
   this.lastName;
};
 
let ade = new Person('Ade', 'P');
JSON.stringify(ade);
// "{"firstName":"Ade","last":"P"}"

La fonction de processus de l'instance de personne ade n'est pas stringifiée. Supposons que si le serveur veut uniquement le nom complet d'ade, au lieu d'obtenir respectivement le nom et le prénom, nous pouvons définir directement toJSON pour atteindre l'objectif :

Person.prototype.toJSON = function () {
 return { fullName: this.process(); };
};
 
let ade = new Person('Ade', 'P');
JSON.stringify(ade);
// "{"fullName":"Ade P"}"

Les avantages de la définition de toJSON sont : Pour la réutilisabilité et la stabilité, vous pouvez utiliser ade avec n'importe quelle bibliothèque, et les données transmises seront le nom complet renvoyé par votre définition toJSON.

// jQuery
$.post('endpoint', ade);
 
// Angular 2
this.httpService.post('endpoint', ade)

3. Paramètres facultatifs

La définition complète de JSON.stringify est la suivante. :

JSON.stringify(value, replacer?, space?)

replacer et space sont tous deux des paramètres facultatifs, expliquons-les séparément ensuite.

Replacer

replacer est une fonction de filtre ou un tableau contenant les noms d'attributs à chaîner. Si elles ne sont pas définies, toutes les propriétés sont stringifiées par défaut.

1. Tableau

Seuls les attributs du tableau sont stringifiés :

let foo = {
 a : 1,
 b : "string",
 c : false
};
JSON.stringify(foo, ['a', 'b']);
//"{"a":1,"b":"string"}"

les attributs imbriqués seront également être filtré :

let bar = {
 a : 1,
 b : { c : 2 }
};
JSON.stringify(bar, ['a', 'b']);
//"{"a":1,"b":{}}"
 
JSON.stringify(bar, ['a', 'b', 'c']);
//"{"a":1,"b":{"c":2}}"

La définition du tableau de filtres ne répond parfois pas aux besoins, vous pouvez alors personnaliser la fonction de filtre.

2. Fonction

La fonction de filtre prend chaque attribut et valeur de l'objet en entrée, et la valeur de retour a les situations suivantes :

• Retourner undéfini signifie ignorer l'attribut ;

• La chaîne de retour, la valeur booléenne ou le nombre sera stringifié ;

• Le retour l'objet déclenchera un appel récursif jusqu'à ce qu'une propriété du type de base soit rencontrée

• 返回无法stringify的值将会被忽略；

let baz = {
 a : 1,
 b : { c : 2 }
};
 
// 返回大于1的值
let replacer = function (key, value) {
 if(typeof === 'number') {
  return value > 1 ? value: undefined;
 }
 return value;
};
 
JSON.stringify(baz, replacer);
// "{"b":{"c":2}}"

通过改写上面的函数加入适当的输出，可以看到具体的执行步骤：

let obj = {
 a : 1,
 b : { c : 2 }
};
 
let tracer = function (key, value){
 console.log('Key: ', key);
 console.log('Value: ', value);
 return value;
};
 
JSON.stringify(obj, tracer);
// Key:
// Value: Object {a: 1, b: Object}
// Key: a
// Value: 1
// Key: b
// Value: Object {c: 2}
// Key: c
// Value: 2

space

你是否意识到调用默认的JSON.stringify返回的值只要一行，而且完全没有空格？如果想要更加美观的打印出来，那么就需要使用space这个参数了。

我告诉你一个非常简单的方法：通过tab(‘\t')来分割即可。

let space = {
 a : 1,
 b : { c : 2 }
};
 
// 使用制表符
JSON.stringify(space, undefined, '\t');
// "{
// "a": 1,
// "b": {
// "c": 2
// }
// }"
 
JSON.stringify(space, undefined, '');
// {"a":1,"b":{"c":2}}
 
// 自定义分隔符
JSON.stringify(space, undefined, 'a');
// "{
// a"a": 1,
// a"b": {
// aa"c": 2
// a}
// }"

一道三颗星的思考题：为什么打印结果的倒数第三行有两个a呢？

结论

本文介绍了一些使用toJSON的技巧：

• 无法stringify的几种类型

• 使用toJSON来自定义JSON.stringify的属性

• 可选参数replacer的两种定义方法来过滤属性

• 可选参数space用来格式化输出结果

• 数组和对象中如果包含无法stringify的元素的时候的区别

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!