對(duì)象屬性訪問(wèn)問(wèn)題

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

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

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ù)
    });
    // 拋錯(cuò)：TypeError: Cannot read property 'forEach' of null

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

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

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

// 使用 if 判斷

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

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

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

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

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

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

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

新的 ECMAScript 標(biāo)準(zhǔn)提供了可選鏈和雙問(wèn)號(hào)操作符來(lái)更好的處理這個(gè)問(wè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)于這個(gè)知識(shí)點(diǎn)不再展開，可以參考 ES6+ 相關(guān)的 Wiki。

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