Objeto Javascript Vs JSON


208

Quero entender claramente as diferenças básicas entre o objeto Javascript e a string JSON.

Digamos que eu crie a seguinte variável JS:

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

Q1 O nome da chave / propriedade é válido com / sem aspas? (por exemplo "one" : 1)

Se sim, qual é a diferença?

P2: Se eu converter o objeto acima usando JSON.stringify(testObject), qual é a diferença entre o objeto JS original e o JSON?

Eu sinto que eles são quase os mesmos. Por favor, elabore isso.

T3: para analisar uma string JSON, o método abaixo é recomendado?

var javascriptObj = JSON.parse(jSonString);

Respostas:


239
  1. O nome da chave / propriedade é válido com / sem aspas?

    A única vez que você precisa colocar uma chave entre aspas quando usando a notação literal de objeto é onde a chave contém um caractere especial ( if, :, -etc). Vale ressaltar que uma chave no JSON deve estar entre aspas duplas .

  2. Se eu converter o objeto acima em JSON usando var jSonString = JSON.stringify(testObject);, qual é a diferença entre os 2 (JS obj e JSON)?

    JSON é um formato de intercâmbio de dados. É um padrão que descreve como listas ordenadas e mapas não ordenados, strings booleanos e números podem ser representados em uma string. Assim como XML e YAML é uma maneira de transmitir informações estruturadas entre idiomas, o JSON é o mesmo. Um objeto JavaScript, por outro lado, é do tipo físico. Assim como uma matriz PHP, uma classe / estrutura C ++, um objeto JavaScript é um tipo interno ao JavaScript.

    Aqui está uma história. Vamos imaginar que você comprou alguns móveis de uma loja e deseja que eles sejam entregues. No entanto, o único que resta em estoque é o modelo de exibição, mas você concorda em comprá-lo.

    Na loja, a cômoda que você comprou é um objeto vivo:

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

    No entanto, você não pode enviar uma cômoda na postagem, então você a desmonta (leia, especifique). Agora é inútil em termos de móveis. Agora é JSON. Está em forma de embalagem plana.

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

    Ao recebê-lo, você reconstrói as cômodas (leia, analise). Agora está de volta em uma forma de objeto.

    O motivo por trás do JSON / XML e YAML é permitir que os dados sejam transferidos entre linguagens de programação em um formato que ambas as línguas participantes possam entender; você não pode fornecer diretamente ao PHP ou C ++ seu objeto JavaScript; porque cada idioma representa um objeto de forma diferente por baixo do capô. No entanto, porque codificamos o objeto na notação JSON; ou seja, uma maneira padronizada de representar dados, podemos transmitir a representação JSON do objeto para outro idioma (C ++, PHP), eles podem recriar o objeto JavaScript que tínhamos em seu próprio objeto com base na representação JSON do objeto.

    É importante observar que o JSON não pode representar funções ou datas. Se você tentar especificar um objeto com um membro da função, a função será omitida da representação JSON. Uma data será convertida em uma sequência;

    JSON.stringify({
        foo: new Date(),
        blah: function () { 
            alert('hello');
        }
    }); // returns the string "{"foo":"2011-11-28T10:21:33.939Z"}"
  3. Para analisar uma string JSON, o método abaixo é recomendado? var javascriptObj = JSON.parse(jSonString);

    Sim, mas navegadores mais antigos não suportam JSON nativamente (IE <8) . Para apoiar isso, você deve incluir json2.js.

    Se você estiver usando jQuery, poderá chamar jQuery.parseJSON(), que usará JSON.parse()sob o capô se for suportado e, caso contrário , utilizará uma implementação customizada para analisar a entrada.


4
@testndtv você está perdendo o objetivo - embora no papel (ou na tela) uma string JSON e a exibição de um objeto JS possam parecer iguais, elas não são a mesma coisa. O JSON é apenas uma maneira de empacotar um objeto em uma sequência, para que possa ser transferido para algum lugar e depois descompactado novamente em um objeto.
Alnitak

1
@ Analogia pobre do IMHO - JSON não deve ser usado para serializar um objeto que possui métodos - apenas para objetos de dados puros.
Alnitak

1
Portanto, se um objeto JS tiver métodos, a conversão em uma string JSON o ignorará completamente ... como no caso acima, getIn e getOut seriam completamente ignorados ... É assim que funciona?
Testevtv 28/11

3
@ Growler: geralmente eu uso JSON se a "coisa" precisa ser gerada no servidor e uso um arquivo js se a "coisa" é apenas servida como está. O outro grande diferencial é se você precisa incluir funções e / ou datas, pois o JSON não pode representá-las, portanto, você deve recorrer à veiculação de um arquivo JS. Se você ainda não tiver certeza, sinta-se à vontade para fazer isso como uma pergunta separada no Stack Overflow (mostre um exemplo do conteúdo que você precisa fornecer para representar sua caixa de diálogo) e me mostre o link; Ficarei feliz em dar uma olhada!
Matt

