Question

我在学校里遇到了一些任务，我对编码非常陌生。我的目标是提出名字FirstName＆amp;带有onclick的span中所有所有变量的LastName。但问题是循环似乎返回[object Object]而不是每个新Person的实际值。它目前看起来像这样：

（我只是在没有任何Jquery帮助的情况下使用纯Javascript或者使用Json来使用此代码）

function Person(firstName, lastName, adress, phone) {
    this.FirstName = firstName;
    this.LastName = lastName;
    this.Adress = adress;
    this.Phone = phone;
}


    var p1 = new Person("Anton", "Andersson","Nonstans", "1324565451");
    var p2 = new Person("Felix", "Berge", "Krillan", "1234567889");
    var p3 = new Person("Oscar", "Rells", "Essingen", "1234567888");
    var p4 = new Person("Theodor", "Johansson", "Hemma", "1234567810");
    var p5 = new Person("Jacob", "Lagstrom", "Ensam 78", "1234567892");



    var Persons = [p1, p2, p3, p4, p5];
    for (var i = 0; i < Persons.length; i++) {
        var personList = document.getElementById("personLista")
        personList.textContent += Persons [i] + ", ";
    }

Answer 1

[object Object]只是整个对象的字符串表示形式，因为您将其与此字符串连接起来是", "。

如果要查看对象中的数据，则需要显式访问该对象的属性：

// JS convention is to use PascalCase for constructor functions
// as you are correctly doing here:
function Person(firstName, lastName, adress, phone) {
    this.FirstName = firstName;
    this.LastName = lastName;
    this.Adress = adress;
    this.Phone = phone;
}

var p1 = new Person("Anton", "Andersson","Nonstans", "1324565451");
var p2 = new Person("Felix", "Berge", "Krillan", "1234567889");
var p3 = new Person("Oscar", "Rells", "Essingen", "1234567888");
var p4 = new Person("Theodor", "Johansson", "Hemma", "1234567810");
var p5 = new Person("Jacob", "Lagstrom", "Ensam 78", "1234567892");

// But, JS convention is to use camelCase for all variables
var persons = [p1, p2, p3, p4, p5];

// Get this reference once, outside of the loop instead of each
// time you iterate over the array
var personList = document.getElementById("personLista");

for (var i = 0; i < persons.length; i++) {
  // You need to access some aspect of the object (FirstName 
  // and LastName in this example) not the entire object itself:
  personList.innerHTML += "<li>" + persons[i].FirstName + " " + persons[i].LastName + "</li>";
}

<ul id="personLista"></ul>

你可能还没有在你的作业中得到这个，但在ECMAScript 6（2015年推出并且今天大多数现代浏览器都支持）中，数组有一个.forEach()方法，可以更容易地迭代它们的内容。这是一个首先在数组上循环但然后枚举数组中每个对象的属性的示例：

function Person(firstName, lastName, adress, phone) {
    this.FirstName = firstName;
    this.LastName = lastName;
    this.Adress = adress;
    this.Phone = phone;
}

var p1 = new Person("Anton", "Andersson","Nonstans", "1324565451");
var p2 = new Person("Felix", "Berge", "Krillan", "1234567889");
var p3 = new Person("Oscar", "Rells", "Essingen", "1234567888");
var p4 = new Person("Theodor", "Johansson", "Hemma", "1234567810");
var p5 = new Person("Jacob", "Lagstrom", "Ensam 78", "1234567892");

var persons = [p1, p2, p3, p4, p5];

// Get this reference once, outside of the loop instead of each
// time you iterate over the array
var personList = document.getElementById("personLista");

// Loop over the array of people
persons.forEach(function(per){

  // Beginning of a string of HTML that will be outputted at the end:
  var personString = "<li>" 

  // Now enumerate all the properties of the person
  for(var prop in per){
    personString += per[prop] + ", ";
  }
  personString += "</li>"
  personList.innerHTML += personString;
});

<ul id="personLista"></ul>

