Javascript-Objekt gegen JSON

208

Ich möchte die grundlegenden Unterschiede zwischen dem Javascript-Objekt und der JSON-Zeichenfolge klar verstehen.

Angenommen, ich erstelle die folgende JS-Variable:

var testObject = {one: 1,"two":2,"three":3};

Q1. Ist der Schlüssel- / Eigenschaftsname sowohl mit als auch ohne Anführungszeichen gültig? (zB "one" : 1)

Wenn ja, was ist der Unterschied?

F2: Wenn ich das obige Objekt mit konvertiere JSON.stringify(testObject), was ist der Unterschied zwischen dem ursprünglichen JS-Objekt und dem JSON?

Ich fühle, dass sie fast gleich sind. Bitte erläutern Sie dies.

F3: Wird zum Parsen einer JSON-Zeichenfolge die folgende Methode empfohlen?

var javascriptObj = JSON.parse(jSonString);
testndtv
quelle

Antworten:

239
  1. Ist der Schlüssel- / Eigenschaftsname sowohl mit als auch ohne Anführungszeichen gültig?

    Die einzige Zeit , die Sie benötigen einen Schlüssel in Anführungszeichen setzen , wenn Objektliteral Notation ist , wo der Schlüssel ein Sonderzeichen enthält ( if, :, -usw.). Es ist erwähnenswert, dass ein Schlüssel in JSON muss in eingeschlossen werden doppelte Anführungszeichen.

  2. var jSonString = JSON.stringify(testObject);Was ist der Unterschied zwischen der 2 (JS obj und JSON), wenn ich das obige Objekt mit JSON konvertiere ?

    JSON ist ein Datenaustauschformat. Es ist ein Standard, der beschreibt, wie geordnete Listen und ungeordnete Karten, Boolesche Zeichenfolgen und Zahlen in einer Zeichenfolge dargestellt werden können. Genau wie XML und YAML eine Möglichkeit sind, strukturierte Informationen zwischen Sprachen zu übertragen, ist JSON dieselbe. Ein JavaScript-Objekt ist dagegen ein physischer Typ. Genau wie ein PHP-Array, eine C ++ - Klasse / Struktur, ist ein JavaScript-Objekt ein JavaScript-interner Typ.

    Hier ist eine Geschichte. Stellen Sie sich vor, Sie haben Möbel in einem Geschäft gekauft und möchten, dass sie geliefert werden. Das einzige Modell, das noch auf Lager ist, ist das Display-Modell. Sie stimmen jedoch dem Kauf zu.

    Im Laden ist die von Ihnen gekaufte Kommode ein lebendes Objekt:

    var chestOfDrawers = {
        color: "red",
        numberOfDrawers: 4
    }

    Sie können jedoch keine Kommode per Post verschicken, also zerlegen Sie sie (lesen, fädeln). Es ist jetzt in Bezug auf Möbel nutzlos. Es ist jetzt JSON. Es ist in Flatpack-Form.

    {"color":"red","numberOfDrawers":4}

    Wenn Sie es erhalten, bauen Sie die Kommode wieder auf (lesen, analysieren). Es ist jetzt wieder in einer Objektform.

    Der Grund für JSON / XML und YAML besteht darin, dass Daten zwischen Programmiersprachen in einem Format übertragen werden können, das beide teilnehmenden Sprachen verstehen können. Sie können PHP oder C ++ Ihr JavaScript-Objekt nicht direkt geben. weil jede Sprache ein Objekt unter der Haube anders darstellt. Da wir das Objekt jedoch in JSON-Notation unterteilt haben; dh eine standardisierte Art der Darstellung von Daten, wir können die JSON- Darstellung des Objekts an eine andere Sprache (C ++, PHP) übertragen, sie können das JavaScript-Objekt, das wir hatten, basierend auf der JSON-Darstellung des Objekts in ihrem eigenen Objekt neu erstellen .

    Es ist wichtig zu beachten, dass JSON keine Funktionen oder Daten darstellen kann. Wenn Sie versuchen, ein Objekt mit einem Funktionselement zu stringifizieren, wird die Funktion in der JSON-Darstellung weggelassen. Ein Datum wird in eine Zeichenfolge konvertiert.

    JSON.stringify({
        foo: new Date(),
        blah: function () { 
            alert('hello');
        }
    }); // returns the string "{"foo":"2011-11-28T10:21:33.939Z"}"
  3. Wird zum Parsen einer JSON-Zeichenfolge die folgende Methode empfohlen? var javascriptObj = JSON.parse(jSonString);

    Ja, aber ältere Browser unterstützen JSON nicht nativ (IE <8) . Um diese zu unterstützen, sollten Sie einschließen json2.js.

    Wenn Sie jQuery verwenden, können Sie aufrufen jQuery.parseJSON(), das JSON.parse()unter der Haube verwendet wird, wenn es unterstützt wird, und ansonsten auf eine benutzerdefinierte Implementierung zurückgreift, um die Eingabe zu analysieren.

Matt
quelle
4
@testndtv Sie verpassen den Punkt - obwohl auf dem Papier (oder auf dem Bildschirm) eine JSON-Zeichenfolge und die Anzeige eines JS-Objekts möglicherweise gleich aussehen , sind sie nicht dasselbe. JSON ist nur eine Möglichkeit, ein Objekt in eine Zeichenfolge zu packen, sodass es irgendwohin übertragen und später wieder in ein Objekt entpackt werden kann.
Alnitak
1
@Matt schlechte Analogie IMHO - JSON sollte nicht zum Serialisieren eines Objekts mit Methoden verwendet werden - nur für reine Datenobjekte.
Alnitak
1
Wenn also ein JS-Objekt Methoden hat, wird die Konvertierung in eine JSON-Zeichenfolge diese vollständig ignorieren ... wie im obigen Fall würden getIn und getOut vollständig ignoriert ... Funktioniert das so?
Testndtv
3
@Growler: in der Regel Ich benutze JSON , wenn die „Sache“ geht , werden erzeugt auf dem Server, und eine js - Datei verwenden , wenn das „Ding“ ist gerade bedient , wie sie ist. Das andere große Unterscheidungsmerkmal ist, ob Sie Funktionen und / oder Datumsangaben einschließen müssen, da JSON diese nicht darstellen kann. Daher müssen Sie auf die Bereitstellung einer JS-Datei zurückgreifen. Wenn Sie sich immer noch nicht sicher sind, können Sie diese als separate Frage zum Stapelüberlauf stellen (zeigen Sie ein Beispiel für den Inhalt, den Sie zur Darstellung Ihres Dialogs bereitstellen müssen), und geben Sie mir den Link. Gerne schaue ich genauer hin!
Matt
4
@ Matt Sie, Sir, sind ein Genie! Ihre Erklärung ist genau richtig, klar, präzise und leicht zu verstehen. Ich wünschte du wärst mein JavaScript / Programmier Mentor.
FrankDraws
30

Q1: Beim Definieren von Objektliteralen in Javascript können die Schlüssel Anführungszeichen enthalten oder nicht. Es gibt keinen Unterschied, außer dass Sie in Anführungszeichen bestimmte Schlüssel angeben können, die dazu führen würden, dass der Interpreter nicht analysiert werden kann, wenn Sie sie nackt ausprobieren. Wenn Sie beispielsweise einen Schlüssel wünschen, der nur ein Ausrufezeichen ist, benötigen Sie Anführungszeichen:

a = { "!": 1234 } // Valid
a = { !: 1234 } //  Syntax error

In den meisten Fällen können Sie jedoch die Anführungszeichen um Schlüssel in Objektliteralen weglassen.

F2: JSON ist buchstäblich eine Zeichenfolgendarstellung. Es ist nur eine Zeichenfolge. Betrachten Sie also Folgendes:

var testObject = { hello: "world" }
var jSonString = JSON.stringify(testObject);

Da testObjectes sich um ein reales Objekt handelt, können Sie Eigenschaften darauf aufrufen und alles andere tun, was Sie mit Objekten tun können:

testObject.hello => "world"

Auf der anderen Seite jsonStringist nur eine Zeichenfolge:

jsonString.hello => undefined

Beachten Sie einen weiteren Unterschied: In JSON müssen alle Schlüssel in Anführungszeichen gesetzt werden. Dies steht im Gegensatz zu Objektliteralen, bei denen die Anführungszeichen normalerweise gemäß meiner Erklärung in Q1 weggelassen werden können.

Q3. Sie können eine JSON-Zeichenfolge mithilfe von analysieren. JSON.parseDies ist im Allgemeinen der beste Weg, dies zu tun (sofern der Browser oder ein Framework dies bereitstellt). Sie können auch einfach verwenden, evalda JSON ein gültiger Javascript-Code ist. Die erstere Methode wird jedoch aus einer Reihe von Gründen empfohlen (eval hat viele böse Probleme).

Ben Lee
quelle
9

Von JSON gelöste Probleme

Angenommen, Sie möchten reguläre JavaScript-Objekte zwischen zwei Computern austauschen und legen zwei Regeln fest:

  • Die übertragenen Daten müssen eine reguläre Zeichenfolge sein.
  • Es können nur Attribute ausgetauscht werden, Methoden werden nicht übertragen.

Jetzt erstellen Sie zwei Objekte auf dem ersten Host:

var obj1 = { one: 1,"two":2,"three":3 }; // your example
var obj2 = { one: obj1.one, two: 2, three: obj1.one + obj1.two };

Wie können Sie diese Objekte zur Übertragung an den zweiten Host in Zeichenfolgen konvertieren?

  • Für das erste Objekt können Sie diese Zeichenfolge aus der Literaldefinition senden '{ one: 1,"two":2,"three":3 }', aber tatsächlich können Sie das Literal im Skriptteil des Dokuments nicht lesen (zumindest nicht einfach). Also obj1und obj2muss eigentlich genauso verarbeitet werden.
  • Sie müssen alle Attribute und ihren Wert auflisten und eine Zeichenfolge erstellen, die dem Objektliteral ähnelt.

