摘要：如果这个结构非常复杂，那么想要安全优雅地取出一个值，也并非简单。这是为了在对象中相关取值的过程，需要验证每一个和的存在性。并且这个数据结构必然是动态生成的，存在有时有时的情况。在测试过程中，很难复现。
古有赵子龙面对“冲锋之势，有进无退，陷阵之志，有死无生”的局面，能万军丛中取敌将首级。
在我们的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仓库，欢迎通过代码各种形式交流。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91679.html
摘要：如果这个结构非常复杂，那么想要安全优雅地取出一个值，也并非简单。这是为了在对象中相关取值的过程，需要验证每一个和的存在性。并且这个数据结构必然是动态生成的，存在有时有时的情况。在测试过程中，很难复现。 古有赵子龙面对冲锋之势，有进无退，陷阵之志，有死无生的局面，能万军丛中取敌将首级。在我们的Javascript中，往往用对象（Object）来存储一个数据结构。如果这个结构非常复杂，那么...
摘要：同行这么做使用实现圆形进度条前端掘金在开发微信小程序的时候，遇到圆形进度条的需求。实现也谈数组去重前端掘金的数组去重是一个老生常谈的话题了。百度前端技术学院自定义前端掘金一标签概念元素表示用户界面中项目的标题。 闲话图片上传 - 掘金作者：孙辉，美团金融前端团队成员。15年毕业加入美团，相信技术，更相信技术只是大千世界里知识的一种，个人博客: https://sunyuhui.com ...
摘要：同行这么做使用实现圆形进度条前端掘金在开发微信小程序的时候，遇到圆形进度条的需求。实现也谈数组去重前端掘金的数组去重是一个老生常谈的话题了。百度前端技术学院自定义前端掘金一标签概念元素表示用户界面中项目的标题。 闲话图片上传 - 掘金作者：孙辉，美团金融前端团队成员。15年毕业加入美团，相信技术，更相信技术只是大千世界里知识的一种，个人博客: https://sunyuhui.com ...
摘要：王国维在人间词话里谈到了治学经验，他说古今之成大事业大学问者，必经过三种之境界。其中谈到中冻结一个对象几种由浅入深的实践。王国维已先自表明，吾人可以无劳纠葛。总结本文先后介绍了关于冻结一个对象的三种进阶方法。 王国维在《人间词话》里谈到了治学经验，他说：古今之成大事业、大学问者，必经过三种之境界。 巧合的是，最近受 git chat ／ git book 邀请，做了一个分享。其中谈到J...
阅读 3915·2021-11-24 09:38
阅读 3086·2021-11-17 09:33
阅读 3860·2021-11-10 11:48
阅读 1233·2021-10-14 09:48
阅读 3122·2019-08-30 13:14
阅读 2542·2019-08-29 18:37
阅读 3385·2019-08-29 12:38
阅读 1408·2019-08-29 12:30
