如何在函数内部(在函数上)执行for循环?

时间:2014-05-26 16:01:14

标签: javascript arrays loops for-loop random

我正在使用纯JavaScript创建一个通用的“lorem ipsum”生成器。我已经设法让它工作到一个点,它将从数组中的小写字符串数组中拉出来,用空格连接它们,将第一个字符串大写并将句点设置为结束。

我也将它设置为将这些句子推送到更大的数组并加入段落的点。但是,我不能让句子生成和数组推送在函数内部不止一次循环。对全局函数的多次调用将导致将最后生成的句子附加到段落中,但是我希望能够生成随机数量的句子并在每次后续调用全局函数时将它们推送到数组中(和在将来,使用相同的模式生成随机数段的段落。

也许很明显我做错了,但我认为在句子生成函数中调用全局函数内的for循环会起作用。

<!DOCTYPE html>

<html>
<head>
        <script type="text/javascript" src="ipsum.js"></script>
    <title>Generic Ipusm</title>
</head>
<input type="button" id="make" value="Make" onclick="makeParagraphs();" />
<p id="message" >Click to generate!</p>

<body>
</body>
</html>

这是我的JavaScript:

function capitalize(string) {
  return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
var arr = [];
var arr = ["this","array","of","random","words"];
var paragraph = [];

function makeParagraphs() {

  var message = [];
  var sentence;

  var paragrapher = paragraph.join(" ");
  console.log("p: " + paragrapher);
  var makeSentences = function() {

    r = Math.floor(Math.random() * 10) + 5; // Words in sentence range
    for (i=1; i<=r; i++) {

      var random = arr[Math.floor(Math.random() * arr.length)];  
      message.push(random);
      var words = message.join(" ") + ".";
      var sentencer = capitalize(words);
      document.getElementById("message").innerHTML = sentencer;


    }
    var sentence = sentencer;
    console.log("s: " + sentence);
    paragraph.push(sentence);

  }
  for (i=1; i<=4; i++) {
    makeSentences();
  }
}

循环中的最后一个调用是我尝试生成并将4个句子推送到该段落。是否有语言限制阻止我多次调用函数?

这是一个小提琴(请记住我将段落结果记录到控制台,DOM中出现的唯一文本是生成的最后一句话的结果):

http://jsfiddle.net/kmblackwood/8dvNc/

2 个答案:

答案 0 :(得分:4)

  

语言是否有限制阻止我多次调用函数?

没有。问题是你正在成为The Horror of Implicit Globals的牺牲品。您需要声明i。现在,i中的makeSentences是一个隐式全局,因此最后的循环受其影响。也就是说,i循环中的fori for循环中的makeSentences最终为相同< / strong>(全局)变量,i。因此,当您的for循环在第一次调用makeSentences时,makeSentencesi更改为大于4的值和您的for最后的循环终止。 (你也错过了r的声明。)

您也可以考虑使用“严格模式”,以便任何体面的JavaScript引擎(如任何现代浏览器中的引擎)都能告诉您隐式全局。严格模式告诉引擎写入未定义的符号应该是错误,而不是创建隐式全局。

您可以通过以下方式启用严格模式:

 "use strict";

...位于文件或脚本块的顶部。它适用于该文件或脚本块中的所有内容。

答案 1 :(得分:3)

问题是你在var i;函数中没有makeSentences,所以它会污染父作用域并破坏你的其他循环。