写让人很容易理解的代码 – 集合管道

我心飞翔 分类:javascript

最近一直在看重构第二版,收获还是很大,特别是看到集合管道的时候,发现平时在用但是没有理解那么深刻,很多时候可能就是随缘的去写for循环了,也没有考虑可阅读性

第一:集合管道示范

改造之前的代码

// input: 
// office, country, telephone
// beijing, China, +86000000
// beijing, China, +86000000

function acquireData(input) {
    const line = input.split("\n")
    let firstLine = true
    const result = []
    for(const line of lines){
        if(firstLine) {
            firstLine = false
            continue
        }
        if(line.trim() === "") continue
        const record = line.split(",")
        if(record[1].trim() === "india") {
            result.push({city: record[0].trim(), phone: record[2].trim()})
        }
    }
    return result
}
 

其实任何一个人,看上面的代码都需要费点劲去理解下,才能看懂;但是你看看改造之后的代码,看下改造前后理解代码消耗的心力是不是一样的

改造之后的代码

function acquireData(input) {
    const lines = input.split("\n")
    return lines
         .slice(1)
         .filter(line => line.trim() !== "")
         .map(line => line.split(","))
         .filter(fields => fields[1].trim() === 'india')
         .map(fields => { city: fields[0].trim(), phone: fields[2].trim() })
}
 

对比看看两段代码你会发现,改造后的让你理解来特别的舒服

所以像map,filter等管道类型的可以多去看看啦。平时刻意的用起来,看到for循环的看看是不是可以用管道重构;

第二:常见的js管道方法总结

可以直接看developer.mozilla.org/zh-CN/docs/…

  • forEach(callback[, this.Object])

这个其实也不算

  • reverse()

  • map(callback[, thisObject])

返回一个新的数组

  • filter(callback[, thisObject])

返回满足过滤条件的新数组

  • every(callback[, thisObject])

当数组中每一个元素在callback上被返回true时就返回true

  • some(callback[, thisObject])

只要数组中有一项在callback上被返回true,就返回true

  • reduce(callback[, initialValue])
  • reduceRight(callback[, initalvalue])

这个特别建议去看看,非常有用,特别是像那种叠加情况下

第三:来一个实际的例子

学完之后,里面现学现用,看下效果如何

image.png

可以看到改造之后的代码更方便理解,其实优雅这个词太高端了,如何编写出让人阅读的时候画的精力少,在你的代码基础上修改起来,修改的少的代码就是优秀的代码!

一般我们的误区是:

  1. 在使用for循环的时候,没有考虑用管道方式,本质是没有考虑代码可读性
  2. 在for循环中,如果有几个逻辑,没有考虑可以链式使用管道去解决
  3. 担心性能,其实在现在这个阶段,这部分性能是可以忽略的

第四:总结

所以看到你的代码中想用for,forEach的地方,看下能不能用管道去替换,这些我也是看重构这本书上案例,这本书总结得挺好的,之前感触可能没那么深刻!非常推荐《重构》第二版

也可以看看Martin Fowler 的经典文章
原文:www.martinfowler.com/articles/re…
翻译:www.jackyshen.com/2016/07/04/…

回复

我来回复
  • 暂无回复内容