对象属性访问问题

发布时间：2023-03-13 12:57:08 所属栏目：教程来源：

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

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

const getList = async () => {
// 假装拿了服务端的数据，并返回

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

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

const getList = async () => {
// 假装拿了服务端的数据，并返回了
return {
code: ,
data: {
list: null,
page: ,
count: ,
},
};
};
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: ,
c: {
d: ,
},
},
};
const f = object.a?.b?.c?.d?.e?.f ?? ;
console.log(f); // 输出：10
关于这个知识点不再展开，可以参考 ES6+ 相关的 Wiki。
简单的说，在访问对象属性的时候，如果数据源不可靠，一定要做好处理异常的准备。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!