首頁 > web前端 > js教程 > 無需 JavaScript 即可掌握或操作

無需 JavaScript 即可掌握或操作

Mary-Kate Olsen
發布: 2024-10-16 22:43:30
原創
929 人瀏覽過

Dominando o Operador in no JavaScript

了解如何檢查物件屬性

如果您使用 JavaScript 編程,您可能會遇到需要知道物件中是否存在某個屬性的情況,這就是 in 運算符的用武之地。我將向您展示它的工作原理、如何使用它以及為什麼它比檢查物件屬性的其他方法更有效。

in 運算子是什麼?

in 運算子在 JavaScript 中用來檢查物件上是否存在屬性。很酷的是,它不僅檢查物件中直接定義的屬性,還檢查從原型繼承的屬性。

文法非常簡單:

'propriedade' in objeto;
登入後複製

如果屬性存在,則傳回 true,如果不存在,則傳回 false。看起來很簡單,對吧?但它的用處不僅僅是簡單的檢查。您想看一些例子嗎?

範例 1:物件的直接所有權

首先,讓我們來看一個使用 in 運算子檢查直接屬性的基本範例。

const carro = {
  marca: 'Toyota',
  ano: 2020
};

console.log('marca' in carro);  // true
console.log('modelo' in carro);  // false
登入後複製

在這裡,我們有一個帶有品牌和年份屬性的汽車物件。當我們在汽車中使用“品牌”時,結果是正確的,因為品牌屬性直接存在於物件中。 carro 中的 'model' 傳回 false,因為該屬性尚未定義。

這種類型的檢查非常適合在嘗試存取不存在的屬性時避免錯誤。是否曾嘗試存取不存在的財產並破壞了密碼?我已經! ?

範例 2:從原型繼承的屬性

現在,看看 in 運算子如何偵測從原型繼承的屬性

const pessoa = {
  nome: 'Ana'
};

console.log('toString' in pessoa);  // true
登入後複製

在這種情況下,person物件並沒有直接擁有toString屬性,但是這個函數是從Object.prototype繼承的。 in 運算子可以看到這一點並傳回 true。

為什麼這有用?

有時您可能想要檢查物件中是否有任何繼承的功能可用。這可以在一些更複雜的情況下拯救你。

範例 3:與 hasOwnProperty 比較

現在讓我們與另一種檢查屬性的方法(hasOwnProperty 方法)進行比較。它只檢查屬性是否直接在物件上定義,忽略繼承的屬性。

const pessoa = {
  nome: 'Ana'
};
console.log(pessoa.hasOwnProperty('toString'));  // false
console.log('toString' in pessoa);               // true
登入後複製

hasOwnProperty 方法對 toString 傳回 false,因為屬性並非直接位於 person 物件上。同時,in 運算子傳回 true,因為它也考慮繼承的屬性。

何時使用ine 何時使用hasOwnProperty?

當向高級開發人員詢問任何事情時,答案是談論最多的,這取決於

  • 如果您想檢查任何屬性,無論是直接的還是繼承的,請使用 in。
  • 如果需要確保屬性是直接在物件上定義的,而忽略從原型繼承的屬性,請使用 hasOwnProperty。 當您不需要擔心屬性的來源時,in 運算子更加實用,但兩者都在遊樂場中佔有一席之地,因此您只需要知道在哪個位置以及出於什麼目的需要它。

以上是無需 JavaScript 即可掌握或操作的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板