对象属性访问问题 下载APP
章节索引 :

对象属性访问问题

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

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

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

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

前置知识
什么是JavaScript 开发与学习环境准备 调试方案
基础
JavaScript 变量 JavaScript 数据类型 JavaScript if 语句 JavaScript for 语句 JavaScript 算数运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 表达式 JavaScript 函数 JavaScript 对象 JavaScript 字符串 JavaScript 数字 JavaScript 数组 JavaScript switch 语句 JavaScript while 语句 JavaScript break与continue JavaScript with document.cookie
内置对象
JavaScript Function JavaScript Math JavaScript Date JavaScript RegExp JavaScript JSON
JavaScript 与 DOM
什么是DOM DOM和JavaScript的关系 获取和操作 DOM 节点 JavaScript DOM与事件 JavaScript DOM 事件绑定 JavaScript DOM 事件对象 JavaScript DOM 事件流 JavaScript DOM 事件优化 JavaScript DOM 自定义事件
表单处理
使用 JavaScript 校验表单
BOM
BOM window 对象 常用的 BOM 相关对象 BOM 常用属性和方法
AJAX
JavaScript AJAX
进阶知识
JavaScript 异常处理 JavaScript 三元运算符 JavaScript 逗号操作符 JavaScript void JavaScript typeof JavaScript delete JavaScript debugger JavaScript getter &setter JavaScript 原型 JavaScript new操作符和构造函数 JavaScript instanceof JavaScript this JavaScript 严格模式 JavaScript 作用域 JavaScript 闭包 JavaScript 变量提升 JavaScript 对象包装器
常用库
jQuery Lodash moment.js swiper
进阶指南
ECMAScript6 Node.js Babel CSS 预处理器 代码规范 TypeScript Web Components 小程序 Vue / React / Angular JavaScript 关键字
常见疑点与误区
分号问题 对象属性访问问题 this 使用问题 浮点数精度问题 独一无二的 NaN 避免全局污染 控制台观察对象问题 根据环境选择语言特性
扩展
相关资源