判断对象上是否存在某个元素

262 阅读1分钟

判断对象是否存在某个元素(通常是对象的属性)有几种常见的方法,可以在开发过程中根据需求选择不同的方法

方法1:

可以通过访问属性并判断其值是否为 undefined 来检查属性是否存在。这种方法可能会有局限性,因为如果对象的属性值本身是 undefined,它会误判

    let obj1 = {
        a: 1,
        // b: undefined,
    }
    if (obj1.a !== undefined) {
        console.log('存在')
    } else {
        console.log('不存在')
    }
//执行结果:存在

方法2:

使用Object.keys() 该方法返回的是一个数组,数组包含了对象自有的、可枚举的键。

    let obj2 = {
        a: 1,
        b: 2,
        c: 3
    }
    if(Object.keys(obj2).includes('a')) {
        console.log('存在')
    } else {
        console.log('不存在')
    }
//执行结果:存在

下面通过 Object.defineProperties() 将a 和 b 设置为不可枚举 执行结果则会发生改变

    let obj2 = {
        a: 1,
        b: 2,
        c: 3
    }
 
    Object.defineProperties(obj2, {
        a: {
            value: 1,
            writable: true,
            enumerable: false,
            configurable: true,
        },
        b: {
            value: 2,
            writable: true,
            enumerable: false,
            configurable: true,
        },
    })
    if(Object.keys(obj2).includes('a')) {
        console.log('存在')
    } else {
        console.log('不存在')
    }
//执行结果:不存在

方法3:

使用Object.hasOwnProperty(), 判断对象自身是不是存在某个元素(不会查询原型链上的属性)

    let obj = {
        vue: 'good',
        js: 'nice',
        html: 'fine'
    }
    let obj3 = {
        a: 1,
        b: 2,
        c: 3
    }
    obj3.__proto__ = obj //obj3的原型设置为obj
    if (obj3.hasOwnProperty('a')) {
        console.log('存在')
    } else {
        console.log('不存在')
    }
//执行结果:存在
    if (obj3.hasOwnProperty('vue')) {
        console.log('存在')
    } else {
        console.log('不存在')
    }
//执行结果:不存在

方法4:

使用in操作符判断,in操作符可以查询到原型链上的属性

    let obj = {
        vue: 'good',
        js: 'nice',
        html: 'fine'
    }
    let obj3 = {
        a: 1,
        b: 2,
        c: 3
    }
    obj3.__proto__ = obj
    if ('vue' in obj3) {
        console.log('存在')
    } else {
        console.log('不存在')
    }
//执行结果:存在