前端 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天前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
|
5天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
17 0
|
6天前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
58 41
|
1天前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
10 3
|
5天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
38 0
|
5天前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
7 0
|
5天前
|
前端开发 JavaScript 程序员
【从前端入门到全栈】Node.js 之核心概念
【从前端入门到全栈】Node.js 之核心概念
|
5天前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
5天前
|
Web App开发 JavaScript 前端开发
对于 前端 解释下 node.js的必要性
对于 前端 解释下 node.js的必要性
8 0
|
6天前
|
监控 JavaScript 前端开发
深入了解Vue.js:构建现代前端应用的利器
【10月更文挑战第11天】深入了解Vue.js:构建现代前端应用的利器
10 0