JSON (JavaScript Object Notation) in einem Artikel verstehen

JSON (JavaScript Object Notation, JS Object Notation) ist ein leichtes Datenaustauschformat, das häufig von Servern verwendet wird, um Daten an Webseiten zu übergeben . Wie XML ist JSON ein reines textbasiertes Datenformat.

Das Dateisuffix einer JSON-Datei ist .Json und der MIME-Typ des JSON-Textes ist application/Json .

JSON wird angezeigt

Vor der Einführung von JSON wurde XML zur Datenübertragung verwendet. Da XML ein reines Textformat ist, eignet es sich für den Datenaustausch über das Internet. XML selbst ist nicht kompliziert, aber angesichts der vielen komplexen Spezifikationen wie DTD, XSD, XPath, XSLT usw. wird sich jeder normale Softwareentwickler überfordert fühlen, wenn er mit XML konfrontiert wird. Am Ende stellt jeder fest, dass er die XML-Spezifikationen möglicherweise nicht versteht, selbst wenn er mehrere Monate intensiv studiert.

Schließlich erfand Douglas Crockford eines Tages im Jahr 2002 JSON, ein ultraleichtes Datenaustauschformat, um Softwareentwickler zu retten, die in einer Notlage waren und lange Zeit von mehreren großen Softwareunternehmen hereingelegt worden waren.

Da JSON sehr einfach ist, erfreute es sich in der Webwelt schnell großer Beliebtheit und entwickelte sich zu einem ECMA-Standard. Fast alle Programmiersprachen verfügen über Bibliotheken zum Parsen von JSON, und in JavaScript können wir JSON direkt verwenden, da JavaScript über integriertes JSON-Parsing verfügt.

JSON-Struktur

Json hat zwei grundlegende Strukturen, nämlich Json-Objekt und Json-Array. Durch die Kombination von JSON-Objekten und JSON-Arrays können verschiedene komplexe Strukturen dargestellt werden.

JSON-Objekt

Die Objektstruktur beginnt mit { Es beginnt mit } und endet mit }. Der mittlere Teil besteht aus 0 oder mehr Schlüssel/Wert-Paaren, die durch englische Zeichen getrennt sind, und Schlüssel und Wert sind durch englische Zeichen : Der grammatische Aufbau der Objektstruktur ist wie folgt:

Der Schlüssel muss vom Typ String sein und in Anführungszeichen eingeschlossen sein. Wert kann ein Datentyp wie Zeichenfolge, Zahl, Objekt, Array usw. sein. Beispielsweise enthält ein Personenobjekt Informationen wie Name, Passwort, Alter usw. und die JSON-Darstellung lautet wie folgt

{
    "pname":"Zhang San",
    "Passwort":"123456",
    "Seite":40
}

JSON-Objekte werden in geschweiften Klammern gespeichert.

Genau wie in JavaScript können Objekte mehrere Schlüssel/Wert-Paare enthalten.

JSON-Objekt und JavaScript-Objekt

In JavaScript ist alles ein Objekt, z. B. Zeichenfolgen, Zahlen, Arrays, Daten usw. In JavaScript sind Objekte Daten mit Eigenschaften und Methoden.

Das JSON-Objekt, auf das wir uns normalerweise beziehen, ist ein JavaScript-Objekt im JSON-Format oder ein JavaScript-Objekt, das den Anforderungen der JSON-Datenstruktur entspricht.

Konvertieren Sie JSON in JavaScript-Objekte

JSON-Array

Die Array-Struktur beginnt mit [ und endet mit ] , und der mittlere Teil besteht aus einer Liste von 0 oder mehr Werten, die durch englische Zeichen , Die Syntax der Array-Struktur lautet wie folgt:

Die Elementtypen eines JSON-Arrays können inkonsistent sein. Beispielsweise kann „item1“ ein Zeichenfolgentyp, „item2“ ein Zahlentyp und „item3“ ein Objekttyp sein. Auf das letzte Element eines Arrays darf kein Komma folgen.

Komplexe Array-Typen

Hier erstellen wir ein Array mit drei Objekten.

