JavaScript の主要なオブジェクト メソッドを理解する

Mary-Kate Olsen
リリース: 2024-10-18 12:53:04
オリジナル
516 人が閲覧しました

Understanding Key Object Methods in 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 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!