停止犯下这5个JavaScript风格错误

开发 前端
有多少次,你打开一个旧的项目,发现混乱的代码,当你添加一些新的东西时,很容易崩溃?我们都有过这样的经历。为了减少难以读懂的javascript的数量,我提供了以下示例。这些都是我过去所犯过的错误。

有多少次,你打开一个旧的项目,发现混乱的代码,当你添加一些新的东西时,很容易崩溃?我们都有过这样的经历。

为了减少难以读懂的javascript的数量,我提供了以下示例。这些都是我过去所犯过的错误。

对具有多个返回值的函数使用数组解构

假设我们有一个返回多个值的函数。一种可能的实现是使用数组解构,如下所示:

  1. const func = () => { 
  2.   const a = 1
  3.   const b = 2
  4.   const c = 3
  5.   const d = 4;  
  6.   return [a,b,c,d]; 
  7. const [a,b,c,d] = func(); 
  8. console.log(a,b,c,d); // 1,2,3,4 

尽管上面的方法很好用,但确实引入了一些复杂性。

当我们调用函数并将值分配给 a,b,c,d 时,我们需要注意返回数据的顺序。这里的一个小错误可能会成为调试的噩梦。

此外,无法确切指定我们要从函数中获取哪些值,如果我们只需要 c 和 d 怎么办?

相反,我们可以使用对象解构。

  1. const func = () => { 
  2.   const a = 1
  3.   const b = 2
  4.   const c = 3
  5.   const d = 4
  6.   return {a,b,c,d}; 
  7. const {c,d} = func(); 

现在,我们可以轻松地从函数中选择所需的数据,这也为我们的代码提供了未来的保障,允许我们在不破坏东西的情况下增加额外的返回变量。

不对函数参数使用对象分解

假设我们有一个函数,该函数将一个对象作为参数并对该对象的属性执行一些操作。一种幼稚的方法可能看起来像这样:

  1. // 不推荐 
  2. function getDaysRemaining(subscription) { 
  3.   const startDate = subscription.startDate; 
  4.   const endDate = subscription.endDate; 
  5.   return endDate - startDate; 

上面的方法按预期工作,但是,我们创建了两个不必要的临时引用 startDate 和 endDate。

一种更好的实现是对 subscription 对象使用对象解构来在一行中获取 startDate 和 endDate。

  1. // 推荐 
  2. function getDaysRemaining(subscription) { 
  3.   const { startDate, endDate } = subscription; 
  4.   return startDate - endDate; 

我们可以更进一步,直接对参数执行对象析构。

  1. // 更好 
  2. function getDaysRemaining({ startDate, endDate }) { 
  3.   return startDate - endDate; 

更优雅,不是吗?

在不使用扩展运算符的情况下复制数组

使用 for 循环遍历数组并将其元素复制到新数组是冗长且相当丑陋的。

可以以简洁明了的方式使用扩展运算符来达到相同的效果。

  1. const stuff = [1,2,3]; 
  2.  
  3. // 不推荐 
  4. const stuffCopyBad = [] 
  5. for(let i = 0; i < stuff.length; i++){ 
  6.   stuffCopyBad[i] = stuff[i]; 
  7.  
  8. // 推荐 
  9. const stuffCopyGood = [...stuff]; 

使用var

使用 const 保证不能重新分配变量。这样可以减少我们代码中的错误,并使其更易于理解。

  1. // 不推荐 
  2. var x = "badX"
  3. var y = "baxY"
  4.  
  5. // 推荐 
  6. const x = "goodX"
  7. const y = "goodX"

果你确实需要重新分配变量,请始终选择 let 而不是 var。

这是因为 let 是块作用域的,而 var 是函数作用域的。

块作用域告诉我们,只能在定义它的代码块内部访问变量,尝试访问块外部的变量会给我们提供ReferenceError。

  1. for(let i = 0; i < 10; i++){ 
  2.   //something 
  3. print(i) // ReferenceError: i is not defined 

函数作用域告诉我们,只能在定义其的函数内部访问变量。

  1. for(var i = 0; i < 10; i++){ 
  2.   //something 
  3. console.log(i) // 10 

let 和 const 都是块范围的。

不使用模板字面值

手动将字符串连接在一起相当麻烦,而且输入时可能会造成混淆。这是一个例子:

  1. // 不推荐 
  2. function printStartAndEndDate({ startDate, endDate }) { 
  3.   console.log('StartDate:' + startDate + ',EndDate:' + endDate) 

模板文字为我们提供了一种可读且简洁的语法,该语法支持字符串插值。

  1. // 推荐 
  2. function printStartAndEndDate({ startDate, endDate }) { 
  3.   console.log(`StartDate: ${startDate}, EndDate: ${endDate}`) 

模板文字也提供了嵌入新行的简便方法,你所需要做的就是照常按键盘上的Enter键。

  1. // 两行打印 
  2. function printStartAndEndDate({ startDate, endDate }) { 
  3.   console.log(`StartDate: ${startDate} 
  4.   EndDate: ${endDate}`) 

 

责任编辑:赵宁宁 来源: 今日头条
相关推荐

2011-06-16 17:40:24

2021-10-28 19:21:56

GolangGo变量

2015-07-28 15:47:55

2016-03-29 10:21:24

大数据数据分析数据管理

2017-07-10 14:58:23

JavaScript代码风格写作准则

2017-01-12 14:55:50

JavaScript编程

2022-09-07 15:49:53

敏捷IT团队

2020-04-15 16:07:01

程序员技术数据

2021-08-06 09:20:41

IT管理IT领导者CIO

2021-12-30 21:51:10

JavaScript开发内存

2021-06-16 15:04:06

JavaScript内存开发

2015-10-27 10:10:01

微服务共享数据库架构设计

2019-08-01 12:36:54

物联网项目物联网IOT

2010-01-04 09:57:07

2019-11-29 10:03:43

5G技术智能家居

2018-03-15 10:21:50

程序员面试低级错误

2021-02-03 13:03:00

编程程序员语言

2020-07-14 07:12:19

云安全AI无服务器

2015-09-15 10:42:06

2020-08-06 08:27:21

JavaScript概念语言
点赞
收藏

51CTO技术栈公众号