快捷導(dǎo)航

js判斷對(duì)象是否存在某個(gè)屬性的幾種辦法技巧

更新時(shí)間：2023年12月20日 09:16:00 作者：詹姆斯bind

這篇文章主要給大家介紹了關(guān)于js判斷對(duì)象是否存在某個(gè)屬性的幾種辦法技巧,判斷對(duì)象中是否有某屬性的常見方式總結(jié),不同的場(chǎng)景要使用不同的方式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在 JavaScript 開發(fā)中，判斷一個(gè)對(duì)象是否存某個(gè)屬性在是非常基礎(chǔ)的操作，也是開發(fā)者經(jīng)常需要處理的問題之一。然而，繁瑣的代碼可能會(huì)讓我們感到疲憊不堪，因此這里將介紹幾種 JavaScript 小技巧，幫助你更高效地判斷對(duì)象屬性的存在性，提高代碼效率?。

?? 技巧一：使用 hasOwnProperty 方法

hasOwnProperty 是 JavaScript 中的內(nèi)置方法，用于檢測(cè)一個(gè)對(duì)象是否擁有特定的自身屬性。如果包含，則返回 true，否則返回 false。注意，這里的“自身屬性”指的是掛在對(duì)象自身上的屬性，而不包括原型鏈上的屬性。

const person = {
  name: 'Tom',
  age: 18
};

console.log(person.hasOwnProperty('name')); // true
console.log(person.hasOwnProperty('gender')); // false
console.log(person.hasOwnProperty('toString')); // false   對(duì)象原型上有 toString 屬性

這種方式可以判斷一個(gè)屬性是否掛載在對(duì)象自身上，但無(wú)法判斷其是否存在于原型鏈上。

?? 技巧二：使用 in 操作符

使用 in 操作符可以判斷一個(gè)對(duì)象是否包含某個(gè)屬性，如果該屬性存在于對(duì)象自身或其原型鏈上，則返回 true，否則返回 false。

const person = {
  name: 'Tom',
  age: 18
};

console.log('name' in person); // true
console.log('gender' in person); // false
console.log('toString' in person); // true

這種方式可以判斷一個(gè)屬性是否存在于對(duì)象自身或其原型鏈上，但無(wú)法區(qū)分屬性是掛載在對(duì)象自身還是原型鏈上。

?? 技巧三：使用 Reflect.has 方法

Reflect.has 是 ES6 中引入的新方法，用于檢測(cè)一個(gè)對(duì)象是否包含某個(gè)屬性，與 in 操作符類似，可以同時(shí)判斷一個(gè)屬性是否存在于對(duì)象自身或原型鏈上。

const person = {
  name: 'Tom',
  age: 18
};

console.log(Reflect.has(person, 'name')); // true
console.log(Reflect.has(person, 'gender')); // false
console.log(Reflect.has(obj, 'toString')); // true

上面幾種方法都可以滿足我們?nèi)粘ｉ_發(fā)中對(duì)對(duì)象屬性存在與否的判斷，如果要精確判斷屬性是在對(duì)象自身還是原型鏈上可以這樣做

const person = {
  name: 'Tom',
  age: 18
};

console.log(Object.getPrototypeOf(person).hasOwnProperty('name')); // false
console.log(Object.getPrototypeOf(person).hasOwnProperty('toString')); // true