Implementierung von Methoden zur Umwandlung von JSON-Strings und JSON-Objekten ineinander in JS

Beim Entwickeln mit js müssen JSON-Strings und JSON-Objekte ineinander konvertiert werden. Wie werden JSON-Strings in JSON-Objekte und JSON-Objekte in JSON-Strings konvertiert? Als nächstes zeige ich Ihnen ein konkretes Beispiel.

1. JSON-String in JSON-Objekt konvertieren

var obj = JSON.parse(str[, reviver]);

Beispiel:

JSON.parse('{}');              // {}
JSON.parse('true');            // true
JSON.parse('"foo"');           // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null');            // null
JSON.parse('1');               //  1

reviver : Wenn es sich um eine Funktion handelt, kehrt sie zurück, nachdem sie ihre Methode für den ursprünglichen Wert ausgeführt hat, bevor sie zurückgegeben wird.

Parsen Sie die JSON-Zeichenfolge und geben Sie den entsprechenden Wert zurück. Sie können eine zusätzliche Konvertierungsfunktion übergeben, um einige Änderungen am generierten Wert und seinen Attributen vorzunehmen, bevor Sie ihn zurückgeben. Die Parameter k und v der Funktion stellen den zurückgegebenen Attributnamen bzw. Attributwert dar

JSON.parse('{"p": 5}', function (k, v) {
    if(k === '') return v;     // 如果到了最顶层，则直接返回属性值，
    return v * 2;              // 否则将属性值变为原来的 2 倍。
});                            // { p: 10 }
 
JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
    console.log(k); // 输出当前的属性名，从而得知遍历顺序是从内向外的，
                    // 最后一个属性名会是个空字符串。
    return v;       // 返回原始属性值，相当于没有传递 reviver 参数。
});
 
// 1
// 2
// 4
// 6
// 5
// 3
// ""

2. Konvertieren Sie das JSON-Objekt in einen JSON-String.

JSON.stringify(value[, replacementer [, space]])

value wird in einen JSON-Stringwert serialisiert.

Replacer Optional Wenn dieser Parameter eine Funktion ist, wird während des Serialisierungsprozesses jedes Attribut des serialisierten Werts konvertiert und von der Funktion verarbeitet.

Leerzeichen gibt optional die für die Einrückung verwendete Leerzeichenfolge an, die zur Verschönerung der Ausgabe verwendet wird (Pretty-Print); wenn der Parameter eine Zahl ist, stellt er die Anzahl der Leerzeichen dar; Wenn der Wert kleiner als 1 ist, bedeutet dies, dass keine Leerzeichen vorhanden sind. Wenn der Parameter eine Zeichenfolge ist (die ersten zehn Buchstaben der Zeichenfolge), wird die Zeichenfolge als Leerzeichen behandelt, wenn der Parameter nicht angegeben ist (oder null ist). es wird keine Leerzeichen geben. Beispiel:

JSON.stringify({});                        // '{}'
JSON.stringify(true);                      // 'true'
JSON.stringify("foo");                     // '"foo"'
JSON.stringify([1, "false", false]);       // '[1,"false",false]'
JSON.stringify({ x: 5 });                  // '{"x":5}'
 
JSON.stringify({x: 5, y: 6});             
// "{"x":5,"y":6}"
 
JSON.stringify([new Number(1), new String("false"), new Boolean(false)]);
// '[1,"false",false]'
 
JSON.stringify({x: undefined, y: Object, z: Symbol("")});
// '{}'
 
JSON.stringify([undefined, Object, Symbol("")]);         
// '[null,null,null]'
 
JSON.stringify({[Symbol("foo")]: "foo"});                
// '{}'
 
JSON.stringify({[Symbol.for("foo")]: "foo"}, [Symbol.for("foo")]);
// '{}'
 
JSON.stringify(
    {[Symbol.for("foo")]: "foo"},
    function (k, v) {
        if (typeof k === "symbol"){
            return "a symbol";
        }
    }
);
 
 
// undefined
 
// 不可枚举的属性默认会被忽略：
JSON.stringify(
    Object.create(
        null,
        {
            x: { value: 'x', enumerable: false },
            y: { value: 'y', enumerable: true }
        }
    )
);
 
// "{"y":"y"}"

Wenn replacer ein Array ist, stellt der Wert des Arrays den Eigenschaftsnamen dar, der in eine JSON-Zeichenfolge serialisiert wird.

JSON.stringify(foo, ['week', 'month']); 
// '{"week":45,"month":7}', 只保留“week”和“month”属性值。

3. Verwenden Sie JSON.stringify in Kombination mit dem lokalen Speicher „localStorage“

Manchmal möchten Sie ein vom Benutzer erstelltes Objekt speichern und das Objekt auch nach dem Schließen des Browsers wiederherstellen. Das folgende Beispiel ist eine Vorlage für JSON.stringify, die für diese Situation geeignet ist:

// 创建一个示例数据
var session = {
    'screens' : [],
    'state' : true
};
session.screens.push({"name":"screenA", "width":450, "height":250});
session.screens.push({"name":"screenB", "width":650, "height":350});
session.screens.push({"name":"screenC", "width":750, "height":120});
session.screens.push({"name":"screenD", "width":250, "height":60});
session.screens.push({"name":"screenE", "width":390, "height":120});
session.screens.push({"name":"screenF", "width":1240, "height":650});
 
// 使用 JSON.stringify 转换为 JSON 字符串
// 然后使用 localStorage 保存在 session 名称里
localStorage.setItem('session', JSON.stringify(session));
 
// 然后是如何转换通过 JSON.stringify 生成的字符串，该字符串以 JSON 格式保存在 localStorage 里
var restoredSession = JSON.parse(localStorage.getItem('session'));
 
// 现在 restoredSession 包含了保存在 localStorage 里的对象
console.log(restoredSession);

4. Unterstützung für ältere Versionen unter IE8 Polyfill

JSON-Objekte werden möglicherweise von älteren Browserversionen nicht unterstützt. Sie können den folgenden Code am Anfang des JS-Skripts einfügen, damit Sie JSON-Objekte in Browsern verwenden können, die JSON-Objekte nicht nativ unterstützen (z. B. IE6).

Der folgende Algorithmus ist eine Nachahmung nativer JSON-Objekte:

Sie können auch das CDN von JSON3.js vorstellen

<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script>
  JSON.stringify({"Hello": 123});
  // => &#39;{"Hello":123}&#39;
  JSON.parse("[[1, 2, 3], 1, 2, 3, 4]", function (key, value) {
    if (typeof value == "number") {
      value = value % 2 ? "Odd" : "Even";
    }
    return value;
  });
  // => [["Odd", "Even", "Odd"], "Odd", "Even", "Odd", "Even"]
</script>

Verwandte Empfehlungen:

js-Methodenanalyse zum Konvertieren von JSON-String in JSON-Objekt

Das obige ist der detaillierte Inhalt vonImplementierung von Methoden zur Umwandlung von JSON-Strings und JSON-Objekten ineinander in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!