對象屬性訪問問題

對象的屬性在訪問的時候，務必要關心屬性是否真的存在。

特別是服務端返回的數據，如果碰到數據出錯，就可能造成頁面無反應、白屏等問題：

const getList = async () => {
  // 假裝拿了服務端的數據，并返回了

  return {
    code: 1,
    data: {
      list: null,
      page: 1,
      count: 1111,
    },
  };
};

getList()
  .then((res) => {
    // 取出數據
    const { data } = res;

    const { list, page, count } = data;

    list.forEach(() => {
      // 處理一些業務
    });
    // 拋錯：TypeError: Cannot read property 'forEach' of null

    // alert 不會執行
    alert('獲取數據成功');
  });

上面這段代碼，執行是會報錯的，因為 list 是 null，并不是期望的數組，這樣就導致了代碼無法正常執行下去。

所以在使用的時候，最好可以判斷或者處理一下不可靠的數據。

// 使用 if 判斷

// ...
if (list) {
  list.forEach(() => {
    // 處理一些業務
  });
} else {
  // ...
}
// ...

// 提供一個默認值
const { list = [], page, count } = data;

list.forEach(() => {
  // 處理一些業務
});
// ...

// 提供一個默認值
const { list, page, count } = data;

(list || []).forEach(() => {
  // 處理一些業務
});
// ...

方法還有很多，還可以封裝一個函數專門用來取對象屬性的值，目的就是要代碼變得更加可靠，防止一些可能會造成重要后果的異常。

如在 react 組件中，如果 render 函數中拋出了錯誤沒有處理，就可能導致組件或者頁面白屏。

新的 ECMAScript 標準提供了可選鏈和雙問號操作符來更好的處理這個問題。

const object = {
  a: {
    b: 2,
    c: {
      d: 3,
    },
  },
};

const f = object.a?.b?.c?.d?.e?.f ?? 10;

console.log(f); // 輸出：10

關于這個知識點不再展開，可以參考 ES6+ 相關的 Wiki。

簡單的說，在訪問對象屬性的時候，如果數據源不可靠，一定要做好處理異常的準備。