有多少次,你打开一个旧的项目,发现混乱的代码,当你添加一些新的东西时,很容易崩溃?我们都有过这样的经历。
为了减少难以读懂的javascript的数量,我提供了以下示例。这些都是我过去所犯过的错误。
对具有多个返回值的函数使用数组解构
假设我们有一个返回多个值的函数。一种可能的实现是使用数组解构,如下所示:
const func = () => { const a = 1; const b = 2; const c = 3; const d = 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
怎么办?
相反,我们可以使用对象解构。
const func = () => { const a = 1; const b = 2; const c = 3; const d = 4; return {a,b,c,d}; } const {c,d} = func();
现在,我们可以轻松地从函数中选择所需的数据,这也为我们的代码提供了未来的保障,允许我们在不破坏东西的情况下增加额外的返回变量。
不对函数参数使用对象分解
假设我们有一个函数,该函数将一个对象作为参数并对该对象的属性执行一些操作。一种幼稚的方法可能看起来像这样:
// 不推荐 function getDaysRemaining(subscription) { const startDate = subscription.startDate; const endDate = subscription.endDate; return endDate - startDate; }
上面的方法按预期工作,但是,我们创建了两个不必要的临时引用 startDate
和 endDate
。
一种更好的实现是对 subscription
对象使用对象解构来在一行中获取 startDate
和 endDate
。
// 推荐 function getDaysRemaining(subscription) { const { startDate, endDate } = subscription; return startDate - endDate; }
我们可以更进一步,直接对参数执行对象析构。
// 更好 function getDaysRemaining({ startDate, endDate }) { return startDate - endDate; }
更优雅,不是吗?
在不使用扩展运算符的情况下复制数组
使用 for
循环遍历数组并将其元素复制到新数组是冗长且相当丑陋的。
可以以简洁明了的方式使用扩展运算符来达到相同的效果。
const stuff = [1,2,3]; // 不推荐 const stuffCopyBad = [] for(let i = 0; i < stuff.length; i++){ stuffCopyBad[i] = stuff[i]; } // 推荐 const stuffCopyGood = [...stuff];
使用var
使用 const
保证不能重新分配变量。这样可以减少我们代码中的错误,并使其更易于理解。
// 不推荐 var x = "badX"; var y = "baxY"; // 推荐 const x = "goodX"; const y = "goodX";
果你确实需要重新分配变量,请始终选择 let
而不是 var
。
这是因为 let
是块作用域的,而 var
是函数作用域的。
块作用域告诉我们,只能在定义它的代码块内部访问变量,尝试访问块外部的变量会给我们提供ReferenceError。
for(let i = 0; i < 10; i++){ //something } print(i) // ReferenceError: i is not defined
函数作用域告诉我们,只能在定义其的函数内部访问变量。
for(var i = 0; i < 10; i++){ //something } console.log(i) // 10
let
和 const
都是块范围的。
不使用模板字面值
手动将字符串连接在一起相当麻烦,而且输入时可能会造成混淆。这是一个例子:
// 不推荐 function printStartAndEndDate({ startDate, endDate }) { console.log('StartDate:' + startDate + ',EndDate:' + endDate) }
模板文字为我们提供了一种可读且简洁的语法,该语法支持字符串插值。
// 推荐 function printStartAndEndDate({ startDate, endDate }) { console.log(`StartDate: ${startDate}, EndDate: ${endDate}`) }
模板文字也提供了嵌入新行的简便方法,你所需要做的就是照常按键盘上的Enter键。
// 两行打印 function printStartAndEndDate({ startDate, endDate }) { console.log(`StartDate: ${startDate} EndDate: ${endDate}`) }
推荐阅读
如果对你有帮助,还可以 在看、留言、 转发 ,这是对作者最大的帮助
以上所述就是小编给大家介绍的《停止犯下这5个JavaScript风格错误》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- [译] 停止犯下这 5 个 JavaScript 风格错误
- 从Alexa犯下的错说开去
- [译] 如何避免我作为初级开发者时所犯下的 7 个错误
- 优雅停止 SpringBoot 服务,拒绝 kill -9 暴力停止!
- 请停止结对编程
- 请停止学习框架!
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Python基础教程
[挪] Magnus Lie Hetland / 袁国忠 / 人民邮电出版 / 2018-2-1 / CNY 99.00
本书包括Python程序设计的方方面面:首先从Python的安装开始,随后介绍了Python的基础知识和基本概念,包括列表、元组、字符串、字典以及各种语句;然后循序渐进地介绍了一些相对高级的主题,包括抽象、异常、魔法方法、属性、迭代器;此后探讨了如何将Python与数据库、网络、C语言等工具结合使用,从而发挥出Python的强大功能,同时介绍了Python程序测试、打包、发布等知识;最后,作者结合......一起来看看 《Python基础教程》 这本书的介绍吧!