如何优雅安全地在深层数据结构中取值

古有赵子龙面对“冲锋之势，有进无退，陷阵之志，有死无生”的局面，能万军丛中取敌将首级。
在咱们的Javascript中，每每用对象（Object）来存储一个数据结构。若是这个结构很是复杂，那么想要安全优雅地取出一个值，也并不是简单。

这篇文章将会详细阐述在一个嵌套较深的场景中，如何安全的完成读写操做。前后会尝试多种方法，但愿对读者有所启发。

本文示例借鉴A.Sharif的最新文章：Safely Accessing Deeply Nested Values In JavaScript，喜欢看英文原版的同窗能够直接戳连接。

场景介绍

在React开发中，咱们根据数据来渲染视图。常常会出现相似下面这种状况：

const props = {
    user: {
        posts: [
            { title: 'Foo', comments: [ 'Good one!', 'Interesting...' ] },
            { title: 'Bar', comments: [ 'Ok' ] },
            { title: 'Baz', comments: []}
        ],
        comments: [...]
    }
}复制代码

这是一个典型的获取用户评论信息并加以展现的场景。其实，这还嵌套的不够深，试想一个回复存在多层：回复的回复，回复的回复的回复。。。

姑且先看咱们的示例吧，此时咱们想获取第一个post的评论信息。用传统的javascript方法应该这么作：

props.user &&
props.user.posts &&
props.user.posts[0] &&
props.user.posts[0].comments复制代码

也许经验丰富的javascript开发者会明白使用这么多&&的意义。这是为了在对象中相关取值的过程，须要验证每个key和index的存在性。不然会有报错，这将会是致命性的。而且props这个数据结构必然是动态生成的，存在有时valid有时invalid的状况。在测试过程当中，很难复现。

一样的尴尬场景比比皆是，想象一下，若是咱们须要获取一名用户最后一个评论博客的题目，就须要：

props.user &&
props.user.comments &&
props.user.comments[0] &&
props.user.comments[0].blog.title复制代码

这些例子夸张吗？其实否则。咱们明白了，想要获取一个数据值，须要一层一层遍历属性的存在性。这无疑是繁琐的。

解决方案

如今明白了咱们面临的困扰，接下来我会用几种方法：

• 纯JavaScript方法;
• 最具备函数式表明的JavaScript库－Ramda，辅以柯粒化（currying）等思想和方案解决问题。

JavaScript方案

先直接上代码：

const get = (p, o) => p.reduce((xs, x) => (xs && xs[x]) ? xs[x] : null, o)

console.log(get(['user', 'posts', 0, 'comments'], props)) // [ 'Good one!', 'Interesting...' ]
console.log(get(['user', 'post', 0, 'comments'], props)) // null复制代码

注意这里我使用了一个ES5中，比较偏向函数式思想的reduce方法。关于这个方法，我想不少人其实还并不理解，建议先去进行学习，或者参考我以前的一篇文章。

同时，我尝试获取：user－>posts[0]－>comments，
并配以一个反例：user－>post[0]－>comments；
固然，在反例中，post数组并不存在。

咱们来分析一下代码。

const get = (p, o) =>
    p.reduce((xs, x) =>
        (xs && xs[x]) ? xs[x] : null, o)复制代码

咱们实现的get方法中，接收两个参数，第一个p表示获取值的路径（path）；另一个参数表示目标对象。

一样，为了设计上的更加灵活和抽象。咱们能够柯粒化咱们的方法：

const get = p => o =>
    p.reduce((xs, x) =>
        (xs && xs[x]) ? xs[x] : null, o)复制代码

这样的话，就能够这个姿式调用：

const getUserComments = get(['user', 'posts', 0, 'comments'])
console.log(getUserComments(props))
// [ 'Good one!', 'Interesting...' ]
console.log(getUserComments({user:{posts: []}}))
// null复制代码

若是关于get方法中reduce的使用还不清楚，那就再看一个简单的例子：

['id'].reduce((xs, x) => (xs && xs[x]) ? xs[x] : null, {id: 10})
// 返回10复制代码

Ramda方案

若是不本身手动设计上述方法的话，咱们可使用Ramda函数式类库完成：

const getUserComments = R.path(['user', 'posts', 0, 'comments'])复制代码

接下来调用须要这个姿式：

getUserComments(props) // [ 'Good one!', 'Interesting...' ]
getUserComments({}) // null复制代码

若是咱们想在指定路径下未找到一个值时，不返回null，而是返回自定义的内容呢？咱们可使用pathOr方法，第一个参数用来设置默认输出。

const getUserComments = R.pathOr([], ['user', 'posts', 0, 'comments'])
getUserComments(props) // [ 'Good one!', 'Interesting...' ]
getUserComments({}) // []复制代码

总结

这篇文章翻译自A.Sharif的最新文章：Safely Accessing Deeply Nested Values In JavaScript，其中后半部分未作翻译。
后半部分其实分析了 Ramda＋Folktale的实现，以及Ramda＋Lenses的实现。

Folktale和Lenses是很是函数式Functional Programming的思想，理解起来相对晦涩且比较小众。有兴趣的读者能够点击原文去自行了解。

Happy Coding!

若是你对函数式编程并不感冒，大可只学习第一部分的实现。对于函数式编程有兴趣的同窗，但愿这篇文章可以抛砖引玉，欢迎与我交流。

PS: 做者Github仓库，欢迎经过代码各类形式交流。