Answer 2

为了显示来自对象的值，您需要访问此对象的属性。

我举了一个关于如何显示对象值的例子。

function Person(firstName, lastName, adress, phone) {
  this.FirstName = firstName;
  this.LastName = lastName;
  this.Adress = adress;
  this.Phone = phone;
}

Person.prototype.toString = function() {
  return this.FirstName + " " + this.LastName;
}


var p1 = new Person("Anton", "Andersson","Nonstans", "1324565451");
var p2 = new Person("Felix", "Berge", "Krillan", "1234567889");
var p3 = new Person("Oscar", "Rells", "Essingen", "1234567888");
var p4 = new Person("Theodor", "Johansson", "Hemma", "1234567810");
var p5 = new Person("Jacob", "Lagstrom", "Ensam 78", "1234567892");



var Persons = [p1, p2, p3, p4, p5];
for (var i = 0; i < Persons.length; i++) {
  var personList = document.getElementById("personLista")
  personList.textContent += Persons[i].toString() + ", ";
}

<span id="resultText1"></span> 
<span id="resultText2"></span> 
<input type="text" id="textRuta1"/> <input type="text" id="textRuta2"/> 
<span id="arraySpan"></span> 
<span id="personLista"></span>

Answer 3

您可以为toStirng()对象覆盖Person。实施可能是：

function Person(firstName, lastName, adress, phone) {
    this.FirstName = firstName;
    this.LastName = lastName;
    this.Adress = adress;
    this.Phone = phone;
}

Person.prototype.toString = function personToString() {
  var stringVal = 'FirstName: ' + this.FirstName + ' LastName: ' + this.LastName + ' Adress: ' + this.Adress + ' Phone: ' + this.Phone;
  return stringVal;
}

    var p1 = new Person("Anton", "Andersson","Nonstans", "1324565451");
    var p2 = new Person("Felix", "Berge", "Krillan", "1234567889");
    var p3 = new Person("Oscar", "Rells", "Essingen", "1234567888");
    var p4 = new Person("Theodor", "Johansson", "Hemma", "1234567810");
    var p5 = new Person("Jacob", "Lagstrom", "Ensam 78", "1234567892");



    var Persons = [p1, p2, p3, p4, p5];
    for (var i = 0; i < Persons.length; i++) {
        var personList = document.getElementById("personLista")
        personList.textContent += Persons[i].toString() + ", ";
    }

您可以修改功能personToString()以根据您的选择格式化详细信息。

Answer 4

这么多答案！让我试试吧..

A）首先，您现在也可以使用class，这是您个人的语法糖。

B）只需在编写全名时轻松调用即可。它更清晰，更容易。

C）您之所以看到[Object object]，是因为您没有加载属性，而是整个对象。属性是firstName，lastName，address，phoneNumber 对象是Person类的实例

我已经突出了代码中的问题，因此您可以从中了解更多信息。

//  A
class Person
{
    constructor(firstName,
                lastName,
                address,
                phoneNumber)
    {
        //  javascript uses lower camelcase.
        this.firstName   = firstName;
        this.lastName    = lastName;
        this.address     = address;
        this.phoneNumber = phoneNumber;
    }

    //  B
    getFullName()
    {
        return this.firstName + ' ' + this.lastName;
    }
}

//  create the list of people.
let persons = [
    new Person("Anton", "Andersson","Nonstans", "1324565451"),
    new Person("Felix", "Berge", "Krillan", "1234567889"),
    new Person("Oscar", "Rells", "Essingen", "1234567888"),
    new Person("Theodor", "Johansson", "Hemma", "1234567810"),
    new Person("Jacob", "Lagstrom", "Ensam 78", "1234567892")
];

//  iterate persons array using length.
for (let i=0; i<persons.length; i++)
{
    //  C
    document.getElementById('personLista').innerHTML += persons[i].getFullName() + '<br />';
}

希望它有所帮助，祝你好运！

object对象问题Javascript

4 个答案: