A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

我猜各位 JSer,或多或少都遇到过这种错误:Uncaught TypeError: Cannot read property 'someProp' of undefined。当我们从 null 或者 undefined 上去读某个属性时,就会报这种错误。尤其一个复杂的前端项目可能会对接各种各样的后端服务,某些服务不可靠,返回的数据并不是约定的格式时,就很容易出现这种错误。
这里有一个深度嵌套的象:
let nestedObj = {  user: {    name: 'Victor',    favoriteColors: ["black", "white", "grey"],    // contact info doesn't appear here    // contact: {    //   phone: 123,    //   email: "123@example.com"    // }  }}复制代码我们的 nestedObj 本应该有一个 contact 属性,里面有对应的 phone 和 email,但是可能因为各种各样原因(比如:不可靠的服务), contact 并不存在。如果我们想直接读取 email 信息,毫无疑问是不可以的,因为contact 是 undefined。有时你不确定 contact 是否存在, 为了安全的读到 email 信息,你可能会写出下面这样的代码:
const { contact: { email } = {} } = nestedObj// 或者这样const email2 = (nestedObj.contact || {}).email// 又或者这样const email3 = nestedObj.contact && nestedObj.contact.email复制代码上面做法就是给某些可能不存在的属性加一个默认值或者判断属性是否存在,这样我们就可以安全地读它的属性。这种手动加默认的办法或者判断的方法,在对象嵌套不深的情况下还可以接受,但是当对象嵌套很深时,采用这种方法就会让人崩溃。会写类似这样的代码:const res = a.b && a.b.c && ...。
读取深度嵌套的对象下面我们来看看如何读取深度嵌套的对象:
const path = (paths, obj) => {  return paths.reduce((val, key) => {    // val 是 null 或者 undefined, 我们返回undefined,否则的话我们读取「下一层」的数据     if (val == null) {       return undefined    }    return val[key]  }, obj)}path(["user", "contact", "email"], nestedObj) // 返回undefined, 不再报错了

1 个回复

倒序浏览
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马