显示对象的对象问题

object Object issue with display objects

本文关键字：对象 问题 显示      更新时间：2023-09-26

嘿，我在JS中有一个构造器对象，并希望看到所有的对象，为什么弹出[object object]像这里?MyCodeFiddle。

您可以遍历所有对象键并使用对象pers属性值填充新创建的persArr。

最后，在一个调用中，您可以获得所有属性值，用逗号persArr.join(', ')正确分隔:

function Person(first, last, age, eyecolor) {
  this.first = first;
  this.last = last;
  this.age = age;
  this.eyecolor = eyecolor;
}
var pers = new Person('John', 'Colin', 47, 'blue'),
    persArr = [];
Object.keys(pers).forEach(function(key) {
  persArr.push(pers[key]);
});
document.getElementById('data').innerHTML = persArr.join(', ');
#data {
  display: flex;
  width: 120px;
  height: 40px;
  border: 1px solid #000;
  background-color: #fff;
  justify-content: center;
  align-items: center;
}
<div id="data"></div>

更好的是，你可以在你的Person原型中创建一个新方法来正确地获取你想要的信息:

function Person(first, last, age, eyecolor) {
  this.first = first;
  this.last = last;
  this.age = age;
  this.eyecolor = eyecolor;
}
Person.prototype.getInfo = function() {
  return `${this.first} ${this.last}, ${this.age} years old and ${this.eyecolor} eyes.`;
}
var pers = new Person('John', 'Colin', 47, 'blue');
document.getElementById('person').innerHTML = pers.getInfo();
<div id="person"></div>

如果你想打印对象用于调试:

  • 控制台输出:

    console.log(pers);

  • 在html中使用JSON.stringify()作为字符串输出:

    document.getElementById('data').innerHTML = JSON.stringify(pers, null, 4);

直接给html显示[object object]的对象将显示，因为这是默认行为

如果你真的想在html中显示，有两种方法

1)迭代对象属性

for(var i in pers ) {
   document.getElementById("data").innerHTML =  document.getElementById("data").innerHTML + pers[i] + ',';
}
http://jsfiddle.net/upwLvhs5/2/

2)将对象字符串化为JSON

 document.getElementById("data").innerHTML = JSON.stringify(pers)
http://jsfiddle.net/upwLvhs5/3/

相关文章：