中止犯下这5个JavaScript风格错误，使你的代码可读和可维护的快速提示

使你的代码可读和可维护的快速提示。

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

为了减小难以读懂的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}`)
}

---

来源：https://medium.com，做者：Giuseppe Picciano，翻译：公众号《前端全栈开发者》

本文首发于公众号 《前端全栈开发者》 ，第一时间阅读最新文章，会优先两天发表新文章。