JavaScript 库迭代器

Question

我没有太多 JavaScript 经验。我的问题是这样的: 当我编写 JavaScript 库时，我编写的许多函数都是为了相互调用，并且用户可以以我可能没有预料到但有效的方式调用我在彼此上定义的函数，如何我是否将迭代器保留在具有直接迭代循环的函数中？

每次执行 for 循环时，我是否都必须为 for 循环中的每个迭代器提供新名称，以确保我不会意外地在两个函数中使用同一个变量(其中一个函数可能嵌套在其中)另一个是我没有预料到或没有想到的情况？

这些只是具有迭代功能的几个示例。我所写的所有内容都是为了与 Qualtrics 调查进行交互(如下面的 gif 示例所示)。

function watchSet(set, mathFunction) {
    var setSize = set.length;
    for (var i=0; i < setSize; i++) {
        set[i].down().observe("keyup", mathFunction );
    }
}
function mathSum(set, output) {
    var setTotal = 0;
    for (var j=0; j < (set.length); j++) {
        var setInputValue = parseInt(set[j].down().value, 10);
        if (isNaN(setInputValue)) { setInputValue = 0; }
        setTotal = setTotal + setInputValue;
    }
    output.value = setTotal;
}
function validateError(array, color) {
    if (color === undefined) {
        color = "pink";
    }
    color = color.concat(";");
    for (var k=0; k < array.length; k++) {
        array[k].down().setAttribute("style", "background-color: ".concat(color));
    }
    $('NextButton') && $('NextButton').hide();
}

function cellRange(startCell, endCell) {
    var r1 = /^[A-Z]/;
    var r2 = /[0-9]{1,3}$/;

    var startCellColumn = r1.exec(startCell)[0].charCodeAt(0) - 61;
    var endCellColumn = r1.exec(endCell)[0].charCodeAt(0) - 61;
    var startCellRow = parseInt(r2.exec(startCell)[0], 10);
    var endCellRow = parseInt(r2.exec(endCell)[0], 10);

    var tempRange = [];
    for (var q=startCellColumn; q<=endCellColumn; q++) {
        for (var r=startCellRow; r<=endCellRow; r++) {
            tempRange.push(q);
            tempRange.push(r);
        }
    }

    var outputRange = [];
    for (var s=0; s < tempRange.length; s+=2) {
        outputRange.push(cell(String.fromCharCode(tempRange[s]+61).concat(tempRange[s+1])));
    }
    return outputRange;
}

GIF 示例: setting equivalency-validation summing a couple cells

Answer 1

不，您不需要在不同的函数中使用唯一的变量名称。

用 var 声明的变量是声明它们的函数作用域的局部变量。它们不会也不会与该作用域之外的任何内容发生冲突。因此，您的三个函数 watchSet()、mathSum() 和 validateError() 都可以使用 var i很好，并且不会相互冲突或与这些功能之外的任何第三方代码冲突。像这样的局部变量是在每次函数运行时唯一创建的，并且只能从该函数内部引用。

如果您没有使用 var 显式声明循环变量，那么 Javascript 会“隐式”使用该名称创建全局变量，然后，是的，如果一个函数执行此操作，您的不同函数可能会发生冲突调用另一个，因此他们都试图同时使用同一个全局变量。但是，只要您的变量是用 var 声明的，并且您的代码位于函数中(因此不在全局范围内运行)，这种情况就不会发生。

您还可以在 strict mode 中运行代码(强烈推荐)因为这样一个偶然的隐式全局就会立即出现错误，解释器会立即向您显示问题出在哪里。

或者使用.forEach()

您还可以在数组上使用.forEach()，而根本不必创建自己的迭代索引。

function watchSet(set, mathFunction) {
    set.forEach(function(item) {
        item.down().observe("keyup", mathFunction );
    });
}

或者，在 ES6 环境中使用 let

在 ES6 环境中，您可以使用 let 代替 var，并且变量的作用域也将仅限于 for 循环。

function watchSet(set, mathFunction) {
    var setSize = set.length;
    // when declaring with let in a for loop, the variable is scoped to
    // only inside the for loop
    for (let i=0; i < setSize; i++) {
        set[i].down().observe("keyup", mathFunction );
    }

    // with let in a for declaration, even another use in the same function
    // does not conflict
    // this is a completely different variable than the one above
    for (let i=0; i < setSize; i++) {
        set[i].up().observe("keyup", mathFunction );
    }
}