Javascript/Node.JS中如何用多种方式避免属性为空(cannot read property of undefined ERROR)

>>>>>>问题

"cannot read property of undefined" 是一个常见的 JavaScript 错误,包含我在内很多人都会遇到,表示你试图访问一个未定义(undefined)对象的属性。这通常是因为你在访问一个不存在的对象或者变量。为了解决这个问题,你需要检查你的代码,确保在访问对象属性之前,对象已经被正确定义。

How can I avoid 'cannot read property of undefined' errors?

如何避免"无法读取未定义的属性"错误?

Given that below object , not all object has same property , normally happens in JSON format , 如果阁下遇到以下问题,a中未必包含b,b中未必包含c,甚至a也不一定存在,应该如何优雅的判断呢。

javascript 复制代码
// Where this array is hundreds of entries long, with a mix
// of the two examples given
var test = [{'a':{'b':{'c':"foo"}}}, {'a': "bar"}];

for (i=0; i<test.length; i++) {
    // OK, on i==0, but 'cannot read property of undefined' on i==1
    console.log(a.b.c);
}

>>>>>>解决方法

强力推荐!封装GetProperty方法,从对象中获取属性,属性不存在则返回默认值

This is a common issue when working with deep or complex JSON object, so I try to avoid try/catch or embedding multiple checks which would make the code unreadable. I usually use this little piece of code in all my projects to do the job.

javascript 复制代码
/* Example: getProperty(myObj, 'aze.xyz', 0) // return myObj.aze.xyz safely
 * accepts array for property names:
 *     getProperty(myObj, ['aze', 'xyz'], {value: null})
 */
function getProperty(obj, props, defaultValue) {
    var res, isvoid = function(x) {return typeof x === "undefined" || x === null;}
    if(!isvoid(obj)) {
        if(isvoid(props))
            props = [];
        if(typeof props  === "string")
            props = props.trim().split(".");
        if(props.constructor === Array) {
            res = props.length>1 ? getProperty(obj[props.shift()], props, defaultValue) : obj[props[0]];
        }
    }
    return typeof res === "undefined" ? defaultValue: res;
}

思路二,我的项目中用的就是这个方法 !!! 好用

javascript 复制代码
//by zhengkai.blog.csdn.net
const temp = {};
console.log(getSafe(()=>a.b.c, '0'));

function getSafe(fn, defaultVal) {
    try {
        if (fn() === undefined || fn() === null) {
            return defaultVal
        } else {
            return fn();
        }

    } catch (e) {
        return defaultVal;
    }
}

使用默认参数值

在函数定义时,为参数设置默认值,以确保即使没有传递参数,也不会出现未定义的属性。

javascript 复制代码
function example(param = "default value") {
  console.log(param);
}

example(); // 输出 "default value"

hasOwnProperty检查属性是否存在

javascript 复制代码
const obj = {
  key: "value"
};

if (obj.hasOwnProperty("key")) {
  console.log(obj.key);
} else {
  console.log("Key does not exist");
}

使用逻辑或操作符(||)

javascript 复制代码
const obj = {
  key: "value"
};

console.log(obj.key || "Default value"); // 输出 "value"

使用解构赋值

javascript 复制代码
const obj = {
  key: "value"
};

const { key = "Default value" } = obj;

console.log(key); // 输出 "value"

可选链操作符optional chaining语法(.?)

  • If you use JavaScript according to ECMAScript 2020 or later, see optional chaining.
  • TypeScript has added support for optional chaining in version 3.7.
javascript 复制代码
// use it like this
obj?.a?.lot?.of?.properties

使用可选链操作符(?.):可选链操作符允许你在尝试访问对象的属性时提供一个后备值,以防属性不存在。

javascript 复制代码
const obj = {
  key: "value"
};

console.log(obj?.key ?? "Default value"); // 输出 "value"

不是很建议的try/catch

A quick workaround is using a try/catch helper function with ES6 arrow function:

javascript 复制代码
function getSafe(fn, defaultVal) {
  try {
    return fn();
  } catch (e) {
    return defaultVal;
  }
}

// use it like this
console.log(getSafe(() => obj.a.lot.of.properties));

// or add an optional default value
console.log(getSafe(() => obj.a.lot.of.properties, 'nothing'));

不够优雅的"多重判断"方法

ry this. If a.b is undefined, it will leave the if statement without any exception.

javascript 复制代码
if (a && a.b && a.b.c) {
  console.log(a.b.c);
}
相关推荐
牧羊狼的狼1 天前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手1 天前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one1 天前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲1 天前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell1 天前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830941 天前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮1 天前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel1 天前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常1 天前
我学习到的Vue2.6的prop修饰符
vue.js
gnip1 天前
JavaScript事件流
前端·javascript