Mga Nagpapakita ng Object ng JavaScript

Paano maipakita ang JavaScript object?

Nakapagpapakita ng JavaScript object ang output [object Object].

实例

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

亲自试一试

Ang mga karaniwang solusyon sa pagpapakita ng JavaScript object ay:

  • Ipakita ang attribute ng object ayon sa pangalan
  • Ipakita ang attribute ng object gamit ang loop
  • Ipakita ang object gamit ang Object.values()
  • Ipakita ang object gamit ang JSON.stringify()

Ipakita ang attribute ng object

Ang mga attribute ng object ay puwedeng ipakita bilang string:

实例

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

亲自试一试

Ipakita ang object sa loop

Maaaring kolekta ang mga attribute ng object sa loop:

实例

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

亲自试一试

Kailangan mong gamitin ang person[x] sa loop.

person.x ay hindi gagamitin (kasi x ay isang variable).

Gumamit ng Object.values()

Gumamit ng Object.values(), anumang JavaScript object ay puwedeng ihalalang array:

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

myArray Ito ay naging JavaScript array na puwedeng ipakita:

实例

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

亲自试一试

Mula noong 2016, lahat ng pangunahing browser ay sumusuporta Object.values().

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

Gamitin ang JSON.stringify()

Anumang JavaScript object ay puwedeng gamitin ang JavaScript function JSON.stringify() Gawin ang pagbabagong halaga (pag-convert sa string):

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

myString Ito ay naging JavaScript string na puwedeng ipakita:

实例

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

亲自试一试

结果将是一个遵循 JSON 标记法的字符串：

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

JSON.stringify() Nakabahagi sa JavaScript, lahat ng pangunahing browser ay sumusuporta.

Pagbagong halaga ng petsa bilang string

JSON.stringify Ito ay pagbabagong halaga ng petsa sa string:

实例

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

亲自试一试

函数字符串化

JSON.stringify 不会对函数进行字符串化：

实例

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

亲自试一试

如果在字符串化之前将函数转换为字符串，这可以是“固定的”。

实例

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

亲自试一试

数组字符串化

也可以对 JavaScript 数组进行字符串化：

实例

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

亲自试一试

结果将是一个遵循 JSON 标记法的字符串：

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