判断对象是否存在某个元素(通常是对象的属性)有几种常见的方法,可以在开发过程中根据需求选择不同的方法
方法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('不存在')
}
//执行结果:存在