開源日報每天推薦一個 GitHub 優質開源項目和一篇精選英文科技或編程文章原文，堅持閱讀《開源日報》，保持每日學習的好習慣。
2023年12月27日，開源日報第1056期：
今日推薦開源項目：《movie-web》
今日推薦英文原文：《3 Ways to Check if a Property Exists in a JavaScript Object》

開源項目

今日推薦開源項目：《movie-web》傳送門：項目鏈接

推薦理由：movie-web具有自動保存進度、可選擇同步賬戶、收藏電影或電視節目、跟蹤觀影清單等特點, 項目追求簡單易用，精緻而不臃腫 可做開源項目學習

英文原文

今日推薦英文原文：3 Ways to Check if a Property Exists in a JavaScript Object

推薦理由：介紹了三種檢查 JavaScript 對象屬性存在性的方法。用in運算符可檢查對象及其原型鏈中的屬性,hasOwnProperty方法僅檢查對象本身，會忽略原型鏈，使用帶undefined的條件（三元）運算符可精確檢查屬性是否存在

3 Ways to Check if a Property Exists in a JavaScript Object 🕵️‍♂️

Introduction 🌟

In JavaScript, objects are key players. They store data as key-value pairs, making data access more structured and efficient. However, when dealing with objects, a common challenge is determining if a specific property exists. This blog post will guide you through three simple yet effective methods to check for the existence of a property in a JavaScript object. Whether you』re a beginner or an experienced developer, these techniques are essential for robust and error-free code.

1. Using the in Operator 🔍

The in operator is a straightforward way to check if a property exists in an object. It checks through the object and its prototype chain.

Syntax 📝

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

In this example, 'make' in car returns true because make is a property of the car object. Conversely, 'year' in car returns false as year is not a property of car.

Checking in Prototype: 👀

Sometimes properties aren』t directly on the object but in its prototype. The in operator checks these too. For example:

function Vehicle() {
  this.make = 'Toyota';
}

Vehicle.prototype.model = 'Corolla';

const myCar = new Vehicle();
console.log('model' in myCar); // Output: true

Here, even though model is not a direct property of myCar, the in operator finds it in the prototype and returns true.

2. hasOwnProperty: A Direct Property Check 🔐

The hasOwnProperty method offers a more focused approach. It checks only the object itself, ignoring the prototype chain.

Syntax 📝

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

In this example, person.hasOwnProperty('name') returns true as name is a direct property of person. Conversely, person.hasOwnProperty('gender') is false, indicating gender is not a direct property of person.

Checking in Prototype: 👀

Unlike the in operator, hasOwnProperty does not consider the prototype chain. Observe:

function Animal() {
  this.type = 'Dog';
}

Animal.prototype.legs = 4;

const myPet = new Animal();
console.log(myPet.hasOwnProperty('legs')); // Output: false

Although legs is a property in the prototype of myPet, hasOwnProperty returns false because it only checks for properties directly on the object itself.

3. Conditional (Ternary) Operator with undefined: A Precise Check 🎯

This technique uses the conditional (ternary) operator to see if the property』s value is undefined, providing a precise check.

Syntax 📝

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

In this scenario, book.pages is undefined (as pages is not a property of book), thus it returns false. However, book.title is defined, so it returns true.

Conclusion 🏁

Checking for property existence in JavaScript objects is a fundamental skill that enhances the robustness and reliability of your code. The methods discussed — the in operator, hasOwnProperty, and the conditional operator with undefined - cater to different needs and scenarios. By understanding and applying these techniques appropriately, you can avoid common pitfalls and elevate your JavaScript coding practice.

Remember, the right choice of method depends on the specific requirements of your code and understanding these subtleties can make a significant difference in your coding journey. Keep exploring, and happy coding!

下載開源日報APP：https://openingsource.org/2579/
加入我們：https://openingsource.org/about/join/
關注我們：https://openingsource.org/about/love/