当前位置: 首页 > 科技观察

停止犯这5个JavaScript风格错误

时间:2023-03-16 22:02:49 科技观察

你有多少次打开一个旧项目,发现添加新东西时很容易崩溃的混乱代码?我们都去过那里。为了减少不可读的javascript的数量,我提供了以下示例。这些是我过去犯过的错误。对具有多个返回值的函数使用数组解构假设我们有一个返回多个值的函数。一种可能的实现是使用数组解构,如下所示:constfunc=()=>{consta=1;constb=2;constc=3;constd=4;return[a,b,c,d];}const[a,b,c,d]=func();console.log(a,b,c,d);//1,2,3,4上面的方法虽然效果很好,但是确实引入了一些复杂性。我们在调用函数,给a,b,c,d赋值的时候,需要注意返回数据的顺序。这里的一个小错误可能会成为调试的噩梦。还有,没有办法准确地指定我们想要从函数中得到哪些值,如果我们只需要c和d呢?相反,我们可以使用对象解构。constfunc=()=>{consta=1;constb=2;constc=3;constd=4;return{a,b,c,d};}const{c,d}=func();现在,我们可以轻松地从一个函数中选择我们需要的数据,这也让我们的代码面向未来,允许我们添加额外的返回变量而不会破坏任何东西。不对函数参数使用对象分解假设我们有一个函数,它将一个对象作为参数并对该对象的属性执行一些操作。一个天真的方法可能看起来像这样://deprecatedfunctiongetDaysRemaining(subscription){conststartDate=subscription.startDate;constendDate=subscription.endDate;returnendDate-startDate;}上面的方法按预期工作,但是,我们创建了两个不必要的临时引用开始日期和结束日期。更好的实现是在订阅对象上使用对象解构来在一行中获取startDate和endDate。//推荐函数getDaysRemaining(subscription){const{startDate,endDate}=subscription;returnstartDate-endDate;}我们可以更进一步,直接对参数进行对象销毁。//更好的函数getDaysRemaining({startDate,endDate}){returnstartDate-endDate;}更优雅,不是吗?在不使用扩展运算符的情况下复制数组使用for循环遍历数组并将其元素复制到新数组是冗长且非常难看的。可以用简洁明了的方式使用展开运算符来达到同样的效果。conststuff=[1,2,3];//不推荐conststuffCopyBad=[]for(leti=0;i