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也不一定存在,应该如何优雅的判断呢。

// 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. 

/* 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;
}

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

//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;
    }
}

使用默认参数值

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

function example(param = "default value") {
  console.log(param);
}

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

hasOwnProperty检查属性是否存在

const obj = {
  key: "value"
};

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

 

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

const obj = {
  key: "value"
};

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

使用解构赋值

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.
// use it like this
obj?.a?.lot?.of?.properties

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

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: 

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.

if (a && a.b && a.b.c) {
  console.log(a.b.c);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/511238.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

制造型企业实施WMS仓储管理系统前后的变化

在科技浪潮的推动下&#xff0c;WMS仓储管理系统逐渐崭露头角&#xff0c;成为制造企业优化运营、提升竞争力的得力助手。本文将从制造企业实施WMS仓储管理系统前后的对比入手&#xff0c;探讨这一变革所带来的深远影响。 一、WMS仓储管理系统实施前的仓储管理挑战 在WMS仓储管…

【LeetCode: 96. 不同的二叉搜索树 + 动态规划】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

从0到1完成UI自动化测试框架搭建之Pytest

上篇文章中&#xff0c;我们学会了如何使用UI Automator2atx编写简单的Android自动化脚本。 但是有个问题&#xff0c;大家可以思考下&#xff0c;光用自动化脚本让它自己动起来&#xff0c;是不是缺了点什么&#xff1f; 我们写测试用例的时候&#xff0c;是不是经常写&…

redis 的StringRedisTemplate

6.3 StringRedisTemplate 尽管JSON的序列化方式可以满足我们的需求&#xff0c;但依然存在一些问题&#xff0c;如图&#xff1a; 为了在反序列化时知道对象的类型&#xff0c;JSON序列化器会将类的class类型写入json结果中&#xff0c;存入Redis&#xff0c;会带来额外的内存…

透彻理解二分查找-算法通关村

透彻理解二分查找-算法通关村 常见的查找算法有顺序查找、二分查找、插值查找&#xff0c;树表查找、分块查找、哈希查找等等。其实二分查找、插值查找以及斐波那契查找都可以归为一类—插值查找。插值查找是在二分查找的基础上的优化查找算法。 二分查找的价值&#xff0c;请…

大数据分析与内存计算——Spark安装以及Hadoop操作——注意事项

一、Spark安装 1.相关链接 https://dblab.xmu.edu.cn/blog/4322/ 2.安装Spark&#xff08;Local模式&#xff09; 按照文章中的步骤安装即可 遇到问题&#xff1a;xshell以及xftp不能使用 解决办法&#xff1a; 在linux使用镜像网站进行下载&#xff1a;wget https://mi…

Three.js真实相机模拟

有没有想过如何在 3D Web 应用程序中模拟物理相机&#xff1f; 在这篇博文中&#xff0c;我将向你展示如何使用 Three.js和 OpenCV 来完成此操作。 我们将从模拟针孔相机模型开始&#xff0c;然后添加真实的镜头畸变。 具体来说&#xff0c;我们将仔细研究 OpenCV 的两个失真模…

【Java 集合进阶】单练集合顶层接口collction迭代器

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏 …

适合初学者的Linux的综合项目

大家好&#xff0c;今天给大家介绍适合初学者的Linux的综合项目&#xff0c;文章末尾附有分享大家一个资料包&#xff0c;差不多150多G。里面学习内容、面经、项目都比较新也比较全&#xff01;可进群免费领取。 对于初学者来说&#xff0c;Linux的综合项目应当既具有教育意义又…

element plus 输入框样式模仿Material-UI

获取焦点状态 自定义指令 app.directive(focus, { // 当被绑定的元素插入到 DOM 中时…… mounted(el) { const descendants el.querySelectorAll(.el-input__inner); var cssClass newLable;el.classList.add(cssClass); // 遍历并操作这些子孙节点 descendants.forE…

(24年4月2日更新)Linux安装chrome及chromedriver(Ubuntu20.0416.04)

一、安装Chrome 1&#xff09;先执行命令下载chrome&#xff1a; wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb2&#xff09;安装chrome sudo dpkg -i google-chrome-stable_current_amd64.deb踩坑&#xff1a;这里会提示如下报错&…

安卓主板MT8390(Genio 700)_MTK联发科Linux开发板方案

MediaTek Genio 700 &#xff08;MT8390&#xff09;是一款高性能的边缘 AI 物联网平台&#xff0c;专为智能家居、互动零售、工业与商业应用而设计。提供快速响应的边缘计算能力、先进的多媒体功能、广泛的传感器和连接方式&#xff0c;且支持多任务操作系统。 MT8390安卓核心…

ArrayList扩容原理

ArrayList源码分析 分析ArrayList源码主要从三个方面去翻阅&#xff1a;成员变量&#xff0c;构造函数&#xff0c;关键方法 以下源码都来源于jdk1.8 1 成员变量 DEFAULT_CAPACITY 10; 默认初始的容量**(CAPACITY) EMPTY_ELEMENTDATA {}; 用于空实例的共享空数组实例 DEFAU…

Java项目:85 springboot智能物流管理系统

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 本美发门店管理系统有管理员和用户两个角色。 用户功能有项目预定管理&#xff0c;产品购买管理&#xff0c;会员充值管理&#xff0c;余额查询管理。…

文本自动粘贴编辑器:支持自动粘贴并筛选手机号码,让信息处理更轻松

在信息时代的浪潮中&#xff0c;文本处理已成为我们日常工作与生活的重要组成部分。无论是商务沟通、社交互动还是个人事务处理&#xff0c;手机号码的筛选与粘贴都显得尤为关键。然而&#xff0c;传统的文本处理方式效率低下、易出错&#xff0c;已无法满足现代人的高效需求。…

Linux(05) Debian 系统修改主机名

查看主机名 方法1&#xff1a;hostname hostname 方法2&#xff1a;cat etc/hostname cat /etc/hostname 如果在创建Linux系统的时候忘记修改主机名&#xff0c;可以采用以下的方式来修改主机名称。 修改主机名 注意&#xff0c;在linux中下划线“_”可能是无效的字符&…

disearch目录扫描工具

项目地址 GitHub - maurosoria/dirsearch: Web path scanner 安装 apt-get install dirsearch 使用 dirsearch -u http://61.147.171.105:56237/

网络协议学习——HTTPS

目录 ​编辑 一&#xff0c;认识HTTPS 二&#xff0c;加密方式 1&#xff0c;对称式加密 2&#xff0c;非对称式的加密 3&#xff0c;数据指纹&#xff08;数据摘要&#xff09; 4&#xff0c;数据签名 三&#xff0c;HTTPS的工作原理 实现方式 数字证书 一&#xff0c…

配mmdetection

总流程&#xff1a; 1. 安装conda 参考链接后面补上 列出可用的conda环境 conda env list 删除指定环境 conda remove --name myenv --all 创建并激活指定环境 conda create --name openmmlab python3.8 -y conda activate openmmlab 2. 装pytorch&#xff0c;版本别装错…

zabbix图表时间与服务器时间不一致问题

部署完zabbix后&#xff0c;有时候会发现zabbix服务器的时间明明是对的&#xff0c;但是图标的时间不对&#xff0c;通过以下的配置可以快速解决。 登录zabbix-nginx容器 docker exec -u root -it docker-compose-zabbix-zabbix-web-nginx-mysql-1 bash修改php配置文件 vi /e…