如何优化（或改进）此Fizz Buzz脚本？

Question

//使用％Modulus运算符查找3到5的数字，从1到100的数字的脚本 - 当它找到一个可以是3或5的幂的数字时，它会超出FizzBu​​zz ...示例托管在我的身上博客http://chadcollins.com/find-numbers-that-are-the-power-of-3-and-5-from-1-to-100/

//这是一个面试问题，我想知道如何用纯粹的javascript＆＃34;来优化或改进这个问题。

<div id=out_put></div>


//from a list of 1 to 100 numbers, find the 3's and 5's using modulus
function findPowerOf(numList) {
    //setup the variables 
    var myModMatch1 = 3; //find numbers that have the power of 3
    var myModMatch2 = 5; //find numbers that have the power of 5
    var tempCheck1 = ""; //stores true or false based on myModMatch1
    var tempCheck2 = ""; //stores true or false based on myModMatch2
    var stringOut = ""; //concat string for output
    var numListStart = 1; //starting number list index
    var numListFinish = 100; //ending list index
    var numberList = []; //create the list of numbers
    for (var i = numListStart; i <= numListFinish; i++) {
        numberList.push(i);
    }
    for (i = 0; i < numberList.length; i++) { //loop on each number and check the modulus params
        console.log(numberList[i]);
        if ((numberList[i] % myModMatch1) === 0) { //check first modulus param
            console.log('houston, we have a match on a number modulus 3');
            tempCheck1 = "Fizz";
        }
        if ((numberList[i] % myModMatch2) === 0) {
            console.log('houston, we have a match on a number modulus 5');
            tempCheck2 = "Buzz";
        }
        if (tempCheck1 === "" && tempCheck2 === "") { //no modulus matches
            console.log("no modulus matches");
            stringOut += numberList[i] + "\n";
        }
        stringOut += tempCheck1 + tempCheck2 + "\n";
        tempCheck1 = ""; //clear both variables
        tempCheck2 = "";
    }
    //dynamically make a div
    var outDiv = document.createElement("div");
    outDiv.innerHTML = stringOut; //output the final loop values all at once
    document.getElementById('out_put').appendChild(outDiv); //update the view
}
findPowerOf(); // call our function

Answer 1

您可以删除几乎所有变量和函数参数（特别是因为您根本没有使用参数）。这也将删除一个冗余循环。

您可以通过嵌套if-else来优化这三个并行ifs。

尽管如此，您可以将代码减少到当前大小的30％左右。

让我试一试：

我的优化版本：

var div = document.getElementById('out_put');
for (var i = 1; i <= 100; i++) {
  if (i % 3 == 0 || i % 5 == 0) {
    if (i % 3 == 0) {
      div.innerHTML += "Fizz";
    }
    if (i % 5 == 0) {
      div.innerHTML += "Buzz";
    }
  } else {
    div.innerHTML += i;
  }
  div.innerHTML += '<br>';
}

<div id=out_put></div>

我已经为div元素使用了一个变量，因为在每次迭代中选择它都是浪费资源。

更短/不太可读的版本：

这是一个更短，评论和轻微不易阅读的版本：

var div = document.getElementById('out_put');
for (var i = 1; i <= 100; i++) {
  if (i % 3 == 0 || i % 5 == 0) { // see if there's ANY match
    if (i % 3 == 0)               // check for 3
      div.innerHTML += "Fizz";
    if (i % 5 == 0)               // check for 5
      div.innerHTML += "Buzz";
  } else                          // otherwise just output the number
    div.innerHTML += i;
  div.innerHTML += '<br>';        // add a new line after each
}

<div id=out_put></div>

疯狂版 - 单线：

（只是为了好玩 - 不要永远这样做！）

如果你真的真的想对此发疯，你可以在循环中做一些嵌套的三元条件。从技术上讲，一个内部有一行的循环 - 但几乎不可读，并且因为我删除了DOM元素引用变量而表现更差，因此它将在每次迭代时执行元素查询。 ：）

for (var i = 1; i <= 100; i++) 
  document.getElementById('out_put').innerHTML += ( (i % 3 == 0 || i % 5 == 0) ? ( ((i % 3 == 0) ? "Fizz" : "") + ((i % 5 == 0) ? "Buzz" : "") ) : i) + '<br>';

<div id=out_put></div>