Objeto Javascript Vs JSON


208

Quiero entender las diferencias básicas claramente entre el objeto Javascript y la cadena JSON.

Digamos que creo la siguiente variable JS:

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

Q1. ¿El nombre de clave / propiedad es válido tanto con / sin comillas? (por ejemplo "one" : 1)

En caso afirmativo, ¿cuál es la diferencia?

P2: Si convierto el objeto anterior usando JSON.stringify(testObject), ¿cuál es la diferencia entre el objeto JS original y el JSON?

Siento que son casi lo mismo. Por favor explique sobre esto.

P3: Para analizar una cadena JSON, ¿se recomienda el siguiente método?

var javascriptObj = JSON.parse(jSonString);

Respuestas:


239
  1. ¿El nombre de clave / propiedad es válido tanto con / sin comillas?

    La única vez que necesita para encerrar una clave entre comillas cuando se utiliza la notación literal de objetos es donde está la llave contiene un carácter especial ( if, :, -etc.). Vale la pena señalar que una clave en JSON debe estar entre comillas dobles .

  2. Si convierto el objeto anterior a JSON usando var jSonString = JSON.stringify(testObject);, ¿cuál es la diferencia entre el 2 (JS obj y JSON)?

    JSON es un formato de intercambio de datos. Es un estándar que describe cómo las listas ordenadas y los mapas desordenados, las cadenas booleanas y los números se pueden representar en una cadena. Al igual que XML y YAML es una forma de pasar información estructurada entre idiomas, JSON es lo mismo. Un objeto JavaScript, por otro lado, es de tipo físico. Al igual que una matriz PHP, una clase / estructura C ++, un objeto JavaScript es un tipo interno de JavaScript.

    Aquí hay una historia. Imaginemos que ha comprado algunos muebles de una tienda y quiere que se los entreguen. Sin embargo, el único que queda en stock es el modelo de pantalla, pero acepta comprarlo.

    En la tienda, la cómoda que ha comprado es un objeto vivo:

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

    Sin embargo, no puede enviar una cómoda en la publicación, por lo que lo desmantela (léalo, colóquelo en cadena). Ahora es inútil en términos de muebles. Ahora es JSON. Está en forma de paquete plano.

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

    Cuando lo recibe, reconstruye la cómoda (léalo, analícelo). Ahora está de vuelta en forma de objeto.

    La razón detrás de JSON / XML y YAML es permitir que los datos se transfieran entre lenguajes de programación en un formato que ambos lenguajes participantes puedan entender; no puede darle a PHP o C ++ su objeto JavaScript directamente; porque cada idioma representa un objeto diferente bajo el capó. Sin embargo, porque hemos encadenado el objeto en notación JSON; es decir, una forma estandarizada de representar datos, podemos transmitir la representación JSON del objeto a otro idioma (C ++, PHP), pueden recrear el objeto JavaScript que teníamos en su propio objeto basado en la representación JSON del objeto.

    Es importante tener en cuenta que JSON no puede representar funciones o fechas. Si intenta stringificar un objeto con un miembro de función, la función se omitirá de la representación JSON. Una fecha se convertirá en una cadena;

    JSON.stringify({
        foo: new Date(),
        blah: function () { 
            alert('hello');
        }
    }); // returns the string "{"foo":"2011-11-28T10:21:33.939Z"}"
  3. Para analizar una cadena JSON, ¿se recomienda el siguiente método? var javascriptObj = JSON.parse(jSonString);

    Sí, pero los navegadores más antiguos no son compatibles con JSON de forma nativa (IE <8) . Para apoyar esto, debe incluir json2.js.

    Si está utilizando jQuery, puede llamar jQuery.parseJSON(), que se usará JSON.parse()debajo del capó si es compatible y, de lo contrario, recurrirá a una implementación personalizada para analizar la entrada.


44
@testndtv te estás perdiendo el punto, aunque en el papel (o en la pantalla) una cadena JSON y la visualización de un objeto JS pueden tener el mismo aspecto , no son lo mismo. JSON es solo una forma de empaquetar un objeto en una cadena, por lo que puede transferirse a algún lugar y luego descomprimirse nuevamente en un objeto.
Alnitak

1
@Matt, analogía deficiente en mi humilde opinión: JSON no debe usarse para serializar un objeto que tiene métodos, solo para objetos de datos puros.
Alnitak

1
Entonces, si un objeto JS tiene métodos, la conversión en una cadena JSON lo ignorará por completo ... como en el caso anterior, getIn y getOut serían completamente ignorados ... ¿Es así como funciona?
testndtv

3
@Growler: usualmente uso JSON si la "cosa" necesita ser generada en el servidor, y uso un archivo js si la "cosa" se sirve tal cual. El otro gran diferenciador es si necesita incluir funciones y / o fechas, ya que JSON no puede representarlas, por lo que debe recurrir a servir un archivo JS. Si aún no está seguro, siéntase libre de hacerla como una pregunta por separado sobre Stack Overflow (muestre un ejemplo del contenido que debe proporcionar para representar su diálogo) y solicíteme el enlace; ¡Estaré encantado de echar un vistazo más de cerca!
Matt

