人类可读的JavaScript

很长一段时间,人类需要像机器一样“说话”才能与他们交易所。这仍然是事实,我们仍然需要在汇编和其他低级语言中工作的人。但对于我们中的许多人来说,这些复杂性被抽象掉了。我们的工作是专注于人类可读的东西,让机器解释我们的代码。

这种考虑从不比能够以多种方式编写相同代码的情况更明显。所以今天,我想少谈一些事情是如何运作的,更多的是关于它如何阅读。这里有关于功能JavaScript的另一篇文章,但我们假设我们正在讨论 map

map 是一个可用于JavaScript中的数组的函数。把它想象成 for each。它将函数作为参数,并通过该函数运行数组中的每个元素。不同之处在于它根本不会改变原始阵列。结果是一个新的数组。

const arr = (1,2,3) let multipliedByTwo = arr.map(el => el*2) // multipledByTwo is (2,4,6) 

好的,我们知道地图的作用。但请查看上面的代码段。一个令人难以置信的简洁功能,它将变量乘以2。

那么让我们来看看我们编写相同逻辑的所有不同方法。

可选括号

我们可以做的第一个可选添加是将括号添加到内部函数的参数定义中。这使得这段代码看起来更像是典型的函数定义。

const arr = (1,2,3) let multipliedByTwo = arr.map((el) => el*2) 

有趣的是,我们不需要它们的唯一原因是因为我们只传递了一个参数。

const arr = (1,2,3) let multipliedByTwo = arr.map((el, index) => el*2) 

在我们传递多个参数的情况下,parens不是可选的。我们的例子是 map如果是的话 reduce 我们总是使用括号。

所以我们暂时考虑一下。我们通过添加括号来丢失任何东西吗?我们有什么收获吗?我们添加两个字符,这传达了什么信息?这些是我们在为队友和未来自我维护和阅读开发代码时需要问自己的事情。

成交量曲括号和 return

我们可以更进一步,使内部函数遵循官方函数语法。这样做需要花括号和 return 关键词。

const arr = (1,2,3) let multipliedByTwo = arr.map((el) => { return el*2}) 

我们现在对这段代码感觉如何?它当然更清楚地看作是一种功能。做括号和 return 添加更多批量?我们对此更改的看法是否取决于返回的逻辑?

事实证明,如果我们的函数逻辑不止一行,那么这也是非可选的。

const arr = (1,2,3) let multipliedByTwo = arr.map( (el) => {    if(el%2 === 0) {       return el*2   } else {       return el+1   } }) 

有趣。我们对额外字符的看法是否根据用例而改变?这对整个代码的一致性意味着什么?

使用单独的功能

正如我们所知道的那样, map 将函数作为参数并将数组中的每个元素传递给它。也许我们可以或者应该在我们之外定义我们的内部逻辑 map。就目前而言,它看起来有点像金字塔代码。

const arr = (1,2,3)  const timesTwo = (el) => el*2  let multipliedByTwo = arr.map((el) => timesTwo(el)) 

我们怎么想?实际上它与原始版本的字符数几乎相同。但是我们的例子来自于更复杂的逻辑呢?

const arr = (1,2,3)  const timesTwoOrPlusOne = (el) => {    if(el%2 === 0) {       return el*2   } else {       return el+1   } }  let multipliedByTwo = arr.map((el) => timesTwoOrPlusOne(el)) 

这改变了你的观点吗?或者看起来是否混乱和重复?

只是一个功能

函数式编程是一个有趣的范例。部分是因为它允许我们编写代码的方式。我们再次提醒我们 map 将函数作为参数。那么为什么不给它一个功能呢。

const arr = (1,2,3)  const timesTwo = (el) => el*2  let multipliedByTwo = arr.map(timesTwo) 

是的,这是有效的。 map 知道将它获取的元素传递给函数并使用结果。通过确定我们的形式,我们可以在杂草中获得更多 timesTwo 功能可以采取。现在它是一个简洁的单行。

请注意 map 非常聪明。即使该函数现在同时使用元素和索引来获得返回值,我们也可以传递相同的函数

const arr = (1,2,3)  const timesTwoPlusIndex = (el, index) => (el*2) + index  let multipliedByTwo = arr.map(timesTwoPlusIndex) 

这看起来可读吗? multipledByTwo 阅读当然令人愉快,但在哪里 timesTwoPlusIndex 位于我们的代码库中?难以追踪?如果有人第一次看到这个,他们知道这是一个功能吗?或者他们认为它是一个对象或数组变量?

函数是JavaScript中的对象,但暂时忽略该重复。

我们如何确定什么是可读的

没有一种尺寸适合所有语法。谁是你的观众? Polyglots或JavaScript专家?谁在维护您的代码?有多少人在这个代码库中工作?所有这些都很重要。

它完全取决于用例,一致性很重要。然而,看到相同功能的所有不同表示是令人大开眼界的。所有这些示例都将构建在相同的缩小代码中。因此,作为开发人员,我们的决定是基于人类的可读性。它完全没有机器性能和功能方面的考虑因素。

我提出了很多问题而不是很多答案。我有自己的意见,但很想听听你的意见。哪些是最具可读性的?你喜欢写的版本吗?我们在下面讨论吧

资讯来源:由0x资讯编译自DEV,原文:https://dev.to/laurieontech/human-readable-javascript-337o ,版权归作者所有,未经许可,不得转载
你可能还喜欢