Das erste ist ein HTML-Objekt, das ebenfalls ein Array mit 5 Elementen ist. Das zweite ist ein JavaScript-Objekt, das ebenfalls ein Array mit 4 Elementen ist. Das dritte ist das Serverobjekt, das ebenfalls ein Array mit 3 Elementen ist.

Komplexe Objekt-Array-Kombination

Die beiden oben genannten Typen von (Objekt-, Array-)Datenstrukturen können auch kombiniert werden, um komplexere Datenstrukturen zu bilden.

Objekt enthält Array

Hier erstellen wir ein komplexes SiteInfo-Objekt.

Der Wert der SiteUrl-Eigenschaft des SiteInfo-Objekts ist www.haicoder.com, der Wert der SiteAddr-Eigenschaft des SiteInfo-Objekts ist Shanghai, der Wert der SitePriority-Eigenschaft des SiteInfo-Objekts ist 1 und die SiteModule-Eigenschaft des SiteInfo-Objekts ist ein Array.

Das SiteModule-Array hat zwei Elemente, das erste Element ist HTML und das zweite Element ist JavaScript. Beide Elemente sind ebenfalls vom Typ Array.

Array enthält Objekte

Genau wie in JavaScript können Arrays Objekte enthalten:

"Mitarbeiter":[  
    {"Vorname":"John", "Nachname":"Doe"},  
    {"Vorname":"Anna", "Nachname":"Smith"},  
    {"Vorname":"Peter", "Nachname":"Jones"}  
]

Im obigen Beispiel ist das Objekt „Mitarbeiter“ ein Array. Enthält drei Objekte.

Jedes Objekt ist ein Mitarbeiterdatensatz (Vor- und Nachname).

JSON-Syntaxregeln

• Die Daten sind Schlüssel/Wert-Paare.
• Die Daten sind durch Kommas getrennt.
• Geschweifte Klammern speichern Objekte und eckige Klammern speichern Arrays

Um eine einheitliche Analyse zu gewährleisten, müssen JSON-Zeichenfolgen in doppelte Anführungszeichen "" und Objektschlüssel ebenfalls in doppelte Anführungszeichen "" eingeschlossen werden.

JSON-Schlüssel-Wert-Paare

Das Schreibformat der JSON-Daten ist: Name/Wert-Paar. Genau wie JavaScript-Objekteigenschaften. Ein Name/Wert-Paar besteht aus dem Feldnamen (in Anführungszeichen eingeschlossen), gefolgt von einem Doppelpunkt und dann dem Wert.

Datentyp des JSON-Wertes

JSON-Werte können folgende Typen haben:

JSON verwendet JavaScript-Syntax, aber das JSON-Format ist nur Text.
Text kann von jeder Programmiersprache gelesen und als Datenformat übergeben werden.

Douglas ist seit langer Zeit leitender Architekt bei Yahoo und liebt natürlich JavaScript. Das von ihm entworfene JSON ist eigentlich eine Teilmenge der JavaScript-Syntax und eine Zeichenfolgendarstellung von JavaScript-Objekten. Json verwendet Text, um die Informationen eines JavaScript-Objekts darzustellen, bei dem es sich im Wesentlichen um eine Zeichenfolge handelt.

Json verwendet JavaScript-Syntax

Da Json die JavaScript-Syntax verwendet, ist keine zusätzliche Software erforderlich, um Json in JavaScript zu verarbeiten.

Hier erstellen wir ein Objekt-Array durch JavaScript und weisen dem Objekt-Array Werte zu.

Zugriff auf Inhalte

Daten ändern

Ändern Sie die Kategorie des zweiten Elements des Objekts:

module[1].kategorie = "ES6";

JSON- und JavaScript-Objektdurchquerung

Sowohl die JSON- String-Traversierung als auch die JavaScript-Objekt -Traversierung verwenden zum Durchlaufen die For-In-Schleife.

JSON-Durchquerung

Wir erstellen eine haicoder.html-Datei und geben den folgenden Code ein:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>JSON-Durchquerung</title>
    <Skripttyp="text/javascript">
        console.log("haicoder.net (www.haicoder.net)");
        var str = {"name": "haicoder", "url": "www.haicoder.net"};
        für (var k in str) {
            console.log(k + " -> " + str[k]);
        }
    </Skript>
