【免费赠书】6 种在 JavaScript 中清理代码的方法

英文 | https://medium.com/@ignacioojan/6-ways-to-clean-up-your-code-in-javascript-20908f0a2467

翻译 | 杨小爱

这些方法将帮助您提高代码的清洁度。我不会在本文中介绍完全重构模式。这些方法是您现在可以马上应用的，它们是简单直接的更改。

1、删除不必要的 return 语句：

检查函数内部是否需要存在。可以简化为一行代码吗？如果是这样，JavaScript 允许使用隐式返回来简化代码。

从下面检查代码。在那里，我删除了额外的变量声明 usersFound，让我可以选择删除未使用的 return 语句。

// This function receives as arguments an array of objects,
// [{ firstName: 'Test' }, { firstName: 'Ignacio' }, ...]
// This function returns all the users with name 'Test' 
const findTestNameUsers = (users) => {
  const usersFound = users.filter((user) => {
    return user.firstName === 'Test'
  })
  return usersFound
}
// This function has the same behaviour as the one above.
// This function uses implicit return statements
const findTestNameUsers = (users) => (
  users.filter(user => user.firstName === 'Test')
)

2 、变量名称应具有描述性：

一个好的变量名有助于提高代码的可读性。避免使用字母甚至 for 循环。还要记住使用驼峰命名法，它是 JavaScript 的标准命名约定。

让我继续使用上面的例子。

// This function receives as arguments an array of objects,
// [{ firstName: 'Test' }, { firstName: 'Ignacio' }, ...]
// This function returns all the users with name 'Test' 
const newFunction = (a) => (
  a.filter(u => u.firstName === 'Test')
)
// You can see, how by giving better naming to the function it 
// is easier to identify what they do.
const findTestNameUsers = (users) => (
  users.filter(user => user.firstName === 'Test')
)

3 、仅在返回原始值时使用三元条件：

避免在三元条件中添加复杂的逻辑。他们有时已经令人困惑。尝试在三元条件下返回一个原始值，否则不要害怕使用 if 和 else 条件。

const greeting = true
const welcomeGreeting = 'Welcome to the condition'
const notWelcome = 'Not Welcome to the condition'
const notGreeting = 'No Greeting for you'
// Pretty confusing the line below...
const value = greeting ? welcomeGreeting ? welcomeGreeting : notWelcome : noGreeting
console.log(value) // will console.log Welcome to the condition.
// Let me change that to make it easier to read, 
// we will add a couple more lines but it will make your life 
// easier.
const greeting = true
const welcomeGreeting = 'Welcome to the condition'
const notWelcome = 'Not Welcome to the condition'
const notGreeting = 'No Greeting for you'
if(greeting) {
  console.log(welcomeGreeting ? welcomeGreeting : notWelcome)
} else {
  console.log(noGreeting)
}

4 、在检查中使用正值：

在将否定检查转换为肯定检查时，我们的大脑必须进行额外的操作。尝试通过将其转换为正面检查来删除该额外步骤。

const argument = null
// For this check, you will have to make an extra operation,
// ! => not, therefore, if there is NO argument, 
// then run the following block.
if (!argument) {
  return 'The argument is empty'
} else {
  return 'The argument is not empty'
}
// Let's convert the previous block to a positive check
const argument = null
if (argument) {
  return 'The argument is present'
} else {
  return 'The argument is not present'
}

5 、在访问函数参数或对象中的值时使用解构：

JavaScript 中的解构是一个很好的工具。它可以帮助您避免在已经提供给您时创建新的变量名称。

// The key is already the perfect variable name, why not use it?
const userFirstName = user.firstName
// Much cleaner!
const { firstName } = user

6 、使用现有的格式化工具来帮助您格式化代码。

已经有一些工具可以帮助您格式化代码以满足该语言的最佳实践。

我只会向已经有 JavaScript 经验的开发人员推荐这个工具。我相信学习 JavaScript 的最佳实践对新开发人员是有好处的。

我建议你看看Prettier，地址：https://prettier.io/

总结

以上就是我今天与您分享的内容，希望对您有所帮助，如果您有什么问题，请在留言区给我留言交流学习。

最后，感谢您的阅读，祝编程愉快！

另外，今天我还给大家带了两本图书《Vue.js框架与Web前端开发从入门到精通》和《 Node.js入门指南》，免费赠送给大家，希望大家会喜欢，以下是赠书的规则：

免费赠书领取规则

1、必须是关注了我们【web前端开发】公众号的读者。

2、要在留言区里给我们留言，说说你为啥想要这本书，或者是你的编程趣事。

3、留言点赞数最高的前8位读者朋友们（点赞数相同按系统顺序排序），就可以任意选择其中一本书，免费领回家。

这3点必须同时满足哦~

活动截止时间：2021年11月30日晚上9点，中奖者名单，将在2021年12月1日的头条文章推送中的PS里进行公布。请大家自行关注。

所赠送图书均包邮到家。

赠送图书的图片如下：

《Vue.js框架与Web前端开发从入门到精通》

《 Node.js入门指南》

学习更多技能

请点击下方公众号