从 for 循环中的函数返回值答案

【问题标题】：Returning a value from a function within a for-loop从 for 循环中的函数返回值
【发布时间】：2015-08-08 15:38:16
【问题描述】：

我想运行一个 for 循环，将屏幕宽度的每百分之一数值附加到一个 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

【问题讨论】：

标签： javascript function loops dom conditional

【解决方案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;

Test 给出的结果可能是您感兴趣的输入的转换或预期的错误结果，例如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);

【讨论】：

@CarlEdwards 你最初的工作方法就是这样；为了减少函数调用，你会尽量避免在循环中调用函数，或者看看你是否可以将循环移动到函数中而不是围绕它。
我明白了。我创建一个函数而不是在循环中显式编写条件的原因是我计划将相同的代码用于另一个循环并且不想创建太多重复。我想如果我走那条路就没有办法了？
@CarlEdwards 重复数据删除是为这些编写函数的可接受理由。但是，如果循环几乎完全相同，请考虑是否可以将 for 本身也移动到循环中
不确定我是否理解了你陈述的最后一部分。
@CarlEdwards 请查看我在编辑中添加的答案的新部分

【解决方案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;
}

【讨论】：