开源日报每天推荐一个 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/