Javascript 中的 FizzBuzz 程序（已给出详细信息）[关闭]答案

【问题标题】：FizzBuzz program (details given) in Javascript [closed]Javascript 中的 FizzBuzz 程序（已给出详细信息）[关闭]
【发布时间】：2013-05-18 04:27:09
【问题描述】：

有人可以为 FizzBuzz 更正我的这段代码吗？似乎有一个小错误。下面的代码打印所有数字，而不是只打印不能被 3 或 5 整除的数字。

编写一个程序，打印从1 到100 的数字。但是对于三的倍数，打印"Fizz" 而不是数字，对于五的倍数，打印"Buzz"。对于同时是三和五的倍数的数字，打印"FizzBuzz"。

function isDivisible(numa, num) {
  if (numa % num == 0) {
    return true;
  } else {
    return false;
  }
};

function by3(num) {
  if (isDivisible(num, 3)) {
    console.log("Fizz");
  } else {
    return false;
  }
};

function by5(num) {
  if (isDivisible(num, 5)) {
    console.log("Buzz");
  } else {
    return false;
  }
};

for (var a=1; a<=100; a++) {
  if (by3(a)) {
    by3(a);
    if (by5(a)) {
      by5(a);
      console.log("\n");
    } else {
      console.log("\n");
    }
  } else if (by5(a)) {
    by5(a);
    console.log("\n");
  } else {
    console.log(a+"\n")
  }
}

【问题讨论】：

i % 5 == 0 不需要变成函数。退后一步，问问自己，“我将如何手动完成这项工作？”
这是一个常见问题.. 见c2.com/cgi/wiki?FizzBuzzTest
是的，@blender 没有调用该函数
这里有一个提示：by3 和 by5 在打印 Fizz 或 Buzz 时返回什么？
哦，我认为它总是给出错误的！ @barmar

标签： javascript fizzbuzz

【解决方案1】：

for (let i = 1; i <= 100; i++) {
    let out = '';
    if (i % 3 === 0) out += 'Fizz';
    if (i % 5 === 0) out += 'Buzz';
    console.log(out || i);
}

【讨论】：

我喜欢 console.log 上的逻辑运算符用法。
这是最好的解决方案。
喜欢这个聪明的解决方案
完美！如果我想获得可分割的数字，例如 3、9、15 和字符串。我该怎么做？
@Momin 不确定我明白。像这样？ jsfiddle.net/Lj87ukts/2

【解决方案2】：

/*Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”*/

var str="",x,y,a;
for (a=1;a<=100;a++)
{
    x = a%3 ==0;
    y = a%5 ==0;
    if(x)
    {
        str+="fizz"
    }
    if (y)
    {
        str+="buzz"
    }
    if (!(x||y))
    {
        str+=a;
    }
    str+="\n"
}
console.log(str);

您的函数无论如何都会返回虚假值，但无论如何都会打印。没必要把这个弄得太复杂。

小提琴：http://jsfiddle.net/ben336/7c9KN/

【讨论】：

【解决方案3】：

将 FizzBuzz 和 JavaScript 与 C# 进行比较。

这是我的版本，深受更多 rigid 语言的影响：

function FizzBuzz(aTarget) {
    for (var i = 1; i <= aTarget; i++) {
        var result = "";
        if (i%3 === 0) result += "Fizz";        
        if (i%5 === 0) result += "Buzz";
        if (result.length ===0) result = i;

        console.log(result);
    }
}

我喜欢结构和易于阅读。

现在，Trevor Dixon 巧妙地利用了该语言的 false-y 值（false、null、undefined、''（空字符串）， 0 和 NaN（不是数字））来缩短代码。
现在，if (result.length ===0) result = i; 行是多余的，代码如下所示：

function FizzBuzz(aTarget) {
    for (var i = 1; i <= aTarget; i++) {
        var result = "";
        if (i%3 === 0) result += "Fizz";        
        if (i%5 === 0) result += "Buzz";

        console.log(result || i);
    }
}

这里我们通过|| 操作符说：“如果result 为假，则打印迭代值(i)”。很酷的把戏，我想我需要更多地使用 JavaScript 来吸收这个逻辑。

您可以查看其他示例（来自 GitHub），其范围包括：

