JavaScript オブジェクトを作成する 3 つの方法

1. オブジェクトリテラル

let obj = {} // 空のオブジェクト let obj2 = {a:1, b:2}

let obj3 = {" hel": "wold"} // プロパティ名にスペースが含まれている場合は、文字列リテラルをプロパティ名として使用できます。

2. newキーワードはオブジェクトを作成する

新しいオブジェクトを作成するには、 newキーワードに続いてコンストラクタを使用します。

let o = new Object(); // 組み込みコンストラクター let m = new Math();

a = new Array() とします。

d = new Date() とします。

function Person(){ //カスタムコンストラクター}
person = 新しいPerson() を作成します。

3. Object.create() を使用してオブジェクトを作成する

o = Object.create({x:1, y:2}); とします。
コンソール.log(o.x+oy) //3

新しいオブジェクト o は{x:1, y:2}を継承します。プロパティ x と y は継承プロパティと呼ばれます。渡されたパラメータがnullの場合、このオブジェクトはどのオブジェクトも継承しません。継承されたオブジェクトは「プロトタイプ」とも呼ばれます。

オブジェクトを作成します(null)

4. 拡張演算子を使用します。

ES2018では、既存のオブジェクトプロパティを新しいオブジェクトにコピーするためのスプレッド演算子が追加されました。

foo = {x:1, y:2}とします。
bar = {z:3} とします

zoo = { ...foo, ...bar} とします。

console.log(zoo) // {x:1, y:2, z:3}

注意すべき点がいくつかあります:

拡張演算子はオブジェクト自身のプロパティのみを拡張します。継承されたプロパティは拡張をサポートしません。
拡張オブジェクトと拡張オブジェクトに同じ名前のプロパティがある場合、プロパティの値は後者のオブジェクトによって決まります。

5. Object.assign() メソッドを使用する

assign 、あるオブジェクトのプロパティを別のオブジェクトにコピーできます。Assign assign 2 つ以上のパラメータを受け入れます。最初のパラメータはターゲットオブジェクトで、2 番目以降のパラメータはソースオブジェクトです。この関数は、ソースオブジェクトのプロパティをターゲットオブジェクトにコピーし、ターゲットオブジェクトを返します。

foo = {x:1, y:2}とします。
bar = {z:3} とします

動物園 = {} とします

obj = Object.assign(zoo, foo, bar) とします。

console.log(zoo) // {x:1, y:2, z:3}

console.log(obj===zoo) // 真

さらに、 ES6では2つの新しいオブジェクト機能が追加されました。

6. 省略されたプロパティ

複数の変数名と対応する値で構成されるオブジェクトを作成する場合は、従来のオブジェクトリテラル構文のようにオブジェクトを構築する必要があります。

x = 1、y = 2 とします。
o = {x:x, y:y}とします。

console.log(o) // {x:1, y:2}

ES6以降では、セミコロンとプロパティ名を省略してプロパティを直接省略することができます。

o2 = {x, y}とする

console.log(o2) // {x:1, y:2}

7. 省略法

オブジェクト内でメソッドを定義するときは、通常のプロパティを定義するのと同じように、関数式を通じて定義する必要がES6ます。

ポイント = {
    x:1、
    y:2,

    エリア: 関数(){
        this.x*this.y を返す
    }
}

コンソール.log(ポイント.エリア()) //2

ES6以降では、コロンとfunctionキーワードを省略して、オブジェクトメソッドを簡単に定義できます。

point2={とします
    x:1、
    y:2,

    エリア（）{
        this.x*this.y を返す
    }
}

コンソール.log(point2.area()) //2

これで、JavaScript オブジェクトを作成する 3 つの方法についての記事は終了です。JavaScript オブジェクトの作成方法についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: