これは、JavaScript でのさまざまなオブジェクト メソッドの実際の使用法を示すリアルタイム プロジェクト シナリオです。このシナリオでは、ユーザーが自分のプロファイルを管理できるようにするオンライン アプリケーション用のユーザー管理システムを構築します。提供されている各メソッドを使用する方法とその理由を説明します。
プロジェクト概要:
このプロジェクトでは、ユーザーは自分のプロフィールを登録および更新できます。ユーザー データはオブジェクトに保存されており、ロールごとのユーザーのグループ化、特定のプロパティの凍結、特定の検証チェックの確保、ユーザー入力変換の処理などのさまざまな機能が必要です。
シナリオ: ユーザーがプロフィールを更新するとき、更新されたデータを既存のユーザー オブジェクトにマージする必要があります。
使用理由: Object.assign() を使用すると、さまざまなオブジェクトのプロパティを組み合わせることができます。既存のユーザー オブジェクトを更新された値と簡単にマージできます。
例:
const existingUser = { name: "John", age: 30, role: "admin" };
const updatedData = { age: 31, city: "New York" };
// Merging updated data into the existing user object
const mergedUser = Object.assign({}, existingUser, updatedData);
console.log(mergedUser);
// Output: { name: "John", age: 31, role: "admin", city: "New York" }
シナリオ: 管理者やゲストなど、ユーザーのロールに関連する特定のメソッドを継承するユーザー オブジェクトを作成する必要があるとします。
使用理由: Object.create() を使用すると、プロトタイプから継承するオブジェクトを作成できるため、同様のオブジェクト間で機能を再利用できます。
例:
const rolePrototype = {
getRole: function() {
return this.role;
}
};
// Creating a user object with role prototype
const adminUser = Object.create(rolePrototype);
adminUser.role = "admin";
console.log(adminUser.getRole()); // Output: "admin"
シナリオ: ユーザー プロファイルでは、ユーザー ID は作成後に不変である必要があります。ユーザー ID が変更できないことを確認する必要があります。
使用理由: Object.defineProperty() を使用すると、プロパティの書き込みや変更が可能かどうかなど、プロパティの特性を制御できます。
例:
const user = { name: "Alice" };
Object.defineProperty(user, 'userID', {
value: '12345',
writable: false, // Making userID read-only
enumerable: true
});
console.log(user.userID); // Output: 12345
user.userID = '67890'; // This will not change userID
console.log(user.userID); // Output: 12345
もちろんです！以下に、Object.defineProperty メソッドを使用した enumerable: true と enumerable: false の違いを示す例を示します。
この例では、enumerable を true に設定してプロパティを定義します。このプロパティは列挙操作で表示されます。
const user1 = { name: "Alice" };
// Define an enumerable property
Object.defineProperty(user1, 'userID', {
value: '12345',
writable: false, // Making userID read-only
enumerable: true // This property is enumerable
});
// Check enumerable properties
console.log("For...in loop:");
for (let key in user1) {
console.log(key); // Logs: name, userID
}
console.log("Object.keys():", Object.keys(user1)); // Logs: ['name', 'userID']
console.log("JSON.stringify():", JSON.stringify(user1)); // Logs: {"name":"Alice","userID":"12345"}
この例では、enumerable を false に設定してプロパティを定義します。このプロパティは列挙操作では表示されません。
const user2 = { name: "Bob" };
// Define a non-enumerable property
Object.defineProperty(user2, 'userID', {
value: '67890',
writable: false, // Making userID read-only
enumerable: false // This property is not enumerable
});
// Check enumerable properties
console.log("For...in loop:");
for (let key in user2) {
console.log(key); // Logs: name (userID is not logged)
}
console.log("Object.keys():", Object.keys(user2)); // Logs: ['name'] (userID is not included)
console.log("JSON.stringify():", JSON.stringify(user2)); // Logs: {"name":"Bob"} (userID is not included)
user1 の場合 (列挙可能: true):
user2 の場合 (列挙可能: false):
シナリオ: 新しいユーザーを登録するとき、ユーザー ID とロールの両方を定義する必要があります。ここで、ユーザー ID は不変ですが、ロールは書き込み可能です。
使用理由: Object.defineProperties() は、異なる特性を持つ複数のプロパティを一度に定義する場合に便利です。
例:
const newUser = {};
Object.defineProperties(newUser, {
userID: {
value: '98765',
writable: false,
enumerable: true
},
role: {
value: 'guest',
writable: true,
enumerable: true
}
});
console.log(newUser);
// Output: { userID: "98765", role: "guest" }
シナリオ: 管理パネルで見やすくするために、ユーザーのプロファイルのすべてのキーと値のペアを表示する必要があります。
使用理由: Object.entries() は、オブジェクトをキーと値のペアの配列に変換します。これにより、データの反復処理が容易になります。
例:
const userProfile = { name: "Alice", age: 28, city: "Paris" };
const entries = Object.entries(userProfile);
entries.forEach(([key, value]) => {
console.log(`${key}: ${value}`);
});
// Output:
// name: Alice
// age: 28
// city: Paris
シナリオ: ユーザーがプロファイルを送信した後、偶発的な変更を防ぐためにプロファイル全体を不変にしたいとします。
使用理由: Object.freeze() は、オブジェクトのプロパティの追加、削除、変更を防ぎます。
例:
const userProfile = { name: "John", age: 31, city: "New York" };
Object.freeze(userProfile);
userProfile.city = "San Francisco"; // This change won't be applied
console.log(userProfile.city); // Output: "New York"
シナリオ: フォーム送信からユーザー プロファイル データを受信した後、それをキーと値のペアの配列として取得し、オブジェクトに変換し直す必要があります。
Why Use It: Object.fromEntries() converts an array of key-value pairs into an object.
Example:
const formData = [['name', 'Alice'], ['age', '28'], ['city', 'Paris']];
const userProfile = Object.fromEntries(formData);
console.log(userProfile);
// Output: { name: "Alice", age: "28", city: "Paris" }
Scenario: We need to categorize users into different groups based on their roles (e.g., admin, guest).
Why Use It: JavaScript doesn’t have a built-in groupBy() function, but we can create one to group users by a certain property like their role.
Example:
const users = [
{ name: "Alice", role: "admin" },
{ name: "Bob", role: "guest" },
{ name: "Charlie", role: "admin" },
];
const groupBy = (array, key) => {
return array.reduce((acc, obj) => {
const keyValue = obj[key];
if (!acc[keyValue]) acc[keyValue] = [];
acc[keyValue].push(obj);
return acc;
}, {});
};
const groupedUsers = groupBy(users, 'role');
console.log(groupedUsers);
// Output:
// {
// admin: [{ name: "Alice", role: "admin" }, { name: "Charlie", role: "admin" }],
// guest: [{ name: "Bob", role: "guest" }]
// }
Scenario: Before allowing a user to access a feature, we want to check if they have a specific property like role.
Why Use It: Object.hasOwn() ensures that the property exists directly on the object and not in the prototype chain.
Example:
const user = { name: "Alice", role: "admin" };
console.log(Object.hasOwn(user, 'role')); // true
console.log(Object.hasOwn(user, 'age')); // false
Scenario: We want to strictly compare two profile objects to check if they are exactly the same, including NaN.
Why Use It: Object.is() compares two values and correctly handles special cases, such as comparing NaN.
Example:
const user1 = { name: "John" };
const user2 = { name: "John" };
console.log(Object.is(user1, user2)); // false (different references)
console.log(Object.is(NaN, NaN)); // true
Scenario: We want to get an array of keys (property names) or values (property values) from a user's profile.
Why Use It: Object.keys() is used to retrieve the keys, and Object.values() retrieves the values of an object.
Example:
const user = { name: "John", age: 30, city: "New York" };
console.log(Object.keys(user)); // ["name", "age", "city"]
console.log(Object.values(user)); // ["John", 30, "New York"]
Scenario: When working with inherited objects, we need to ensure a property exists directly on an object and not on its prototype.
Why Use It: Object.hasOwnProperty() is useful for checking if a property belongs to the object itself, not its prototype chain.
Example:
const user = { name: "Alice" };
console.log(user.hasOwnProperty('name')); // true
console.log(user.hasOwnProperty('toString')); // false (inherited from prototype)
Here’s a detailed comparison of similar or related Object methods and additional topics, explaining how they differ in usage and when to use each one. This will help you choose the right method for specific use cases in your project.
Similarity:
Both Object.assign() and Object.create() are used to create objects.
Differences:
| Method | Purpose | When to Use |
|---|---|---|
| Object.assign() | Copies the properties of one or more objects into another object. | When you need to merge or shallow copy objects (e.g., updating user data or combining settings). |
| Object.create() | Creates a new object with a specified prototype. | When you need to set up prototypal inheritance, such as creating users with role-specific behaviors. |
Example:
// Object.assign: Merging objects
const target = {};
const source = { name: "John" };
Object.assign(target, source); // { name: "John" }
// Object.create: Inheriting from a prototype
const rolePrototype = { role: "admin" };
const adminUser = Object.create(rolePrototype);
console.log(adminUser.role); // "admin"
Similarity:
Both methods define properties with configurable characteristics (e.g., writable, enumerable).
Differences:
| Method | Purpose | When to Use |
|---|---|---|
| Object.defineProperty() | Defines or modifies a single property on an object. | Use when you need fine-grained control over a single property (e.g., making userID read-only). |
| Object.defineProperties() | Defines or modifies multiple properties at once. | Use when you need to set up multiple properties with different configurations in one go. |
Example:
// Object.defineProperty: Setting a single property
const user = {};
Object.defineProperty(user, 'userID', { value: '123', writable: false });
// Object.defineProperties: Setting multiple properties
Object.defineProperties(user, {
role: { value: 'admin', writable: true },
age: { value: 30, enumerable: true }
});
Similarity:
All three methods return information about the properties of an object, but in different forms.
Differences:
| Method | Purpose | When to Use |
|---|---|---|
| Object.entries() | Returns an array of key-value pairs. | Use when you need both keys and values (e.g., iterating over a profile’s data for display). |
| Object.keys() | Returns an array of keys (property names). | Use when you need only the property names (e.g., validating fields in a user form). |
| Object.values() | Returns an array of values. | Use when you only need the property values (e.g., aggregating numerical values like expenses in a budget app). |
Example:
const userProfile = { name: "John", age: 30, city: "New York" };
// Object.entries: Key-value pairs
console.log(Object.entries(userProfile)); // [["name", "John"], ["age", 30], ["city", "New York"]]
// Object.keys: Only keys
console.log(Object.keys(userProfile)); // ["name", "age", "city"]
// Object.values: Only values
console.log(Object.values(userProfile)); // ["John", 30, "New York"]
Similarity:
Both methods control modifications to an object but differ in the level of restriction they impose.
Differences:
| Method | Purpose | When to Use |
|---|---|---|
| Object.freeze() | Makes an object completely immutable (cannot add, remove, or change properties). | Use when you need a strict immutability guarantee, such as locking down a user’s profile after registration. |
| Object.seal() | Prevents adding or removing properties but allows modification of existing ones. | Use when you need to prevent property addition/removal but still allow changes to existing properties. |
Example:
const user = { name: "Alice", role: "guest" };
// Object.freeze: Completely immutable
Object.freeze(user);
user.name = "Bob"; // Won't change
delete user.role; // Won't delete
// Object.seal: Modify existing, but can't add/remove
Object.seal(user);
user.name = "Bob"; // Allowed
delete user.role; // Not allowed
Similarity:
Both methods check if an object has a particular property, but there are slight technical differences.
Differences:
| Method | Purpose | When to Use |
|---|---|---|
| Object.hasOwnProperty() | Checks if a property exists directly on the object (older). | Use for older JavaScript codebases where backward compatibility is needed. |
| Object.hasOwn() | Similar to hasOwnProperty() but designed as a more modern and robust method (ES2022). | Use in modern JavaScript projects for checking if an object has a direct property (avoids issues with prototypes). |
Example:
const user = { name: "John" };
// Object.hasOwnProperty
console.log(user.hasOwnProperty('name')); // true
console.log(user.hasOwnProperty('age')); // false
// Object.hasOwn
console.log(Object.hasOwn(user, 'name')); // true
console.log(Object.hasOwn(user, 'age')); // false
Similarity:
Both are used for comparing values, but they handle special cases differently.
Differences:
| Method | Purpose | When to Use |
|---|---|---|
| Object.is() | Compares two values, with special handling for NaN, -0, and +0. | Use when you need strict equality, especially when comparing special values like NaN or zero. |
| === | Standard strict equality check. | Use for typical strict equality checks, but be aware that NaN === NaN is false, and -0 === +0 is true. |
Example:
console.log(NaN === NaN); // false console.log(Object.is(NaN, NaN)); // true console.log(-0 === +0); // true console.log(Object.is(-0, +0)); // false
Similarity:
Both methods convert between objects and key-value pairs, but in opposite directions.
Differences:
| Method | Purpose | When to Use |
|---|---|---|
| Object.entries() | Converts an object into an array of key-value pairs. | Use when you need to iterate or manipulate key-value pairs from an object. |
| Object.fromEntries() | Converts an array of key-value pairs into an object. | Use when you receive data as an array of pairs (e.g., form data) and need to transform it back into an object. |
Example:
const userProfile = { name: "Alice", age: 28 };
const entries = Object.entries(userProfile);
// From key-value pairs to object
const newProfile = Object.fromEntries(entries);
console.log(newProfile); // { name: "Alice", age: 28 }
Similarity:
Both methods retrieve the keys of an object.
Differences:
| Method | Purpose | When to Use |
|---|---|---|
| Object.keys() | Returns only the enumerable (visible) property keys of an object. | Use when you only need the enumerable properties (common for iterating over user objects). |
| Object.getOwnPropertyNames() | Returns both enumerable and non-enumerable property keys. | Use when you need all properties, including non-enumerable ones (e.g., metadata, hidden properties). |
Example:
const user = { name: "Alice" };
Object.defineProperty(user, 'role', { value: 'admin', enumerable: false });
console.log(Object.keys(user)); // ["name"]
console.log(Object.getOwnPropertyNames(user)); // ["name", "role"]
In this enhanced version, we will dive deeper into creating your own methods and properties in JavaScript objects, as well as using prototypes. This will help provide even more flexibility and power in a real-time project scenario.
JavaScript objects allow you to define your own properties and methods. This can be useful when you want to extend the capabilities of an object to perform specific tasks related to your application.
Example Scenario: Adding a Role Check in the User Management System
Imagine you're building a user management system where each user has specific roles, like "admin" or "editor." You want to create a method to check the user's role.
// Create a user object
const user = {
name: 'John Doe',
role: 'admin',
// Define a custom method to check the role
checkRole() {
if (this.role === 'admin') {
return `${this.name} has admin access`;
} else {
return `${this.name} is a regular user`;
}
}
};
console.log(user.checkRole()); // John Doe has admin access
Here, we defined a custom method checkRole within the user object to determine if the user has admin privileges. This can be expanded to check for multiple roles and permissions.
JavaScript prototypes allow you to add properties or methods to all instances of a particular object type. For example, you can add methods to an object prototype, so all objects created with a specific constructor can access that method.
Example Scenario: Extending the User Object with Prototypes
Let’s say you want all users in the system to have access to a method that can toggle their roles between "admin" and "user" without redefining it for every user object.
// Define the constructor function for User
function User(name, role) {
this.name = name;
this.role = role;
}
// Add a method to User prototype to toggle role
User.prototype.toggleRole = function() {
this.role = this.role === 'admin' ? 'user' : 'admin';
};
// Create user instances
const user1 = new User('Alice', 'user');
const user2 = new User('Bob', 'admin');
console.log(user1.role); // user
user1.toggleRole(); // Toggling role
console.log(user1.role); // admin
In this example, toggleRole is added to the User.prototype, meaning any user instance created will inherit this method. This is useful for reusing code and maintaining DRY (Don't Repeat Yourself) principles in a real-time system.
By mastering custom methods, properties, and prototypes, you can create more advanced, maintainable, and efficient systems tailored to the needs of your application, such as the User Management System scenario described.
In JavaScript, __proto__ and prototype are two related but distinct concepts that often confuse developers, especially when working with objects and inheritance. Here's a breakdown:
Example:
const person = {
name: 'Alice',
sayHello() {
console.log(`Hello, my name is ${this.name}`);
}
};
// Creating another object that inherits from 'person'
const student = {
__proto__: person,
grade: 'A'
};
console.log(student.name); // Inherited from 'person' => 'Alice'
student.sayHello(); // Inherited method => 'Hello, my name is Alice'
In this example, student doesn't directly have the name property or the sayHello method, but it can access them because its __proto__ points to person.
Example:
function User(name) {
this.name = name;
}
// Adding a method to the User prototype
User.prototype.sayHello = function() {
console.log(`Hello, my name is ${this.name}`);
};
// Creating new user instances
const user1 = new User('John');
const user2 = new User('Jane');
// Both instances inherit the sayHello method from User.prototype
user1.sayHello(); // 'Hello, my name is John'
user2.sayHello(); // 'Hello, my name is Jane'
In this case:
| Aspect | __proto__ | prototype |
|---|---|---|
| What it refers to | The prototype of an object instance | The prototype of a constructor function |
| Where it’s used | On all objects | On functions (constructor functions) |
| Functionality | Used to access the prototype chain of an object | Used to define methods/properties shared by instances |
| Access | Can be accessed directly (e.g., obj.__proto__) | Used during object creation with new keyword |
// Constructor function
function Animal(name) {
this.name = name;
}
// Adding a method to the prototype of the constructor
Animal.prototype.makeSound = function() {
console.log(`${this.name} makes a sound`);
};
// Creating an instance
const dog = new Animal('Rex');
// dog.__proto__ points to Animal.prototype
console.log(dog.__proto__ === Animal.prototype); // true
// dog can access the method from Animal.prototype
dog.makeSound(); // Rex makes a sound
By understanding the difference between __proto__ and prototype, you can take full advantage of JavaScript's prototypal inheritance system for efficient object creation and method sharing.
以上がJavaScript オブジェクトのマスター: リアルタイム ユーザー管理システムのメソッド、プロパティ、プロトタイプ、および __proto__の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