for (var i=1; i <= 20; i++)
{
    if (i % 15 == 0)
        console.log("FizzBuzz");
    else if (i % 3 == 0)
        console.log("Fizz");
    else if (i % 5 == 0)
        console.log("Buzz");
    else
        console.log(i);
}

这里没有变量，只检查除以 15,3 和 5（我上面的一个只除以 3 和 5，但有一个额外的变量，所以我想这取决于那些关心或风格偏好的人的微基准测试)。

收件人：

for(i=0;i<100;)console.log((++i%3?'':'Fizz')+(i%5?'':'Buzz')||i)

这一切都在线上，基于0 是一个错误值这一事实，所以除了|| 技巧之外，您还可以将它用于if-else 简写版本（? :）我们以前见过。

这是上面更易读的版本，带有一些变量：

for (var i = 1; i <= 100; i++) {
  var f = i % 3 == 0, b = i % 5 == 0;
  console.log(f ? b ? "FizzBuzz" : "Fizz" : b ? "Buzz" : i);
}

总而言之，你可以用不同的方式来做这件事，我希望你能学到一些在 JavaScript 中使用的好技巧 :)

【讨论】：

【解决方案4】：

.fizz 和 .buzz 可能是 CSS 类，不是吗？在这种情况下：

var n = 0;
var b = document.querySelector("output");
window.setInterval(function () {
    n++;
    b.classList[n%3 ? "remove" : "add"]("fizz");
    b.classList[n%5 ? "remove" : "add"]("buzz");
    b.textContent = n;
}, 500);

output.fizz:after {
    content: " fizz";
    color:red;
}

output.buzz:after {
    content: " buzz";
    color:blue;
}

output.fizz.buzz:after {
    content: " fizzbuzz";
    color:magenta;
}

&lt;output&gt;0&lt;/output&gt;

【讨论】：

【解决方案5】：

使用三元运算符就很简单了：

    for (var i = 0; i <= 100; i++) {
      str = (i % 5 == 0 && i % 3 == 0) ? "FizzBuzz" : (i % 3 == 0 ? "Fizz" : (i % 5 == 0) ? "Buzz" : i);
      console.log(str);
    }

【讨论】：

您还可以将 FizzBuzz 条件降低到 %15

【解决方案6】：

for(i = 1; i < 101; i++) {  
  if(i % 3 === 0) {
      if(i % 5 === 0) {
          console.log("FizzBuzz");
      }
      else {
          console.log("Fizz");
      }
  }
  else if(i % 5 === 0) {
      console.log("Buzz");
  }
  else {
      console.log(i)
  }
}

【讨论】：

【解决方案7】：

在您的by3 和by5 函数中，如果适用，则隐式返回undefined，如果不适用，则隐式返回false，但您的if 语句正在测试，就好像它返回true 或@ 987654327@。如果适用，请明确返回 true，以便您的 if 语句将其拾取。

【讨论】：

【解决方案8】：

作为 ES6 生成器：http://www.es6fiddle.net/i9lhnt2v/

function* FizzBuzz() {

    let index = 0;

    while (true) {

        let value = ''; index++;

        if (index % 3 === 0) value += 'Fizz';
        if (index % 5 === 0) value += 'Buzz';

        yield value || index;

    }

}

let fb = FizzBuzz();
for (let index = 0; index < 100; index++) {
    console.log(fb.next().value);
}

【讨论】：

【解决方案9】：

今晚，Codeacademy 向我发出了 FizzBuzz。我有一个模糊的记忆，它是“一件事”，所以我做了这个。也许不是最好的方法，但与上述不同：

var data = {
    Fizz:3,
    Buzz:5
};

for (var i=1;i<=100;i++) {
    var value = '';
    for (var k in data) {
        value += i%data[k]?'':k;
    }
    console.log(value?value:i);
}

它依赖于数据而不是代码。我认为，如果这种方法有一个优势，那就是您可以在不添加额外逻辑的情况下使用 FizzBuzzBing 3 5 7 或更远，前提是您按照规则指定的顺序分配对象元素。例如：

var data = {
    Fizz:3,
    Buzz:5,
    Bing:7,
    Boom:11,
    Zing:13
};

for (var i=1;i<=1000;i++) {
    var value = '';
    for (var k in data) {
        value += i%data[k]?'':k;
    }
    console.log(value?value:i);
}

【讨论】：

【解决方案10】：

