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

最近一直在看重构第二版，收获还是很大，特别是看到集合管道的时候，发现平时在用但是没有理解那么深刻，很多时候可能就是随缘的去写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])

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

第三：来一个实际的例子

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

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

一般我们的误区是：

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

第四：总结

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

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