オブジェクトは 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}

例 3: 指定されたプロトタイプを使用したオブジェクトの作成

Object.create() を使用して、指定されたプロトタイプを持つオブジェクトを作成します。

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

例 4: 不変プロパティの定義

Object.defineProperty() を使用して不変プロパティを定義します。

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

例 5: オブジェクトを配列に変換する

Object.entries() を使用してオブジェクトをキーと値のペアの配列に変換します。

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

結論

オブジェクトは JavaScript の中核コンポーネントであり、データを管理および操作するための柔軟な方法を提供します。オブジェクト関数をマスターすると、複雑な操作を簡単に実行でき、より効率的で保守しやすいコードを作成できます。この包括的なガイドでは、JavaScript の最も重要なオブジェクト関数を取り上げ、詳細な例と説明を備えています。これらの関数を実際に使用し、さまざまなユースケースを試して理解を深め、コーディング スキルを向上させてください。