问FizzBuzz解

EN

习惯与语法

当您正在学习编写代码时，您会花费大量的时间来搜索bug。对于像fizzBizz这样的小项目来说，没有什么会出错的。但是，随着代码大小的增加，But的数量也随之增加。

坏习惯导致错误，最糟糕的类型的错误“很难看到错误”。它们很难看出来，因为坏习惯意味着糟糕的语法不会跳出来说错！

习惯倾向于坚持，所以当学习任何新东西时，最好是养成好习惯，而不是坏习惯。

坏习惯.

不使用分号

或者间歇性地使用它们。JavaScript需要分号，如果您不自己添加分号，解析器将为您添加分号。它被称为ASI 自动分号插入，它有一些奇怪的方法来解决在哪里放置缺失的分号。ASI并没有向您展示它在哪里添加分号，所以找出如何没有分号填充您的代码的最常见的方法是花费几个小时试图解决代码的问题。

好的JS使用分号，就这么简单。

不使用{}分隔代码块

你有if (el == "") el = i。是的，不需要把{}放在{ el = i; }上，但是习惯没有它们的块意味着当扩展块而忘记添加它们时很难发现它们。

严格的平等和不平等。

您可能需要使用== (平等)或!= (不平等)的次数少得可怜。始终使用=== (严格等式)或!== (严格不等式)

为什么？原因既长又复杂。严格相等，不等式，比较类型和值，而标准等式，不等式运算符将尝试转换(胁迫)一边的操作与另一边的类型，然后它将比较的值。胁迫类型的列表很长，而且并不总是很明显。

压痕

你的压痕到处都是。缩进可以帮助您读取代码，由于使用缩进松懈或不一致，使得代码难以读到1000倍。

不管缩进的样式是2还是4空格1或2制表符。不要混合和匹配，不要忘记在需要时缩进，不要在不该缩进的时候缩进。

所有IDE将自动缩进您，确保这是打开时，编写代码。还要学习使用代码格式化程序(所有IDE都有)

严格模式

始终在严格模式中运行代码。

好风格

有很多种样式，比如放置空格、如何启动代码块、在哪些地方断行、您更喜欢if else、switch、三元?还是短路。编码者会对着你的脸发青，告诉你什么是最好的。

除了你的坏习惯之外，你所使用的风格并不重要，重要的是你要保持一致。如果您在for (之间留了一个空格，那么每次都要这样做。

不一致的风格使代码更难阅读，也更难识别bug。

码噪声

代码噪声是任何不需要的东西(除上述坏习惯中的点外)。较少的代码噪音需要较少的努力来阅读和维护。

所有的编码器都有一个“每行错误”的配额。随着您获得经验，您可以编写的代码行数越多，而不必修复bug。

对此已经进行了很多研究，现实是，对每一个程序员来说，代码行的减少意味着bug的减少。

JavaScript有许多语法快捷键。学习它们并减少噪音。减少每行配额的错误需要时间，但是有很多方法可以减少您编写的行数。

代码行是所有不为空的行。注释算作行。

重写

我不会向你展示一种更好的写作方式--嗡嗡声(谷歌上有无数)。重写将使用您的逻辑和结构，但没有坏习惯，几个名字的改变，消除一些噪音和零星的个人风格偏好。

"use strict";

const isMultiple = (val, mod) => val % mod === 0;
const RULES = [{mod: 3, name: "Fizz"}, {mod: 5, name: "Buzz"}];

const fizzBuzz = (range, rules) => 
    Array(range).fill("").map((str, val) => {
        for (const {mod, name} of rules) { isMultiple(val + 1, mod) && (str += name) }
        return str ? str : str + (val + 1);
    });

console.log(fizzBuzz(100, RULES).join(", "));

较少的线条并不总是更好。

isMultiple(i，element.number) & (el += element.name)

我只看到过这种技术的缩小或混淆的代码。将if语句作为常规使用。

array不是描述性名称。无论如何，objArr与fizzBuzz耦合在一起，我将删除这个参数并直接使用objArr。

使用分号指定语句的结尾

我喜欢你实现它的方式，它只是需要一点润色。

• 与分号的使用、缩进、间距等保持一致(可能会有一个预先配置的线缆，如更漂亮或标准的)
• 在执行[...Array(range)].fill('')时，实际上不需要对数组进行重构就可以在此特定情况下应用.fill()
• 尽量避免修改变量。也就是说，与i++不同，const number = i + 1或者在任何地方都使用i + 1。
• 变量命名可以改进。
• 我看不出有什么理由去传递fizzes列表--这个游戏通常是不可配置的。

以下是以下建议的重写：

const isMultiple = (num, mod) => num % mod === 0;

const substitutions = [
  {
    factor: 3,
    replacement: 'Fizz',
  },
  {
    factor: 5,
    replacement: 'Buzz',
  },
];

const fizzBuzz = range => [...Array(range)]
  .map((_, i) => {
    const number = i + 1;
    let result = '';
    for (const { factor, replacement } of substitutions) {
      if (isMultiple(number, factor)) result += replacement;
    }
    return result || number;
  });

console.log(fizzBuzz(100));

我也要提出一种替代的，不那么设计的解决方案。由于游戏的规则已经设定好了，而且是简单的规则，我不认为有任何理由将它们提取到这样的列表中。

如果以类似的格式添加附加规则(例如，如果附加规则为7的倍数，比如baz)，则前面的解决方案提供了一定的自由度，但是如果附加规则不是您所预测的那样(也就是说，如果您说baz，您也不会说fizz或buzz )，那么baz是特殊的。这就是为什么避免过度工程的解决方案并保持简单的原因。

const isMultiple = (num, mod) => num % mod === 0;

const getSubstitution = n => {
  if (isMultiple(n, 3) && isMultiple(n, 5)) return 'FizzBuzz';
  else if (isMultiple(n, 3)) return 'Fizz';
  else if (isMultiple(n, 5)) return 'Buzz';
  else return n;
};

const fizzBuzz = length => [...Array(length)]
  .map((_, i) => getSubstitution(i + 1));

console.log(fizzBuzz(100))