zoukankan      html  css  js  c++  java
  • JavaScript判断对象是否包含某个属性的几种方法

    1、最简单的方法,就是使用“!==”进行判断,这种方法在工作中很常见,可以看出该方法可以判断继承来的属性。

    let obj = { x: 1 };
    obj.x !== undefined;   // true 有x属性
    obj.y !== undefined;   // false 无y属性
    obj.toString !== undefined;   // true 从Object继承toString属性
    

    2、使用 in 运算符,in 的语法是: attr in obj , 同样,该表达式也返回一个布尔值。

    let obj = { x: 1 };
    'x' in obj;             // true
    'y' in obj;             // false
    'toString' in obj;      // true
    

    in运算符语法很简单,效果跟undefined是相同的,与undefined不同的是,in可以区分存在但值为undefined的属性。话不多说,看代码:

    let obj = { x: undefined };
    obj.x !== undefined;            // false
    'x' in obj;                     // true
    

    可以看出如果属性的值为undefined的时候,使用 !== 的方法就不奏效了,所以在工作中需要注意一下这一块。

    3、对象的 hasOwnProperty() 方法也可以检测指定属性名是否在对象内,同样返回是布尔值, 当检测属性为自有属性(非继承)的时候返回true。

    let obj = { x: 1, abc: 2 };
    let a = 'a';
    let b = 'bc';
    obj.hasOwnProperty('x');               // true 包含
    obj.hasOwnProperty('y');               // false 不包含
    obj.hasOwnProperty('toString');        // false 继承属性
    obj.hasOwnProperty(a + b);             // true 判断的是属性abc
    

    in 运算符和 hasOwnProperty() 的区别就在于 in 运算符可以判断来自继承的属性,而hasOwnProperty() 不能。针对这一点在工作中加以运用还是很有帮助的。

    4、propertyIsEnumerable() 是hasOwnProperty() 的增强版,这个方法的用法与hasOwnProperty()相同,但当检测属性是自有属性(非继承)且这个属性是可枚举的,才会返回true。

    那么什么是可枚举属性?通俗的讲就是可以通过for...in遍历出来的属性就是可枚举属性。通常由JS代码创建出来的属性都是可枚举的。看一下代码也许更方便理解:

    let obj = Object.create({x: 1});                   // 通过create()创建一个继承了X属性的对象obj
    obj.propertyIsEnumerable('x');                     // false x是继承属性
    obj.y = 1;                                         // 给obj添加一个自有可枚举属性y
    obj.propertyIsEnumerable('y');                     // true
    Object.prototype.propertyIsEnumerable('toString'); // false 不可枚举
    

    5、Object.keys(),它会返回一个对象自身的可枚举属性的名字,类型为一个数组。 

    let obj = { x: 1 };
    Object.defineProperty(obj, 'test', {
    	value: 'testVal',
    	enumerable: false,
    	writable: true,
    	configurable: true
    });
    let arr = Object.keys(obj);
    arr.includes('x');  // true
    arr.includes('test');  //false
    

    我们使用了ES5提供的Object.defineProperty()方法为person对象增加了一个不可枚举的名为 test 的属性,它的值为 ‘testVal’。Object.keys()在获得了一个对象的可枚举属性之后,接下来的操作就变成了在数组中查找符合条件的元素。在上述代码中我们用了数组内置的includes()方法,对于旧版浏览器你可能需要改用 indexOf()等方法。

     

    以上五种方法,都可以判断出对象是否包含某个属性,工作中可以根据不同情况采用不同的方法。

    参考链接:https://blog.csdn.net/z327171559/article/details/82152603

           https://baijiahao.baidu.com/s?id=1669987908375979930&wfr=spider&for=pc

  • 相关阅读:
    Dockerfile常用指令
    Maven相关命令
    CI-CD平台搭建过程整理
    边工作边刷题:70天一遍leetcode: day 28-1
    边工作边刷题:70天一遍leetcode: day 28
    边工作边刷题:70天一遍leetcode: day 29-1
    边工作边刷题:70天一遍leetcode: day 29
    边工作边刷题:70天一遍leetcode: day 30-1
    边工作边刷题:70天一遍leetcode: day 30
    边工作边刷题:70天一遍leetcode: day 31-4
  • 原文地址:https://www.cnblogs.com/cyfeng/p/13497415.html
Copyright © 2011-2022 走看看