Heim > Web-Frontend > js-Tutorial > Leichtes Datenformat – JSON

Leichtes Datenformat – JSON

黄舟
Freigeben: 2017-02-28 15:09:25
Original
1503 Leute haben es durchsucht

Ich kann diese Mathematik heute wirklich nicht ertragen

Lass uns meine Meinung ändern und über das Frontend schreiben
Schreiben Sie heute ein wenig Wissen über JSON


Vor langer, langer Zeit war XML der Standard für die Übertragung von Daten im Internet
Aber im Allgemeinen denken alle, dass XML zu umständlich ist
Später, mit der Entwicklung des Webs
, stellten die Leute fest, dass JSON bequemer ist als Teilmenge der JavaScript-Syntax zu verwenden
Also JSON Es ist zum Standard geworden
Jetzt verwendet jeder JSON als Datenformat für die Kommunikation

JSON-Grundsyntax

(JSON: JavaScript-Objektnotation, JavaScript-Objektdarstellung)
Die JSON-Syntax ist grob in drei Arten von Werten unterteilt

  • Einfache Typwerte: können Zeichenfolgen darstellen , Zahlen, Boolesche Werte und Null

  • Objekt: komplexer Datentyp, der ungeordnete Schlüssel-Wert-Paare darstellt

  • Array: komplexer Datentyp , stellt eine geordnete Werteliste dar

Beachten Sie, dass JSON nicht undefiniert unterstützt und keine Funktionen unterstützt

einfache Typwerte

Ein einzelner Basistypwert kann auch als JSON betrachtet werden
Syntax und JavaScript gleich
Es gibt nur eines zu beachten
In unserem JavaScript können Zeichenfolgen durch doppelte oder einfache Anführungszeichen dargestellt werden
Aber das Zeichenfolgenformat in JSON muss doppelte Anführungszeichen verwenden

Objekt

Da JSON eine Teilmenge der JavaScript-Syntax ist
, werde ich hauptsächlich über die Unterschiede sprechen
Schauen wir uns zuerst an unser häufig verwendetes Objektliteral-Deklarationsformat

var man = {
    name: 'payen',
    sex: 'male',
    age: 19};
Nach dem Login kopieren

In unseren JavaScript-Objekten können Attribute in Anführungszeichen eingeschlossen werden oder nicht
(um gewöhnliche Objekte von JSON-Objekten zu unterscheiden, werden Anführungszeichen normalerweise nicht hinzugefügt )
Aber in JSON-Objekten sind (doppelte) Anführungszeichen für Attribute erforderlich
Wir Das obige Objekt kann auch so in JavaScript geschrieben werden, was völlig äquivalent zu

var man = {    "name": "payen",    "sex": "male",    "age": 19};
Nach dem Login kopieren

ist Das obige Objekt darstellen ist

{
    "name": "payen",
    "sex": "male",
    "age": 19}
Nach dem Login kopieren

(Es gibt kein Variablenkonzept in JSON und keine Trennung. )
Natürlich kann der Wert eines Objekts in JSON auch ein Objekt < sein 🎜> Egal wie komplex das JSON ist, die Schlüssel (Eigenschaften) des Objekts müssen in (doppelte) Anführungszeichen gesetzt werden

Array

Obwohl Arrays in unserem JavaScript ausschließlich zu Objekten gehören

, wir behandeln sie normalerweise unterschiedlich
Unsere übliche Methode zur Deklaration von Array-Literalen