</Kopf>
<Text>
</body>
</html>

Zuerst haben wir einen JSON-String str definiert. Als Nächstes verwenden wir eine For-Schleife, um die JSON-Zeichenfolge zu durchlaufen. K ist der Schlüssel in der JSON-Zeichenfolge und str[k] ist der Wert, der dem Schlüssel der JSON-Zeichenfolge entspricht.

Öffnen Sie die Datei mit einem Browser. Die Browserausgabe sieht wie folgt aus:

JavaScript-Objektdurchquerung

Wir erstellen eine haicoder.html-Datei und geben den folgenden Code ein:

!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>JavaScript-Objektdurchquerung</title>
    <Skripttyp="text/javascript">
        console.log("haicoder.net (www.haicoder.net)");
        var obj = {name:"haicoder", url:"www.haicoder.net"};
        für (var k in obj) {
            console.log(k + " -> " + obj[k]);
        }
    </Skript>
</Kopf>
<Text>
</body>
</html>

Zuerst definieren wir ein JavaScript-Objekt obj. Als Nächstes verwenden wir eine for-Schleife, um das JavaScript-Objekt zu durchlaufen. k ist der Schlüssel des JavaScript-Objekts und obj[k] ist der Wert, der dem Schlüssel des JavaScript-Objekts entspricht.

JSON- und JavaScript-Array-Traversierung

Sowohl die JSON-Array-Traversierung als auch die JavaScript-Array-Traversierung verwenden eine For-In-Schleife zum Durchlaufen

JSON-Array-Durchquerung

Wir erstellen eine haicoder.html-Datei und geben den folgenden Code ein:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>JSON-Array-Durchlauf</title>
    <Skripttyp="text/javascript">
        console.log("haicoder.net (www.haicoder.net)");
        var jsonArr = [
            {"mod":"json", "url":"www.haicoder.net/json"},
            {"mod":"vue", "url":"www.haicoder.net/vue"},
            {"mod":"python", "url":"www.haicoder.net/python"}
        ]
        für (var k in jsonArr) {
            Konsole.log(k + " -> " + jsonArr[k].mod + " -> " + jsonArr[k].url);
        }
    </Skript>
</Kopf>
<Text>
</body>
</html>

Zuerst definieren wir ein JSON-Array, jedes Element im Array ist ein Objekt. Als Nächstes verwenden wir eine For-Schleife, um das JSON-Array zu durchlaufen, wobei k der Index des JSON-Arrays ist und jsonArr[k] der Wert ist, der dem Indexschlüssel des JSON-Arrays entspricht.

Wir verwenden . um den Wert jedes Objekts im JSON-Array zu erhalten.

JavaScript-Objekt-Array-Traversierung

var Js_Result = [
  {
    Name: "haicoder",
    URL: "www.haicoder.net",
    Alter: 20
  },
  {
    Name: "JavaScript",
    URL: "www.JavaScript.net",
    Alter: 30
  }
]
for (var i in Js_Result ){ // i ist der Array-Index console.log(i+" "+Js_Result[i].firstName
 +" "+Js_Result[i].Nachname
 +" "+Js_Result[i].age);
}
//Die Ergebnisausgabe ist 0 haicoder www.haicoder.net 20
1 JavaScript www.JavaScript.net 30

Speichern Sie das JavaScript-Objekt im Array Js_Result. Verwenden Sie eine for-Schleife, um Json_Result zu durchlaufen, wobei i der Array-Index ist, und erhalten Sie den entsprechenden Wert über Js_Result[i].firstName.

Serialisierung

Die Konvertierung eines beliebigen JavaScript-Objekts in JSON bedeutet die Serialisierung des Objekts in eine Zeichenfolge im JSON-Format, sodass es über das Netzwerk an andere Computer übertragen werden kann.

Lassen Sie uns zunächst das Xiaoming-Objekt in eine JSON-Zeichenfolge serialisieren:

Um die Ausgabe ansprechender zu gestalten, können Sie Parameter hinzufügen und entsprechend der Einrückung ausgeben:

