javascript - 使用 Javascript 制作更好的联系人列表显示 (CodeCademy)

Question

我很难找出以有组织的方式显示输出的方法。如何更改输出以使其看起来与图片一致？

• Ugly Display
• Nice Display

我的代码

var friends = {};

friends.bill = {
   firstName: "Bill",
   lastName: "Wang", 
   number: "0000000001",
   nationality: "Australian",
   address: ['Street','Microsoft','California','SL','98052']
};

friends.steve = {
   firstName: "Steve",
   lastName: "Wozniak",
   number: "0021221312",
   nationality: "American",
   address: ['Street','Apple','California','SL','98052']
};


var list = function(obj){

    for(var check in obj){
    console.log(check);      
    }
};

var search = function(name){

    for(var prop in friends){
        if(friends[prop].firstName === name) {
            console.log(friends[prop]);
            return friends[prop];
        }
    }
};

list(friends);
search("Bill");

Answer 1

直接将对象记录到控制台，将根据浏览器的内置机制记录它。每个浏览器都会以自己的方式输出对象，因此如果您希望它看起来漂亮，您需要创建一个自定义函数，您将在其中根据您的需要打印所有内容。

您可以使用扩展方法 PrintFriend() 创建一个名为“Friend”的类，您可以在其中输出所有相关信息，并从中实例化您的 friend :

var friends = {};
//this is our class declaration
var Friend = function (firstName, lastName, number, nationality, address) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.number = number;
    this.nationality = nationality;
    this.address = address;
};
//a prototype function that will be available to all objects of 
//class 'Friend'
Friend.prototype.PrintFriend = function () {
    console.log("First Name: " + this.firstName);
    console.log("Last Name: " + this.lastName);
    console.log("Number: " + this.number);
    console.log("Address: " + this.address.join().replace(/,/g," "));

document.body.innerHTML+="First Name: " + this.firstName+"<br/>";
document.body.innerHTML+="Last Name: " + this.lastName+"<br/>";
document.body.innerHTML+="Number: " + this.number+"<br/>";
document.body.innerHTML+="Address: " + this.address.join().replace(/,/g," ")+"<br/>";
};
//we add an object named 'bill' to the friends array, the object will
//be instantiated from the Friend class
friends["bill"] = new Friend(
    "Bill",
    "Wang",
    "0000000001",
    "Australian", ['Street', 'Microsoft', 'California', 'SL', '98052']);
//same with steve
friends["steve"] = new Friend(
    "Steve",
    "Wozniak",
    "0021221312",
    "American", ['Street', 'Apple', 'California', 'SL', '98052']);


var list = function (obj) {
    for (var check in obj) {
        console.log(check);
    }
};
//we call the custom function print friend here
var search = function (name) {

    for (var prop in friends) {
        if (friends[prop].firstName === name) {
            friends[prop].PrintFriend();
            return friends[prop];
        }
    }
};

list(friends);
search("Bill");