Oggetto Javascript Vs JSON


208

Voglio capire chiaramente le differenze di base tra l'oggetto Javascript e la stringa JSON.

Diciamo che creo la seguente variabile JS:

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

Q1. Il nome chiave / proprietà è valido sia con / senza virgolette? (ad es. "one" : 1)

Se sì, qual è la differenza?

Q2: se converto l'oggetto sopra usando JSON.stringify(testObject), qual è la differenza tra l'oggetto JS originale e JSON?

Sento che sono quasi uguali. Si prega di approfondire questo.

Q3: per l'analisi di una stringa JSON, è consigliato il metodo seguente?

var javascriptObj = JSON.parse(jSonString);

Risposte:


239
  1. Il nome chiave / proprietà è valido sia con / senza virgolette?

    L'unica volta che è necessario allegare una chiave tra virgolette quando si utilizza Object Notation letterale è dove la chiave contiene un carattere speciale ( if, :, -ecc). Vale la pena notare che una chiave in JSON deve essere racchiusa tra virgolette doppie .

  2. Se converto l'oggetto sopra in JSON usando var jSonString = JSON.stringify(testObject);, qual è la differenza tra 2 (JS obj e JSON)?

    JSON è un formato di interscambio di dati. È uno standard che descrive come elenchi ordinati e mappe non ordinate, stringhe booleane e numeri possano essere rappresentati in una stringa. Proprio come XML e YAML è un modo per trasmettere informazioni strutturate tra le lingue, JSON è lo stesso. Un oggetto JavaScript invece è un tipo fisico. Proprio come un array PHP, una classe / struttura C ++, un oggetto JavaScript è un tipo interno a JavaScript.

    Ecco una storia Immaginiamo di aver acquistato alcuni mobili da un negozio e di volerlo consegnare. Tuttavia l'unico rimasto disponibile è il modello di visualizzazione, ma si accetta di acquistarlo.

    Nel negozio, la cassettiera che hai acquistato è un oggetto vivente:

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

    Tuttavia, non puoi inviare una cassettiera nel post, quindi lo smantelli (leggi, stringi). Ora è inutile in termini di mobili. Ora è JSON. È in forma piatta.

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

    Quando lo ricevi, ricostruisci la cassettiera (leggi, analizzala). Ora è tornato in una forma di oggetto.

    Il motivo dietro JSON / XML e YAML è quello di consentire il trasferimento dei dati tra linguaggi di programmazione in un formato che entrambe le lingue partecipanti possano comprendere; non puoi dare direttamente a PHP o C ++ il tuo oggetto JavaScript; perché ogni lingua rappresenta un oggetto diversamente nascosto. Tuttavia, poiché abbiamo ristretto l'oggetto alla notazione JSON; cioè un modo standardizzato per rappresentare i dati, possiamo trasmettere la rappresentazione JSON dell'oggetto ad un altro linguaggio (C ++, PHP), possono ricreare l'oggetto JavaScript che avevamo nel loro stesso oggetto basato sulla rappresentazione JSON dell'oggetto.

    È importante notare che JSON non può rappresentare funzioni o date. Se si tenta di stringere un oggetto con un membro della funzione, la funzione verrà omessa dalla rappresentazione JSON. Una data verrà convertita in una stringa;

    JSON.stringify({
        foo: new Date(),
        blah: function () { 
            alert('hello');
        }
    }); // returns the string "{"foo":"2011-11-28T10:21:33.939Z"}"
  3. Per l'analisi di una stringa JSON, è consigliato il metodo seguente? var javascriptObj = JSON.parse(jSonString);

    Sì, ma i browser meno recenti non supportano JSON in modo nativo (IE <8) . Per supportare questi, è necessario includere json2.js.

    Se stai usando jQuery, puoi chiamare jQuery.parseJSON(), che userà JSON.parse()sotto il cofano se è supportato e altrimenti tornerà a un'implementazione personalizzata per analizzare l'input.


4
@testndtv ti manca il punto - anche se sulla carta (o sullo schermo) una stringa JSON e la visualizzazione di un oggetto JS possono sembrare uguali, non sono la stessa cosa. JSON è solo un modo per comprimere un oggetto in una stringa, quindi può essere trasferito da qualche parte e successivamente decompresso in un oggetto.
Alnitak,

1
@Matt analogia scadente IMHO - JSON non dovrebbe essere usato per serializzare un oggetto che ha metodi - solo per oggetti dati puri.
Alnitak,

1
Quindi se un oggetto JS ha dei metodi, la conversione in una stringa JSON lo ignorerà completamente ... come nel caso sopra getIn e getOut verrebbero completamente ignorati ... È così che funziona?
testndtv,

3
@Growler: di solito uso JSON se la "cosa" deve essere generata sul server e uso un file js se la "cosa" viene servita così com'è. L'altro grande fattore di differenziazione è se è necessario includere funzioni e / o date, poiché JSON non può rappresentarle, quindi è necessario ricorrere alla pubblicazione di un file JS. Se non sei ancora sicuro, sentiti libero di porlo come domanda separata su Stack Overflow (mostra un esempio del contenuto che devi fornire per rappresentare la tua finestra di dialogo) e dacci il link; Sarò felice di dare un'occhiata più da vicino!
Matt,