这是我写的：

for (var num = 1; num<101; num = num + 1) {
    if (num % 5 == 0 && num % 3 == 0) {
        console.log("FizzBuzz");
    }
    else if (num % 5 == 0) {
        console.log("Buzz");
    }
    else if (num % 3 == 0) {
        console.log("Fizz");
    }
    else {
        console.log(num);
    }
}

【讨论】：

【解决方案11】：

for (var i = 1; i <= 100; i++) {
    if (i % 3 === 0 && i % 5 === 0) console.log("FizzBuzz");
    else if (i%3 === 0) console.log("Fizz");    
    else if (i%5 === 0) console.log("Buzz");    
    else console.log(i);    
}

FizzBuzz 的最简单方法之一。 3 和 5 的倍数同时表示 15 的倍数。

第二版：

for (var i = 1; i <= 100; i++) {
    if (i % 15 === 0) console.log("FizzBuzz");
    else if (i%3 === 0) console.log("Fizz");    
    else if (i%5 === 0) console.log("Buzz");    
    else console.log(i);    
}

【讨论】：

【解决方案12】：

如果有人正在寻找其他解决方案：这是一个纯、递归和可重用函数，可选可自定义 参数值：

const fizzBuzz = (from = 1, till = 100, ruleMap = {
  3: "Fizz",
  5: "Buzz",
}) => from > till || console.log(
  Object.keys(ruleMap)
    .filter(number => from % number === 0)
    .map(number => ruleMap[number]).join("") || from
) || fizzBuzz(from + 1, till, ruleMap);

// Usage:
fizzBuzz(/*Default values*/);

from > till 是中断递归的锚。由于它在from 高于till 之前返回false，所以它转到下一条语句（console.log）：
Object.keys 在给定的ruleMap 中返回一个对象属性数组，在我们的例子中默认为3 和5。
- 然后，它遍历数字并仅返回可被from 整除的数字（0 作为余数）。
- 然后，它遍历过滤后的数字，并根据规则输出谚语。
- 但是，如果filter 方法返回一个空数组（[]，没有找到结果），它只输出当前的from 值，因为最后的join 方法最终只返回一个空字符串("") 这是一个falsy value。
由于console.log 总是返回undefined，它会转到下一条语句并再次调用自身，将from 的值增加1。

【讨论】：

【解决方案13】：

FizzBuzz 的功能版本

const dot = (a,b) => x => a(b(x));
const id = x => x;


function fizzbuzz(n){
  const f = (N, m) => n % N ? id : x => _ => m + x('');
  return dot(f(3, 'fizz'), f(5, 'buzz')) (id) (n);
}

对于上面的更多选项，将点替换为点，如下所示

const dots = (...a) => f0 => a.reduceRight((acc, f) => f(acc), f0);

function fizzbuzz(n){
  const f = (N, m) => n % N ? id : x => _ => m + x('');
  return dots(f(3, 'fizz'), f(5, 'buzz'), f(7, 'bam')) (id) (n);
}

参考：FizzBuzz in Haskell by Embedding a Domain-Specific Language by Maciej Piro ́g

【讨论】：

【解决方案14】：

for (i=1; i<=100; i++) {
  output = "";
  if (i%5==0) output = "buzz"; 
  if (i%3==0) output = "fizz" + output;
  if (output=="") output = i;
  console.log(output);
}

【讨论】：

【解决方案15】：

功能风格！ JSBin Demo

// create a iterable array with a length of 100
// and map every value to a random number from 1 to a 100
var series = Array.apply(null, Array(100)).map(function() {
  return Math.round(Math.random() * 100) + 1;
});

// define the fizzbuzz function which takes an interger as input
// it evaluates the case expressions similar to Haskell's guards
var fizzbuzz = function (item) {
  switch (true) {
    case item % 15 === 0:
      console.log('fizzbuzz');
      break;
    case item % 3 === 0:
      console.log('fizz');
      break;
    case item % 5 === 0:
      console.log('buzz');
      break;
    default:
      console.log(item);
      break;
  }
};

// map the series values to the fizzbuzz function
series.map(fizzbuzz);

【讨论】：

【解决方案16】：

