深層屬性，輕松提取

sydMobile 發布于2019-08-22 18:42 / 2507人閱讀

摘要：于是一些工具函數誕生了，比如的雖然它保證了開發者在提取屬性的過程中不會因為遇到或之類的值而拋出，但缺點也很明顯屬性的路徑被寫成了字符串，開發者無法獲得編輯器的自動補全與智能糾錯。

面臨的問題

假設有這樣一個對象，表示的是用戶是否啟用了回復通知的設置

const settings = {
    notification: {
        reply: {
            active: {
                true
            }
        }
        // ...其他設置項
    }
    // ...其他設置項
}

當開發者想要提取 active 的值，最直接的方法是這么做

const isNotificationReplyActive = settings.notification.reply.active

但這是不安全的，因為 JavaScript 中通常使用 null 或 undefined 分別表示未定義或未聲明的值

typeof someVar === "undefined" // 未聲明
let someVar = null // 已聲明，未定義

實際開發過程中可能因為比如節省資源的考慮，當用戶未進行過設置時，它的 notification 或者更深的某一級的值是 null 或 undefined，而非對象。

// 比如當未設置回復通知時，它是這樣的
const settings = {
    notification: {
        // 沒有 reply
    }
}

// 這種情況下， settings.notification.reply 的值是 undefined
// JS 中試圖獲取 undefined 上的 key 時會觸發 TypeError
const isNotificationReplyActive = settings.notification.reply.active // TypeError!

于是開發者采取了這樣的措施

const isNotificationReplyActive = settings
    && settings.notification
    && settings.notification.reply
    && settings.notification.reply.active
// 或者
try {
    const isNotificationReplyActive = settings.notification.reply.active
} catch (err) {
    // 錯誤處理
}

經驗豐富的開發者都知道，這樣做的缺點很多，在此就不展開了。

于是一些工具函數誕生了，比如 lodash 的 _.get

import _ from "lodash"
const isNotificationReplyActive = _.get(settings, "notification.reply.active")

雖然它保證了開發者在提取屬性的過程中不會因為遇到 undefined 或 null 之類的值而拋出 TypeError ，但缺點也很明顯——

屬性的路徑被寫成了字符串，開發者無法獲得 IDE/編輯器的自動補全與智能糾錯。

不能使用便捷的解構語法—— const { notification: { reply: { active } } } = settings

簡直是一夜回到解放前。

解決方法 —— safe-touch

現在讓我們來回顧一下本文開頭的那張圖——它即是本文的主角、上述所有問題的解決方案。

// 引入
import safeTouch from "safe-touch"

const settings = { /* ... */ }
// 包裹要提取的對象
const touched = safeTouch(settings)

// 把它當作函數調用，可以獲得原始值
touched() === settings // true

// 亦可以直接獲取 settings 上存在的屬性，同樣通過調用取得屬性值
// 在現代化的 IDE/編輯器 中，這一過程可以給出智能提示與自動補全
touched.notification.reply.active() // 若依本文開頭給出的例子，值為 true

// 可以安全地獲取并不存在的屬性，返回 undefined ，不會拋出 TypeError
touched.something.does.not.exist[Math.random()]() // undefined

// 支持解構
const { notification: { reply: { active, notExistingKey } } } = touched
active() // true
notExistingKey() // undefined

怎么做到的

其實不難，核心功能通過 ES6 的 Proxy 就可以實現。再結合 TypeScript 的類型判斷（初學 TS，看了好久文檔），生成 index.d.ts 供智能化的 IDE/編輯器使用，就有了自動補全與智能提示。

短小的源碼 repo （歡迎 Star / issue）

可以從 npm 獲取

云服務器 GPU云服務器深層深層神經網絡深層學習和深度學習輕松

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96112.html

[譯] 最深刻而易懂的ES6解構教程

摘要：被解構的數據項位于賦值運算符的右側，可以是任何數組和對象的組合，允許隨意嵌套。數組模式位于賦值運算符的左側，被結構的數組在其右側。解構是ES6的新特性，用于從JavaScript對象和數組中提取數據，語法上比ES5所提供的更加簡潔、緊湊、清晰。它不僅能減少你的代碼量，還能從根本上改變你的編碼方式。用的越多，你就會發現越多塑造數據和函數的方式，這些實現方式在過去幾乎是不可能的。本文將深...

AlphaGooo 2019-08-22 10:33 評論0 收藏0
前端進階資源整理

摘要：前端進階進階構建項目一配置最佳實踐狀態管理之痛點分析與改良開發中所謂狀態淺析從時間旅行的烏托邦，看狀態管理的設計誤區使用更好地處理數據愛彼迎房源詳情頁中的性能優化從零開始，在中構建時間旅行式調試用輕松管理復雜狀態如何把業務邏輯這個故事講好和前端進階 webpack webpack進階構建項目(一) Webpack 4 配置最佳實踐 react Redux狀態管理之痛點、分析與...

BlackMass 2019-08-23 12:36 評論0 收藏0
ES6：解構——JavaScript 從數組和對象中提取數據的優雅方法

摘要：跳過數組中的元素學會了如何按順序從數組中提取數據。解構方法中提供了很好的解決方案。從對象中提取數據依然從最基本的開始，提取從中提取和。本文編譯：胡子大哈翻譯原文：http://huziketang.com/blog/posts/detail?postId=58f41a06a58c240ae35bb8e6 英文連接：ES6: Destructuring — an elegant...

GraphQuery 2019-08-20 16:02 評論0 收藏0
利用Mesosphere DC/OS在任意基礎設施之上實現TensorFlow分布

摘要：與其它可用于的軟件包一樣，新的軟件包亦可利用來加速各類機器學習與深度學習應用。數據科學家們必須首先構建起機器學習模型，確保其適合分布式計算特性，而后將其映射至深層神經網絡當中，最終編寫代碼以為這套新模型提供支持。今天，我們興奮地宣布在Mesosphere DC/OS服務目錄當中發布TensorFlow的be...

hightopo 2019-04-25 16:29 評論0 收藏0