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

Using an array of objects as an argument in Javascript

本文关键字：数组 参数 对象 Javascript      更新时间：2023-09-26

根据用户所从事的活动，我有各种元素想要显示或隐藏。以前，我的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;
    }
}

我已经做了一些初步的测试，它似乎有效，但我对对象还不熟悉，所以在我提交并将所有内容转移到新功能之前，有人能告诉我这个策略是否存在无法预见的问题吗？

我到处找了找，找不到这样的论点的例子。

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

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

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

然后，您可以访问每个属性，读取或设置，通过：

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

我建议使用对象作为参数，而不是数组。示例：

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"});

具有Object.keys 的setDisplays函数的另一个版本

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;
    }
}

与数组表示法相比，使用对象将更直观，因为您可以直接引用键，而不是跟踪哪个参数位于哪个索引，如果性能是任务的优先事项，请查看JavaScript中Objects/Arrays的性能如何？（专门针对Google V8），但我认为性能不应该是个问题。

相关文章：