4
@Matt, signore, siete un genio del re! La tua spiegazione è precisa, chiara, concisa e di facile comprensione. Vorrei che fossi il mio mentore JavaScript / di programmazione.
FrankDraws,

30

Q1: quando si definiscono valori letterali oggetto in JavaScript, le chiavi possono includere virgolette o meno. Non vi è alcuna differenza se non che le virgolette consentono di specificare alcune chiavi che impedirebbero l'interpretazione dell'interprete se le si provasse a nudo. Ad esempio, se volevi una chiave che fosse solo un punto esclamativo, avresti bisogno di virgolette:

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

Nella maggior parte dei casi, tuttavia, è possibile omettere le virgolette attorno alle chiavi sui valori letterali degli oggetti.

Q2: JSON è letteralmente una rappresentazione di stringhe. È solo una stringa. Quindi, considera questo:

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

Poiché testObjectè un oggetto reale, è possibile richiamare le proprietà su di esso e fare qualsiasi altra cosa possibile con gli oggetti:

testObject.hello => "world"

D'altra parte, jsonStringè solo una stringa:

jsonString.hello => undefined

Nota un'altra differenza: in JSON, tutte le chiavi devono essere quotate. Ciò contrasta con i letterali degli oggetti, in cui le virgolette possono di solito essere omesse secondo la mia spiegazione in Q1.

Q3. Puoi analizzare una stringa JSON usando JSON.parse, e questo è generalmente il modo migliore per farlo (se fornito dal browser o da un framework). Puoi anche solo usarlo evalpoiché JSON è un codice javascript valido, ma il primo metodo è consigliato per una serie di motivi (eval ha molti brutti problemi associati ad esso).


9

Problemi risolti da JSON

Supponiamo che tu voglia scambiare normali oggetti JavaScript tra due computer e impostare due regole:

  • I dati trasmessi devono essere una stringa regolare.
  • Solo gli attributi possono essere scambiati, i metodi non vengono trasmessi.

Ora crei due oggetti sul primo host:

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

Come puoi convertire quegli oggetti in stringhe per la trasmissione al secondo host?

  • Per il primo oggetto, è possibile inviare questa stringa ottenuta dalla definizione letterale '{ one: 1,"two":2,"three":3 }', ma in realtà non è possibile leggere il valore letterale nella parte di script del documento (almeno non facilmente). Quindi obj1e obj2deve essere effettivamente elaborato allo stesso modo.
  • È necessario enumerare tutti gli attributi e il loro valore e creare una stringa simile all'oggetto letterale.

JSON è stato creato come soluzione alle esigenze appena discusse: è un insieme di regole per creare una stringa equivalente a un oggetto elencando tutti gli attributi e i valori (i metodi vengono ignorati).

JSON normalizza l'uso di virgolette doppie per nomi e valori di attributi.

Ricorda che JSON è solo un insieme di regole (uno standard).

Quanti oggetti JSON vengono creati?

Solo uno, viene creato automaticamente dal motore JS.

I moderni motori JavaScript trovati nei browser hanno un oggetto nativo, chiamato anche JSON. Questo oggetto JSON è in grado di:

  • Decodifica una stringa creata usando lo standard JSON, usando JSON.parse (stringa). Il risultato è un normale oggetto JS con attributi e valori trovati nella stringa JSON.

  • Codifica gli attributi / i valori di un normale oggetto JS usando JSON.stringify (). Il risultato è una stringa conforme all'insieme di regole JSON.

Il (singolo) oggetto JSON è simile a un codec, la sua funzione è quella di codificare e decodificare.

Nota che:

  • JSON.parse () non crea un oggetto JSON, crea un normale oggetto JS, non c'è differenza tra un oggetto creato usando un oggetto letterale e un oggetto creato da JSON.parse () da una stringa conforme a JSON.

  • Esiste un solo oggetto JSON, che viene utilizzato per tutte le conversioni.

Tornando alle domande :

  • Q1: L'uso di virgolette singole è consentito per letterali di oggetti. Si noti che le virgolette vengono utilizzate facoltativamente per i nomi degli attributi e sono obbligatorie per i valori di stringa. L'oggetto letterale stesso non è circondato da virgolette.

  • Q2: Gli oggetti creati da valori letterali e usando JSON.parse () sono strettamente gli stessi. Questi due oggetti sono equivalenti dopo la creazione:

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

  • D3: Nei browser moderni JSON.parse()viene utilizzato per creare un oggetto JS da una stringa conforme a JSON. (jQuery ha anche un metodo equivalente che può essere utilizzato per tutti i browser).


7

Q1 - in JS devi usare le virgolette solo se la chiave è una parola riservata o se sarebbe altrimenti un token illegale. In JSON DEVI sempre usare le virgolette doppie sui nomi delle chiavi.

Q2 - the jsonStringè una versione serializzata dell'oggetto di input ...

Q3 - che può essere deserializzato con un oggetto dall'aspetto identico usandoJSON.parse()


1

La domanda ha già buone risposte pubblicate, sto aggiungendo un piccolo esempio di seguito, che renderà più facile la comprensione delle spiegazioni fornite nelle risposte precedenti. Copia incolla sotto lo snippet sul tuo IDE per una migliore comprensione e commenta la riga contenente la invalid_javascript_object_no_quotesdichiarazione dell'oggetto per evitare errori di compilazione.

// 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"
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.