javascript - 从函数中传递变量作为参数

Question

我正在尝试传递一个已保存为 var 的数组。我在父函数中声明 var 并将 arr 添加为父函数中的参数。然后我将 arr 作为回调调用中的参数拉入。控制台告诉我 linksA 未定义。

var supportLists = function(selector, arr) {
    var parentList = document.getElementById(selector);
    var theList = parentList.querySelectorAll("a");

    var linksA = [
        "http://www.example.com",
        "http://www.example.com/path2",
        "1",
        "2",
        "4",
        "3",
        "5",
        "6",
        "7"
    ];

    var linksB = [
        "1",
        "2",
        "3"
    ];

    var linksC = [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12"
    ];

    var linksD = [
        "1",
        "2"
    ];

    var linksE = [
        "1",
        "2",
        "3"
    ];

    var linksF = [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6"
    ];

    var linksG = [
        "1",
        "2",
        "3"
    ];

    var linksH = [
        "1",
        "2",
        "3",
        "4"
    ];

    var linksI = [
        "1"
    ];

    var linksJ = [
        "1",
        "2",
        "3",
        "4",
        "5"
    ];

    function processLi(listItems, links) {

        for (var i = 0; i < links.length; i++) {

            listItems.forEach(function(item, index) {
                item.href = links[index];
                item.target = "_blank";

            });

        }
    }

    processLi(theList, arr);
};

supportLists("support-list", linksA);
supportLists("support-list-b", linksB);
supportLists("support-list-c", linksC);
supportLists("support-list-d", linksD);
supportLists("support-list-e", linksE);
supportLists("support-list-f", linksF);
supportLists("support-list-g", linksG);
supportLists("support-list-h", linksH);
supportLists("support-list-i", linksI);
supportLists("support-list-j", linksJ);

Answer 1

如果您想使用变量，它必须在您想要使用它或将其传递(到函数)的作用域中可用，这意味着它必须在该作用域或父作用域中声明。

由于您要将数组传递给 supportLists 函数，因此您必须在该函数外部声明它们。

如果将所有数组声明移到函数之外，您的代码将如下所示(我添加了一些注释来显示作用域的开始位置和结束位置)

// This is the 'parent' scope (probably the global/window scope in your case)

var linksA = [
    "http://www.example.com",
    // ...
];

// ...

var linksJ = [
    "1",
    "2",
    "3",
    "4",
    "5"
];

var supportLists = function(selector, arr) {
    // Here begins the 'supportLists' function scope
    // The 'supportLists' function has access to this scope and the 'parent' scope
    var parentList = document.getElementById(selector);
    var theList = parentList.querySelectorAll("a");

    function processLi(listItems, links) {
        // Here begins the 'processLi' function scope
        // The 'processLi' function has access to this scope, the 'supportLists' scope and the 'parent' scope

        for (var i = 0; i < links.length; i++) {

            listItems.forEach(function(item, index) {
                // Here begins the 'function(item, index)' function scope
                // The 'function(item, index)' function has access to this scope, the 'processLi' scope, the 'supportLists' scope and the 'parent' scope

                item.href = links[index];
                item.target = "_blank";
            });// Here ends 'function(item, index)' function scope
            // Back in the 'processLi' function scope
        }
    } // Here ends the 'processLi' function scope
    // Back in the 'supportLists' function scope

    processLi(theList, arr);
}; // Here ends the 'supportLists' function scope
// Back in the 'parent' scope

supportLists("support-list", linksA);
supportLists("support-list-b", linksB);
supportLists("support-list-c", linksC);
supportLists("support-list-d", linksD);
supportLists("support-list-e", linksE);
supportLists("support-list-f", linksF);
supportLists("support-list-g", linksG);
supportLists("support-list-h", linksH);
supportLists("support-list-i", linksI);
supportLists("support-list-j", linksJ);