前端 JS 经典:判断对象属性是否存在

简介: 前端 JS 经典:判断对象属性是否存在

前言:在项目的业务逻辑中,有些场景会用到对象属性是否存在的判断。那么就需要我们选择适合业务的判断逻辑。

1. obj.name

通过 obj.name 判断属性是否存在,有个缺陷,就是当属性为 "", undefined, null, 0 时,也是判断的不存在。

let obj = {};
obj.name ? "存在" : "不存在"; // 不存在
 
let obj = { name: "" };
obj.name ? "存在" : "不存在"; // 不存在
 
let obj = { name: 0 };
obj.name ? "存在" : "不存在"; // 不存在
 
let obj = { name: null };
obj.name ? "存在" : "不存在"; // 不存在
 
let obj = { name: undefined };
obj.name ? "存在" : "不存在"; // 不存在
 
let obj = { name: "yqcoder" };
obj.name ? "存在" : "不存在"; // 存在

2. Object.keys(obj).includes('name')

拿到这个对象的所有属性名,这个属性名要求是自身可枚举的属性。那什么叫自身属性什么叫可枚举属性呐,自身属性是自有的属性,不是通过构造函数获得的,可枚举属性就是可以通过循环,遍历对象可以访问到的属性。

// 通过构造函数生成对象
function Create() {}
Create.prototype.name = "yqcoder";
let obj = new Create();
console.log(obj.name); // yqcoder;
Object.keys(obj).includes("name") ? "存在" : "不存在"; // "不存在"
 
// 不可枚举属性
let obj = { name: "yqcoder" };
Object.defineProperty(obj, "name", {
  enumerable: false,
});
console.log(obj.name); // yqcoder;
Object.keys(obj).includes("name") ? "存在" : "不存在"; // 不存在
 
// 正常情况对象属性
let obj = { name: "yqcoder" };
Object.keys(obj).includes("name") ? "存在" : "不存在"; // "存在"

3. obj.hasOwnProperty('name')

可以不是可枚举的属性,只要是自有属性,就 ok。

// 通过构造函数生成对象
function Create() {}
Create.prototype.name = "yqcoder";
let obj = new Create();
console.log(obj.name); // yqcoder;
obj.hasOwnProperty("name") ? "存在" : "不存在"; // "不存在"
 
// 不可枚举属性
let obj = { name: "yqcoder" };
Object.defineProperty(obj, "name", {
  enumerable: false,
});
console.log(obj.name); // yqcoder;
obj.hasOwnProperty("name") ? "存在" : "不存在"; // "存在"
 
// 正常情况对象属性
let obj = { name: "yqcoder" };
obj.hasOwnProperty("name") ? "存在" : "不存在"; // "存在"

4. 关键字 in

不要求是自由可枚举的属性了,只要能找到就 ok

// 通过构造函数生成对象
function Create() {}
Create.prototype.name = "yqcoder";
let obj = new Create();
console.log(obj.name); // yqcoder;
'name' in obj ? "存在" : "不存在"; // "存在"
 
// 不可枚举属性
let obj = { name: "yqcoder" };
Object.defineProperty(obj, "name", {
  enumerable: false,
});
console.log(obj.name); // yqcoder;
'name' in obj  ? "存在" : "不存在"; // 存在
 
// 正常情况对象属性
let obj = { name: "yqcoder" };
obj.hasOwnProperty("name") ? "存在" : "不存在"; // 存在


目录
相关文章
|
5天前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
21 0
|
1天前
|
JavaScript 前端开发
js数组包对象格式怎么根据不同的键值使用sort排序一组数组
js数组包对象格式怎么根据不同的键值使用sort排序一组数组
|
1天前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
|
1天前
|
JavaScript 前端开发
原生JS如何查询元素属性
原生JS如何查询元素属性
|
2天前
|
缓存 监控 JavaScript
Vue.js中的计算属性 computed 与监听属性 watch深入探索
Vue.js中的计算属性 computed 与监听属性 watch深入探索
18 0
|
2天前
|
设计模式 存储 JavaScript
【JavaScript】JavaScript对象设计哲学:八种模式塑造高效代码
【JavaScript】JavaScript对象设计哲学:八种模式塑造高效代码
14 5
|
2天前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
11 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
3天前
|
存储 缓存 JavaScript
JavaScript内存泄漏通常发生在对象不再需要时
【6月更文挑战第16天】JavaScript内存泄漏常由闭包引起,当不再需要的对象仍被闭包引用时,垃圾回收机制无法清理。例如,创建返回大型对象引用的闭包函数会导致内存泄漏。避免泄漏需及时解除引用,清除事件监听器,利用WeakMap或WeakSet,以及定期清理缓存。使用性能分析工具监控内存使用也有助于检测和解决问题。
18 8
|
5天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
5天前
|
JavaScript 前端开发
javascript判断对象中是否存在某个字段
javascript判断对象中是否存在某个字段

热门文章

最新文章