var value = [123, &#39;abc&#39;, true];
Nach dem Login kopieren
JSON hat auch die gleiche Syntax

[123, "abc", true]
Nach dem Login kopieren
Auch hier hat JSON keine Variablen und Semikolons


Im Allgemeinen sind Arrays und Objekte die äußersten Formen von JSON

Durch Arrays, Objekte und einfache Typen können Werte verschiedene JSON-Datenformate erstellen

JSON-Analyse und Serialisierung

Der wichtigere Grund, warum JSON beliebt ist

ist, dass es einfacher ist, es in nützliche Objekte zu analysieren

JSON-Objekt

Frühe JSON-Parser verwendeten JavaScripts eval( )

Aber es ist riskant und kann schädlichen Code ausführen
ES5 standardisiert das Parsen. Das Verhalten von JSON
definiert das globale Objekt JSON
, das zwei Methoden hat

  • stringify()

    JavaScript-Objekt –> JSON-Zeichenfolge

  • parse()

    JSON-Zeichenfolge–> JavaScript-Objekt

The Die grundlegendste Verwendung ist natürlich

Wir verwenden die zu konvertierende Variable als Parameter. Gehen Sie hinein
Nehmen Sie ein Beispiel (dieses Beispiel wird immer verwendet)

var man = {    &#39;name&#39;: "payen", <--
    sex: "male", <--
    "age": 19,    "school": {        "name": &#39;HUST&#39;,        "sex": undefined, <--
        "location": function(){} <--
    }
}
var str = JSON.stringify(man);
console.log(str);
console.log(typeof str);
Nach dem Login kopieren
Werfen wir einen Blick auf die Konsolendruck


Sie können sehen, dass JSON.stringify tatsächlich eine JSON-Zeichenfolge zurückgegeben hat

Unsere Attribute ohne Anführungszeichen und einfache Anführungszeichen sind zu doppelten Anführungszeichen
in der JSON-Zeichenfolge geworden, und Der Attributwert ist undefiniert oder das Attribut der Funktion wird automatisch ignoriert
(Prototyp-Mitglieder werden sogar ignoriert)

Obwohl JSON.stringify() im Objekt auf undefiniert und eine Funktion (einschließlich ES6-Symbole) stößt, wird dies der Fall sein automatisch ignoriert

Aber das Array ist anders
Das Array tut es nicht. Das Objekt wirft sie rücksichtslos weg, gibt aber null zurück

console.log(JSON.stringify([123, undefined, null, function(){}]));
Nach dem Login kopieren


Wir können Verwenden Sie JSON.parse, um ein JavaScript-Objekt wiederherzustellen

console.log(JSON.parse(str));
Nach dem Login kopieren
Nach dem Login kopieren

Werfen wir einen Blick auf die detaillierte Verwendung dieser beiden Funktionen

Stringify-Serialisierung

Zusätzlich zum Ausfüllen der zu serialisierenden Objekte kann diese Methode auch zwei Parameter akzeptieren

Einer ist ein Filter, der ein Array oder eine Funktion sein kann
Der andere ist die Einrückung von die JSON-Zeichenfolge, die angegeben werden kann

Filter

Array-Filter

Die Form des Arrays ist relativ einfach. Wir können die gewünschten Objekteigenschaften angeben

oder unser Beispiel oben

var str = JSON.stringify(man,[&#39;name&#39;,&#39;sex&#39;]);
console.log(str);
Nach dem Login kopieren

Funktionsfilter

Die von uns übergebene Funktion erhält zwei Parameter, Schlüssel (Attributname) und Wert (Attributwert)

Der zurückgegebene Wert ist der Wert des entsprechenden Schlüssels
Wenn die Funktion undefiniert zurückgibt, wird das Attribut ignoriert

var str = JSON.stringify(man, function(key, value){
    if(key == &#39;name&#39;){        return &#39;abc&#39;;
    }    if(key == &#39;sex&#39;){        return;
    }    return value;
});
console.log(str);
Nach dem Login kopieren


注意这里最后一定要写return value; 才能正常显示其他值
如果使用了switch语句就写default: return value;

缩进

空格填充

另一个参数可以填写数字指定缩进的空格数(最大缩进10)

var str = JSON.stringify(man, null, 4);
console.log(str);
Nach dem Login kopieren

字符填充

我们也可以指定缩进字符

var str = JSON.stringify(man, null, "- - ");
console.log(str);
Nach dem Login kopieren

toJSON()方法

可能有些时候stringify不够满足我们的需求
这时我们可以给对象定义toJSON()方法
(但仍然是调用stringify()方法)
返回自身的JSON的数据格式
原生Date对象有默认toJSON()返回日期字符串(同Date中方法toISOString()结果相同)

我们可以给我们的对象添加一个toJSON属性

var man = {    ...,
    toJSON: function(){        return this.school;
    }
}
var str = JSON.stringify(man);
console.log(str);
Nach dem Login kopieren

这里再多说一句
很多同学误认为toJSON()返回的是JSON字符串
其实不是的
toJSON()返回的应该是一个适当的值,然后由JSON.stringify()对其进行序列化
所以toJSON()是返回一个能够被字符串化的安全JSON值
下面我们来看看调用JSON.stringify()发生了什么

序列化对象顺序

  • 如果对象有toJSON()并且能获得有效值,优先调用,否则返回对象本身

  • 若有第二个参数,对上一步返回的对象应用过滤器

  • 对上一步返回的每个值进行相应序列化

  • 若有第三个参数,执行序列化

parse解析

JSON.parse也可以接受另一个参数,它是一个函数
类似于上面序列化中过滤器的过滤函数
它被称作还原函数,同样接受键和值作为参数
首先我现在我们例子中的对象添加一个方法

var man = {    ...,
    releaseDate: new Date(2016,11,11)
}
var str = JSON.stringify(man);
console.log(str);
Nach dem Login kopieren


我们看到,由于Date对象存在toJSON()
序列化之后调用了toJSON()
我们看到了这样的字符串

console.log(JSON.parse(str));
Nach dem Login kopieren
Nach dem Login kopieren


这样的数据不是我们想要的
这样的情况我们怎么处理呢?
答案是使用还原函数


可以这样做

var msg = JSON.parse(str,function(key, value){
    if(key == &#39;releaseDate&#39;){        return new Date(value);
    }else{        return value;
    }
})
console.log(msg.releaseDate.getFullYear(),
            msg.releaseDate.getMonth(),
            msg.releaseDate.getDate());
Nach dem Login kopieren

这样我们就可以使用得到的时间数据了

小结

没想到写了这么多
JSON其实很简单
就是一个轻量级的数据格式
可以简化表示复杂数据结构的工作量
主要要掌握ES5的全局对象JSON中的两个方法JSON.stringify()和JSON.parse()
总结几个要记住的重点

  • JSON.stringify()
    用于把JavaScript对象转换为JSON字符串
    可填写额外两个参数-筛选数组/替换函数和指定缩进

    • 对象遇到undefined、function、symbol(ES6)会忽略

    • 数组遇到undefined、function、symbol(ES6)会返回null

  • JSON.parse()
    用于把JSON字符串转换为JavaScript对象
    可填写额外一个参数-还原函数

 以上就是轻量级数据格式——JSON的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage