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

news/2024/6/15 22:55:18/文章来源:https://blog.csdn.net/moshowgame/article/details/137299217

 >>>>>>问题

"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==1console.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);
}

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

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

相关文章

【算法-PID】

算法-PID ■ PID■ 闭环原理■ PID 控制流程■ PID 比例环节&#xff08;Proportion&#xff09;■ PID 积分环节&#xff08;Integral&#xff09;■ PID 微分环节&#xff08;Differential&#xff09; ■ 位置式PID&#xff0c;增量式PID介绍■ 位置式 PID 公式■ 增量式 PI…

OpenCv —— cv::VideoCapture设置摄像头图像格式为“MJPEG“

背景 今天恰巧同事有台USB摄像头,她想要在Windows系统下通过OpenCV读取该摄像头宽高为1080x768、帧率为60的视频,用来做图像算法处理。但无奈通过网上OpenCV教程 读取的视频对应尺寸的帧率仅为10帧左右,根本无法满足使用要求。于是作者通过本篇文章介绍如何解决,欢迎交流指…

寒冬已逝,“量子春天”正来

最近&#xff0c;全球对量子技术领域的私人投资有所下降&#xff0c;引发了一些观点认为这个领域可能正逐渐衰退。 政治家、资助者和投资者并不总是以科学为关注焦点。然而&#xff0c;某些科技领域偶尔会成为热点&#xff0c;正如20世纪50年代核能技术的兴起&#xff0c;那时人…

如何开发创建自己的npm包并成功发布、维护至npm官方网站

npm&#xff0c;全称为Node Package Manager&#xff0c;是专为JavaScript生态系统设计的软件包管理系统&#xff0c;尤其与Node.js平台紧密关联。作为Node.js的默认包管理工具&#xff0c;npm为开发者提供了便捷的方式来安装、共享、分发和管理代码模块。 npm作为JavaScript世…

【Go】二十、反射

文章目录 1、反射2、对基本数据类型反射3、对结构体进行反射4、获取变量的类别5、通过反射修改基本类型变量的值6、通过反射操作结构体的属性和方法 1、反射 //核心包 import ("reflect")通过反射&#xff1a; 可以在运行时动态获取变量的类型、获取结构体的信息&a…

C++算法补充---STL

这里写目录标题 CSTL容器字符串函数(string容器函数)字符串转字符 算法交换函数拿到容器或者数组的第一个最大&#xff08;小&#xff09;值元素的下标或者值排序函数求字符数组的有效长度atoi函数&#xff08;将字符串类型的数字转为真正的int型数字&#xff09;string转字符 …

06 | Swoole 源码分析之 Coroutine 协程模块

首发原文链接&#xff1a;Swoole 源码分析之 Coroutine 协程模块 大家好&#xff0c;我是码农先森。 引言 协程又称轻量级线程&#xff0c;但与线程不同的是&#xff1b;协程是用户级线程&#xff0c;不需要操作系统参与。由用户显式控制&#xff0c;可以在需要的时候挂起、或…

【大模型】大模型 CPU 推理之 llama.cpp

【大模型】大模型 CPU 推理之 llama.cpp llama.cpp安装llama.cppMemory/Disk RequirementsQuantization测试推理下载模型测试 参考 llama.cpp 描述 The main goal of llama.cpp is to enable LLM inference with minimal setup and state-of-the-art performance on a wide var…

鸿蒙HarmonyOS应用开发之在非ArkTS线程中回调ArkTS接口

场景介绍 ArkTS是单线程语言&#xff0c;通过NAPI接口对ArkTS对象的所有操作都须保证在同一个ArkTS线程上进行。本示例将介绍通过napi_get_uv_event_loop和uv_queue_work实现在非ArkTS线程中通过NAPI接口回调ArkTS函数。 使用示例 接口声明、编译配置以及模块注册 接口声明 …

应急响应靶机训练-Linux2题解