JSON.stringify(xiaoming, null, ' ');

Ergebnis:

{
"Name": "Xiaoming",
"Alter": 14,
"Geschlecht": wahr,
"Höhe": 1,65,
"Note": null,
"middle-school": "\"W3C\" Mittelschule",
"Fähigkeiten": [
"JavaScript",
"Java",
"Python",
"Lispeln"
]
}

Sie können auch eine Funktion übergeben, sodass jedes Schlüssel-Wert-Paar des Objekts zuerst von der Funktion verarbeitet wird:

Funktion konvertieren(Schlüssel, Wert) {
    wenn (Typ des Wertes === 'Zeichenfolge') {
        Rückgabewert.toUpperCase();
    }
    Rückgabewert;
}

JSON.stringify(xiaoming, konvertieren, ' ');

Der obige Code konvertiert alle Attributwerte in Großbuchstaben:

{
  "Name": "Xiaoming",
  "Alter": 14,
  "Geschlecht": wahr,
  "Höhe": 1,65,
  "Note": null,
  "middle-school": "\"W3C\" MITTELSCHULE",
  "Fähigkeiten": [
    "JAVASCRIPT",
    "JAVA",
    "PYTHON",
    "LISPELN"
  ]
}

Wenn wir auch genau steuern möchten, wie Xiaoming serialisiert wird, können wir eine toJSON() Methode für xiaoming definieren, um die Daten, die JSON serialisieren soll, direkt zurückzugeben:

var xiaoming = {
    Name: 'Xiaoming',
    Alter: 14,
    Geschlecht: wahr,
    Größe: 1,65,
    Note: null,
    'Mittelschule': '\"W3C\" Mittelschule',
    Fähigkeiten: ['JavaScript', 'Java', 'Python', 'Lisp'],
    toJSON: Funktion () {
        return { // Gib nur Name und Alter aus und ändere den Schlüssel:
            'Name': dieser.name,
            „Alter“: dieses.Alter
        };
    }
};

JSON.stringify(xiaoming); // '{"Name":"Xiaoming","Alter":14}'

Deserialisierung

Normalerweise lesen wir JSON-Daten vom Server und zeigen die Daten auf der Webseite an.

Nachdem wir einen String im JSON-Format erhalten haben, verwenden wir JSON.parse() direkt, um ihn in ein JavaScript-Objekt umzuwandeln:

JSON.parse('[1,2,3,true]'); // [1, 2, 3, wahr]
JSON.parse('{"name":"Xiao Ming","age":14}'); // Objekt {name: 'Xiao Ming', age: 14}
JSON.parse('true'); // wahr
JSON.parse('123.45'); // 123.45

JSON.parse() kann auch eine Funktion zum Transformieren der analysierten Attribute akzeptieren:

Funktionen von Json

1. JSON lässt sich maschinenbasiert leicht analysieren und generieren und clientseitiges JavaScript kann JSON-Daten einfach über eval() lesen.
2. Json ist von Natur aus selbstbeschreibend und für Menschen leicht zu lesen und zu schreiben.
3. Json verwendet ein Textformat, das völlig sprachunabhängig ist. Die Formate sind alle komprimiert und beanspruchen nur wenig Bandbreite.
4. JSON-Parser und JSON-Bibliotheken unterstützen viele verschiedene Programmiersprachen, und derzeit unterstützen fast alle Programmiersprachen JSON.
5. Da das JSON-Format direkt vom serverseitigen Code verwendet werden kann, vereinfacht es die Code-Entwicklung auf der Server- und Clientseite erheblich, die ausgeführten Aufgaben bleiben jedoch unverändert und sind leicht zu warten.
6. Json ist kleiner, schneller und einfacher zu analysieren als XML.
7. Json schreibt außerdem vor, dass der Zeichensatz UTF-8 sein muss, sodass die Darstellung mehrerer Sprachen problemlos möglich ist.

Dies ist das Ende dieses Artikels zum Verständnis von JSON (JavaScript Object Notation) in einem Artikel. Weitere relevante JSON-Inhalte (JavaScript Object Notation) finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!