Home > Web Front-end > JS Tutorial > Understanding Key Object Methods in JavaScript

Understanding Key Object Methods in JavaScript

Mary-Kate Olsen
Release: 2024-10-18 12:53:04
Original
587 people have browsed it

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
Copy after login

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)
Copy after login

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

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

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

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

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

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

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
Copy after login

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

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

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

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

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

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

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

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

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
Copy after login

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
Copy after login

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
Copy after login

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 }
  ]
}
*/

Copy after login

The above is the detailed content of Understanding Key Object Methods in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template