JavaScript オブジェクトをマスターするためのガイド

オブジェクトは JavaScript の基本的な部分であり、データの保存と管理のバックボーンとして機能します。オブジェクトはプロパティのコレクションであり、各プロパティはキー (または名前) と値の関連付けです。オブジェクトの作成、操作、利用方法を理解することは、JavaScript 開発者にとって非常に重要です。この記事では、JavaScript のさまざまなオブジェクト関数について詳しく説明し、習得に役立つ詳細な説明、例、コメントを提供します。

JavaScript のオブジェクトの概要

JavaScript では、オブジェクトはデータのコレクションとより複雑なエンティティを保存するために使用されます。これらは、オブジェクト リテラルまたはオブジェクト コンストラクターを使用して作成されます。

// Using object literals
let person = {
    name: "John",
    age: 30,
    city: "New York"
};

// Using the Object constructor
let person = new Object();
person.name = "John";
person.age = 30;
person.city = "New York";

オブジェクトのプロパティ

• Object.prototype: すべての JavaScript オブジェクトは、そのプロトタイプからプロパティとメソッドを継承します。

let obj = {};
console.log(obj.__proto__ === Object.prototype); // Output: true

オブジェクトメソッド

1. Object.assign()

すべての列挙可能な独自のプロパティの値を 1 つ以上のソース オブジェクトからターゲット オブジェクトにコピーします。ターゲットオブジェクトを返します。

let target = {a: 1};
let source = {b: 2, c: 3};
Object.assign(target, source);
console.log(target); // Output: {a: 1, b: 2, c: 3}

2. Object.create()

指定されたプロトタイプ オブジェクトとプロパティを使用して新しいオブジェクトを作成します。

let person = {
    isHuman: false,
    printIntroduction: function() {
        console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
    }
};

let me = Object.create(person);
me.name = "Matthew";
me.isHuman = true;
me.printIntroduction(); // Output: My name is Matthew. Am I human? true

3. Object.defineProperties()

オブジェクト上で新しいプロパティを定義するか、既存のプロパティを直接変更して、オブジェクトを返します。

let obj = {};
Object.defineProperties(obj, {
    property1: {
        value: true,
        writable: true
    },
    property2: {
        value: "Hello",
        writable: false
    }
});
console.log(obj); // Output: { property1: true, property2: 'Hello' }

4. Object.defineProperty()

オブジェクト上で新しいプロパティを直接定義するか、既存のプロパティを変更してオブジェクトを返します。

let obj = {};
Object.defineProperty(obj, 'property1', {
    value: 42,
    writable: false
});
console.log(obj.property1); // Output: 42
obj.property1 = 77; // No error thrown, but the property is not writable
console.log(obj.property1); // Output: 42

5. Object.entries()

指定されたオブジェクト独自の列挙可能な文字列キー付きプロパティ [キー、値] ペアの配列を返します。

let obj = {a: 1, b: 2, c: 3};
console.log(Object.entries(obj)); // Output: [['a', 1], ['b', 2], ['c', 3]]

6. Object.freeze()

オブジェクトをフリーズします。凍結されたオブジェクトは変更できなくなります。オブジェクトをフリーズすると、オブジェクトに新しいプロパティが追加されたり、既存のプロパティが削除されたり、既存のプロパティの値が変更されたりすることがなくなります。

let obj = {prop: 42};
Object.freeze(obj);
obj.prop = 33; // Fails silently in non-strict mode
console.log(obj.prop); // Output: 42

7. Object.fromEntries()

キーと値のペアのリストをオブジェクトに変換します。

let entries = new Map([['foo', 'bar'], ['baz', 42]]);
let obj = Object.fromEntries(entries);
console.log(obj); // Output: { foo: 'bar', baz: 42 }

8. Object.getOwnPropertyDescriptor()

指定されたオブジェクトの独自のプロパティ (つまり、オブジェクトのプロトタイプ チェーンではなく、オブジェクト上に直接存在するプロパティ) のプロパティ記述子を返します。

let obj = {property1: 42};
let descriptor = Object.getOwnPropertyDescriptor(obj, 'property1');
console.log(descriptor);
// Output: { value: 42, writable: true, enumerable: true, configurable: true }

9. Object.getOwnPropertyDescriptors()

オブジェクトのすべての独自のプロパティ記述子を含むオブジェクトを返します。

let obj = {property1: 42};
let descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);
/* Output:
{
  property1: {
    value: 42,
    writable: true,
    enumerable: true,
    configurable: true
  }
}
*/

10. Object.getOwnPropertyNames()

指定されたオブジェクトで直接見つかったすべてのプロパティ (Symbol を使用するものを除く列挙不可能なプロパティを含む) の配列を返します。

let obj = {a: 1, b: 2, c: 3};
let props = Object.getOwnPropertyNames(obj);
console.log(props); // Output: ['a', 'b', 'c']

