JavaScript の主要なオブジェクトメソッドを理解する-jsチュートリアル-php.cn

Understanding Key Object Methods in JavaScript

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

Object.create()
Object.assign()
Object.keys()
Object.values()
Object.entries()
Object.freeze()
Object.seal()
Object.preventExtensions()
Object.getPrototypeOf()
Object.setPrototypeOf()
Object.defineProperty()
Object.defineProperties()
Object.getOwnPropertyDescriptor()
Object.getOwnPropertyDescriptors()
Object.getOwnPropertyNames()
Object.is()
Object.isFrozen()
Object.isSealed()
Object.isExtensible()
Object.fromEntries()
Object.hasOwnProperty()
Object.hasOwn()
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 中国語 Web サイトの他の関連記事を参照してください。