Introduction à l'utilisation de JSON.stringify()-js tutoriel-php.cn

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 }"

Copier après la connexion

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
};

Copier après la connexion

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":{}}}

Copier après la connexion

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};

Copier après la connexion

Message d'erreur :

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

Copier après la connexion

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);
// {}

Copier après la connexion

Exception

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

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

Copier après la connexion

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 + &#39; &#39; +
   this.lastName;
};
 
let ade = new Person(&#39;Ade&#39;, &#39;P&#39;);
JSON.stringify(ade);
// "{"firstName":"Ade","last":"P"}"

Copier après la connexion

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(&#39;Ade&#39;, &#39;P&#39;);
JSON.stringify(ade);
// "{"fullName":"Ade P"}"

Copier après la connexion

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(&#39;endpoint&#39;, ade);
 
// Angular 2
this.httpService.post(&#39;endpoint&#39;, ade)

Copier après la connexion

3. Paramètres facultatifs

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

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

Copier après la connexion

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, [&#39;a&#39;, &#39;b&#39;]);
//"{"a":1,"b":"string"}"

Copier après la connexion

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

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

Copier après la connexion

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 === &#39;number&#39;) {
  return value > 1 ? value: undefined;
 }
 return value;
};
 
JSON.stringify(baz, replacer);
// "{"b":{"c":2}}"

Copier après la connexion

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

let obj = {
 a : 1,
 b : { c : 2 }
};
 
let tracer = function (key, value){
 console.log(&#39;Key: &#39;, key);
 console.log(&#39;Value: &#39;, 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

Copier après la connexion

space

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

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

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

Copier après la connexion

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

结论

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