JS判断对象属性是否存在的五种方案分享

目录
  • 背景
  • 检查属性是否存在
    • in
    • Reflect.has()
    • hasOwnProperty
      • 构造函数法
      • 对象字面量
      • 缺点
      • 覆盖报错
    • Object.prototype.hasOwnProperty()
    • ES13（ES2022）Object.hasOwn()
  • 总结

背景

在这篇Accessible Object.prototype.hasOwnProperty()提案中，提出了一个更简单的方法来检查对象时候具有特定的属性-

Object.hasOwn()，主要目标是用来替代Object.prototype.hasOwnProperty()。目前本提案已经进去第四阶段，预计2022年纳入标准。

随着Object.hasOwn()的加入，目前我们已经有了5个判断对象属性是否存在的方法！

检查属性是否存在

in

JavaScript的in操作符可以用来判断一个属性是否属于一个对象，也可以用来变量一个对象的属性

本文我们只讨论in的检查作用

in运算符检查对象是否具有给定名称的属性：

> 'name' in {name: '搞前端的半夏'}
true
> 'name' in {}
false

但是因为in会判断继承过来的属性！

> 'toString' in {}
true

那是因为{}继承了方法Object.prototype.toString()

Reflect.has()

Reflect是在ES2015新增的一个内置对象，提供了与Javascript对象交互的方法。

判断一个对象是否存在某个属性，和 in 运算符] 的功能完全相同。

用法：Reflect.has(obj, propName)

Reflect.has({name:"搞前端的半夏"}, "name"); // true
Reflect.has({name:"搞前端的半夏"}, "age"); // false

Reflect.has({name:"搞前端的半夏"}, "toString"); //true

hasOwnProperty

hasOwnProperty这个方法可以用来检测一个对象是否含有特定的自身属性，即是用来判断一个属性是定义在对象本身而不是继承自原型链的，

通过对象字面量或者构造函数法创建的对象都从Object.prototype继承了hasOwnProperty()。

构造函数法

o = new Object();
o.name = '搞前端的半夏';
o.hasOwnProperty('name');             // 返回 true
o.hasOwnProperty('toString');         // 返回 false
o.hasOwnProperty('hasOwnProperty');   // 返回 false

对象字面量

o={name:"搞前端的半夏"}
o.hasOwnProperty('name');             // 返回 true
o.hasOwnProperty('toString');         // 返回 false
o.hasOwnProperty('hasOwnProperty');   // 返回 false

缺点

不支持create

但是下面这种情况：

o =  Object.create(null)
o.hasOwnProperty('name');             // 返回 true

会直接报错：

Uncaught TypeError: o.hasOwnProperty is not a function
    at <anonymous>:1:3

覆盖报错

如果一个对象有一个自己的名为 name 的属性'hasOwnProperty'，那么该属性将被覆盖Object.prototype.hasOwnProperty并且我们无法访问它：

o={hasOwnProperty:"搞前端的半夏"}
o.hasOwnProperty('name');

直接报错

VM123:3 Uncaught TypeError: o.hasOwnProperty is not a function
    at <anonymous>:3:3

Object.prototype.hasOwnProperty()

用法：Object.prototype.hasOwnProperty.call(obj, propName);，接受两个参数。请注意我们这里用到了call。改变this的指向。

Object.prototype.hasOwnProperty除了支持hasOwnProperty的相同用法，同时还解决了hasOwnProperty的两个缺点。

o={hasOwnProperty:"搞前端的半夏"}
Object.prototype.hasOwnProperty.call.hasOwnProperty(o,'name'); // 返回false

ES13（ES2022）Object.hasOwn()

Object.hasOwn()，目前来看就是替代Object.prototype.hasOwnProperty.call()。

如果用Object.prototype.hasOwnProperty.call() 来封装的话，代码如下：

function hasOwn(obj, propName) {
  return Object.prototype.hasOwnProperty.call(obj, propName);
}
Object.hasOwn({name: '搞前端的半夏'}, 'name')  // true
Object.hasOwn({}, 'name')               //false
Object.hasOwn({}, 'toString')             //false
Object.hasOwn(Object.create(null), 'name')     //false
Object.hasOwn({hasOwnProperty: 'yes'}, 'name')  //false
Object.hasOwn({hasOwn: 'yes'}, 'name')		 //false

总结

