快應用如何避免讀取undefined變數的屬性導致報錯

現象描述

這是 JS  開發中常見的錯誤。對一個值為 null  或 undefined  的變數取屬性就會報錯。例如：

<!-- a = {}; --> 
<text>{{ a.b.c }}</text>
<!-- Error: Cannot read property 'c' of undefined -->

解決方法

1 、&&  方法，透過邏輯運算的執行順序來規避錯誤。程式碼如下：

app.ux程式碼如下：

<text>{{ a && a.b && a.b.c }}</text>

2 、  在 ViewModel  上增加函式方法

推薦方案 2 ，在 ViewModel  上建立一個 checkEmpty  函式。示例程式碼如下：

export default {
  checkEmpty(...args) {
    let ret
    if (args.length > 0) {
      ret = args.shift()
      let tmp
      while (ret && args.length > 0) {
        tmp = args.shift()
        ret = ret[tmp]
      }
    }
    return ret || false
  }
}

這樣，就可以方便的呼叫了。

<text>{{checkEmpty(a, 'b', 'c')}}</text>

原文連結： https://developer.huawei.com/consumer/cn/forum/topic/0201454975951760782?fid=0101271690375130218

原作者：Mayism