另一种解决方案，避免过多的划分并消除“Fizz”和“Buzz”之间的多余空格：

    var num  = 1;
    var FIZZ = 3;   // why not make this easily modded?
    var BUZZ = 5;   // ditto
    var UPTO = 100; // ditto
                    // and easily extended to other effervescent sounds

    while (num < UPTO)
    {
        var flag = false;
        if (num % FIZZ == 0) { document.write ("Fizz"); flag = true; }
        if (num % BUZZ == 0) { document.write ("Buzz"); flag = true; }
        if (flag == false)   { document.write (num); }
        document.write ("<br>");
        num += 1;
    }

如果您使用的是 jscript/jsc/.net，请使用 Console.Write()。如果您使用的是 Node.js，请使用 process.stdout.write()。不幸的是，console.log() 附加换行符并忽略退格，因此它不能用于此目的。您也可以附加到字符串并打印它。（我是一个完整的 n00b，但我认为（好吧，希望）我已经相当彻底。）

“先生们，你们怎么想？”

【讨论】：

【解决方案17】：

看看这个！

function fizzBuzz(){
    for(var i=1; i<=100; i++){
        if(i % 3 ===0 && i % 5===0){
            console.log(i+' fizzBuzz');
        } else if(i % 3 ===0){
            console.log(i+' fizz');
        } else if(i % 5 ===0){
            console.log(i+' buzz');
        } else {
            console.log(i);
        }
    } 
}fizzBuzz();

【讨论】：

【解决方案18】：

实现略有不同。

您可以将自己的参数放入函数中。可以是非连续数字，例如 [0, 3, 10, 1, 4]。默认设置仅为 1-15。

function fizzbuzz (set) {
  
  var set = set ? set : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
  var isValidSet = set.map((element) => {if (typeof element !== 'number') {return false} else return true}).indexOf(false) === -1 ? true : false
  var gotFizz = (n) => {if (n % 3 === 0) {return true} else return false}
  var gotBuzz = (n) => {if (n % 5 === 0) {return true} else return false}
  
  if (!Array.isArray(set)) return new Error('First argument must an array with "Number" elements')
  if (!isValidSet) return new Error('The elements of the first argument must all be "Numbers"')

  set.forEach((n) => {

    if (gotFizz(n) && gotBuzz(n)) return console.log('fizzbuzz')
    if (gotFizz(n)) return console.log('fizz')
    if (gotBuzz(n)) return console.log('buzz')
    else return console.log(n)
  })
}

【讨论】：

【解决方案19】：

var num = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];

var runLoop = function() {
for (var i = 1; i<=num.length; i++) {
    if (i % 5 === 0 && i % 3 === 0) {
        console.log("FizzBuzz");
    }
    else if (i % 5 === 0) {
        console.log("Buzz");
    }
    else if (i % 3 === 0) {
        console.log("Fizz");
    }
    else {
        console.log(i);
    }
}
};
runLoop();

【讨论】：

【解决方案20】：

只想分享我的解决方法

for (i = 1; i <= 100; i++){
  if (i % 3 === 0 && i % 5 === 0) {
    console.log('fizzBuzz');
  } else if (i % 3 === 0) {
    console.log('fizz');
  } else if (i % 5 === 0){
    console.log('buzz');
  } else {
    console.log(i);
  }
}

【讨论】：

【解决方案21】：

var limit = prompt("Enter the number limit");
var n = parseInt(limit);
var series = 0;
for(i=1;i<n;i++){    
  series = series+" " +check();
}

function check() {
  var result;
  if (i%3==0 && i%5==0) {  // check whether the number is divisible by both 3 and 5
    result = "fizzbuzz "; // if so, return fizzbuzz
    return result;
  }
  else if (i%3==0) {  // check whether the number is divisible by 3 
    result = "fizz ";  // if so, return fizz
    return result;
  }
  else if (i%5==0) {  // check whether the number is divisible by 5
    result = "buzz ";  // if so, return buzz
    return result;
  }
  else return i;  // if all the above conditions fail, then return the number as it is
}

alert(series);

【讨论】：

【解决方案22】：

我就是这样做的：

不是最好的代码，但成功了

var numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];

for(var i = 0 ; i <= 19 ; i++){

  var fizz = numbers[i] % 3 === 0;
  var buzz = numbers[i] % 5 === 0;
  var fizzBuzz = numbers[i] % 5 === 0 && numbers[i] % 3 === 0;

  if(fizzBuzz){
    console.log("FizzBuzz");
  } else if(fizz){
    console.log("Fizz");
  } else if(buzz){
    console.log("Buzz");
  } else {
    console.log(numbers[i]);
  }

}

