JavaScript でオブジェクトをエレガントに扱う 6 つの方法

序文

他のプログラミング言語と同様に、JavaScript には数値、文字列、配列、オブジェクトなどの独自のデータ型があります。オブジェクトは JavaScript で非常に重要なデータ型です。オブジェクトには、日常のプロジェクト開発でオブジェクトを簡単に処理するために使用できる便利なメソッドが多数あります。

この記事では、プロジェクトで活用できる6つのメソッドを紹介します。この機会に、その使い方について理解を深めてください。

1. オブジェクト.freeze()

Object.freeze()メソッドは、オブジェクト内のデータが変更されないようにします。つまり、オブジェクトを凍結して、オブジェクトのプロパティを追加、更新、または削除できないようにします。

定数著者 = {
    名前: 「クインティオン」、
    都市:「深セン」、
    年齢: 18歳
    検証: true、
};

Object.freeze(著者);

author.name = "QuintionTang";
author.province = "広東省";
author.age を削除します。
console.log(author); // { name: 'Quintion', city: 'Shenzhen', age: 18, validation: true }

上記のコードに示すように、属性nameが更新され、属性provinceが追加され、属性ageが削除されますが、最終的なオブジェクトには変更はありません。

2. オブジェクト.seal()

Object.seal()メソッドはObject.freeze()と多少似ています。オブジェクトに新しいプロパティを追加したり、プロパティを削除したりすることはできませんが、既存のプロパティを変更したり更新したりすることはできます。

定数著者 = {
    名前: 「クインティオン」、
    都市:「深セン」、
    年齢: 18歳
    検証: true、
};

Object.seal(著者);

author.name = "QuintionTang";
author.province = "広東省";
author.age を削除します。
console.log(author); // { name: 'QuintionTang', city: 'Shenzhen', age: 18, validation: true }

上記のコードからわかるように、新しい属性の追加や属性の削除は無効であり、属性name更新のみが有効です。

3. オブジェクト.keys()

Object.keys()メソッドは、パラメータ オブジェクトのすべてのキーの名前を含む配列を返します。配列内の属性名の順序は、オブジェクトを通常どおり走査したときに返される順序と一致します。

次のコードを見てください。

定数著者 = {
    名前: 「クインティオン」、
    都市:「深セン」、
    年齢: 18歳
    検証: true、
};

console.log(Object.keys(author)); // [ 'name', 'city', 'age', 'validation' ]

上記のコードで出力された結果は、出力としてキーを含む配列であることがわかります。出力結果は、配列メソッドを使用して処理または反復処理できます。

console.log(Object.keys(author).length); // 4

4. オブジェクト.値()

Object.values()はObject.keys()に似ていますが、 Object.values()オブジェクト内のすべての属性の値を取得し、値の配列を返します。

定数著者 = {
    名前: 「クインティオン」、
    都市:「深セン」、
    年齢: 18歳
    検証: true、
};

console.log(Object.values(author)); // [ 'Quintion', 'Shenzhen', 18, true ]

5. オブジェクトの作成()

Object.create()既存のオブジェクトのプロトタイプ__proto__に基づいて新しいオブジェクトを作成します。次のコードを見てみましょう。

定数著者 = {
    firstName: "クインティオン",
    姓: "Tang",
    フルネーム（） {
        `${this.firstName} ${this.lastName}` を返します。
    },
};

const newAuthor = Object.create(author);
コンソールログ(新しい著者); // {}
newAuthor.firstName = "ロンブ";
newAuthor.lastName = "ジョイ";
console.log(newAuthor.fullName()); // ロンブ・ジョイ

上記のコードでは、 object. create()使用して、 authorオブジェクトのプロトタイプを持つ新しいオブジェクトnewAuthorを作成します。このように、新しいオブジェクトnewAuthor authorオブジェクトの属性値を変更するのと同じように、対応する属性値を変更できます。これは継承に少し似ていませんか? はい、クラスの継承はObject.create使用することで実現できます。

6. オブジェクト.entries()

Object.entries() を使用すると、オブジェクトのキーと値を取得でき、 [鍵, 值]のように、各次元に各キーと値が含まれる多次元配列を返します。

定数著者 = {
    firstName: "クインティオン",
    姓: "Tang",
    フルネーム（） {
        `${this.firstName} ${this.lastName}` を返します。
    },
};

console.log(Object.entries(author));

出力は次のようになります。

[
  [ 'firstName', 'Quintion' ],
  [ '姓', '唐' ],
  [ 'fullName', [関数: fullName] ]
]

要約する

この記事では、オブジェクトの一般的な 6 つのメソッドを簡単に紹介し、対応するサンプル コードを示します。実際のオブジェクトのコーディングと処理のプロセスでは、上記のメソッドを使用すると、コードをよりエレガントにすることができます。

これで、JavaScript でオブジェクトをエレガントに処理する 6 つの方法についての記事は終了です。JavaScript によるオブジェクト処理に関するその他のコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。