Question

我想运行一个for-loop，它将屏幕宽度的每百位数值附加到div中。这有效：

for (var i = 50, numbers = ""; i < limit; i+= 50) {
  if (num % 100 === 0) {
    numbers += i;
  }
}

document.getElementsByClassName("width")[0].innerHTML = numbers;

但是当我尝试在循环中调用一个函数时，它不会：

for (var i = 50, numbers = ""; i < limit; i+= 50) {
  insertVal(i, numbers);
}

document.getElementsByClassName("width")[0].innerHTML = numbers;

function insertVal(i, container) {
  if (i % 100 === 0) {
    container += i;
  }
}

我不确定返回值应该是什么，以便将数值插入到div中。

JSFiddle

Answer 1

你需要在循环中 A 设置numbers，你需要 B 从你的函数返回container，

for (var i = 50, numbers = ""; i < limit; i += 50) {
    numbers = insertVal(i, numbers); // A
}

document.getElementsByClassName("width")[0].innerHTML = numbers;

function insertVal(i, container) {
    if (i % 100 === 0) {
        container += i;
    }
    return container; // B
}

然而，这比你的工作循环效率低，因为每个函数调用都很昂贵

如果您以后再回到此代码，那么您在此处传递numbers的方式可能会让您感到困惑。如果需要在此处使用函数，您可能需要考虑这两种代码模式中的一种

测试它自己的方法，给出布尔（等效）值，这样你就知道输入是好的

function test(i) {
    return i % 100;
}

for (var i = 50, numbers = ""; i < limit; i += 50) {
    if (test(i))
        numbers += i;
}

document.getElementsByClassName("width")[0].innerHTML = numbers;

测试给出的结果可能是您感兴趣的输入的转换或预期的错误结果，例如： null

function test(i) {
    if (i % 100)
        return i;
    return null;
}

for (var i = 50, numbers = "", e; i < limit; i += 50) {
    e = test(i);
    if (e !== null)
        numbers += e;
}

document.getElementsByClassName("width")[0].innerHTML = numbers;

@CarlEdwards重复数据删除是为这些函数编写函数的可接受原因。但是，如果循环几乎完全相同，请考虑是否可以将for本身移动到循环中

考虑这个例子，其中循环在函数my_loop内，这意味着你可以重用代码，但只调用函数两次

function my_loop(i, j) {
    for (var numbers = ""; i < j; i+= 50) {
        if (i % 100 === 0) {
            numbers += i;
        }
    }
    return numbers;
}

document.getElementsByClassName("width")[0].innerHTML = my_loop(50, limit);
document.getElementsByClassName("width")[1].innerHTML = my_loop(250, limit2);

Answer 2

从你的函数返回container，并将其传回。

https://jsfiddle.net/un9uj7nb/5/

for (var i = 50, numbers = ""; i < limit; i+= 50) {
    numbers = insertVal(i, numbers);
}

document.getElementsByClassName("width")[0].innerHTML = numbers;

function insertVal(i, container) {
    if (i % 100 === 0) {
        container += i;
    }
    return container;
}

从for循环中的函数返回值

2 个答案: