仅使用“FizzBuzz”进行编码面试的基础⁉- 针对初学者和专业人士的 8 个挑战[为专业人士提供一些变化！😱]

FizzBuzz是一款心算游戏，后来成为一道热门面试题。如果我们借鉴它的原理，设计出 8 个人们可能从未遇到过的编程挑战，来真正考验一个人的解决问题和开发能力，结果会怎样呢？

嗯，这就是我所做的！

我认为下面的内容对于初学者来说应该足够简单，但对于专业人士来说也具有挑战性，因为有额外的规定并且必须结合解决方案！

最后：我希望以下说明清晰易懂。但是，如果任何说明不清楚，请在评论中告诉我，以便我改进问题！

内容

Fizz Buzz 是什么
指示
1. 不使用 FizzBuzz%
2. FizzBuzz，但是它需要按下按钮！
3.FizzBuzz 但是它存储状态！
4. 无循环的 FizzBuzz
5.停止记录到控制台！
6. FizzBuzz，你可以传入起始和结束数字
7.现在反过来做！
8. 在 FizzBuzz 中您可以传递任何您想要的单词和数字并获得额外积分！
提交您的作品！
用这个作为面试技巧！
答案和最后几点

如果您知道 FizzBuzz 是什么，请跳至说明

FizzBuzz 是什么？

这是一个简单的游戏。

你开始数 1、2 等等。

每当达到 3 的倍数（3、6、9 等）时，就用单词“Fizz”替换该数字。

每当达到 5 的倍数（5、10、15 等）时，就用单词“Buzz”替换该数字。

哦，如果达到 3 和 5 的倍数（15、30、45 等），则用“FizzBuzz”替换该单词。

这些就是规则。

在面试问题中，通常会要求您输出数字 1 到 100 以及相关的“fizz”、“buzz”和“FizzBuzz”替换。

一个简单的例子，即使你是初学者也应该明白

如果你检查控制台，它会按预期输出数字和单词。如果你愿意，可以将其作为示例进行操作/学习。

指示

无论您是初学者还是专业人士，您都将完成相同的任务。

然而，此挑战的专业版本有额外的规定/要求：

对于初学者

尝试单独解决每个问题。如果你愿意，可以为每个解决方案编写不同的代码。

如果你在解决一个问题时遇到困难，那就直接跳到下一个！它们的难易程度并不一定按顺序排列，例如，你可能会发现第 6 题比第 5 题更容易。

最后你应该有 8 种不同的解决方案

对于专业人士

每个要求都延续到下一个问题。

因此，到最后，您的一个答案应该适用于所有 8 个要求（如果指令中出现任何冲突，您应该始终使用最新的要求 - 即，记录到控制台应该替换为返回数组等）！

哦，您还需要处理一些额外的要求，以使其变得更加有趣！

最后你应该有一个涵盖所有要点的“超级解决方案”。本质上你应该已经构建了一个可配置的 FizzBuzz 库

1. 不使用 FizzBuzz`%`

您看到的几乎每个 FizzBuzz 答案都使用余数 ( %) 运算符。

对于这个挑战，我们删除了余数（%）运算符，因此您必须找到另一种方法来检查数字是否应该将 Fizz、Buzz 和/或 FizzBuzz 记录到控制台。

初学者

将每个数字 /Fizz/Buzz/FizzBuzz 记录到控制台，无需使用%。

优点

这个练习很简单，可以帮你轻松上手，跟这里的初学者练习一样就行！我保证，后面会越来越难！

2. FizzBuzz，但是它需要按下按钮！

在这个挑战中，你需要以某种方式将你的功能与按钮按下关联起来。这个按钮应该显示“下一个”。

每次按下按钮时，下一个数字/单词都应记录到控制台。

初学者

只需添加一个“下一个”按钮，并在每次按下时将下一个数字记录到控制台。它应该从 1 开始，每次按下按钮时都会增加（当然要遵循 FizzBuzz 规则！）。

如果您愿意，它可以继续超过 100，或者您可以在达到 100 后禁用该按钮以获得奖励积分！

优点

您必须添加两个额外的按钮！

第一个按钮应该完成当前状态下剩余的数字（因此，如果您的最后一个数字/单词是“22”，您应该可以按下此按钮，它会打印出 23 - 100）。此按钮应该显示“完成运行”的文字。

您还应该包含一个重置按钮（带有文本“重置”），将状态返回到开始状态，以便下次按下按钮时将“1”记录到控制台等。

3.FizzBuzz 但是它存储状态！

使用您对上一个问题的答案，您现在应该用它Window.localStorage来存储当前数字。

localStorage在第一次按下“下一步”按钮之前，它不能存储任何内容。

您应该能够重新加载页面，按下按钮，然后下一个数字就会记录到控制台。

初学者

您只需能够重新加载页面，按下“下一步”按钮即可返回下一个值。

优点

不要忘记，您需要能够重置状态并完成运行。

这里的一项规定是，如果您按下“重置”按钮，则必须完全删除您的localStorage条目。

4. 无循环的 FizzBuzz

在这个练习中，你的 FizzBuzz 生成器应该使用递归。

沒有任何类型的循環。

初学者

您可以将数字 1 到 100 的数字/单词记录到控制台，但您的函数必须使用递归而不是循环。

优点

作为一项额外规定，当 100 个数字/单词已记录到控制台时，也应在第 100 次输入后记录“完成”！

哦，别忘了其他按钮仍然需要工作！

5.停止记录到控制台！

现在您的 FizzBuzz 生成器应该返回它创建的值而不是记录到控制台。

初学者

只需返回下一个值，然后使用另一个函数（该函数调用了你的 fizz buzz 函数）<div>来显示该数字。你可以覆盖该数字，或者保留记录，并在新行上显示每个新数字。

为了清楚起见，您应该创建一个函数“outputResult”或类似的函数，它应该调用您的“FizzBuzzGenerator”函数，从中接收返回的值，然后将其输出到<div>页面上。

优点

为了使其更有趣，它应该按顺序返回当前值（按下“下一个”按钮后）、上一个值和下一个值。

您需要负责解决由于位于数字列表的开头或结尾而导致的错误 - 您应该null在发生这种情况时返回（例如，第一个输出将是（null，1，2），最后一个输出将是（99，100，null... 请参阅下一点）。

不要忘记，一旦达到 100，下一个条目应该显示“完成”，并且不应再增加（因此实际上 101 是“完成”）。

您还应该将每个条目输出为<table>以下格式：

数字	先前值	当前值	下一个值
！26	嗡嗡声	二十六	嘶嘶声
二十七	二十六	嘶嘶声	二十八
二十八	嘶嘶声	二十八	二十九
二十九	二十八	二十九	菲兹巴兹

等等等等

最后一点是，“重置”应该清除表格！

6. FizzBuzz，你可以传入起始和结束数字

一个很好的简单升级，您的函数现在应该接受任何起始数字和任何最终数字作为整数。

为了使您的答案完整，您应该<input>在示例中添加两个取最小值和最大值的 s。

初学者

这些数字始终是正整数，并且起始数字始终小于结束数字。

数字可以介于 1 到 10,000 之间。

您需要在两个输入旁边或下方添加一个调用您的函数的按钮才能测试这一点。

您可以输出到控制台或将所有数字放在中<div>。

优点

如果起始编号大于或等于结束编号，则必须记录以下确切语句：“错误，起始编号必须小于结束编号”。这应该被记录为错误。

您还需要考虑负整数，以便您可以接收 -10,000 到 10,000 之间的任何数字。

Zero 应该输出“0”而不是 FizzBuzz！

如果发生任何其他错误（例如传递了非数字或空值），您应该记录一个通用错误“输入值不正确”。

7.现在反过来做！

是的，这太卑鄙了！

现在你的函数应该也接受第三个参数。这次，如果该参数设置为，true数字应该从最大值开始倒数到最小值；如果设置为，false数字应该像之前一样按升序返回。

初学者

您只需使用数字 1 到 100，然后计算出如果传递了此参数，如何反转数字。

所以你可以使用 - myFizzBuzzFunction(false)(仍然会写 1 - 100)。但是myFizzBuzzFunction(true)会返回 100 - 1 (反转)。

优点

请记住，如果顺序颠倒，“完成”现在需要出现在最低数字之后。

您还需要制作第三个可选参数，以便我们可以使用或使用等调用您的函数，应该myFizzBuzzGenerator(smallNo, largeNo)是颠倒顺序的参数。myFizzBuzzGenerator(smallNo, largeNo, false)myFizzBuzzGenerator(smallNo, largeNo, true)myFizzBuzzGenerator(smallNo, largeNo, true)

您还有一项有趣的任务，即解决如何解释所有先前的规定（如果数字当前为 26 并且我们更改顺序会怎样）等等。

最后，您应该在之前添加的输入旁边添加一个复选框，选中后将反转顺序！

所以现在你应该有 3 个按钮：“下一步”、“完成运行”和“重置”，以及一个标有“反向顺序”的复选框。如果勾选了“反向顺序”，则按下“下一步”按钮会将数字减一，按下“完成运行”按钮则会从当前数字开始向下计数。

最后一件事：您必须根据复选框是否被选中，在结果表中添加一个额外的列。

数字	方向	先前值	当前值	下一个值
！26	前进（或错误）	嗡嗡声	二十六	嘶嘶声
二十七	前进（或错误）	二十六	嘶嘶声	二十八
二十八	前进（或错误）	嘶嘶声	二十八	二十九
二十九	前进（或错误）	二十八	二十九	菲兹巴兹
二十八	向后（或真实）	嘶嘶声	二十八	二十九
二十七	向后（或真实）	二十六	嘶嘶声	二十八

8. FizzBuzz，您可以传递任何您想要的单词和数字。

这次，该函数必须接受无限数量的除数/字对。

例如：-

let wordsAndDivisors = 
    [
        {"word": "Fizz", "divisor": 3},
        {"word": "Buzz", "divisor": 5},
        {"word": "Fluff", "divisor": 7}
    ]

////your function should log
1
2
"Fizz"
4
"Buzz"
"Fizz"
"Fluff"
8
"Fizz"
"Buzz"
11
"Fizz"
13
"Fluff"
"FizzBuzz"
[...]
92
"Fizz"
94
"Buzz"
"Fizz"
97
"Fluff"
"Fizz"
"Buzz"

初学者

您将收到 2 至 10 个不同的单词和除数对。

以下是一些需要测试的示例：

const wordsAndDivisors = 
    [
        {"word": "Fizz", "divisor": 3},
        {"word": "Buzz", "divisor": 5},
        {"word": "Fluff", "divisor": 11}
    ]

myFunction(wordsAndDivisors);
// 3 = Fizz, 5 = Buzz, 11 = Fluff, 33 = FizzFluff, 55 = BuzzFluff.


const wordsAndDivisorsTwo = 
    [
        {"word": "Fizz", "divisor": 3},
        {"word": "Buzz", "divisor": 5},
        {"word": "Fluff", "divisor": 7},
        {"word": "Biff", "divisor": 11},
        {"word": "Buffer", "divisor": 17},
        {"word": "Tink", "divisor": 23}
    ]

myFunction(wordsAndDivisorsTwo);
// 17 = Buffer, 46 = Tink, 77 = FluffBiff, 85 = BuzzBuffer.

优点

您必须考虑所述格式中的 0 - n 个条目。

这也是一个可选参数。如果没有传入任何条目，则仅返回相应方向上最小值和最大值之间的相应数字。

您的功能现在应该是myGeneratorFunction(min, max, directionOptional, wordsAndDivisorsOptional)

为了清楚起见，如果您在这里停下来，那么：-

myGeneratorFunction(1,100)只会返回 1 到 100 的数字
myGeneratorFunction(1,100, true)将返回数字 100 到 1
myGeneratorFunction(1,100, false, wordsAndDivisors)将返回 1 到 100，并用 fizz、buzz 和 fluff 替换！

现在去整理你的代码并在评论中提交它！

或者如果你想要最后一个小挑战来让它变得更加有用：

争取额外学分

创建一种接受参数作为对象（设置/配置）的方法，以适应不同的场景。

您可以指定设置对象结构以使这更容易。

如果您决定传递一个对象，那么您还可以获得加分，因为最小数字和最大数字具有默认值/可选参数：

1 表示最少
最多 100
默认方向应为向前
默认单词：除数对现在应该是正常的 FizzBuzz，而不是什么都没有！

为了清晰起见，我们应该能够将您的函数称为，myFizzBuzzGenerator()并且它会对数字 1 到 100 执行正常的 FizzBuzz 正向运算。（请注意，这与非额外积分版本的行为不同）。

但是我们也可以用它调用myFizzBuzzGenerator(myGeneratorSettings)，并且如果传入了最小数、最大数、方向等，它们都会覆盖默认值！

哦，之前的一切仍然重要！

额外加分！

提出这个图书馆可能有的其他“要求”。

看看你能不能让它完全可扩展，以便人们创建插件。你能给它提供斐波那契数列或任何数字序列吗？你能让它输出数字对应的单词吗？你能把它变成一个 Web 组件或 React 模块吗？

添加您能想到的任何要求，然后添加对这些问题的解决方案！

最后——您应该寻找什么？

因此，根据您选择初学者版本还是专业版本，您应该拥有 8 种不同的 FizzBuzz 变体或一种超级变体。

对于初学者

您只需确保每个功能都按预期运行并按要求输出信息。

我建议的一件事是，你应该为下一个需要处理你的代码的人注释掉任何特别令人困惑的部分。

如果您已成功创建所有 8 个版本，为什么不升级到半专业级别，看看是否可以将两个、三个甚至四个示例组合在一起，但使用初学者说明！

优点

这里的标准很高。

您应该确保您的代码是：-

易于理解并使用逻辑变量名等。
是高效的，嵌套循环是不行的（但是如果你对此有嵌套循环，我不确定你在做什么！😋🤣）。
如果您使其易于扩展并在适用的情况下将各个部分拆分为不同的功能，则可以获得加分。

回顾一下，看看你是否完成了此时的挑战，你应该已经：

不使用余数（%）运算符的函数！
一个接受小数、大数、反转标志和字除数对的函数。
两个输入和一个复选框，分别用于选择小、大和是否反转。
三个按钮“下一步”用于添加（或删除）1，“完成运行”继续到最大或最小数字，然后输出“完成”和“重置”按钮，根据方向返回到最大或最小数字。
重置按钮应该清除所有本地存储！
对每个传递的变量等进行错误检查。
递归而不是循环。
“0” 应该输出“0”而不是 FizzBuzz 或任何其他单词组合！
应该与无限（或零）的“word：divisor”对一起使用。
哦，我不应该这么说，但你的输入应该被正确标记
您应该有一个设置对象，您可以将其与默认值一起传递以获得额外积分！

提交您的作品！

提交的所有答案都应该使用 JavaScript，但是您显然可以使用任何您想要的语言完成这些挑战！

虽然没有奖品，但为其他人提供了一个批评您的工作、提供建议或从您的代码中学习的机会。

留下您的示例评论

jsFiddle

您可以在评论中包含带有以下格式的 liquid 标签的 jsFiddle：-

{% jsfiddle <url of fiddle> result js html %}

CodePen

您可以在评论中包含带有以下 liquid 标签的 CodePen：

{% codepen <url of pen> default-tab=result, js, html %}

您想要什么方式都可以！

如果你不想使用 jsfiddle 或 CodePen，那么任何其他代码沙盒都可以！只需提供一个链接，或者看看你选择的沙盒是否有对应的 Liquid 标签。

用这个作为面试技巧！

对于初学者/新开发人员来说，他们应该能够独立完成大部分任务。它还能让你了解他们解决问题的方式。

显然，使用“专业”任务作为编码面试缺少软技能、API 交互、设计/CSS 技能等。但总的来说，我认为有足够的内容可以让你很好地了解开发人员是否掌握了基本原则、代码结构、是否遵循简介，是否先阅读所有说明以查看解决方案中的潜在陷阱，或者是否一次解决每个问题并稍后重构等。

甚至有机会评估他们发现简报中潜在疏忽的能力（例如：如果我达到“完成”然后改变方向，我是否能够在不重置的情况下运行应用程序，是否希望将“完成”输出为表格中的额外行或最后一行应该是“100” - 如果是这样，最后一列应该包含什么“下一个数字”等等）。

正如您所看到的，它比典型的问答编码评估有很多好处。

它并不是设计为“照原样使用”的示例，而更多的是一种想法，即如何在以前的问题的基础上评估单一问题往往会忽略的不同现实世界问题解决技能。

我也很喜欢这条原则，因为它不依赖于特定的知识。我不需要知道一个特定的算法来解决一个除了面试之外我永远不会用到的问题，它让我能够运用我本该掌握的技能。

无论如何，这只是我的观点，你们中的一些人可能不同意，但我正在认真考虑改进这项技术作为我招聘时面试的基础。

下周揭晓答案！

请务必关注我，因为我将发布我的解决方案和/或针对初学者版本的最佳解决方案以及针对专业版本的“厨房水槽”解决方案！

@afif的特别说明

你可以尝试不使用 JavaScript 来完成初学者挑战……因为我知道 JS 对你来说有多难！哦，而且它还可以在一个浏览器中运行！

你可以使用 CSS 变量作为输入等等。输出你想要的信息！也不必是可访问的 😋🤣

（对于任何对此感到困惑的人，Temani 和我有一个笑话，说他因为是 CSS 忍者而被任何不使用 CSS 的东西伤害！）

任何其他喜欢挑战的人都可以这样做，因为我可以想象有一些非常有趣的解决方案超出了我有限的大脑！！

文章来源：https://dev.to/grahamthedev/take-fizzbuzz-to-the-next-level-8-challenges-from-beginner-to-pro-to-test-your-javascript-skills-2dih

仅使用“FizzBu​​zz”进行编码面试的基础⁉- 针对初学者和专业人士的 8 个挑战[为专业人士提供一些变化！😱]

仅使用“FizzBu​​zz”进行编码面试的基础⁉- 针对初学者和专业人士的 8 个挑战[为专业人士提供一些变化！😱]

内容

FizzBu​​zz 是什么？

指示

对于初学者

对于专业人士

1. 不使用 FizzBu​​zz%

初学者

优点

2. FizzBu​​zz，但是它需要按下按钮！

初学者

优点

3.FizzBu​​zz 但是它存储状态！

初学者

优点

4. 无循环的 FizzBu​​zz

初学者

优点

5.停止记录到控制台！

初学者

优点

6. FizzBu​​zz，你可以传入起始和结束数字

初学者

优点

7.现在反过来做！

初学者

优点

8. FizzBu​​zz，您可以传递任何您想要的单词和数字。

初学者

优点

争取额外学分

额外加分！

最后——您应该寻找什么？

对于初学者

优点

提交您的作品！

jsFiddle

CodePen

您想要什么方式都可以！

用这个作为面试技巧！

下周揭晓答案！

@afif的特别说明

仅使用“FizzBuzz”进行编码面试的基础⁉- 针对初学者和专业人士的 8 个挑战[为专业人士提供一些变化！😱]

仅使用“FizzBuzz”进行编码面试的基础⁉- 针对初学者和专业人士的 8 个挑战[为专业人士提供一些变化！😱]

FizzBuzz 是什么？

1. 不使用 FizzBuzz`%`

2. FizzBuzz，但是它需要按下按钮！

3.FizzBuzz 但是它存储状态！

4. 无循环的 FizzBuzz

6. FizzBuzz，你可以传入起始和结束数字

8. FizzBuzz，您可以传递任何您想要的单词和数字。