ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript オブジェクトのマスター: 比較、操作、制御テクニック

JavaScript オブジェクトのマスター: 比較、操作、制御テクニック

Linda Hamilton
Linda Hamiltonオリジナル
2024-11-12 01:32:03464ブラウズ

Mastering JavaScript Objects: Comparison, Manipulation, and Control Techniques

JavaScript オブジェクトは非常に強力で多用途です。これらにより、複雑なデータを保存できるようになり、データ操作を容易にする幅広い組み込みメソッドが付属します。最も便利なオブジェクト メソッドのいくつかと、それらのメソッドの相互の比較を見てみましょう。


1. オブジェクトの比較

JavaScript は値ではなく参照によって比較するため、=== を使用してオブジェクトを直接比較することはできません。例:

const obj1 = { a: 1 };
const obj2 = { a: 1 };
console.log(obj1 === obj2); // false

内容を比較するには、詳細比較関数または Lodash などのライブラリを使用します。


2. オブジェクト記述子

プロパティ記述子は、オブジェクトのプロパティに関するメタデータを提供します。例:

: プロパティの値
書き込み可能: 値は変更できますか?
列挙可能: ループ内で表示されますか?
構成可能: 変更できますか?

const obj = { name: "Alice" };
const descriptor = Object.getOwnPropertyDescriptor(obj, "name");
console.log(descriptor);

3. キー、値、およびエントリの抽出

Object.keys(): オブジェクトのキーの配列を返します。
Object.values(): 値の配列を返します。
Object.entries(): キーと値のペアの配列を返します。

const person = { name: "Alice", age: 25 };
console.log(Object.keys(person));   // ["name", "age"]
console.log(Object.values(person)); // ["Alice", 25]
console.log(Object.entries(person)); // [["name", "Alice"], ["age", 25]]

4. オブジェクトのマージとクローン作成

Object.assign() は、あるオブジェクトから別のオブジェクトにプロパティをコピーします。浅いコピーのみを実行するため、ネストされたオブジェクトを深く複製することはありません。

const target = { a: 1 };
const source = { b: 2 };
Object.assign(target, source);
console.log(target); // { a: 1, b: 2 }

5. Object.create()

このメソッドは、指定されたプロトタイプを使用して新しいオブジェクトを作成します。継承に便利:

const personPrototype = {
  greet() { return `Hello, ${this.name}`; }
};
const person = Object.create(personPrototype);
person.name = "Alice";
console.log(person.greet()); // "Hello, Alice"

6. Object.is()

このメソッドは、0 と -0 を区別したり、NaN を正しく比較したりして、2 つの値が同じかどうかをチェックします。

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

7. Object.getOwnPropertyDescriptors()

すべてのプロパティの記述子を取得します。デフォルト以外の記述子を含むディープコピーに役立ちます:

const obj = { name: "Alice" };
console.log(Object.getOwnPropertyDescriptors(obj));

8. Object.getOwnPropertyNames()

列挙不可能なものを含むすべてのプロパティ名を返します。

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

9. Object.seal()

オブジェクトをシールし、既存のプロパティへの変更は許可しますが、追加や削除は許可しません。

const obj = { name: "Alice" };
Object.seal(obj);
obj.age = 30; // Fails
console.log(obj); // { name: "Alice" }

10. Object.freeze()

オブジェクトをフリーズし、変更を防ぎます。

const obj = { name: "Alice" };
Object.freeze(obj);
obj.name = "Bob"; // Fails
console.log(obj); // { name: "Alice" }

11. Object.assign()

これは、複数のソース オブジェクトからターゲット オブジェクトにプロパティをコピーするために使用されます。

const obj1 = { a: 1 };
const obj2 = { a: 1 };
console.log(obj1 === obj2); // false

結論

JavaScript は、オブジェクトを操作するためのメソッドを多数提供しており、それぞれが特定の目的を果たします。これらのメソッドをいつどのように使用するかを理解することで、オブジェクトの動作を制御したり、プロパティを変更したり、オブジェクトを変更からロックしたりすることもできます。

以上がJavaScript オブジェクトのマスター: 比較、操作、制御テクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。