本文主要是介绍【JavaScript】提高JavaScript代码质量的7个最佳实践，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

注：转载于 微信公众号的『前端新世界』原创翻译：

→ 被第3、4、5条 实践惊艳到了：推荐！！！

本文翻译自：
https://dev.to/i5han3/git-commit-message-convention-that-you-can-follow-1709

自2015年以来，随着ES6的发布，每年都会发布ECMAScript规范的新版本。每次迭代都为该语言添加了新的功能、新的语法和高质量的改进。接着大多数浏览器和Node.js中的JavaScript引擎也会很快追赶上来，所以我们的代码也应该与时俱进才可以——因为伴随着JavaScript的每一次新迭代，都会出现表达代码的新习惯和新方式，而且很多时候，这些更改可能会使得更易于我们维护代码。

下面有一些最新的ECMAScript功能，可以用来帮助我们编写更简洁，更明确和更易读的代码。

1. 块范围的声明

自从JavaScript语言问世以来，开发人员就一直在用var声明变量。关键字var比较怪异，最令人头疼的是使用它创建的变量的范围。

var x = 10
if (true) {
  var x = 15     // inner declaration overrides declaration in parent scope
  console.log(x) // prints 15
}
console.log(x)   // prints 15

由于用var定义的变量不是块范围的，因此在较小的作用域内重新定义它们会影响外部作用域的值。

现在，我们有了两个新的关键字来替换var，即let和const，它们就没有这方面的缺陷。

let y = 10
if (true) {
  let y = 15       // inner declaration is scoped within the if block
  console.log(y)   // prints 15
}
console.log(y)     // prints 10

const和let的语义不同：用const声明的变量不能在其范围内重新分配。这并不意味着它们是不可变的，只是它们的引用不能更改。

const x = []

x.push("Hello", "World!")
x // ["Hello", "World!"]

x = [] // TypeError: Attempted to assign to readonly property.

2. 箭头函数

箭头函数是近期引入JavaScript的另一个非常重要的功能。它们具有许多优点。首先也是最重要的一个优点是，它们使JavaScript的功能方面，看起来更漂亮，写起来更简单。

let x = [1, 2, 3, 4]

x.map(val => val * 2)                // [2, 4, 6, 8]
x.filter(val => val % 2 == 0)        // [2, 4]
x.reduce((acc, val) => acc + val, 0) // 10

在以上所有示例中，因以独特的箭头=>而命名的箭头函数用简洁的语法替换了传统函数。

1. 如果函数主体是单个表达式，则不需要写范围括号{}和return关键字。
2. 如果函数只有单个参数，则不需要写参数括号()。
3. 如果函数主体表达式是字典（dictionary），那必须将它封闭在括号()内。

箭头函数的另一个重要优点是它们不定义范围，而是存在于父范围内。这避免了使用this关键字可能会引起的许多陷阱。箭头函数对this没有绑定。在箭头函数内部，this的值与在父范围中的相同。因此，箭头函数不能用作方法或构造函数。箭头函数不适用于apply，bind或call，也没有对super的绑定。

它们还有其他的一些局限性，例如缺少传统函数可以访问的参数对象以及无法从函数主体yield。

因此，箭头函数不能百分百替代标准函数，但是完全可以添加到JavaScript的功能集中。

3. 可选链

假设有一个深层嵌套的数据结构，例如此处的person对象。想好你要访问的那个人的名和姓，你可以像这样编写代码：

person = {
  name: {
    first: 'John',
    last: 'Doe',
  },
  age: 42
}
person.name.first // 'John'
person.name.last  // 'Doe'

现在想象一下，如果person对象不包含嵌套的name对象，会发生什么。

person = {
  age: 42
}
person.name.first // TypeError: Cannot read property 'first' of undefined
person.name.last  // TypeError: Cannot read property 'last' of undefined

为避免此类错误，开发人员不得不求助于像下面这样的代码，这些代码不但冗长，而且还难以阅读、难以编写。

person && person.name && person.name.first // undefined

可选链——JavaScript的一项新功能，可以避免我们陷入这种尴尬的境地。可选链只要遇到null或undefined的值，就可以在未引发错误的情况下返回未undefined。

person?.name?.first // undefined

代码简洁明了。

4. Nullish合并

在引入Nullish合并运作符之前，JavaScript开发人员使用OR运算符||（如果缺少输入）回退到默认值。这伴随着一个重要的警告：即使合法但falsy的值也会导致回退到默认值。

function print(val) {
    return val || 'Missing'
}

print(undefined) // 'Missing'
print(null)      // 'Missing'

print(0)         // 'Missing'
print('')        // 'Missing'
print(false)     // 'Missing'
print(NaN)       // 'Missing'

JavaScript现在提出了空值合并运算符??，这为我们提供了一个更好的选择：如果前面的表达式为null-ish，它只会导致回退。这里的null-ish表示null或undefined的值。

function print(val) {
    return val ?? 'Missing'
}

