对象属性访问问题

对象的属性在访问的时候，务必要关心属性是否真的存在。

特别是服务端返回的数据，如果碰到数据出错，就可能造成页面无反应、白屏等问题：

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。

简单的说，在访问对象属性的时候，如果数据源不可靠，一定要做好处理异常的准备。