在我們的 Javascript 中葱她，往往用對象（Object）來存儲一個數(shù)據(jù)結(jié)構(gòu)涵亏。如果這個結(jié)構(gòu)非常復(fù)雜晰韵，那么想要安全優(yōu)雅地取出一個值链瓦，也并非簡單拆魏。
這篇文章將會詳細闡述在一個嵌套較深的場景中，如何安全的完成讀寫操作慈俯。先后會嘗試多種方法渤刃，希望對讀者有所啟發(fā)。
場景介紹
在 React 開發(fā)中贴膘，我們根據(jù)數(shù)據(jù)來渲染視圖卖子。經(jīng)常會出現(xiàn)類似下面這種情況：
const props = {
user: {
posts: [
{ title: 'Foo', comments: [ 'Good one!', 'Interesting...' ] },
{ title: 'Bar', comments: [ 'Ok' ] },
{ title: 'Baz', comments: []}
],
comments: [...]
}
}
這是一個典型的獲取用戶評論信息并加以展示的場景。其實刑峡，這還嵌套的不夠深洋闽，試想一個回復(fù)存在多層：回復(fù)的回復(fù)，回復(fù)的回復(fù)的回復(fù)突梦。诫舅。。
姑且先看我們的示例吧阳似，此時我們想獲取第一個 post 的評論信息骚勘。用傳統(tǒng)的 javascript 方法應(yīng)該這么做：
props.user &&
props.user.posts &&
props.user.posts[0] &&
props.user.posts[0].comments
也許經(jīng)驗豐富的javascript開發(fā)者會明白使用這么多 && 的意義。這是為了在對象中相關(guān)取值的過程，需要驗證每一個key和index的存在性俏讹。否則會有報錯当宴，這將是致命性的。并且 props 這個數(shù)據(jù)結(jié)構(gòu)必然是動態(tài)生成的泽疆，存在有時 valid 有時 invalid 的情況户矢。在測試過程中，很難復(fù)現(xiàn)殉疼。
同樣的尷尬場景比比皆是梯浪，想象一下，如果我們需要獲取一名用戶最后一個評論博客的題目瓢娜，就需要：
props.user &&
props.user.comments &&
props.user.comments[0] &&
props.user.comments[0].blog.title
這些例子夸張嗎挂洛？其實不然。我們明白了眠砾，想要獲取一個數(shù)據(jù)值虏劲，需要一層一層遍歷屬性的存在性。這無疑是繁瑣的褒颈。
解決方案
現(xiàn)在明白了我們面臨的困擾柒巫，接下來我會用幾種方法：
- 純JavaScript方法;
- 最具有函數(shù)式代表的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 中刨疼，比較偏向函數(shù)式思想的 reduce 方法泉唁。關(guān)于這個方法，我想很多人其實還并不理解币狠，建議先去進行學(xué)習(xí)游两，或者參考我之前的文章：面試題目別有洞天 -> 從es6優(yōu)雅解法，到降級polyfill漩绵，再到redux reducer迷之命名贱案。
- 同時，我嘗試獲戎雇隆：user－>posts[0]－>comments宝踪；
- 并配以一個反例：user－>post[0]－>comments；當(dāng)然碍扔，在反例中瘩燥，post數(shù)組并不存在。
我們來分析一下代碼不同。
const get = (p, o) =>
p.reduce((xs, x) =>
(xs && xs[x]) ? xs[x] : null, o)
我們實現(xiàn)的get方法中厉膀，接收兩個參數(shù)：
- 第一個p表示獲取值的路徑（path）溶耘；
- 另外一個參數(shù)表示目標(biāo)對象。
同樣服鹅，為了設(shè)計上的更加靈活和抽象凳兵。我們可以柯粒化我們的方法：
const get = p => o =>
p.reduce((xs, x) =>
(xs && xs[x]) ? xs[x] : null, o)
這樣的話企软，就可以這個姿勢調(diào)用：
const getUserComments = get(['user', 'posts', 0, 'comments'])
console.log(getUserComments(props))
// [ 'Good one!', 'Interesting...' ]
console.log(getUserComments({user:{posts: []}}))
// null
如果關(guān)于get方法中reduce的使用還不清楚庐扫，那就再看一個簡單的例子：
['id'].reduce((xs, x) => (xs && xs[x]) ? xs[x] : null, {id: 10})
// 返回10
方案二：Ramda方案
如果不自己手動設(shè)計上述方法的話，我們可以使用 Ramda 函數(shù)式類庫完成：
const getUserComments = R.path(['user', 'posts', 0, 'comments'])
接下來調(diào)用需要這個姿勢：
getUserComments(props) // [ 'Good one!', 'Interesting...' ]
getUserComments({}) // null
如果我們想在指定路徑下未找到一個值時仗哨，不返回 null形庭，而是返回自定義的內(nèi)容呢？
我們可以使用 pathOr 方法厌漂，第一個參數(shù)用來設(shè)置默認輸出萨醒。
const getUserComments = R.pathOr([], ['user', 'posts', 0, 'comments'])
getUserComments(props) // [ 'Good one!', 'Interesting...' ]
getUserComments({}) // []
總結(jié)
其實再進一步，還可以使用 Ramda＋Folktale 的實現(xiàn)苇倡，以及 Ramda＋Lenses 實現(xiàn)验靡。
Folktale 和 Lenses 代表了非常函數(shù)式 Functional Programming 的思想，理解起來相對晦澀且比較小眾雏节。有興趣的讀者可以自行了解，這里不再展開高职。
如果你對函數(shù)式編程并不感冒钩乍，大可只學(xué)習(xí)第一部分的實現(xiàn)。對于函數(shù)式編程有興趣的同學(xué)怔锌，希望這篇文章能夠拋磚引玉寥粹，歡迎與我交流。
本文示例借鑒A.Sharif的最新文章：Safely Accessing Deeply Nested Values In JavaScript埃元，喜歡看英文原版的同學(xué)可以直接戳鏈接涝涤。
