全部开发者教程

JavaScript 入门教程

前端开发 / 对象属性访问问题

对象属性访问问题

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

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

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('获取数据成功');
  });

上面这段代码,执行是会报错的,因为 listnull,并不是期望的数组,这样就导致了代码无法正常执行下去。

所以在使用的时候,最好可以判断或者处理一下不可靠的数据。

// 使用 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

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