了解 JavaScript 中的关键对象方法

JavaScript の Object には、開発者がオブジェクトを簡単に操作できるようにする便利なメソッドが多数組み込まれています。簡単な説明と例を示しながら、最も重要なもののいくつかを見ていきましょう

1. Object.create()
2. Object.assign()
3. Object.keys()
4. Object.values()
5. Object.entries()
6. Object.freeze()
7. Object.seal()
8. Object.preventExtensions()
9. Object.getPrototypeOf()
10. Object.setPrototypeOf()
11. Object.defineProperty()
12. Object.defineProperties()
13. Object.getOwnPropertyDescriptor()
14. Object.getOwnPropertyDescriptors()
15. Object.getOwnPropertyNames()
16. Object.is()
17. Object.isFrozen()
18. Object.isSealed()
19. Object.isExtensible()
20. Object.fromEntries()
21. Object.hasOwnProperty()
22. Object.hasOwn()
23. Object.groupBy() (提案された機能、完全には利用できない可能性があります)

Object.create()
Object.create() は、指定されたプロトタイプ オブジェクトとオプションのプロパティを持つ新しいオブジェクトを作成するために使用される JavaScript のメソッドです。これにより、オブジェクト リテラルやコンストラクターを使用する場合と比較して、オブジェクトのプロトタイプとプロパティをより詳細に制御できます。

const personPrototype = {
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const john = Object.create(personPrototype);
john.name = "John";
john.greet();  // Output: Hello, my name is John

Object.assign()
Object.assign() は、列挙可能なすべての独自プロパティの値を 1 つ以上のソース オブジェクトからターゲット オブジェクトにコピーするために使用される組み込み JavaScript メソッドです。浅いコピーを実行し、変更されたターゲット オブジェクトを返します。

const target = { a: 1 };
const source = { b: 2, c: 3 };
const result = Object.assign(target, source);
console.log(result);  // Output: { a: 1, b: 2, c: 3 }
console.log(target);  // Output: { a: 1, b: 2, c: 3 } (target is also modified)

Object.keys()
オブジェクト自身の列挙可能なプロパティ名 (キー) の配列を返します

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

Object.values()
オブジェクト自身の列挙可能なプロパティ値の配列を返します

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

Object.entries()
オブジェクト自身の列挙可能なプロパティ [キー、値] ペアの配列を返します

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

Object.freeze()
オブジェクトをフリーズし、新しいプロパティの追加や既存のプロパティの変更や削除を防ぎます

const obj = { a: 1 };
Object.freeze(obj);
obj.a = 2;  // No effect, because the object is frozen
console.log(obj.a);  // Output: 1

Object.seal()
オブジェクトをシールして、新しいプロパティの追加を防ぎますが、既存のプロパティの変更は許可します。

const obj = { a: 1 };
Object.seal(obj);
obj.a = 2;  // Allowed
delete obj.a;  // Not allowed
console.log(obj.a);  // Output: 2

Object.preventExtensions()
新しいプロパティがオブジェクトに追加されるのを防ぎますが、既存のプロパティの変更と削除は許可します

const obj = { a: 1 };
Object.preventExtensions(obj);
obj.b = 2;  // Not allowed
console.log(obj.b);  // Output: undefined

Object.getPrototypeOf()
指定されたオブジェクトのプロトタイプ (つまり、内部 [[Prototype]]) を返します

const obj = {};
const proto = Object.getPrototypeOf(obj);
console.log(proto);  // Output: {} (the default Object prototype)

Object.setPrototypeOf()
指定されたオブジェクトのプロトタイプを設定します。

const proto = { greet() { console.log('Hello!'); } };
const obj = {};
Object.setPrototypeOf(obj, proto);
obj.greet();  // Output: 'Hello!'

Object.defineProperty()
プロパティ記述子の追加オプション (書き込み可能、​​構成可能など) を使用して、オブジェクトの新しいプロパティを定義するか、既存のプロパティを変更します。

const obj = {};
Object.defineProperty(obj, 'a', {
  value: 42,
  writable: false,  // Cannot modify the value
});
obj.a = 100;  // No effect because writable is false
console.log(obj.a);  // Output: 42

Object.defineProperties()
プロパティ記述子を使用してオブジェクトに複数のプロパティを定義します。

const obj = {};
Object.defineProperties(obj, {
  a: { value: 42, writable: false },
  b: { value: 100, writable: true }
});
console.log(obj.a);  // Output: 42
console.log(obj.b);  // Output: 100

Object.getOwnPropertyDescriptor()
オブジェクトのプロパティの記述子を返します。

const obj = { a: 1 };
const descriptor = Object.getOwnPropertyDescriptor(obj, 'a');
console.log(descriptor);  
// Output: { value: 1, writable: true, enumerable: true, configurable: true }

Object.getOwnPropertyDescriptors()
オブジェクト自身のプロパティのすべてのプロパティ記述子を含むオブジェクトを返します

const obj = { a: 1 };
const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);
// Output: { a: { value: 1, writable: true, enumerable: true, configurable: true } }

Object.getOwnPropertyNames()
オブジェクト上で直接見つかったすべてのプロパティ (列挙不可能なものも含む) の配列を返します。

const obj = { a: 1 };
Object.defineProperty(obj, 'b', { value: 2, enumerable: false });
console.log(Object.getOwnPropertyNames(obj));  // Output: ['a', 'b']

Object.is()
2 つの値が同じかどうかを比較します (=== などですが、NaN などの特殊なケースを処理します)

console.log(Object.is(NaN, NaN));  // Output: true
console.log(Object.is(+0, -0));    // Output: false

Object.isFrozen()
オブジェクトがフリーズしているかどうかを確認します

const obj = Object.freeze({ a: 1 });
console.log(Object.isFrozen(obj));  // Output: true

Object.isSealed()
オブジェクトが封印されているかどうかを確認します。

const obj = Object.seal({ a: 1 });
console.log(Object.isSealed(obj));  // Output: true

Object.isExtensible()
新しいプロパティをオブジェクトに追加できるかどうかを確認します。

const obj = { a: 1 };
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj));  // Output: false

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

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

Object.hasOwnProperty()
オブジェクトが指定されたプロパティを独自の (継承されていない) ものとして持っているかどうかを確認します

const obj = { a: 1 };
console.log(obj.hasOwnProperty('a'));  // Output: true

Object.hasOwn()
Object.hasOwn() は、Object.hasOwnProperty() の代替として ES2022 で導入された新しいメソッドです。プロトタイプ チェーンを検索せずに、オブジェクトに指定されたキーを持つ直接 (独自の) プロパティがあるかどうかをチェックします。

const obj = {
  name: 'Alice',
  age: 25
};

console.log(Object.hasOwn(obj, 'name'));  // true
console.log(Object.hasOwn(obj, 'gender'));  // false

Object.groupBy
Object.groupBy is a relatively new feature proposed for JavaScript in ECMAScript 2024 that allows you to group objects based on a common criterion. It is not yet widely available across all environments, so it may not work in many browsers or JavaScript engines until fully implemented.

const array = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 25 },
  { name: 'David', age: 30 },
];

// Group objects by age
const groupedByAge = Object.groupBy(array, item => item.age);

console.log(groupedByAge);

/*
Expected Output:
{
  25: [
    { name: 'Alice', age: 25 },
    { name: 'Charlie', age: 25 }
  ],
  30: [
    { name: 'Bob', age: 30 },
    { name: 'David', age: 30 }
  ]
}
*/

以上是了解 JavaScript 中的关键对象方法的详细内容。更多信息请关注PHP中文网其他相关文章！