对象属性访问问题

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

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

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

   return  @H_ 404 _23@{ 
    code@H_ 404 _23@:  @H_ 404 _23@, 
    data@H_ 404 _23@:  @H_ 404 _23@{ 
      list@H_ 404 _23@:   null @H_ 404 _23@, 
      page@H_ 404 _23@:  @H_ 404 _23@, 
      count@H_ 404 _23@:  @H_ 404 _23@, 
    @H_ 404 _23@} @H_ 404 _23@, 
  @H_ 404 _23@} @H_ 404 _23@; 
@H_ 404 _23@} @H_ 404 _23@; 

 getList @H_ 404 _23@( @H_ 404 _23@) 
  @H_ 404 _23@.  then @H_ 404 _23@( @H_ 404 _23@( res@H_ 404 _23@)   =>  @H_ 404 _23@{ 
     // 取出数据 
     const  @H_ 404 _23@{  data @H_ 404 _23@}   =  res@H_ 404 _23@; 

     const  @H_ 404 _23@{  list@H_ 404 _23@,  page@H_ 404 _23@,  count @H_ 404 _23@}   =  data@H_ 404 _23@; 

    list@H_ 404 _23@.  forEach @H_ 404 _23@( @H_ 404 _23@( @H_ 404 _23@)   =>  @H_ 404 _23@{ 
       // 处理一些业务 
    @H_ 404 _23@} @H_ 404 _23@) @H_ 404 _23@; 
     // 抛错：TypeError: Cannot read property 'forEach' of null 

     // alert 不会执行 
     alert @H_ 404 _23@(  ' 获取 数据成功' @H_ 404 _23@) @H_ 404 _23@; 
  @H_ 404 _23@} @H_ 404 _23@) @H_ 404 _23@;

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

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

  // 使用 if 判断 

 // ... 
 if  @H_ 404 _23@( list@H_ 404 _23@)  @H_ 404 _23@{ 
  list@H_ 404 _23@.  forEach @H_ 404 _23@( @H_ 404 _23@( @H_ 404 _23@)   =>  @H_ 404 _23@{ 
     // 处理一些业务 
  @H_ 404 _23@} @H_ 404 _23@) @H_ 404 _23@; 
@H_ 404 _23@}   else  @H_ 404 _23@{ 
   // ... 
@H_ 404 _23@} 
 // ...

  // 提供 一个  默 认值 
 const  @H_ 404 _23@{  list  =  @H_ 404 _23@[ @H_ 404 _23@] @H_ 404 _23@,  page@H_ 404 _23@,  count @H_ 404 _23@}   =  data@H_ 404 _23@; 

list@H_ 404 _23@.  forEach @H_ 404 _23@( @H_ 404 _23@( @H_ 404 _23@)   =>  @H_ 404 _23@{ 
   // 处理一些业务 
@H_ 404 _23@} @H_ 404 _23@) @H_ 404 _23@; 
 // ...

  // 提供 一个  默 认值 
 const  @H_ 404 _23@{  list@H_ 404 _23@,  page@H_ 404 _23@,  count @H_ 404 _23@}   =  data@H_ 404 _23@; 

@H_ 404 _23@( list  ||  @H_ 404 _23@[ @H_ 404 _23@] @H_ 404 _23@) @H_ 404 _23@.  forEach @H_ 404 _23@( @H_ 404 _23@( @H_ 404 _23@)   =>  @H_ 404 _23@{ 
   // 处理一些业务 
@H_ 404 _23@} @H_ 404 _23@) @H_ 404 _23@; 
 // ...

方法还有很多，还可以封装一个函数专门用来取对象属性的值，目的就是要代码变得更加可靠，防止一些可能会造成重要后果的异常。

如在 react 组件中，如果 render 函数中抛出了错误没有处理，就可能导致组件或者页面白屏。

新的 ECMAScript 标准提供了可选链和双问号操作符来更好的处理这个问题。

  const  object  =  @H_ 404 _23@{ 
  a@H_ 404 _23@:  @H_ 404 _23@{ 
    b@H_ 404 _23@:  @H_ 404 _23@, 
    c@H_ 404 _23@:  @H_ 404 _23@{ 
      d@H_ 404 _23@:  @H_ 404 _23@, 
    @H_ 404 _23@} @H_ 404 _23@, 
  @H_ 404 _23@} @H_ 404 _23@, 
@H_ 404 _23@} @H_ 404 _23@; 

 const  f  =  object@H_ 404 _23@. a ? @H_ 404 _23@. b ? @H_ 404 _23@. c ? @H_ 404 _23@. d ? @H_ 404 _23@. e ? @H_ 404 _23@. f  ?  ?  @H_ 404 _23@; 

console@H_ 404 _23@.  log @H_ 404 _23@( f@H_ 404 _23@) @H_ 404 _23@;   //  输出 ：10

关于这个知识点不再展开，可以参考 ES6+ 相关的 Wiki 。

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

this 使用问题 ► ◄分号导致的问题

查看更多关于对象属性访问问题的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did92472

更新时间：2022-10-22 阅读：36次