JavaScript Display Object

Hoe toont men JavaScript objecten?

Weergeven van JavaScript objecten zal output genereren [object Object].

Voorbeeld

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

Probeer het zelf uit

Enkele veelvoorkomende oplossingen voor het weergeven van JavaScript-objects zijn:

  • Toon objecteigenschappen op naam
  • Toon objecteigenschappen in lus
  • Gebruik Object.values() om een object weer te geven
  • Gebruik JSON.stringify() om een object weer te geven

Toon objecteigenschappen

De eigenschappen van een object kunnen worden weergegeven als string:

Voorbeeld

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

Probeer het zelf uit

Toon object in lus

U kunt de eigenschappen van een object verzamelen in een lus:

Voorbeeld

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

Probeer het zelf uit

U moet person[x] gebruiken in een lus.

person.x zal niet werken (want x is een variabele).

Gebruik Object.values()

Door gebruik te maken van Object.values()Elke JavaScript-object kan worden geconverteerd naar een array:

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

myArray Nu een JavaScript-array, kan worden weergegeven:

Voorbeeld

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

Probeer het zelf uit

Sinds 2016 ondersteunen alle belangrijke browsers. Object.values().

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

Gebruik JSON.stringify()

Elke JavaScript-object kan een JavaScript-functie gebruiken JSON.stringify() Gebruik de stringificatie (converteer naar string):

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

myString Nu een JavaScript-string, kan worden weergegeven:

Voorbeeld

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

Probeer het zelf uit

Het resultaat zal een string zijn die voldoet aan de JSON-markering:

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

JSON.stringify() Ingebouwd in JavaScript, ondersteund door alle主流 browsers.

Datumstringeren

JSON.stringify Converteer de datum naar een string:

Voorbeeld

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

Probeer het zelf uit

Functie-stringificeren

JSON.stringify Functies worden niet stringificeren:

Voorbeeld

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

Probeer het zelf uit

Als de functie voor stringificatie wordt omgezet in een string, kan dit "vast" zijn.

Voorbeeld

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

Probeer het zelf uit

Array-stringificeren

Het is ook mogelijk om een JavaScript-array te stringificeren:

Voorbeeld

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

Probeer het zelf uit

Het resultaat zal een string zijn die voldoet aan de JSON-markering:

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