降低代码质量的最糟糕的JavaScript 编写

译文地址tech.groww.in

JavaScript 可能是编程世界中极少数可以做任何事情的语言之一。从非常明显的前端到鲜为人知的领域，如无人机和飞行机器人，是的，你没看错，可以用语言构建。为了简单起见，任何可以用 JavaScript 完成的事情，都可以用 JavaScript 完成。

因此，了解语言深度非常重要。人们讨厌 JS，因为他们不完全理解它以及它在底层是如何工作的。除此之外，有些人认为他们知道这一点，但最终遵循了一些实践，这反过来降低了项目的代码质量。因此，我们今天关注的重点是讨论导致这种情况的做法。

还在使用var吗？

哦，来吧。你还在做吗？我们正处于 JS 世界正在经历的最具成长性的年代。像 React、Angular 这样的框架统治着市场，你正在使用 6 年前过时的东西。除非您正在处理非常古老的东西，否则这种情况是没有任何借口的。

对于一个快速回顾，让我们来看看var是如何let和const帮助我们以更好的方式。

当你声明一个var关键字时，它的作用域不限于它所在的块。它也可以在街区外的任何地方访问。它是一个函数作用域关键字。您一定已经了解我们可能遇到问题的情况。如果没有，这里有一个例子。

插图

现在在这种情况下，我们不会出错，但我们的值将被覆盖。那可能不是我们想要的情况。我们希望有一个关于相同的错误。我们不会有这样的情况let和const。JS 引擎将抛出语法错误。

学习JS的时候用*const a = “value”*是可以的。但是，当您从事任何项目时，使用这种做法会给您和其他开发人员带来痛苦。相信我。我们在 Groww，将此作为第一个培训项目进行教学。假设您编写了以下代码。

您是否能够理解这些常量的含义以及将在何处使用它们？也许🤔。因为你已经写了。但是你的同事会理解吗？我希望你能解决我所说的问题。与上面的代码相反，我们在下面有一个更好的代码。

很明显我们的变量意味着什么。因此，请使用描述性变量名称。

如果 JavaScript 对类型转换很宽容，那确实意味着我们会滥用它。

对于那些知道 undefined 和 null 之间区别的人来说，上述情况可能很神奇。事实上，你的代码中的魔法越少越好。

'' 只是比较保留其类型的值。这种情况可以暂时避免错误，但如果比较意外的内容，您的代码可能会表现得最差。因此，为了安全起见，请始终使用 '='。这是一种严格的比较，比较值及其类型。我们对上述陈述的有利结果是：-

它与 JavaScript 本身无关。只是一种标准的编码实践，您在编程时应该用任何语言遵循。DRY 原则意味着不要重复自己。我想这是不言自明的。我们应该尽量用最少的字数写出干净的代码。一个简单的例子是：-

看起来好多了对吧？它也以更好的方式工作。这只是一个例子。尝试找出代码中的此类实例，并为此找到创新的解决方案。

如果您正在从事中型或大型项目，那么您很可能会使用 API。无论您使用 Fetch、Axios 还是 XHR，总有可能因任何原因导致 API 失败。那可能是未授权、未找到或一般服务器错误。

不只是新手，就连一些有经验的老手也会忘记考虑这些情况，这对用户体验来说不太好。处理错误使您的应用程序不太容易出现不需要的情况或页面。

我知道你们大多数人都知道箭头函数。但是，您的知识是否仅限于它们是正常功能的语法糖这一事实？如果是这样的话，你错过了很多东西，我的朋友。它们之间有一些非常显着的差异，如果忽略这些差异会导致麻烦。

**箭头函数没有自己的上下文。**如果它们是在另一个函数中定义的，这一点尤其重要。例如，作为forEach执行的回调。如果在箭头函数内您使用关键字，则this您正在引用父函数的上下文。这是一个很大的不同，因为在箭头函数之前，您必须this在调用回调函数之前保存对的引用，并且在回调中使用新引用，否则this内部将是一个全新的上下文。
**箭头函数不是有效的构造函数。**信不信由你，常规函数是“可构造的”。这意味着可以使用new关键字调用它们并返回该函数的新实例。为什么这是可能的？因为那时候，在 ES6 之前，我们也有原型继承作为我们处理对象的主要方式，函数（常规函数）是它们的构造函数。然而，现在有了类，这不再是“要走的路”，箭头函数反映了方向的变化。可调用的箭头函数（就像常规函数一样）是不可构造的，因此您不能在调用它们之前真正放置 a new，它不起作用。
**他们不允许重复的参数名称。**这对于非严格模式下的常规函数是可以接受的。然而，这不能用箭头函数发生，不管你想要多严格。

随着我们使用 JavaScript 构建越来越复杂的用例。这使我们作为开发人员有时会使用技巧来保持我们的代码正常工作。一个经典的例子是搜索一个数组是否包含一个项目。我从不喜欢用来array.indexOf(item) !== -1检查项目的存在。

这可以正常工作，但不是很好的方法。我们应该使用最新的 ES6 和更新的标准进行更新。它们带来了新功能来有效地解决我们的问题。例如，在上述情况下，我们可以使用新的 ES6 Method array.includes(item)。这只是一个例子。可以有无数其他人。

这些是我认为应该考虑的一些事情，以便编写更好的 JavaScript 代码。请随时在评论部分添加更多内容。

如果你喜欢这个故事，请点击👏按钮并分享它，这样其他人也可以找到它！！

Groww Engineering 发布技术轶事、最新技术以及解决常见编程问题的更好方法。您可以在此处订阅以获取最新更新。