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

Linda Hamilton
リリース: 2024-11-12 01:32:03
オリジナル
421 人が閲覧しました

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 サイトの他の関連記事を参照してください。

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