从函数传递变量作为参数答案

【问题标题】：passing variables from function as argument从函数传递变量作为参数
【发布时间】：2016-09-15 17:12:01
【问题描述】：

我正在尝试传递一个已保存为 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);

【问题讨论】：

您正试图在声明它们的函数之外使用这些 links 变量。
添加到@squint 答案，您可以在将调用函数的同一范围内声明数组并将它们作为函数的参数传递，或者也将链接数组的名称传递为用作函数的输入参数，并在其中有一个逻辑来选择和使用正确的数组。
如果我将它们放在 processLi 函数中，则会出现相同的错误。此外，我不是在父函数内部的调用中使用它们，而不是回调？
我不知道这与高阶函数有什么关系。
@ardev 你应该把它们放在supportLists 函数的外部，在使用变量的调用旁边

标签： javascript arrays variables parameters

【解决方案1】：

如果你想使用一个变量，它必须在你想使用它的范围内可用或将它传递给（给一个函数），这意味着它必须在那个范围内或在父范围内声明。

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

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

// 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);

【讨论】：

谢谢，这行得通。只是为了讨论，鉴于 var 是在回调应该继承的父范围内定义的，因此不应该为回调设置 var 的范围吗？
@ardev：在您的原始代码中，数组变量是在 supportLists 函数范围内定义的（不是“父”/全局范围），但是您试图在全局范围内使用它们这些数组变量不可用/声明。有关 JS 范围示例，请参阅此答案：stackoverflow.com/questions/500431/…

【解决方案2】：

目前，您的变量是在本地范围内定义的，因此它们对supportLists 函数之外的代码不可见。

解决方案：

定义函数外的变量。例如，

var linksB = ["1", "2", "3"];
var supportLists = function(selector, arr) {  //YOUR CODE  }

【讨论】：

#2 根本不是解决方案。在使用变量作为参数调用它之前，您需要调用该函数来创建变量。此外，全局变量是邪恶的。