對象屬性訪問問題

對象的屬性在訪問的時候，務(wù)必要關(guān)心屬性是否真的存在。

特別是服務(wù)端返回的數(shù)據(jù)，如果碰到數(shù)據(jù)出錯，就可能造成頁面無反應(yīng)、白屏等問題：

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

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

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

    const { list, page, count } = data;

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

    // alert 不會執(zhí)行
    alert('獲取數(shù)據(jù)成功');
  });

上面這段代碼，執(zhí)行是會報錯的，因?yàn)?list 是 null，并不是期望的數(shù)組，這樣就導(dǎo)致了代碼無法正常執(zhí)行下去。

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

// 使用 if 判斷

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

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

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

// 提供一個默認(rèn)值
const { list, page, count } = data;

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

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

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

新的 ECMAScript 標(biāo)準(zhǔn)提供了可選鏈和雙問號操作符來更好的處理這個問題。

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

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

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

關(guān)于這個知識點(diǎn)不再展開，可以參考 ES6+ 相關(guān)的 Wiki。

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