美文网首页让前端飞Web前端之路
不要再犯这五个 Javascript 错误啦

不要再犯这五个 Javascript 错误啦

作者: 程序员的青春 | 来源:发表于2020-09-28 11:27 被阅读0次

    下文将列出五个让你的代码更加可读和易于维护小窍门。

    在编辑旧项目的时候,有没有遇到过那种一加新逻辑就“粉碎”的迷惑代码?我们当然都遇到过。为了让世界上不可读的Javascript代码更少,我得给你们看看以下的五个例子 -- 我的耻辱柱。

    使用数组解构获取函数的多个返回值

    如果我们有一个返回多个值的函数,可以使用数组解构实现取值。代码如下:

    虽然上面的方法能实现赋值,但是它有一些副作用。

    调用函数得到返回值a,b,c,d时,我们需要注意返回值返回的顺序。这里的一个小错误很可能就是你 debug 路上的梦魇。

    除了需要注意顺序,我们还不能只获取想要的其中几个返回值,假如我只想要c,d呢?

    我们可以使用对象解构赋值来代替它。

    现在我们可以自由地选择需要哪些函数返回值。

    以后就算函数增加了更多的返回值,对象解构的代码也可以不做任何变更,使代码更加稳定。

    没有在函数入参使用对象解构

    假设我们有一个入参是对象的函数,函数内代码需要使用到这个对象的属性。 一个幼稚的实现如下:

    这个方案虽然满足了我们的需要,但是声明了两个没什么必要的临时引用变量 startDate 和 endDate。

    一个更好的方案是使用对象解构在一行里面获取入参 startDate 和 endDate。

    我们甚至可以直接在入参使用对象解构定义这两个变量。

    你难道不觉得这样实现更优雅吗?

    不使用展开语法(...)拷贝数组

    使用 for 循环遍历元素再拷贝到新数组除了繁琐还很丑陋。

    使用展开语法可以让实现更加清晰和简洁。

    使用 Var

    使用 const 保证一个变量不能重新赋值,能够减少 bug 以及提高代码可读性。

    If you really need to reassign a variable, always prefer let over var .如果真的需要对一个变量重新赋值,使用let代替var。

    let作用于块作用域,而var作用于函数作用域。

    块作用域使变量仅在定义它的代码块中有效,在块作用域外访问变量将会提示ReferenceError

    定义在函数作用域的变量可以在定义它的函数范围内使用。

    let和const定义都变量都可以在块作用域访问到。

    不使用模板字符串

    手动拼接字符串写起来非常复杂,读起来很困惑。看例子:

    模板字符串提供清晰和易读的在字符串插入变量的方法。

    模板字符串提供了也简单的方法换行,你只需要在键盘按下 enter 键,像你平时(在系统)使用一样。

    在前端领域混了这几年,总结了一套前端学习的精讲视频和学习路线,如果有对前端开发感兴趣的伙伴,不管你是想转行,或是大学生,还有工作中想提升自己能力的web前端党,欢迎大家的加入我的前端开发交流群:603985993 希望大家诚心交流!,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号:【前端留学生】 每天更新最新技术文章干货。

    相关文章

      网友评论

        本文标题:不要再犯这五个 Javascript 错误啦

        本文链接:https://www.haomeiwen.com/subject/wmrduktx.html