javascript - 循环遍历对象以输出图标 javascript

Question

抱歉这个糟糕的标题——我不知道该写什么。无论如何，我有一个想要循环的对象，以便在单击时动态输出一些图标:

<button id="btn">hit me</button>

var socialMedia = {
    facebook: "http://facebook.com",
    twitter: "http://twitter.com",
    instagram: "http://instagram.com",
    dribbble: "http://dribbble.com",
    social: function() {
        var output = "<ul>";
        var myList = document.querySelectorAll('.socialSpot');

        for (var key in arguments[0]) {
            output += '<li><a href="' + this[key] + '"><img src="_assets/' 
                   + key + '.png" alt="' + key + 'icon"></a></li>';
        }

        output += '</ul>';

        for (var i = myList.length - 1; i >= 0; i--) {
            myList[i].innerHTML = output;
        };
    }
};

var theBtn = document.getElementById('btn');
theBtn.addEventListener('click', function() {
    socialMedia.social(socialMedia);
}, false);

我知道我可以删除该方法并在传递对象时实例化它，但我想知道如何以这种方式进行。换句话说，我想将该函数保留为s​​ocialMedia {} 的方法。有什么指点吗？

Answer 1

只需在循环中添加一个 if (typeof obj[key] != "string") continue; 测试即可:

…
social: function(obj) {
    var output = "<ul>";
    var myList = document.querySelectorAll('.socialSpot');

    for (var key in obj) {
        if (typeof this[key] != "string") continue;
        output += '<li><a href="' + this[key] + '"><img src="_assets/' 
               + key + '.png" alt="' + key + 'icon"></a></li>';
    }

    output += '</ul>';

    for (var i = myList.length - 1; i >= 0; i--) {
        myList[i].innerHTML = output;
    };
}

<小时/>

当然，简单地使用另一个对象会干净得多:

var socialMedia = {
    data: {
        facebook: "http://facebook.com",
        twitter: "http://twitter.com",
        instagram: "http://instagram.com",
        dribbble: "http://dribbble.com"
    },
    social: function(obj) {
        var data = obj || this.data;

        var output = "<ul>";
        for (var key in data) {
            output += '<li><a href="' + data[key] + '"><img src="_assets/' 
                   + key + '.png" alt="' + key + 'icon"></a></li>';
        }
        output += '</ul>';

        var myList = document.querySelectorAll('.socialSpot');
        for (var i = myList.length - 1; i >= 0; i--) {
            myList[i].innerHTML = output;
        };
    }
};

var theBtn = document.getElementById('btn');
theBtn.addEventListener('click', function() {
    socialMedia.social();
}, false);