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

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

新林ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18982081108（备注：SSL证书合作）期待与您的合作！

为了减少难以读懂的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风格错误
文章源于：http://www.shufengxianlan.com/qtweb/news38/267988.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容