4
@ Matt Você senhor, é um gênio do rei! Sua explicação é clara, concisa e fácil de entender. Eu gostaria que você fosse meu mentor de JavaScript / programação.
precisa saber é o seguinte

30

T1: Ao definir literais de objetos em javascript, as chaves podem incluir aspas ou não. Não há diferença, exceto que as aspas permitem especificar determinadas chaves que causariam uma falha na análise do intérprete se você as tentasse sem o uso. Por exemplo, se você quiser uma chave que seja apenas um ponto de exclamação, precisará de aspas:

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

Na maioria dos casos, você pode omitir as aspas em torno das chaves nos literais de objetos.

P2: JSON é literalmente uma representação de string. É apenas uma corda. Então, considere isso:

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

Como testObjecté um objeto real, você pode chamar propriedades e fazer qualquer outra coisa com os objetos:

testObject.hello => "world"

Por outro lado, jsonStringé apenas uma string:

jsonString.hello => undefined

Observe uma outra diferença: no JSON, todas as chaves devem ser citadas. Isso contrasta com literais de objeto, onde as aspas geralmente podem ser omitidas conforme minha explicação no primeiro trimestre.

Q3 Você pode analisar uma cadeia JSON usando JSON.parse, e essa geralmente é a melhor maneira de fazê-lo (se o navegador ou uma estrutura fornecer). Você também pode usar apenas evalporque o JSON é um código javascript válido, mas o método anterior é recomendado por vários motivos (o eval tem muitos problemas desagradáveis ​​associados a ele).


9

Problemas resolvidos pelo JSON

Digamos que você queira trocar objetos JavaScript regulares entre dois computadores e defina duas regras:

  • Os dados transmitidos devem ser uma sequência regular.
  • Somente atributos podem ser trocados, métodos não são transmitidos.

Agora você cria dois objetos no primeiro host:

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

Como você pode converter esses objetos em seqüências de caracteres para transmissão ao segundo host?

  • Para o primeiro objeto, você pode enviar essa sequência obtida da definição literal '{ one: 1,"two":2,"three":3 }', mas, na verdade, não é possível ler a literal na parte do script do documento (pelo menos não facilmente). assimobj1 e obj2deve realmente ser processado da mesma maneira.
  • Você precisa enumerar todos os atributos e seus valores e criar uma sequência semelhante ao literal do objeto.

O JSON foi criado como uma solução para as necessidades discutidas: É um conjunto de regras para criar uma sequência equivalente a um objeto, listando todos os atributos e valores (os métodos são ignorados).

O JSON normaliza o uso de aspas duplas para nomes e valores de atributos.

Lembre-se de que o JSON é apenas um conjunto de regras (um padrão).

Quantos objetos JSON são criados?

Somente um, ele é criado automaticamente pelo mecanismo JS.

Os mecanismos JavaScript modernos encontrados nos navegadores têm um objeto nativo, também chamado JSON. Este objeto JSON é capaz de:

  • Decodifique uma sequência criada usando o padrão JSON, usando JSON.parse (sequência). O resultado é um objeto JS comum com atributos e valores encontrados na cadeia JSON.

  • Codifique atributos / valores de um objeto JS comum usando JSON.stringify (). O resultado é uma cadeia compatível com o conjunto de regras JSON.

O objeto (único) JSON é semelhante a um codec, sua função é codificar e decodificar.

Observe que:

  • JSON.parse () não cria um objeto JSON, ele cria um objeto JS regular, não há diferença entre um objeto criado usando um literal de objeto e um objeto criado por JSON.parse () a partir de uma string compatível com JSON.

  • Existe apenas um objeto JSON, usado para todas as conversões.

Voltando às perguntas :

  • Q1: O uso de aspas duplas é permitido para literais de objetos. Observe que as aspas são usadas opcionalmente para nomes de atributos e são obrigatórias para valores de sequência. O literal do objeto em si não está entre aspas.

  • P2: Objetos criados a partir de literais e usando JSON.parse () são estritamente os mesmos. Esses dois objetos são equivalentes após a criação:

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

  • T3: em navegadores modernos, JSON.parse()é usado para criar um objeto JS a partir de uma sequência compatível com JSON. (O jQuery também possui um método equivalente que pode ser usado para todos os navegadores).


7

Q1 - em JS, você só precisa usar aspas se a chave for uma palavra reservada ou se for um token ilegal. No JSON, você DEVE sempre usar aspas duplas nos nomes das chaves.

Q2 - jsonStringé uma versão serializada do objeto de entrada ...

Q3 - que pode ser desserializado para um objeto idêntico usandoJSON.parse()


1

A pergunta já tem boas respostas postadas, estou adicionando um pequeno exemplo abaixo, que facilitará a compreensão das explicações dadas nas respostas anteriores. Copie e cole o snippet abaixo no seu IDE para entender melhor e comentar a linha que contém a invalid_javascript_object_no_quotesdeclaração do objeto para evitar erros de tempo de compilação.

// 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"
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.