到此这篇关于JS判断对象属性是否存在的五种方案的文章就介绍到这了,更多相关JS判断对象属性存在内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • js 对象是否存在判断

    复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>javascript object</title> <body> <input id="aaa"> <input type=button onclick=&q

  • JS判断是否为JSON对象及是否存在某字段的方法(推荐)

    实例如下: $.ajax({ type: 'POST', url: url, success(function(data){ //判断是否为JSON对象 if(typeof(data) == "object" && Object.prototype.toString.call(data).toLowerCase() == "[object object]" && !data.length){ alert("is JSON 0

  • JS判断对象是否存在的10种方法总结

    Javascript语言的设计不够严谨,很多地方一不小心就会出错.举例来说,请考虑以下情况.现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: 复制代码 代码如下: if (myObj不存在){ 声明myObj; } 你可能会觉得,写出这段代码很容易.但是实际上,它涉及的语法问题,远比我们想象的复杂.Juriy Zaytsev指出,判断一个Javascript对象是否存在,有超过50种写法.只有对Javascript语言的实现细节非常清楚,才可

  • 如何判断Javascript对象是否存在的简单实例

    Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: if (myObj不存在){ 声明myObj; } 你可能会觉得,写出这段代码很容易.但是实际上,它涉及的语法问题,远比我们想象的复杂.Juriy Zaytsev指出,判断一个Javascript对象是否存在,有超过50种写法.只有对Javascript语言的实现细节非常清楚,才可能分得清它们的区别

  • 多种方法判断Javascript对象是否存在

    Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: 复制代码 代码如下: if (myObj不存在){ 声明myObj; } 你可能会觉得,写出这段代码很容易.但是实际上,它涉及的语法问题,远比我们想象的复杂.Juriy Zaytsev指出,判断一个Javascript对象是否存在,有超过50种写法.只有对Javascript语言的实现细节非常清楚,

  • javascript检测对象中是否存在某个属性判断方法小结

    检测对象中属性的存在与否可以通过几种方法来判断. 1.使用in关键字该方法可以判断对象的自有属性和继承来的属性是否存在. 复制代码 代码如下: var o={x:1}; "x" in o; //true,自有属性存在 "y" in o; //false "toString" in o; //true,是一个继承属性 2.使用对象的hasOwnProperty()方法 该方法只能判断自有属性是否存在,对于继承属性会返回false. 复制代码 代码如

  • JS判断对象属性是否存在的五种方案分享

    目录 背景 检查属性是否存在 in Reflect.has() hasOwnProperty 构造函数法 对象字面量 缺点 覆盖报错 Object.prototype.hasOwnProperty() ES13(ES2022)Object.hasOwn() 总结 背景 在这篇Accessible Object.prototype.hasOwnProperty()提案中,提出了一个更简单的方法来检查对象时候具有特定的属性- Object.hasOwn(),主要目标是用来替代Object.proto

  • Jquery命名冲突解决的五种方案分享

    因为许多 JavaScript 库使用 $ 作为函数或变量名,jquery也一样.其实$只是jquery的一个别名而已,假如我们需要使用 jquery 之外的另一 js 库,我们可以通过调用 $.noConflict() 向该库返回控制权.下面是收集到解决这一问题的五种方案,总有一种你会用得上的. 例一: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

  • 基于JS判断对象是否是数组

    这篇文章主要介绍了基于JS判断对象是否是数组,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.通过instanceof判断 instanceof运算符用于检验构造函数的prototype属性是否出现在对象的原型链中的任何位置,返回一个布尔值. let a = []; a instanceof Array; //true let b = {}; b instanceof Array; //false 在上方代码中,instanceof运算符检测

  • JS遍历对象属性的方法示例

    本文实例讲述了JS遍历对象属性的方法.分享给大家供大家参考,具体如下: 遍历JavaScript某个对象所有的属性名称和值的方法,这样想使用方法的时候非常的直观和方便.代码如下: /* * 用来遍历指定对象所有的属性名称和值 * obj 需要遍历的对象 * author: Jet Mah */ function allPrpos ( obj ) { // 用来保存所有的属性名称和值 var props = "" ; // 开始遍历 for ( var p in obj ){ // 方法

  • JS获取对象属性名总结

    最近面试遇到问如何获取对象全部属性名的方法,总结一下: 对象属性类型分类: 1.ESMAScript分类 数据类型 又分为可枚举和不可枚举类型 访问器类型 2.上下文分类 原型属性 实例属性 1.列举自身但不包括原型的可枚举属性名 Object.keys(obj) // 遍历对象 function Person(name, age) { this.name = name; this.age = age; } Person.prototype.demo = function() {}; let c

  • 解决Java中SimpleDateFormat线程不安全的五种方案

    解决Java中SimpleDateFormat线程不安全的五种方案

    目录 1.什么是线程不安全? 线程不安全的代码 2.解决方案 ① 将SimpleDateFormat变为局部变量 ② 使用synchronized加锁 ③ 使用Lock加锁 ④ 使用ThreadLocal ⑤ 使用DateTimeFormatter 3.线程不安全原因分析 4.各方案优缺点总结 1.什么是线程不安全? 线程不安全也叫非线程安全,是指多线程执行中,程序的执行结果和预期的结果不符的情况就叫做线程不安全. 线程不安全的代码 SimpleDateFormat 就是一个典型的线程不安全事例

  • SpringBoot父子线程数据传递的五种方案介绍

    目录 方案1.ThreadLocal+TaskDecorator 方案2.RequestContextHolder+TaskDecorator 方案3.MDC+TaskDecorator 方案4.InheritableThreadLocal 方案5.TransmittableThreadLocal 方案对比 简答说一下InheritableThreadLocal 总结 方案1.ThreadLocal+TaskDecorator 用户工具类 UserUtils /** *使用ThreadLocal

  • js判断对象是否是某一类型

    判断对象是否是某一类型 var obj = new String("我们"); alert(obj instanceof String); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js中判断对象是否为空的三种实现方法

    在写js脚本的时候经常遇到对象为空或者不是对象的情况,出现这种情况我们可以用if去判断它,然后去执行相应的处理方法,具体判断他们的方法有以下几种: 1.if   (typeOf(x)   ==   "undefined") 2.if   (typeOf(x)   !=   "object") 3.if(!x) 其中第三种是最简单的方法,但是第三种就不能用if(x)这种互斥的方法去判断,只能在对象前面加! java里面!x为true的时候x肯定为false了,但是这里

随机推荐