[JavaScript]Object(オブジェクト)にプロパティを追加するには?

JavaScript

どうも、ちょげ(@chogetarou)です。

Object(オブジェクト)にプロパティを追加する方法を紹介します。

スポンサーリンク

方法

インターフェース, インターネット, プログラム, ブラウザ, Www

Object(オブジェクト)にプロパティを追加する方法は、3つあります。

[]

ひとつめは、[]を使う方法です。

まず、Objectの追加するプロパティに[]でアクセスします。

そして、Objectのアクセした新しいプロパティに値を代入します。

//prop=追加するプロパティ、value=プロパティの値
obj[prop] = value

上記のコードは、[]内に指定したプロパティをObjectに追加します。

使用例

const nums = { 
    "one": 1, 
    "two": 2,
    "three": 3,
}

nums["four"] = 4
nums["five"] = 5

console.log(nums)
{ one: 1, two: 2, three: 3, four: 4, five: 5 }

. (ドット)

ふたつめは、「. (ドット)」を使う方法です。

まず、Objectの追加するオブジェクトに「. (ドット)」でアクセスします。

そして、アクセスしたプロパティに値を代入します。

//prop=追加するプロパティ、value=値
obj.prop = value

上記のコードは、プロパティをObjectに追加します。

使用例

const nums = { 
    "one": 1, 
    "two": 2,
    "three": 3,
}

nums.four = 4
nums.five = 5

console.log(nums)
{ one: 1, two: 2, three: 3, four: 4, five: 5 }

assign

みっつめは、assign()を使う方法です。

まず、Object.assign()を呼び出します。

そして、Object.assign()の第1引数に対象のオブジェクト、第2引数に追加するプロパティをまとめたオブジェクトを指定します。

//objに「prop1: value1」、「prop2: value2」・・・を追加
Object.assign(obj, {prop1: value1, prop2: value2, ・・・})

上記のassign()は、第1引数のObjectに第2引数のObjectの全てのプロパティを追加します。

使用例

const nums = { 
    "one": 1, 
    "two": 2,
    "three": 3,
}

Object.assign(nums, {"four": 4, "five": 5, "six": 6})


console.log(nums)
出力:
{ one: 1, two: 2, three: 3, four: 4, five: 5, six: 6 }
スポンサーリンク

まとめ

Object(オブジェクト)にプロパティを追加する方法は、次の3つです。

  • []を使う方法
    obj[key] = value
  • 「. (ドット)」を使う方法
    obj.key = value
  • assign()を使う方法
    Object.assign(obj, {key1: value1, key2: value2, ・・・})

コメント

タイトルとURLをコピーしました