如何優雅安全地在深層資料結構中取值

LucasHC發表於2017-05-02
資料結構

古有趙子龍面對“衝鋒之勢，有進無退，陷陣之志，有死無生”的局面，能萬軍叢中取敵將首級。
在我們的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倉庫，歡迎通過程式碼各種形式交流。

相關文章