JavaScript オブジェクトをマスターするためのガイド-jsチュートリアル-php.cn

A Guide to Master JavaScript-Objects

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

ログイン後にコピー

Example 3: Creating an Object with a Specified Prototype

Using Object.create() to create an object with a specified prototype.

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

ログイン後にコピー

Example 4: Defining Immutable Properties

Using Object.defineProperty() to define immutable properties.

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

ログイン後にコピー

Example 5: Converting an Object to an Array

Using Object.entries() to convert an object to an array of key-value pairs.

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

ログイン後にコピー

Conclusion

Objects are a core component of JavaScript, offering a flexible way to manage and manipulate data. By mastering object functions, you can perform complex operations with ease and write more efficient and maintainable code. This comprehensive guide has covered the most important object functions in JavaScript, complete with detailed examples and explanations. Practice using these functions and experiment with different use cases to deepen your understanding and enhance your coding skills.

以上がJavaScript オブジェクトをマスターするためのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。