前言 接上文&#xff0c;应急响应靶机训练Linux2 靶机地址&#xff1a;应急响应靶机-Linux(2) 题解 登录虚拟机&#xff1a; 修改面板密码 提交攻击者IP 答案&#xff1a;192.168.20.1 查看宝塔日志即可 用的net直接是网关 提交攻击者修改的管理员密码(明文) 答案&…

SpringBoot:自定义线程池配置类

文章目录 一、前言二、案例展示1、初始版本2、代码审核意见和优化建议3、潜在问题和风险4、优化建议5、优化后的代码 三、具体使用 一、前言 有时候我们在项目中做一些长链路的跑批任务时&#xff0c;基于Springboot项目的定时任务&#xff0c;我们可以指定一个自定义的线程配…

RVM安装Ruby笔记(Mac)

环境 硬件&#xff1a;Macbook Pro 系统&#xff1a;macOS 14.1 安装公钥 通过gpg安装公钥失败&#xff0c;报错如下&#xff1a; 换了几个公钥地址&#xff08;hkp://subkeys.pgp.net&#xff0c;hkp://keys.gnupg.net&#xff0c;hkp://pgp.mit.edu&#xff09;&#xff0c;…

2024最新华为OD机试试题库全 -【二叉树的广度搜索】- C卷

1. 🌈题目详情 1.1 ⚠️题目 有一棵二叉树,每个节点由一个大写字母标识(最多26个节点)。 现有两组字母,分别表示后序遍历(左孩子->右孩子->父节点)和中序遍历(左孩子->父节点->右孩子)的结果,请你输出层序遍历的结果。 1.2 🔣输入要求 每个输入文…

【服务端】node.js详细的配置

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

【面试专题】设计模式

1.说一下开发中需要遵守的设计原则&#xff1f; 设计模式中主要有六大设计原则&#xff0c;简称为SOLID &#xff0c;是由于各个原则的首字母简称合并的来(两个L算一个,solid 稳定的)&#xff0c;六大设计原则分别如下&#xff1a; 1、单一职责原则 单一职责原则的定义描述非…

C++ —— C++11新增语法

目录 一&#xff0c;列表初始化 1.1 这是什么&#xff1f; 1.2 initializer_list 1.3 在容器的运用 1.4 STL中的变化 二&#xff0c;右值引用和左值引用 2.1 是什么&#xff1f; 2.2 这两个东西有啥关系&#xff1f; 2.3 有啥用&#xff1f; 三&#xff0c;*移动构…

二维码门楼牌管理应用平台建设:实现数据高效整理与入库

文章目录 前言一、数据整理入库的重要性二、数据整理入库的流程三、数据整理入库的技术支持四、数据整理入库的挑战与对策 前言 随着城市管理的数字化和智能化发展&#xff0c;二维码门楼牌管理应用平台成为了城市治理的新宠。本文将探讨如何通过数据整理入库这一关键环节&…

InternLM

任务一 运行1.8B模型&#xff0c;并对话 User >>> 请创作一个 300 字的小故事 在一片茂密的森林里&#xff0c;住着一只小松鼠&#xff0c;它的名字叫做小雪。小雪非常活泼好动&#xff0c;经常在树上跳跃玩耍。有一天&#xff0c;小雪发现了一个神秘的洞穴&#xf…

莫队算法学习笔记

Part.1 引入 当你遇到一个区间询问但是难以用线段树等 log 算法维护的时候怎么办&#xff1f;那就是——莫队&#xff01; 莫队这个东西能支持区间修改、区间查询的操作&#xff0c;但是这种算法要求离线。莫队有很多种&#xff0c;详细请看下文。 Part.2 普通莫队 我们先来…

Spark源码(二)-Netty简介

一、Netty简介 Netty 是一个异步事件驱动的网络通信应用框架&#xff0c;用于快速开发可维护的高性能服务器和客户端。简单地说Netty封装了JDK的NIO&#xff0c;不用再写一大堆复杂的代码&#xff0c;从NIO各种繁复的细节中脱离出来&#xff0c;让开发者重点关心业务逻辑。 二…