【讨论】：

【解决方案23】：

尽管这是一个简单的逻辑，但对于初学者来说可能是一项艰巨的任务。以下是我对 FizzBuzz 问题的解决方案：

let i = 1;
while(i<=100){
    if(i % 3 ==0 && i % 5 == 0){
        console.log('FizzBuzz');
    }
    else if(i % 3 == 0){
        console.log('Fizz');
    }
    else if(i % 5 == 0){
        console.log('Buzz');
    }
    else{
        console.log(i);
    }
    i++;
}

【讨论】：

【解决方案24】：

考虑到性能和可读性，请查看我对这个问题的看法

方式 1：而不是在 if 循环中执行数学模块操作，这会导致执行 3 次，从而减少开销

function fizzBuzz(n) {
    let count =0;
    let x = 0;
    let y = 0;
    while(n!==count)
    {
        count++;
        x = count%3;
        y = count%5;
        if(x === 0 && y ===0)
        {
            console.log("fizzbuzz");
        }
        else if(x === 0)
        {
            console.log("fizz");
        }
        else if(y === 0)
        {
            console.log("buzz");
        }
        else
        {
            console.log(count);
        }
    }
}

fizzBuzz(15);

方式2：浓缩解决方案

function fizzBuzz(n) {
    let x = 0;
    let y = 0;
    for (var i = 1; i <= n; i++) {
        var result = "";
        x = i%3;
        y = i%5;
        if (x === 0 && y === 0) result += "fizzbuzz";  
        else if (x === 0) result += "fizz";        
        else if (y === 0) result += "buzz";

        console.log(result || i);
    }
}

fizzBuzz(5)

【讨论】：

【解决方案25】：

这是我最喜欢的解决方案。简洁、实用且快速。

const oneToOneHundred = Array.from({ length: 100 }, (_, i) => i + 1);

const fizzBuzz = (n) => {
  if (n % 15 === 0) return 'FizzBuzz';
  if (n % 3 === 0) return 'Fizz';
  if (n % 5 === 0) return 'Buzz';
  return n;
};

console.log(oneToOneHundred.map((i) => fizzBuzz(i)).join('\n'));

【讨论】：

【解决方案26】：

function fizzBuzz(n) {
  for (let i = 1; i < n + 1; i++) {
    if (i % 15 == 0) {
      console.log("fizzbuzz");
    } else if (i % 3 == 0) {
      console.log("fizz");
    } else if (i % 5 == 0) {
      console.log("buzz");
    } else {
      console.log(i);
    }
  }
}

fizzBuzz(15);

【讨论】：

【解决方案27】：

不同的功能风格——朴素

fbRule = function(x,y,f,b,z){return function(z){return (z % (x*y) == 0 ? f+b: (z % x == 0 ? f : (z % y == 0  ? b: z)))  }}

range = function(n){return Array.apply(null, Array(n)).map(function (_, i) {return i+1;});}

range(100).map(fbRule(3,5, "fizz", "buzz"))

或者，如上例那样合并结构：即 [[3, "fizz"],[5, "buzz"], ...]

fbRule = function(fbArr,z){
  return function(z){
    var ed = fbArr.reduce(function(sum, unit){return z%unit[0] === 0 ? sum.concat(unit[1]) : sum }, [] )
    return ed.length>0 ? ed.join("") : z
  }
} 

range = function(n){return Array.apply(null, Array(n)).map(function (_, i) {return i+1;});}

range(100).map(fbRule([[3, "fizz"],[5, "buzz"]]))

或者，使用 ramda [来自https://codereview.stackexchange.com/questions/108449/fizzbuzz-in-javascript-using-ramda]

var divisibleBy = R.curry(R.compose(R.equals(0), R.flip(R.modulo)))
var fizzbuzz =  R.map(R.cond([
  [R.both(divisibleBy(3), divisibleBy(5)), R.always('FizzBuzz')],
  [divisibleBy(3), R.aklways('Fizz')],
  [divisibleBy(5), R.always('Buzz')],
  [R.T, R.identity]
]));

console.log(fizzbuzz(R.range(1,101)))

【讨论】：