Heim > Artikel > Web-Frontend > Einführung in die Verwendung von JSON.stringify()
Erfahrene Spieler, wissen Sie, dass JSON.stringify auch den zweiten und dritten optionalen Parameter hat? Was sind sie? Fühlt es sich nicht unglaublich an? Der folgende Artikel stellt Ihnen einige verwandte Informationen zu JSON.stringify vor, die Sie möglicherweise nicht kennen. Der Artikel stellt es im Detail anhand von Beispielcode vor.
Vorwort
JSON hat XML nach und nach ersetzt und wird von Entwicklern auf der ganzen Welt häufig verwendet. In diesem Artikel werden einige Details zur Verwendung von JSON.stringify in JavaScript ausführlich erläutert. Zunächst ein kurzer Überblick über JSON und JavaScript:
Nicht jedes legale JSON ist gültiges JavaScript
JSON ist nur ein Textformat
1. JSON.stringify
let foo = { a: 2, b: function() {} }; JSON.stringify(foo); // "{ "a": 2 }"JSON.stringify Die Funktion konvertiert ein JavaScript-Objekt in textuelles JSON. Eigenschaften, die nicht textualisiert werden können, werden ignoriert. Der Wert des Attributs b in foo ist die Funktionsdefinition und wird nicht konvertiert und geht verloren. Welche anderen Attribute können nicht konvertiert werden?
1. Zirkelverweis
Wenn der Attributwert eines Objekts auf irgendeine indirekte Weise auf das Objekt selbst verweist, handelt es sich um einen Zirkelverweis. Beispiel:var bar = { a: { c: foo } }; var foo = { b: bar };Attribut c zeigt auf sich selbst. Wenn es Schicht für Schicht analysiert wird, gelangt es in eine Endlosschleife. Versuchen wir es auszudrucken und sehen:
let fooStringified = JSON.stringify(foo); console.log(fooStringified); // {"b":{"a":{}}}Das Attribut von c zeigt auf das foo-Objekt und das b-Attribut im foo-Objekt zeigt auf das bar-Objekt und kann nicht verarbeitet werden. Das gesamte Objekt wird ignoriert und zurückgegeben. Die folgende Definition (Beispiel im Originaltext) kann nicht kompiliert werden:
let foo = {b : foo};Fehlermeldung:
ReferenceError: foo is not defined at repl:1:14In der funktionalen Sprache Haskell kann aufgrund der Lazy Evaluation-Technologie eine ähnliche Definitionsmethode verwendet werden.
2. Symbol und undefiniert
let foo = { b: undefined }; JSON.stringify(foo); // {} // Symbols foo.b = Symbol(); JSON.stringify(foo); // {}Ausnahme in In Im Array werden Elemente, die nicht stringifiziert werden können, mit Null gefüllt.
let foo = [Symbol(), undefined, function() {}, 'works'] JSON.stringify(foo); // "[null,null,null,'works']"Dadurch kann die „Form“ des Arrays selbst beibehalten werden, d. h. der ursprüngliche Index jedes Elements.
Warum können einige Attribute nicht stringifiziert werden?
Weil JSON ein universelles Textformat ist und nichts mit Sprache zu tun hat. Stellen Sie sich vor, dass es besonders kompliziert wird, zu bestimmen, um welche Sprache es sich handelt, und sie in geeigneter Weise darzustellen, wenn die Funktionsdefinition auch stringifiziert ist. Insbesondere einige sprachbezogene Funktionen, wie z. B. Symbole in JavaScript. ECMASCript-Beamte haben diesen Punkt auch ausdrücklich hervorgehoben: Es wird nicht versucht, die internen Datendarstellungen von ECMAScript anderen Programmiersprachen aufzuzwingen, sondern es wird eine kleine Teilmenge der Textdarstellungen von ECMAScript mit allen anderen Programmiersprachen geteilt Sprachen.2. Schreiben Sie das Objekt in eine JSON-Funktion um
Eine Möglichkeit, die Unfähigkeit zu umgehen, bestimmte Eigenschaften eines Objekts zu stringifizieren, besteht darin, die zu implementieren toJSON-Methode des Objekts zum Anpassen des zu stringifizierenden Objekts. Da fast jeder AJAX-Aufruf JSON.stringify verwendet, wird die Beherrschung dieser Technik eine große Hilfe bei der Handhabung von Serverinteraktionen sein. Ähnlich wie toString, mit dem Sie Elemente in einem Objekt als String zurückgeben können, bietet toJSON eine Methode zum Konvertieren von Attributen im Objekt, die nicht in einen String umgewandelt werden können, in den als nächstes aufgerufenen Stringify JSON-Format.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"}"Die Prozessfunktion der Personeninstanz ade ist nicht stringifiziert. Angenommen, wenn der Server nur den vollständigen Namen von ade möchte, anstatt den Nachnamen bzw. Vornamen abzurufen, können wir toJSON direkt definieren, um das Ziel zu erreichen:
Person.prototype.toJSON = function () { return { fullName: this.process(); }; }; let ade = new Person('Ade', 'P'); JSON.stringify(ade); // "{"fullName":"Ade P"}"Die Vorteile der Definition von toJSON sind: Aus Gründen der Wiederverwendbarkeit und Stabilität können Sie ade mit jeder Bibliothek verwenden und die übertragenen Daten sind der vollständige Name, der von Ihrer toJSON-Definition zurückgegeben wird.
// jQuery $.post('endpoint', ade); // Angular 2 this.httpService.post('endpoint', ade)
3. Optionale Parameter
Die vollständige Definition von JSON.stringify lautet wie folgt :JSON.stringify(value, replacer?, space?)replacer und space sind beide optionale Parameter, wir erklären sie als nächstes separat.
Replacer
Replacer ist eine Filterfunktion oder ein Array, das die zu stringifizierenden Attributnamen enthält. Wenn nicht definiert, werden alle Eigenschaften standardmäßig mit Zeichenfolgen versehen.1. Array
Nur Attribute im Array werden stringifiziert:let foo = { a : 1, b : "string", c : false }; JSON.stringify(foo, ['a', 'b']); //"{"a":1,"b":"string"}"verschachtelte Attribute werden auch gefiltert werden:
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}}"Wenn die Definition des Filterarrays manchmal nicht den Anforderungen entspricht, können Sie die Filterfunktion anpassen.
2. Funktion
Die Filterfunktion verwendet jedes Attribut und jeden Wert im Objekt als Eingabe und der Rückgabewert hat die folgenden Situationen:返回无法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的元素的时候的区别
Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von JSON.stringify(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!