Objetos visibles de JavaScript

¿Cómo se muestra un objeto JavaScript?

Se mostrará cómo se exporta un objeto JavaScript [object Object].

Ejemplo

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
document.getElementById("demo").innerHTML = person;

Prueba personalmente

Algunas soluciones comunes para mostrar objetos JavaScript son:

  • Mostrar propiedades del objeto por nombre
  • Mostrar propiedades del objeto en bucle
  • Mostrar objeto usando Object.values()
  • Mostrar objeto usando JSON.stringify()

Mostrar propiedades del objeto

Las propiedades del objeto se pueden mostrar como cadenas:

Ejemplo

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;

Prueba personalmente

Mostrar el objeto en el bucle

Se pueden recopilar las propiedades del objeto en el bucle:

Ejemplo

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;

Prueba personalmente

Debe usar person[x] en el bucle.

person.x no tendrá efecto (porque x es una variable).

usando Object.values()

usando Object.values(), cualquier objeto JavaScript puede ser convertido en un array:

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
const myArray = Object.values(person);

myArray Ahora es un array de JavaScript, se puede mostrar:

Ejemplo

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;

Prueba personalmente

Desde 2016, todos los navegadores principales lo admiten Object.values().

Chrome IE Firefox Safari Opera
54 (2016) 14 (2016) 47 (2016) 10 (2016) 41 (2016)

usando JSON.stringify()

Cualquier objeto JavaScript puede usar la función JavaScript JSON.stringify() Realizar la cadena (convertir a cadena):

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let myString = JSON.stringify(person);

myString Ahora es una cadena de JavaScript, se puede mostrar:

Ejemplo

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Prueba personalmente

Los resultados serán una cadena que sigue las marcas JSON:

{"name":"Bill","age":19,"city":"Seattle"}

JSON.stringify() Incluido en JavaScript, todos los navegadores principales lo admiten.

Cadena de fecha

JSON.stringify Convertir la fecha en una cadena:

Ejemplo

const person = {
  name: "Bill",
  today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Prueba personalmente

Serialización de función

JSON.stringify No se serializarán las funciones:

Ejemplo

const person = {
  name: "Bill",
  age: function () {return 19;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Prueba personalmente

Si se convierte la función a cadena antes de la serialización, esto puede ser "fijo".

Ejemplo

const person = {
  name: "Bill",
  age: function () {return 19;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

Prueba personalmente

Serialización de array

También se puede serializar un array de JavaScript en cadena:

Ejemplo

const arr = ["Bill", "Steve", "Elon", "David"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;

Prueba personalmente

Los resultados serán una cadena que sigue las marcas JSON:

["Bill","Steve","Elon","David"]