FizzBuzz program (details given) in Javascript

不羁的心 提交于 2019-12-17 15:47:33

问题


Can someone please correct this code of mine for FizzBuzz? There seems to be a small mistake. This code below prints all the numbers instead of printing only numbers that are not divisible by 3 or 5.

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".

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")
  }
}

回答1:


/*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);

Your functions return falsy values no matter what, but will print anyway. No need to make this overly complicated.

fiddle: http://jsfiddle.net/ben336/7c9KN/




回答2:


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);
}



回答3:


Was fooling around with FizzBuzz and JavaScript as comparison to C#.

Here's my version, heavily influenced by more rigid languages:

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);
    }
}

I like the structure and ease of read.

Now, what Trevor Dixon cleverly did is relay on the false-y values of the language (false , null , undefined , '' (the empty string) , 0 and NaN (Not a Number)) to shorten the code.
Now, the if (result.length ===0) result = i; line is redundant and the code will look like:

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);
    }
}

Here we relay on the || operator to say : "if result is false, print the iteration value (i)". Cool trick, and I guess I need to play more with JavaScript in order to assimilate this logic.

You can see other examples (from GitHub) that will range from things like :

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);
}

No variables here, and just check for division by 15,3 & 5 (my above one only divides by 3 & 5, but has an extra variable, so I guess it's down to microbenchmarking for those who care, or style preferences).

To:

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

Which does it all in on line, relaying on the fact that 0 is a false value, so you can use that for the if-else shorthanded version (? :), in addition to the || trick we've seen before.

Here's a more readable version of the above, with some variables:

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);
}

All in all, you can do it in different ways, and I hope you picked up some nifty tips for use in JavaScript :)




回答4:


With ternary operator it is much simple:

    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);
    }



回答5:


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)
  }
}



回答6:


In your by3 and by5 functions, you implicitly return undefined if it is applicable and false if it's not applicable, but your if statement is testing as if it returned true or false. Return true explicitly if it is applicable so your if statement picks it up.




回答7:


As an ES6 generator: 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);
}



回答8:


Codeacademy sprang a FizzBuzz on me tonight. I had a vague memory that it was "a thing" so I did this. Not the best way, perhaps, but different from the above:

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);
}

It relies on data rather than code. I think that if there is an advantage to this approach, it is that you can go FizzBuzzBing 3 5 7 or further without adding additional logic, provided that you assign the object elements in the order your rules specify. For example:

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);
}



回答9:


This is what I wrote:

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);
    }
}



回答10:


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);    
}

One of the easiest way to FizzBuzz. Multiple of 3 and 5, at the same time, means multiple of 15.

Second version:

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);    
}



回答11:


In case someone is looking for other solutions: This one is a pure, recursive, and reusable function with optionally customizable parameter values:

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*/);
  • The from > till is the anchor to break the recursion. Since it returns false until from is higher than till, it goes to the next statement (console.log):
  • Object.keys returns an array of object properties in the given ruleMap which are 3 and 5 by default in our case.
    • Then, it iterates through the numbers and returns only those which are divisible by the from (0 as rest).
    • Then, it iterates through the filtered numbers and outputs the saying according to the rule.
    • If, however, the filter method returned an empty array ([], no results found), it outputs just the current from value because the join method at the end finally returns just an empty string ("") which is a falsy value.
  • Since console.log always returns undefined, it goes to the next statement and calls itself again incrementing the from value by 1.



回答12:


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);
}



回答13:


Functional style! 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);



回答14:


Another solution, avoiding excess divisions and eliminating excess spaces between "Fizz" and "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;
    }

If you're using using jscript/jsc/.net, use Console.Write(). If you're using using Node.js, use process.stdout.write(). Unfortunately, console.log() appends newlines and ignores backspaces, so it's unusable for this purpose. You could also probably append to a string and print it. (I'm a complete n00b, but I think (ok, hope) I've been reasonably thorough.)

"Whaddya think, sirs?"




回答15:


check this out!

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();



回答16:


Slightly different implementation.

You can put your own argument into the function. Can be non-sequential numbers like [0, 3, 10, 1, 4]. The default set is only from 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)
  })
}



回答17:


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();



回答18:


Just want to share my way to solve this

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);
  }
}



回答19:


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);



回答20:


Thats How i did it :

Not the best code but that did the trick

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]);
  }

}



回答21:


A Functional version of 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);
}

Reference: FizzBuzz in Haskell by Embedding a Domain-Specific Language by Maciej Piro ́g




回答22:


.fizz and .buzz could be CSS classes, no? In which case:

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;
}
<output>0</output>



回答23:


Different functional style -- naive

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"))

or, to incorporate structures as in above example: ie [[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"]]))

OR, use ramda [from 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)))


来源:https://stackoverflow.com/questions/16620665/fizzbuzz-program-details-given-in-javascript

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!