44
@ Matt, señor, ¡eres un genio del rey! Su explicación es acertada, clara, concisa y fácil de entender. Desearía que fueras mi mentor de programación / JavaScript.
FrankDraws

30

P1: Al definir literales de objeto en javascript, las claves pueden incluir comillas o no. No hay diferencia, excepto que las comillas le permiten especificar ciertas claves que causarían que el intérprete no se analizara si las probara al descubierto. Por ejemplo, si quisieras una clave que fuera solo un signo de exclamación, necesitarías comillas:

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

Sin embargo, en la mayoría de los casos, puede omitir las comillas alrededor de las claves en los literales de objeto.

P2: JSON es literalmente una representación de cadena. Es solo una cuerda. Entonces, considera esto:

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

Como testObjectes un objeto real, puede invocar propiedades en él y hacer cualquier otra cosa que pueda hacer con los objetos:

testObject.hello => "world"

Por otro lado, jsonStringes solo una cadena:

jsonString.hello => undefined

Tenga en cuenta otra diferencia: en JSON, todas las claves deben ser citadas. Eso contrasta con los literales de objetos, donde las citas generalmente se pueden omitir según mi explicación en Q1.

Q3. Puede analizar una cadena JSON mediante el uso JSON.parse, y esta es generalmente la mejor manera de hacerlo (si el navegador o un marco lo proporciona). También puede usarlo evalya que JSON es un código de JavaScript válido, pero el método anterior se recomienda por varias razones (eval tiene muchos problemas desagradables asociados con él).


9

Problemas resueltos por JSON

Supongamos que desea intercambiar objetos JavaScript normales entre dos computadoras y establece dos reglas:

  • Los datos transmitidos deben ser una cadena regular.
  • Solo se pueden intercambiar atributos, los métodos no se transmiten.

Ahora crea dos objetos en el primer host:

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

¿Cómo puede convertir esos objetos en cadenas para su transmisión al segundo host?

  • Para el primer objeto, puede enviar esta cadena obtenida de la definición literal '{ one: 1,"two":2,"three":3 }', pero en realidad no puede leer el literal en la parte de secuencia de comandos del documento (al menos no fácilmente). Entonces, obj1y en obj2realidad debe procesarse de la misma manera.
  • Debe enumerar todos los atributos y su valor, y construir una cadena similar al literal del objeto.

JSON se ha creado como una solución a las necesidades que acabamos de comentar: es un conjunto de reglas para crear una cadena equivalente a un objeto enumerando todos los atributos y valores (los métodos se ignoran).

JSON normaliza el uso de comillas dobles para nombres y valores de atributos.

Recuerde que JSON es solo un conjunto de reglas (un estándar).

¿Cuántos objetos JSON se crean?

Solo uno, es creado automáticamente por el motor JS.

Los motores JavaScript modernos que se encuentran en los navegadores tienen un objeto nativo, también llamado JSON. Este objeto JSON puede:

  • Decodifica una cadena construida usando el estándar JSON, usando JSON.parse (cadena). El resultado es un objeto JS normal con atributos y valores encontrados en la cadena JSON.

  • Codifique los atributos / valores de un objeto JS normal utilizando JSON.stringify (). El resultado es una cadena que cumple con el conjunto de reglas JSON.

El objeto JSON (único) es similar a un códec, su función es codificar y decodificar.

Tenga en cuenta que:

  • JSON.parse () no crea un objeto JSON, crea un objeto JS normal, no hay diferencia entre un objeto creado usando un objeto literal y un objeto creado por JSON.parse () a partir de una cadena compatible con JSON.

  • Solo hay un objeto JSON, que se utiliza para todas las conversiones.

Volviendo a las preguntas :

  • P1: Se permite el uso de comillas simples o dobles para literales de objeto. Tenga en cuenta que las comillas se usan opcionalmente para los nombres de los atributos y son obligatorias para los valores de cadena. El objeto literal en sí no está rodeado de comillas.

  • P2: Los objetos creados a partir de literales y que utilizan JSON.parse () son estrictamente iguales. Estos dos objetos son equivalentes después de la creación:

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

  • P3: En los navegadores modernos JSON.parse()se usa para crear un objeto JS a partir de una cadena compatible con JSON. (jQuery también tiene un método equivalente que se puede usar para todos los navegadores).


7

Q1: en JS solo necesita usar comillas si la clave es una palabra reservada o si de lo contrario sería un token ilegal. En JSON, DEBE usar siempre comillas dobles en los nombres clave.

Q2: jsonStringes una versión serializada del objeto de entrada ...

Q3 - que puede ser deserializado a un objeto de aspecto idéntico usandoJSON.parse()


1

La pregunta ya tiene buenas respuestas publicadas, estoy agregando un pequeño ejemplo a continuación, que facilitará la comprensión de las explicaciones dadas en las respuestas anteriores. Copie pegar el fragmento debajo de su IDE para comprender mejor y comentar la línea que contiene la invalid_javascript_object_no_quotesdeclaración del objeto para evitar errores de tiempo de compilación.

// 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"
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.