JavaScript:n näyttöobjekti

Kuinka näyttää JavaScript-objekti?

Näyttää JavaScript-objekti tulostaa [object Object].

Esimerkki

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

Kokeile itse

Yleisiä ratkaisuja JavaScript-objektien näyttämiseen ovat:

  • Näytä objektin ominaisuudet nimellä
  • Näytä objektin ominaisuudet silmukan sisällä
  • Näytä objekti Object.values() -funktiolla
  • Näytä objekti JSON.stringify() -funktiolla

Näytä objektin ominaisuudet

Objektin ominaisuudet voidaan näyttää merkkijonona:

Esimerkki

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

Kokeile itse

Näytä objekti silmukan sisällä

Voit kerätä objektin ominaisuudet silmukan sisällä:

Esimerkki

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

Kokeile itse

Sinun täytyy käyttää person[x] silmukan sisällä.

person.x ei toimi (koska x on muuttuja).

Käyttämällä Object.values()

Käyttämällä Object.values(), mikä tahansa JavaScript-objekti voidaan muuntaa tauluksi:

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

myArray Tämä on nyt JavaScript-taulukko, joka voidaan näyttää:

Esimerkki

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

Kokeile itse

Vuodesta 2016 lähtien kaikki tärkeimmät selaimet tukevat sitä Object.values().

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

Käyttämällä JSON.stringify()

Mikä tahansa JavaScript-objekti voi käyttää JavaScript-funktiota JSON.stringify() Muunna merkkijonoksi (muunna merkkijonoksi):

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

myString Tämä on nyt JavaScript-merkkijono, joka voidaan näyttää:

Esimerkki

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

Kokeile itse

Tuloksena on merkkijono, joka noudattaa JSON-merkintää:

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

JSON.stringify() Sisältyy JavaScriptiin, kaikki suositut selaimet tukevat sitä.

Päivämäärän muuntaminen merkkijonoksi

JSON.stringify Muunna päivämäärä merkkijonoksi:

Esimerkki

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

Kokeile itse

Funktioiden stringifiointi

JSON.stringify Funktiot eivät muuteta merkkijonoksi:

Esimerkki

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

Kokeile itse

Jos muunnet funktiot merkkijonoksi ennen stringifiointia, se voi olla "kiinteä".

Esimerkki

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

Kokeile itse

Tyyppinen muunnos

Voit myös muuntaa JavaScript-tyhmän merkkijonoksi:

Esimerkki

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

Kokeile itse

Tuloksena on merkkijono, joka noudattaa JSON-merkintää:

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