我如何优化（或改进）这个 Fizz Buzz 脚本？

Question

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

//这是一道面试题，我想知道如何用"pure javascript"优化或改进它。

<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 来优化这三个并行 if。

综上所述，您可以将代码减少到当前大小的 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 元素使用了一个变量，因为每次迭代都选择它是一种资源浪费。

Shorter/less 可读版本：

这是一个更短、有注释且可读性稍差的版本：

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>

我如何优化（或改进）这个 Fizz Buzz 脚本？

How can I optimize (or improve) this Fizz Buzz script?

javascript

optimization

fizzbuzz

我的优化版本：

Shorter/less 可读版本：

疯狂版-单行本：