11. Object.getOwnPropertySymbols()

指定されたオブジェクトで直接見つかったすべてのシンボル プロパティの配列を返します。

let obj = {};
let sym = Symbol('foo');
obj[sym] = 'bar';
let symbols = Object.getOwnPropertySymbols(obj);
console.log(symbols); // Output: [Symbol(foo)]

12. Object.getPrototypeOf()

指定されたオブジェクトのプロトタイプ (つまり、内部 [[Prototype]] プロパティの値) を返します。

let proto = {};
let obj = Object.create(proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true

13. オブジェクト.is()

2 つの値が同じ値であるかどうかを判断します。

console.log(Object.is('foo', 'foo')); // Output: true
console.log(Object.is({}, {})); // Output: false

14. Object.isExtensible()

オブジェクトの拡張が許可されるかどうかを決定します。

let obj = {};
console.log(Object.isExtensible(obj)); // Output: true
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj)); // Output: false

15. Object.isFrozen()

オブジェクトがフリーズされているかどうかを判断します。

let obj = {};
console.log(Object.isFrozen(obj)); // Output: false
Object.freeze(obj);
console.log(Object.isFrozen(obj)); // Output: true

16. Object.isSealed()

オブジェクトがシールされているかどうかを判断します。

let obj = {};
console.log(Object.isSealed(obj)); // Output: false
Object.seal(obj);
console.log(Object.isSealed(obj)); // Output: true

17. Object.keys()

通常のループと同じ順序で反復され、指定されたオブジェクト独自の列挙可能なプロパティ名の配列を返します。

let obj = {a: 1, b: 2, c: 3};
console.log(Object.keys(obj)); // Output: ['a', 'b', 'c']

18. Object.preventExtensions()

オブジェクトの拡張を防ぎます。

let obj = {};
Object.preventExtensions(obj);
obj.newProp = 'test'; // Throws an error in strict mode
console.log(obj.newProp); // Output: undefined

19. Object.seal()

オブジェクトをシールして、新しいプロパティがオブジェクトに追加されるのを防ぎ、既存のプロパティをすべて構成不可としてマークします。現在のプロパティの値は、書き込み可能である限り変更できます。

let obj = {property1: 42};
Object.seal(obj);
obj.property1 = 33;
delete obj.property1; // Throws an error in strict mode
console.log(obj.property1); // Output: 33

20. Object.setPrototypeOf()

指定されたオブジェクトのプロトタイプ (つまり、内部 [[Prototype]] プロパティ) を別のオブジェクトまたは null に設定します。

let proto = {};
let obj = {};
Object.setPrototypeOf(obj, proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true

21. Object.values()

指定されたオブジェクト独自の列挙可能なプロパティ値の配列を、for...in ループで提供される順序と同じ順序で返します。

let obj = {a: 1, b: 2, c: 3};
console.log(Object.values(obj)); // Output: [1, 2, 3]

実践例

例 1: オブジェクトのクローン作成

Object.assign() を使用してオブジェクトのクローンを作成します。

let obj = {a: 1, b: 2};
let clone = Object.assign({}, obj);
console.log(clone); // Output: {a: 1, b: 2}

例 2: オブジェクトの結合

Object.assign() を使用してオブジェクトをマージします。

let obj1 = {a: 1, b: 2};
let obj2 = {b: 3, c: 4};
let merged = Object.assign({},

 obj1, obj2);
console.log(merged); // Output: {a: 1, b: 3, c: 4}

Example 3: Creating an Object with a Specified Prototype

Using Object.create() to create an object with a specified prototype.

let proto = {greet: function() { console.log("Hello!"); }};
let obj = Object.create(proto);
obj.greet(); // Output: Hello!

Example 4: Defining Immutable Properties

Using Object.defineProperty() to define immutable properties.

let obj = {};
Object.defineProperty(obj, 'immutableProp', {
    value: 42,
    writable: false
});
console.log(obj.immutableProp); // Output: 42
obj.immutableProp = 77; // Throws an error in strict mode
console.log(obj.immutableProp); // Output: 42

Example 5: Converting an Object to an Array

Using Object.entries() to convert an object to an array of key-value pairs.

let obj = {a: 1, b: 2, c: 3};
let entries = Object.entries(obj);
console.log(entries); // Output: [['a', 1], ['b', 2], ['c', 3]]

Conclusion

Objects are a core component of JavaScript, offering a flexible way to manage and manipulate data. By mastering object functions, you can perform complex operations with ease and write more efficient and maintainable code. This comprehensive guide has covered the most important object functions in JavaScript, complete with detailed examples and explanations. Practice using these functions and experiment with different use cases to deepen your understanding and enhance your coding skills.

以上がJavaScript オブジェクトをマスターするためのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。