在写法上,解决js代码里报错Uncaught TypeError: Cannot read property 'xxx' of undefined,影响代码运行的解决方案

在js代码调试的时候,相信一定有很多人经常会遇到这种错误:Uncaught TypeError: Cannot read property 'xxx' of undefined,从而影响代码继续向下执行。特别是这行代码其实是一个判断赋值操作,我们希望代码继续往下走,这里提供一种解决思路。运用简单的try catch语句就可以

你的代码可能会是这样的:

let name = ''
let formdata = api() // formdata是接口请求来的数据 或者 其他数据来源
if (type === 1 && formdata.user.name) { // 正常情况下是存在formdata,且存在key:user,user下存在key:name
    name = formdata.user.name
}
// TODO 其他代码
console.log(name) // 若formdata等undefined之类的,代码不会继续执行

但是可能你会遇到这种情况,就是formdata不存在,或者拿到的formdata内没有user,这个时候就可能会出现:Uncaught TypeError: Cannot read property 'formdata' of undefined或者Uncaught TypeError: Cannot read property 'user' of undefined,并且TODO之后的代码不再执行,为了避免代码不继续向下执行的错误,你可能会这样处理

let name = ''
let formdata = api() // formdata是接口请求来的数据 或者 其他数据来源
if (type === 1 && formdata && formdata.user && formdata.user.name) {
    name = formdata.user.name
}
// TODO 其他代码
console.log(name)

如果层级很深呢?如果一个key的名字特别长呢?下面让我们优雅的解决这个问题

使用try catch

let name = ''
let formdata = api() // formdata是接口请求来的数据 或者 其他数据来源
try {
    if (type === 1 && formdata.user.name) {
        name = formdata.user.name
    }
}  catch (err) {}
// TODO 其他代码
console.log(name) // 若formdata等undefined之类的,也会继续执行

使用lodash

其实有一种最简单的解决方法,就是使用lodash工具函数

import _ from 'lodash'
let name = ''
let formdata = api() // formdata是接口请求来的数据 或者 其他数据来源
if (type === 1 && _.get(formdata, 'user.name')) {
    name = formdata.user.name
}
// TODO 其他代码
console.log(name) // 若formdata等undefined之类的,也会继续执行