Question

我想要显示或隐藏各种元素，具体取决于用户正在参与哪些活动。以前，我的setDisplays函数有一长串参数列表，每次调用函数时都需要设置这些参数：例如

setDisplays("none","inline","inline","none","none","none","block","none","none","none","none","table","block","block");

除了难以阅读和设定外，它也不灵活。所以我改变了函数来获取一个对象数组：例如

setDisplays([{bingoDisplay:"none"},{bingoScore:"none"},{bingoWords:"none"},{book_overlay:"none"},{choiceDiv:"none"},{errDiv:"none"},{imageDiv:"block"},{livesDispTop:"none"},{phonDisplay:"none"},{score:"none"},{timer:"none"},{phonUSelect:"none"},{numUSelect:"none"},{vocSelect:"table"}]);

修改后的功能是：

function setDisplays(display) {
    var display_name;
    var display_setting;

    for (var i=0; i<display.length; i++){
        display_name=Object.keys(display[i]);
        display_setting=display[i][display_name];
        document.getElementById(display_name).style.display=display_setting;
    }
}

我已经完成了一些初步测试，它似乎有效，但我是对象的新手，所以在我提交并将所有内容移到新功能之前，有人能告诉我是否有不可预见的事情这个策略的问题？

我已经四处搜索，找不到像这样的论据的例子。

PS：我意识到旧版浏览器不支持Object.keys，但我广泛使用HTML5音频，因此无论如何都需要为它们创建一个重定向页面。

Answer 1

使用对象将是一个更简单的解决方案。

var setDisplays = {
    bingoDisplay: "none", 
    bingoScore: "none", 
    bingoWords: "none"
};

然后，您可以通过以下方式访问每个媒体资源，阅读或设置：

setDisplays.bingoScore = "something";
setDisplays.bingoScore; //returns "something"

Answer 2

我建议使用object作为参数而不是数组。例如：

function setDisplays(obj) {
    var display_name;
    var display_setting;

    for (var i in obj){
        if (!obj.hasOwnProperty(i)) { continue; }
        display_name=i;
        display_setting=obj[i];
        document.getElementById(display_name).style.display=display_setting;
    }
}

setDisplays({bingoDisplay:"none", bingoScore:"none", bingoWords:"none"});

另一版setDisplays函数Object.keys

function setDisplays(obj) {
    var display_name;
    var display_setting;
    var keys = Object.keys(obj);

    for (var i=0, l=keys.length; i<l; i++){
        key = keys[i];
        display_name=key;
        display_setting=obj[key];
        document.getElementById(display_name).style.display=display_setting;
    }
}

Answer 3

与数组表示法相比，使用对象会更直观，因为您可以直接引用键而不是跟踪哪个参数在哪个索引处，如果性能是您的任务的优先级，请查看{{3但是我觉得性能应该不是问题。

在Javascript中使用对象数组作为参数

3 个答案: