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

web前端开发

共 3545字,需浏览 8分钟

 ·

2021-12-01 10:33

英文 | 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 statementsconst 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 = trueconst 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 : noGreetingconsole.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 = trueconst 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 checkconst argument = nullif (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入门指南》


学习更多技能
请点击下方公众号

浏览 35
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报