JSON wurde als Lösung für die gerade diskutierten Anforderungen erstellt: Es handelt sich um eine Reihe von Regeln zum Erstellen einer Zeichenfolge, die einem Objekt entspricht, indem alle Attribute und Werte aufgelistet werden (Methoden werden ignoriert).

JSON normalisiert die Verwendung von doppelten Anführungszeichen für Attributnamen und -werte.

Denken Sie daran, dass JSON nur eine Reihe von Regeln ist (ein Standard).

Wie viele JSON-Objekte werden erstellt?

Nur eines, es wird automatisch von der JS-Engine erstellt.

Moderne JavaScript-Engines in Browsern haben ein natives Objekt, auch JSON genannt. Dieses JSON-Objekt kann:

  • Dekodieren Sie eine Zeichenfolge, die mit dem JSON-Standard erstellt wurde, mit JSON.parse (Zeichenfolge). Das Ergebnis ist ein reguläres JS-Objekt mit Attributen und Werten, die in der JSON-Zeichenfolge gefunden werden.

  • Codieren Sie Attribute / Werte eines regulären JS-Objekts mit JSON.stringify (). Das Ergebnis ist eine Zeichenfolge, die dem JSON-Regelsatz entspricht.

Das (einzelne) JSON-Objekt ähnelt einem Codec. Seine Funktion besteht darin, zu codieren und zu decodieren.

Beachten Sie, dass:

  • JSON.parse () erstellt kein JSON-Objekt, sondern ein reguläres JS-Objekt. Es gibt keinen Unterschied zwischen einem Objekt, das mit einem Objektliteral erstellt wurde, und einem Objekt, das von JSON.parse () aus einer JSON-kompatiblen Zeichenfolge erstellt wurde.

  • Es gibt nur ein JSON-Objekt, das für alle Konvertierungen verwendet wird.

Zurück zu den Fragen :

  • Q1: Die Verwendung von einfachen oder doppelten Anführungszeichen ist für Objektliterale zulässig. Beachten Sie, dass die Anführungszeichen optional für Attributnamen verwendet werden und für Zeichenfolgenwerte obligatorisch sind. Das Objektliteral selbst ist nicht von Anführungszeichen umgeben.

  • F2: Objekte, die aus Literalen erstellt und mit JSON.parse () erstellt wurden, sind streng identisch. Diese beiden Objekte sind nach der Erstellung gleichwertig:

    var obj1 = { one: 1, "two": 2, "three": 3 };
    var obj2 = JSON.parse('{ "one": "1", "two": "2", "three": "3" }');

  • F3: In modernen Browsern JSON.parse()wird ein JS-Objekt aus einer JSON-kompatiblen Zeichenfolge erstellt. (jQuery hat auch eine äquivalente Methode, die für alle Browser verwendet werden kann).

min
quelle
7

Q1 - In JS müssen Sie nur Anführungszeichen verwenden, wenn der Schlüssel ein reserviertes Wort ist oder wenn es sich sonst um ein unzulässiges Token handelt. In JSON MÜSSEN Sie immer doppelte Anführungszeichen für Schlüsselnamen verwenden.

Q2 - das jsonStringist eine serialisierte Version des Eingabeobjekts ...

Q3 - die mit einem zu einem identisch aussehenden Objekt deserialisiert werden kannJSON.parse()

Alnitak
quelle
1

Die Frage hat bereits gute Antworten veröffentlicht. Ich füge unten ein kleines Beispiel hinzu, das das Verständnis der in den vorherigen Antworten gegebenen Erklärungen erleichtert. Kopieren Sie das Einfügen unter dem Snippet in Ihre IDE, um es besser zu verstehen, und kommentieren Sie die Zeile mit der invalid_javascript_object_no_quotesObjektdeklaration, um Fehler bei der Kompilierung zu vermeiden.

// Valid JSON strings(Observe quotes)
valid_json = '{"key":"value"}'
valid_json_2 = '{"key 1":"value 1"}' // Observe the space(special character) in key - still valid


//Valid Javascript object
valid_javascript_object_no_quotes = {
    key: "value"  //No special character in key, hence it is valid without quotes for key
}


//Valid Javascript object
valid_javascript_object_quotes = {
    key:"value",  //No special character in key, hence it is valid without quotes for key
    "key 1": "value 1" // Space (special character) present in key, therefore key must be contained in double quotes  - Valid
}



console.log(typeof valid_json) // string
console.log(typeof valid_javascript_object_no_quotes) // object
console.log(typeof valid_javascript_object_quotes) // object

//Invalid Javascript object 
invalid_javascript_object_no_quotes = {
   key 1: "value"//Space (special character) present in key, since key is not enclosed with double quotes "Invalid Javascript Object"
}
Shiva
quelle