檢查JavaScript對象屬性是否存在的方法小結

更新時間：2024年09月05日 11:28:27 作者：前端達人

在前端開發(fā)面試,面試官提出了一個經典的JavaScript問題：“在JavaScript中,如何檢查對象是否包含某個屬性？請你詳細介紹幾種不同的方法,并解釋它們的區(qū)別,”這個問題考驗你對JavaScript的基礎掌握情況,讓我們進入這個面試場景,需要的朋友可以參考下

方法一：使用 in 操作符

面試官首先期待你能提到最常見的 in 操作符。你解釋道，in 操作符是檢查對象中是否存在某個屬性的簡單直接的方法。它不僅會檢查對象自身的屬性，還會檢查其原型鏈上的屬性。

你向面試官展示了如下代碼：

const car = { make: 'Toyota', model: 'Corolla' };
console.log('make' in car); // true
console.log('year' in car); // false

你解釋說，在這個例子中，'make' in car 返回 true，因為 make 是 car 對象的屬性。而 year 返回 false，因為 year 不存在于 car 對象中。

面試官點點頭，然后追問：“如果屬性是在原型鏈上呢？”

于是你繼續(xù)展示代碼：

function Vehicle() {
  this.make = 'Toyota';
}
 
Vehicle.prototype.model = 'Corolla';
 
const myCar = new Vehicle();
console.log('model' in myCar); // true

你解釋道，雖然 model 并不是 myCar 對象本身的屬性，而是定義在其原型上的屬性，in 操作符仍然返回 true。這是因為 in 操作符會遍歷整個原型鏈進行檢查。

方法二：使用 hasOwnProperty 方法

接下來，你提出了 hasOwnProperty 方法，這是一個只檢查對象自身屬性的方法，不會考慮原型鏈上的屬性。

你向面試官展示了如下代碼：

const person = { name: 'Alice', age: 30 };
console.log(person.hasOwnProperty('name')); // true
console.log(person.hasOwnProperty('gender')); // false

你解釋道，person.hasOwnProperty('name') 返回 true，因為 name 是 person 對象的直接屬性。而 gender 返回 false，因為它不在 person 對象中。

面試官對此表示認可，但提出了一個進一步的問題：“那如果屬性是在原型鏈上呢？”

于是你又演示了另一個示例：

function Animal() {
  this.type = 'Dog';
}
 
Animal.prototype.legs = 4;
 
const myPet = new Animal();
console.log(myPet.hasOwnProperty('legs')); // false

你解釋說，legs 屬性在 Animal 的原型上，而不是在 myPet 對象本身，因此 hasOwnProperty 返回 false。這種方法非常適合在需要精確判斷對象自身屬性時使用，避免原型鏈的干擾。

方法三：使用三元操作符結合 undefined 進行精確檢查

最后，你向面試官展示了一種更為精準的方法，通過三元操作符結合 undefined 來判斷屬性是否存在。這種方法特別適用于需要確定屬性是否定義的場景。

你展示了以下代碼：

const book = { title: 'JavaScript Essentials', author: 'John Doe' };
console.log(book.pages !== undefined ? true : false); // false
console.log(book.title !== undefined ? true : false); // true

你解釋說，在這個例子中，pages 屬性不存在，因此返回 false。而 title 屬性存在，因此返回 true。這種方法的優(yōu)勢在于它可以精確判斷屬性是否存在，特別是在你不確定屬性是否被定義時。