本篇仅讨论此题目，若需查看与 javascript 相关信息，请查看本人另一篇文章 javascript 基础入门
题目
FizzBuzzWhizz 需求：
when run(3) return 'Fizz'
when run(5) return 'Buzz'
when run(7) return 'Whizz'
when run(3 * 5) return 'FizzBuzz' //run 的参数为 3 和 5 共同的倍数
when run(3 * 7) return 'FizzWhizz' //run 的参数为 3 和 7 共同的倍数
when run(5 * 7) return 'BuzzWhizz' //run 的参数为 5 和 7 共同的倍数
when run(3 * 5 * 7) return 'FizzBuzzWhizz' //run 的参数为 3、5 和 7 共同的倍数
> 其余情况：
`when run(n) return n // n 可以为 非 3、5、 7或3、5、7的倍数的数字 `
如：`run(2) return '2'`
> 作业要求：
1.通过 `document.write()` 方法，将以上需求的每一条调用结果打印出来，结果会在屏幕右边显示
2.为每一条需求写一个测试
## 分析 & 解决：
> 题目中没有给出前三列参数的描述，那我默认前三列的参数分别表示：仅为 3 的倍数，仅为 5 的倍数，仅为 7 的倍数。
那么根据题目要求，一共有八种情况。最简单的想法，写七个 `if ... eles ...` ，肯定能解决问题。
虽然这样就能解决问题，但是我们不妨再深入的分析一下题目，题目的需求是返回一个字符串，那么 run 函数就可以设计成 `run( num ) : string` 这样，只要根据传入的数字返回对应的字符串，那么此题就算完成需求。那么根据题目前七个需求，我们不妨把题目稍微修改一下说法：
1. 给你一个空字符串，只要能被三整除，那么字符串就加上 'Fizz'
2. 只要能被五整除，那么字符串再加上 'Buzz'
3. 只要能被七整除，那么字符串再加上 'Whizz'
4. 如果不满足上述任何一个需求，那么字符串就变为的数字
这样的话，就只需要写三个 `if` 语句，然后调整字符串的值，最后再判断一次字符串是否为空。若为空，那么就直接返回参数。
## 总结：
> 这样的话，题目的需求也算是完成了，我们不妨最后来对比一下这两种方法：
1. 第一种方法简单，不需要额外的字符串，直接返回相关字符串，但需要七次判断。
2. 第二种方法，四次判断，但是需要额外的字符串来存储结果。
其实，就本题而言，我们也许更偏向用第二种方法，原因不过是打的代码少。而不是觉得第二种方法计算量较少。`φ(゜▽゜*)♪`
完整代码：
```javascript
function run(num) {
num = Number(num);
var ret = '';
if (num % 3 == 0) {
ret += 'Fizz';
}
if (num % 5 == 0) {
ret += 'Buzz';
}
if (num % 7 == 0) {
ret += 'Whizz';
}
if (ret == '') {
ret = num.toString();
}
return ret;
}
var test1 = function () {
for (var i = -100; i < 100; i++) {
run(i);
document.write('when run(' + i + ') return ' + run(i) + '<br>');
}
document.write('test end<br>');
}
test1();
显示问题
结果一行一行的显示出来，实在是有点不好看，那为什么不整理一下显示的结果呢~。所以有了如下的代码：
HTML :
<!DOCTYPE html>
<html>
<head>
<title>Run number</title>
</head>
<body>
<input type="button" value="start" onclick="test1();"/>
<h2>Other</h2>
<p id="other"></p>
<h2>Fizz</h2>
<p id="mod3"></p>
<h2>Buzz</h2>
<p id="mod5"></p>
<h2>Whizz</h2>
<p id="mod7"></p>
<h2>FizzBuzz</h2>
<p id="mod35"></p>
<h2>FizzWhizz</h2>
<p id="mod37"></p>
<h2>BuzzWhizz</h2>
<p id="mod57"></p>
<h2>FizzBuzzWhizz</h2>
<p id="mod357"></p>
</body>
<script src="script.js"></script>
</html>
Javascript :
function visaul(str, num) {
var td;
var flag = 0;
if (str == 'Fizz') {
td = document.getElementById('mod3');
flag = 1;
}
if (str == 'Buzz') {
td = document.getElementById('mod5');
flag = 1;
}
if (str == 'Whizz') {
td = document.getElementById('mod7');
flag = 1;
}
if (str == 'FizzBuzz') {
td = document.getElementById('mod35');
flag = 1;
}
if (str == 'FizzWhizz') {
td = document.getElementById('mod37');
flag = 1;
}
if (str == 'BuzzWhizz') {
td = document.getElementById('mod57');
flag = 1;
}
if (str == 'FizzBuzzWhizz') {
td = document.getElementById('mod357');
flag = 1;
}
if (flag == 0) {
td = document.getElementById('other');
}
var newNode = document.createTextNode(num.toString() + " ");
newNode.innerHTML = num.toString();
td.appendChild(newNode);
}
function run(num) {
num = Number(num);
var ret = '';
if (num % 3 == 0) {
ret += 'Fizz';
}
if (num % 5 == 0) {
ret += 'Buzz';
}
if (num % 7 == 0) {
ret += 'Whizz';
}
if (ret == '') {
ret = num.toString();
}
visaul(ret, num);
return ret;
}
var test1 = function () {
for (var i = 1; i < 1000; i++) {
run(i);
//document.write('when run(' + i + ') return ' + run(i) + '<br>');
}
//document.write('test end<br>');
}
显示图：
结果图
纯减少代码量
function run(num) {
num = Number(num);
var ret = '';
ret += num % 3 == 0 ? 'Fizz' : '';
ret += num % 5 == 0 ? 'Buzz' : '';
ret += num % 7 == 0 ? 'Whizz' : '';
ret = ret == '' ? num.toString() : ret;
return ret;
}
网友评论