是不是还记得以前 Javascript 是光标悬浮时改变页面元素的一门语言？这样的日子早就已经过去了，每一种语言都在随着时间推移而发展，我们使用他们的方式也是如此，在不断的发展。看一下你一两年前写的代码：你觉得惭愧吗？如果是，那么这篇文章应该很适合你 🙂。

我将在这篇文章列出一些最佳实践，使你的 JavaScript 代码更容易编写、阅读和维护。

使用可以格式化代码的检查工具(linter)

我给您的第一个建议是使用代码检查工具，他可以帮助你检查在不同文件是否遵循统一的规则，尤其是当不同开发人员在协同开发同一个项目时：缩进，括号中的空格，将==替换为=== …

但更重要的是，尽可能让你检查工具自动修复代码。 ESLint 就做得很好（使用 –fix 选项），而且它可以与所有主流 IDE 完美集成，以便在保存时自动修复文件。

你也可以使用 Prettier，不过这款工具更专注于格式化，而不是静态检查，但处理后的结果基本相同 😉 。

下一步，将帮助你选择使用什么样的规则来配合你的检查工具：

为你的检查工具(linter)使用现代化规则

如果不知道你的代码需要什么样的规则，可以参考 StandardJS 。这是一个非常严格的检查工具，不会给你任何配置选项，但它的每一条规则已经越来越多地被社区接纳。这里有一些例子：

• 使用 2 个空格缩进（我曾经使用 4 个空格，但实际使用起来 2 个空格很不错）
• 不使用分号（开始的时候会感到怪异，但几天过后我再也回不去了）
• 在关键字（如 if）和 花括号 之间使用空格，在园括号里面不使用空格
• 等等。

StandardJS 是一个独立的 Node 模块，可以进行代码检查和修复，但如果要在现有的大型项目中使用，建议你停用一些规则（因为有些地方可能需要作大量修改），也可以使用 ESLint 预设的配置。比如，我就停用了规则 no-mixed-operators 和 import/no-webpack-loader-syntax 。

使用 ES2015+ 新特性

如果你在使用 JavaScript 开发，肯定听说过 ES2015+（或 ES6，ES7 …）的特性。有些不可或缺的特性你应该知道：

• 箭头函数：对于函数式编程，比如写 x => x * 2 这样的函数非常有用（见下一点）
• 类：停止使用原型函数，使用类语法非常酷 😉 （但不要滥用，JavaScript 比任何面向对象的语言好多了）
• 对数组和对象的操作：

function doSomething() {
  const a = doSomethingElse()
  const b = doSomethingWithA(a)
  const otherResults = { c: '😺', d: '🐶' }
  return { a, b, ...otherResults } // equivalent to { a: a, b: b }
}
const { a, c, ...rest } = doSomething() // Also works with arrays!
// `rest` looks like { b: ..., d: '🐶' }

• 使用 async/await 编写更简单的异步处理：

// 请尝试用经典的 promises 编写相同的代码;）
async function doSomething() {
  const a = await getValueForA()
  const b = await getValueForBFromA(a)
  const [c, d] = await Promise.all([
    // 并行执行
    getValueForC(), getValueForDFromB(b)
  ])
  const total = await calculateTotal(a, b, c, d)
  return total / 1000
}

想知道如何使用这些梦幻般的特性吗？我的另一篇文章能给一些建议。（顺便说一下，使用最新版本的 Node.js，可能不再需要 Babel 就能使用这些新特性 😀）

使用函数式编程

现在，函数式编程已经取得不少成就，而且不仅仅是在 JavaScript 中。这是什么原因呢？函数式编程能使代码更具可预测，更安全，更确定，当你习惯了这种方式后，代码会更容易维护。这里有一些简单的建议：

首先，停止使用 for 循环，在大多数（可能是所有？）情况下根本不需要。例如：

const arr = [{ name: 'first', value: 13 }, { name: 'second', value: 7 }]

// 代替:
const res = {}
for (let i = 0; i < arr.length; i++) {
  const calculatedValue = arr[i].value * 10
  if (calculatedValue > 100) {
    res[arr[i].name] = calculatedValue
  }
}

// 更喜欢:
const res = arr
  .map(elem => ({ name: elem.name, calculatedValue: elem.value * 10 }))
  .filter(elem => elem.calculatedValue > 100)
  .reduce((acc, elem) => ({
    [elem.name]: calculatedValue,
    ...acc
  }), {})

好吧，我承认这是一个非常极端的例子，如果您不习惯函数式编程的话，这个例子看起来可能更复杂。也许我们可以简化它：

const enrichElementWithCalculatedValue =
  elem => ({ name: elem.name, calculatedValue: elem.value * 10 })
const filterElementsByValue = value =>
  elem => elem.calculatedValue > value
const aggregateElementInObject = (acc, elem) => ({
  [elem.name]: calculatedValue,
  ...acc
})
const res = arr
  .map(enrichElementWithCalculatedValue)
  .filter(filterElementsByValue(100))
  .reduce(aggregateElementInObject, {})

在这里，我们定义了三个函数，其功能基本上与其名字一致。第二个建议：创建局部函数（即使是在现有的函数中）来说明代码的功能，不需要使用注释。

注意，这三个局部函数不修改它们的执行上下文。在函数式编程中，没有外部变量被修改，没有其他服务被调用，… 它们被称为 纯函数 。它们有很大的优势

没有其他服务被调用…在函数式编程中，它们被称为纯函数。纯函数具有很大的优势：

• 它们很容易测试，因为从给定参数来说，只有一个可能的结果，即使我们把函数多调用几次;
• 无论应用程序的实际状态如何，它们都可以提供相同的结果;
• 应用程序的状态在函数调用之前和之后保持不变。

所以我的第三个建议是：尽可能地使用纯函数。

最后还有其他的一些建议

• 习惯于使用异步代码，经常使用 promise，看看 RxJS 的 observales（有一个很棒的教程关于从函数式编程到响应式编程）
• 编写测试!这应该看起来很明显，但是据我所知很多项目都有未经测试的代码，尽管测试 JavaScript (前端或后端)并不像看起来那样困难。
• 使用最新的语言特性：比如不要再写 arr.indexOf(elem) !== -1 这样的代码，而应该写成 arr.includes(elem)。
• 大量阅读技术文章：JavaScript subreddit 是了解生态系统中最酷的实践的一个很好的来源。

总结一下，我能给你的最好的建议是：总是重构你的代码！比如改进你一年前写过的模块？ 抓住机会，用 const 替换 var ，使用箭头函数或 async/await 来简化代码…总是用最好的代码进行工作一件很愉悦的事😉

原文链接：https://dev.to/scastiel/writing-modern-javascript-code