总结对象安全访问处理方案

前端数据不可信，后端数据不可知

在前端项目开发与生产的过程当中，“cannot read property of undefined”是一个常见的错误。从不可知获得一个空数据问题在所不免。面对这种问题咱们该怎么办呢？

针对于特定的业务和数据，前端即便预知数据不存在，也没法处理，任其崩溃便可。但大部分状况下，若是由于列表某条数据出现错误而致使整个页面没法访问，用户将对咱们系统健壮性产生信任危机。

为了可以在对象( JavaScript 中数组也是对象)中安全的取值，须要验证对象中数据项是否存在，if 语句判断固然是没有问题的，可是若是数据路径较深，代码就过于冗余了，而常见的处理方案有以下几种。

短路运算符号嗅探

JavaScript 中咱们能够经过 && 来实现获取员工的地址邮编代码

const result = (staff.address && staff.address[0] && staff.address[0].zip) || ''

原理解析

这种解析方式和 JavaScript 异于其余语言的判断机制有关。大部分语言都仅有 true 和 false, JavaScript 有 truthy 概念，即在某些场景下会被推断为 true。

固然如下数据会被解析为 false:

• null
• undefined
• NaN
• 0
• 空字符串

除此以外，都会被解析为 true，即便空数组, 空对象（注: Python 空字典，空列表，空元组均在判断中会被解析为 false）也不例外。

同时 && || 不只仅返回 true 和 false，而是数据项。

运算符	说明
逻辑与，AND（&&）	若第一项可转换为 true，则返回第二项；不然，返回第一项目。
逻辑或，OR	若第一项可转换为 true，则返回第一项；不然，返回第二项目。
逻辑非，NOT（!）	若当前项可转换为 true，则返回 false；不然，返回 true

|| 单元保底值

既然能够经过 && 来对数据进行嗅探，那么咱们能够退一步，若是当前没有项目数据，利用 || 返回空对象或者空数组。

const EMPTY_OBJ = {}

const result = (((staff || EMPTY_OBJ).address || EMPTY_OBJ)[0] || EMPTY_OBJ).zip || ''

对比上一个方案，虽然相比上述代码更为复杂。 可是若是针对拥有完整数据的数据项目而言，对数据的访问次数较少(. 的使用率),而上一个方案针对完善数据的访问会多很多。而大部分数据无疑是正确与完整的。

try catch

该方法无需验证对象中数据项是否存在，而是经过错误处理直接处理。

let result = ''
try {
  result = staff.address[0].zip
} catch {
  // 错误上报
}

try catch 方案更适合必要性数据缺失做为上报的状况。但若是发生了必要性内容数据缺失，前端界面崩溃反而是一件好事。因此 try catch 不太适合处理对象安全访问这种问题，仅仅做为可选方案。

链判断运算符

上述处理方式都很痛苦，所以 ES2020 引入了“链判断运算符”（optional chaining operator）?.，简化上面的写法。

const reuslt = staff?.address?.[0]?.zip || ''

简单来解释:

a?.b
// 等同于
a == null ? undefined : a.b

a?.[x]
// 等同于
a == null ? undefined : a[x]

a?.b()
// 等同于
a == null ? undefined : a.b()

a?.()
// 等同于
a == null ? undefined : a()

若是你想要详细了解，能够参考阮一峰 ECMAScript 6 入门 链判断运算符 一篇。

手写路径获取

某些状况下，咱们须要传递路径来动态获取数据,如 'staff.address[0].zip', 这里手写了一个处理代码。传入对象和路径，获得对象，对象 key 以及 value。

/**
 * 根据路径来获取 对象内部属性
 * @param obj 对象
 * @param path 路径 a.b[1].c
 */
function getObjPropByPath(obj: Record<string, any>, path: string) {
  let tempObj = obj
  const keyArr = path.split('.').map(x => x.trim())
  let i: number = 0
  for (let len = keyArr.length; i <len - 1; ++i) {
    let key = keyArr[i]
    // 简单判断是不是数组数据，若是 以 ] 结尾的话
    const isFormArray = key.endsWith(']')
    let index: number = 0
    if (isFormArray) {
      const data = key.split('[') ?? []
      key = data[0] ?? ''
      // 对于 parseInt('12]') => 12
      index = parseInt(data[1], 10)
    }
    
    if (key in tempObj) {
      tempObj = tempObj[key]
      if (isFormArray && Array.isArray(tempObj)) {
        tempObj = tempObj[index]
        if (!tempObj) {
          return {}
        }
      }
    } else {
      return {}
    }
  }

  if (!tempObj) {
    return {}
  }
  
  return  {
    o: tempObj,
    k: keyArr[i],
    v: tempObj[keyArr[i]]
  }
}

不过笔者写的方案较为粗糙，但 lodash 对象模块中也有该功能，感兴趣的能够参考其实现方式。lodash get

// 根据 object对象的path路径获取值。 若是解析 value 是 undefined 会以 defaultValue 取代。
// _.get(object, path, [defaultValue])

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.get(object, 'a[0].b.c');
// => 3

_.get(object, ['a', '0', 'b', 'c']);
// => 3

_.get(object, 'a.b.c', 'default');
// => 'default'

其余

Null 判断运算符

固然，咱们大部分状况下使用 || 都没有问题，可是因为 falsy 的存在. || 对于 false 和 undefined 是同样的。可是某些状况下，false 是有意义的，true, false, undefined 均表明一种含义，这时候，咱们还须要对数据进行其余处理，使用 in 或者 hasOwnProperty 进行存在性判断。

针对于这种状况，ES2020 引入了一个新的 Null 判断运算符 ??。它的行为相似||，可是只有运算符左侧的值为 null 或 undefined 时，才会返回右侧的值。如

const result = staff.address && staff.address[0] && staff.address[0].zip ?? ''

鼓励一下

若是你以为这篇文章不错，但愿能够给与我一些鼓励，在个人 github 博客下帮忙 star 一下。
博客地址

参考资料

ES6 入门教程