过去我写了很多垃圾代码，现在看起来很糟糕。当我再次看到那些代码片段时，我什至怀疑自己是否适合做一名程序员。
因此，今天我想跟你分享 10 个关于 JavaScript的小技巧，希望可以帮助你避免编写我曾经写过的垃圾代码。
Promise 提供了一种优雅的方式来处理 JavaScript 中的异步操作。这也是避免“回调地狱”的解决方案之一。但我不太明白这是什么意思，所以我写了这段代码。
我做了这些事情：
首先获取用户的基本信息。
按用户信息获取所有文章的简要摘要。
通过文章简要了解文章详情。
// ❌getUserInfo().then((userInfo)=>{getArticles(userInfo).then((articles)=>{Promise.all(articles.map((article)=>getArticleDetail(article))).then((articleDetails)=>{console.log(articleDetails)})})})
我在这里根本没有利用 Promise。我们应该像下面的代码片段一样处理它：
// ✅getUserInfo().then((getArticles).then((articles)=>{returnPromise.all(articles.map((article)=>getArticleDetail(article)))}).then((articleDetails)=>{console.log(articleDetails)})
我经常只写请求成功的代码逻辑，而忽略请求失败的代码逻辑。
// ❌constgetUserInfo=async()=>{try{constuserInfo=awaitfetch('/api/getUserInfo')}catch(err){}}
这是缺乏经验的做法，我们应该给出一个用户友好的提示，而不是什么也不做。
// ✅constgetUserInfo=async()=>{try{constuserInfo=awaitfetch('/api/getUserInfo')}catch(err){Toast(err.message)}}
当一个函数的参数太多时，它的可读性就会降低，甚至让我们不知道如何正确地传递参数。
举个例子：
我们想要获取用户的一些基本信息，比如姓名、性别、年龄等。
// ❌constgetUserInfo=(name,age,weight,gender,mobile,nationality,hobby,address)=>{// ...}getUserInfo('fatfish',100,2000,...)
那太糟了。如果你的同事写出这样的代码，你会殴打他吗？
事实上，当函数参数过多时，应该使用对象来传递所需的信息，这样其可读性和可扩展性就会提高。
// ✅constgetUserInfo=(options)=>{const{name,gender,age,mobile,weight,nationality,hobby,address}=options// ...}getUserInfo({name:'fatfish',age:100,weight:2000// ...})
小伙伴们，你们有写过这样的代码吗？很多地方用数字来进行逻辑判断似乎很正常。是的，这让我很困惑 1、2、3 到底是什么意思。
❌// component1.jsif(status===1||status===2){// ...}elseif(status===3){// ...}// component2.jsif(status===1||status===2){// ...}
我们最好将这些数字定义为常量。
// ✅// constants.jsexportconstSTATUS={// It is an adult and has real-name authenticationadultRealName:1,// It is a minor and has real-name authenticationminorRealName:2,// Not real-name authenticationnotRealName:3,// ...}// component1.jsimport{STATUS}from'./constants.js'if([STATUS.adultRealName,STATUS.minorRealName].includes(status)){// ...}elseif(status===STATUS.notRealName){// ...}// component2.jsimport{STATUS}from'./constants.js'// component2.jsif([STATUS.adultRealName,STATUS.minorRealName].includes(status)){// ...}
大多数时候，我们使用.length，判断字符串的长度是安全的，但是在表单输入的情况下要小心使用。
当我们输入 🍫 时，nameLen 的值为 2 — 这不是很奇怪吗？
// ❌<input type="text"id="name"><script>const$name=document.getElementById('name')$name.addEventListener('blur',()=>{constname=$name.valueconstnameLen=name.length// input: fatfish => nameLen: 7// input: 🍫 => nameLen: 2console.log(`name:${name}, nameLen:${nameLen}`)},false)</script>
是的，这是有原因的，你猜怎么着？
// ✅<input type="text"id="name"><script>const$name=document.getElementById('name')$name.addEventListener('blur',()=>{constname=$name.valueconstnameLen=name.lengthconstspRegexp=/[\uD800-\uDBFF][\uDC00-\uDFFF]/gconstnameRealLen=name.replace(spRegexp,'_').length// input: fatfish => nameLen: 7, nameRealLen: 7// input: 🍫 => nameLen: 2, nameRealLen: 1console.log(`name:${name}, nameLen:${nameLen}, nameRealLen:${nameRealLen}`)},false)</script>
我们经常向别人抱怨：“你为什么不写代码注释呢？” 但实际上，我从来没有写过！
// ❌constfn=(dpr)=>{if(dpr>=2){// ...}else{}}
天哪，你知道“dpr”是什么意思吗？我没想到这意味着窗口设备PixelRatio。
// ✅// dpr: Please enter a value for window.devicePixelRatioconstfn=(dpr)=>{if(dpr>=2){// ...}else{}}
与其写无意义的代码注释，还不如不写代码注释，因为它浪费你的时间。
你不妨解释一下“a”的含义或使用有意义的变量名称！
// ❌leta=1// Set the value of "a" to 1
过去，我常常编写随机命名变量的尴尬代码片段。
// ❌constmw=375
朋友们，请不要向我学习。你应该给变量一个正确且有意义的名称。
✅constmaxWidth=375
很多时候，我们的网站会不断调整功能，有新的和废弃的功能，但我总是担心以后会用到它们，所以我只是注释它们，而不是删除它们。
其实这种担心完全没有必要，因为以后用的可能性很小。即使以后要用到，也可以通过‘git’进行追溯。
我在一个组件中编写了一千多行代码。这太糟糕了，我们应该将组件的功能进一步拆分为更小的组件。
以上就是我今天想与你分享的全部内容，希望对你有用，最后，感谢你的阅读，如果你觉得不错的话，请记得关注我，点赞我，这样你将会阅读到更多文章内容。