print(undefined) // 'Missing'
print(null)      // 'Missing'

print(0)         // 0
print('')        // ''
print(false)     // false
print(NaN)       // NaN

这样一来，就可以确保如果程序接受falsy值作为合法输入，最后就不会回退。

转载 注：js中falsy值： '', 0, -0, NaN, false, null, undefined.

5. 逻辑分配

假设，当且仅当变量的值为null-ish时，才为该变量分配一个值。逻辑上的写法如下：

if (x === null || x == undefined) {
    x = y
}

如果你知道JS短路的工作原理，则可能想要使用null-ish合并运算符将这三行代码改为更简洁的版本。

译者注：短路，即逻辑运算从左到右。逻辑或运算，当左边的条件成立时，后面的条件将不再参与运算。

x ?? (x = y) // x = y if x is nullish, else no effect

这里我们使用了null-ish合并运算符的短路功能来执行第二部分，如果x为nullish，则x = y。代码非常简洁，但理解起来仍然有点难度。逻辑null-ish分配消除了对这种变通方法的需要。

x ??= y // x = y if x is nullish, else no effect

JavaScript还引入了逻辑AND赋值&&=和逻辑OR赋值||=运算符。这些运算符仅在满足特定条件时执行分配，否则不起作用。

x ||= y // x = y if x is falsy, else no effect
x &&= y // x = y if x is truthy, else no effect

重点提示：如果你学过Ruby，那么你应该已经看到过||=和&&=运算符，因为Ruby没有falsy值的概念。

6.命名捕获组

让我们首先快速回顾一下正则表达式中的捕获组。捕获组是与括号中的正则表达式部分匹配的字符串的一部分。

let re = /(\d{4})-(\d{2})-(\d{2})/
let result = re.exec('Pi day this year falls on 2021-03-14!')

result[0] // '2020-03-14', the complete match
result[1] // '2020', the first capture group
result[2] // '03', the second capture group
result[3] // '14', the third capture group

正则表达式在相当长的一段时间内也支持命名捕获组，这是通过名称而不是索引引用捕获组的一种方式。现在，归功于ES9，此功能来到了JavaScript。结果对象包含嵌套的组对象，其中每个捕获组的值都映射到其名称。

let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
let result = re.exec('Pi day this year falls on 2021-03-14!')

result.groups.year  // '2020', the group named 'year'
result.groups.month // '03', the group named 'month'
result.groups.day   // '14', the group named 'day'

新的API与另一个新的JavaScript功能——解构分配——合作起来亲密无间。

let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
let result = re.exec('Pi day this year falls on 2021-03-14!')
let { year, month, day } = result.groups

year  // '2020'
month // '03'
day   // '14'

7. async和await

JavaScript的强大功能之一就是它的异步性。这意味着许多长时间运行或非常耗时的函数可以返回Promise而不阻塞执行。

const url = 'https://the-one-api.dev/v2/book'
let prom = fetch(url)
prom // Promise {<pending>}

// wait a bit
prom // Promise {<fullfilled>: Response}, if no errors
// or
prom // Promise {<rejected>: Error message}, if any error

调用fetch返回Promise，该Promise在创建时的状态为pending。很快，当API返回响应时，它将转换为fulfilled状态，并包装可以访问的Respond。在Promises世界中，你将执行以下操作来进行API调用并将响应解析为JSON。

const url = 'https://the-one-api.dev/v2/book'
let prom = fetch(url)
prom                               // Promise {<fullfilled>: Response}
  .then(res => res.json())
  .then(json => console.log(json)) // prints response, if no errors
  .catch(err => console.log(err))  // prints error message, if any error

2017年，JavaScript宣布了两个新的关键字async和await，这使Promises的处理和使用变得更加轻松和流畅。它们不是Promises的替代品；它们只是强大的Promises概念之上的语法糖。

取代了将所有代码都发生在一系列then函数内，await让一切看起来像是同步的JavaScript。另外一个好处是，你可以将try ... catch与await结合使用，而不是像直接使用Promises那样处理catch函数中的错误。用await表示的相同代码如下所示。

const url = 'https://the-one-api.dev/v2/book'
let res = await fetch(url) // Promise {<fullfilled>: Response} -await-> Response
try {
    let json = await res.json()
    console.log(json) // prints response, if no errors
} catch(err) {
  console.log(err)  // prints error message, if any error
}

async关键字就是硬币的另一面，它包装了将在Promise中发送的所有数据。想一下假设我们要在以下异步函数中添加多个数字。当然，在现实世界中，代码执行的肯定是更为复杂的操作。

async function sum(...nums) {
    return nums.reduce((agg, val) => agg + val, 0)
}

sum(1, 2, 3)                    // Promise {<fulfilled>: 6}
  .then(res => console.log(res) // prints 6

let res = await sum(1, 2, 3)    // Promise {<fulfilled>: 6} -await-> 6
console.log(res)                // prints 6

这篇关于【JavaScript】提高JavaScript代码质量的7个最佳实践的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！