JavaScript オブジェクトにキーと値のペアを追加するにはどうすればよいですか?

Question

私のオブジェクトリテラルは次のとおりです。

var obj = {key1: value1, key2: value2};

どうすれば追加できますか {key3: value3} オブジェクトに?

Answer 1

オブジェクトに新しいのプロパティをを追加するには2つの方法があります：

var obj = {
    key1: value1,
    key2: value2
};

ドット表記法を使用して

obj.key3 = "value3";

角括弧表記を使用して

obj["key3"] = "value3";

あなたはプロパティの名前を知っているとき最初のフォームが使用されています。プロパティの名前が動的に決定されたときに、第2の形態が使用されます。この例のように：

var getProperty = function (propertyName) {
    return obj[propertyName];
};

getProperty("key1");
getProperty("key2");
getProperty("key3");

<時間>

A の本当ののJavaScriptの配列は、いずれかを使用して構築することができます

配列リテラル表記

var arr = [];

Arrayコンストラクタ表記

var arr = new Array();

Answer 2

2017 年の答え: Object.assign()

Object.assign(dest, src1, src2, ...) オブジェクトを結合します。

上書きします dest (多数の) ソース オブジェクトのプロパティと値を使用して、次の値を返します。 dest.

の Object.assign() メソッドは、列挙可能なすべての独自プロパティの値を 1 つ以上のソース オブジェクトからターゲット オブジェクトにコピーするために使用されます。ターゲットオブジェクトを返します。

ライブの例

var obj = {key1: "value1", key2: "value2"};
Object.assign(obj, {key3: "value3"});

document.body.innerHTML = JSON.stringify(obj);

2018 年の答え:オブジェクトスプレッド演算子 {...}

obj = {...obj, ...pair};

から MDN:

これは、提供されたオブジェクトから新しいオブジェクトに独自の列挙可能なプロパティをコピーします。

浅いクローン作成 (プロトタイプを除く) またはオブジェクトのマージが、より短い構文を使用して可能になりました。 Object.assign().

ご了承ください Object.assign() トリガー セッター 一方、スプレッド構文ではそうではありません。

ライブの例

現在の Chrome と現在の Firefox で動作します。現在のEdgeでは動作しないと言われています。

var obj = {key1: "value1", key2: "value2"};
var pair = {key3: "value3"};
obj = {...obj, ...pair};

document.body.innerHTML = JSON.stringify(obj);

2019年の答え

オブジェクト代入演算子 +=:

obj += {key3: "value3"};

おっと...夢中になってしまいました。未来からの情報の密輸は違法です。きちんと隠蔽されています！

Answer 3

だんだん好きになってきました ローダッシュ / アンダースコア 大規模なプロジェクトを作成するとき。

追加方法 obj['key'] または obj.key どれも確かな純粋な JavaScript の答えです。ただし、LoDash ライブラリと Underscore ライブラリはどちらも、一般にオブジェクトと配列を操作する場合に便利な追加関数を多数提供します。

.push() 配列用です, 、 のためではない オブジェクト.

探しているものに応じて、利用すると便利な特定の関数が 2 つあり、次のような機能を提供できます。 arr.push(). 。詳細については、ドキュメントを参照してください。そこには素晴らしい例がいくつかあります。

_。マージ (ロダッシュのみ)

2 番目のオブジェクトは、基本オブジェクトを上書きまたは追加します。undefined 値はコピーされません。

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
_.merge(obj, obj2);
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3"} 

_.extend / _.assign

2 番目のオブジェクトは、基本オブジェクトを上書きまたは追加します。undefined コピーされます。

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
_.extend(obj, obj2);
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3", key4: undefined}

_.デフォルト

2 番目のオブジェクトには、存在しない場合に基本オブジェクトに追加されるデフォルトが含まれています。undefined キーがすでに存在する場合、値はコピーされます。

var obj = {key3: "value3", key5: "value5"};
var obj2 = {key1: "value1", key2:"value2", key3: "valueDefault", key4: "valueDefault", key5: undefined};
_.defaults(obj, obj2);
console.log(obj);
// → {key3: "value3", key5: "value5", key1: "value1", key2: "value2", key4: "valueDefault"}

$.extend

さらに、jQuery.extend についても言及する価値があるかもしれません。これは _.merge と同様に機能し、すでに jQuery を使用している場合にはより良いオプションになる可能性があります。

2 番目のオブジェクトは、基本オブジェクトを上書きまたは追加します。undefined 値はコピーされません。

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
$.extend(obj, obj2); 
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3"}

Object.assign()

ES6/ES2015 Object.assign について言及する価値があるかもしれません。これは _.merge と同様に機能し、すでに次のような ES6/ES2015 ポリフィルを使用している場合には最良のオプションになる可能性があります。 バベル あなたがしたい場合は、 自分でポリフィルを充填する.

2 番目のオブジェクトは、基本オブジェクトを上書きまたは追加します。undefined コピーされます。

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
Object.assign(obj, obj2); 
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3", key4: undefined}

Answer 4

あなたは（あなたが使用したいacutalキーを提供KEY3ている）これらのいずれかを使用することができます。

arr[ 'key3' ] = value3;

または

arr.key3 = value3;

KEY3が変数である場合は、あなたが行う必要があります：

var key3 = 'a_key';
var value3 = 3;
arr[ key3 ] = value3;

この後、arr.a_keyを要求することはvalue3の値は、リテラル3を返します。

Answer 5

arr.key3 = value3;

あなたのARRが実際の配列ではありませんので、

...それは、プロトタイプオブジェクトです。実際の配列は以下のようになります：

var arr = [{key1: value1}, {key2: value2}];

が、それはまだ右ではありません。それは実際にする必要があります：

var arr = [{key: key1, value: value1}, {key: key2, value: value2}];

Answer 6

var employees = []; 
employees.push({id:100,name:'Yashwant',age:30});
employees.push({id:200,name:'Mahesh',age:35});

Answer 7

これについてはすでに受け入れられた答えがあることは知っていますが、私のアイデアをどこかに文書化しておこうと思いました。それが最善の解決策かどうかはわかりませんが、このアイデアに自由に穴を開けてください...しかし、私は数分前にこれをまとめたばかりです:

Object.prototype.push = function( key, value ){
   this[ key ] = value;
   return this;
}

これを次のように利用します。

var obj = {key1: value1, key2: value2};
obj.push( "key3", "value3" );

プロトタイプ関数が戻っているため、 this 連鎖を続けることができます .pushあなたの最後まで obj 変数： obj.push(...).push(...).push(...);

もう 1 つの機能は、プッシュ関数の引数の値として配列または別のオブジェクトを渡すことができることです。実際の例については、私のフィドルを参照してください。 http://jsfiddle.net/7tEme/

Answer 8

あなたは @はIonut G.スタンの

の答えを持つクラスを作成することができます

function obj(){
    obj=new Object();
    this.add=function(key,value){
        obj[""+key+""]=value;
    }
    this.obj=obj
}

最後のクラスに新しいオブジェクトを作成します：

my_obj=new obj();
my_obj.add('key1', 'value1');
my_obj.add('key2', 'value2');
my_obj.add('key3','value3');

オブジェクトの印刷

console.log(my_obj.obj) // Return {key1: "value1", key2: "value2", key3: "value3"} 

キーを印刷

console.log(my_obj.obj["key3"]) //Return value3

私はJavaScriptで初心者だけど、コメントは歓迎されています。私のために動作します。

Answer 9

プロパティを追加するだけです:

そして追加したいのは prop2 : 2 このオブジェクトに対して、以下が最も便利なオプションです。

1. ドット演算子: object.prop2 = 2;
2. 角括弧： object['prop2'] = 2;

それでは、どれを使用すればよいでしょうか?

ドット演算子はよりクリーンな構文であり、デフォルト (imo) として使用する必要があります。ただし、ドット演算子はオブジェクトに動的キーを追加することができません。これは場合によっては非常に便利です。以下に例を示します。

const obj = {
  prop1: 1
}

const key = Math.random() > 0.5 ? 'key1' : 'key2';

obj[key] = 'this value has a dynamic key';

console.log(obj);

オブジェクトの結合:

2 つのオブジェクトのプロパティをマージする場合、これらが最も便利なオプションです。

1. Object.assign(), は、ターゲット オブジェクトを引数として受け取り、1 つ以上のソース オブジェクトを受け取り、それらをマージします。例えば：

const object1 = {
  a: 1,
  b: 2,
};

const object2 = Object.assign({
  c: 3,
  d: 4
}, object1);

console.log(object2);

2. オブジェクトスプレッド演算子 ...

const obj = {
  prop1: 1,
  prop2: 2
}

const newObj = {
  ...obj,
  prop3: 3,
  prop4: 4
}

console.log(newObj);

どちらを使用しますか?

• スプレッド構文はそれほど冗長ではないため、デフォルトの imo として使用する必要があります。この構文は比較的新しいため、すべてのブラウザでサポートされる構文にトランスパイルすることを忘れないでください。
• Object.assign() 引数として渡されるすべてのオブジェクトにアクセスでき、新しいオブジェクトに割り当てられる前にそれらのオブジェクトを操作できるため、より動的になります。

Answer 10

あなたの例では、オブジェクトではなく、配列を示しています。その場合には、オブジェクトにフィールドを追加するための好ましい方法は、単に、それに割り当てることであるようなので

arr.key3 = value3;

Answer 11

すでにほとんどの回答に記載二つの最も使用される方法

obj.key3 = "value3";

obj["key3"] = "value3";

プロパティを定義する一つ以上の方法を使用しているObject.defineProperty（）

Object.defineProperty(obj, 'key3', {
  value: "value3",       // undefined by default
  enumerable: true,      // false by default
  configurable: true,    // false by default
  writable: true         // false by default
});

あなたがプロパティを定義しながら、より多くのコントロールを持っているしたい場合、

この方法が便利です。 定義されたプロパティは、ユーザが、列挙設定及び書き込み可能に設定することができる。

Answer 12

オブジェクト内に複数の匿名オブジェクト リテラルがあり、キーと値のペアを含む別のオブジェクトを追加したい場合は、次のようにします。

オブジェクトを Firebug します。

console.log(Comicbook);

戻り値：

object {name = "spiderman"、value = "11"}、object {name = "marsipulami"、value = "18"}、object {name = "garfield"、value = "2"}

コード：

if (typeof Comicbook[3]=='undefined') {
    private_formArray[3] = new Object();
    private_formArray[3]["name"] = "Peanuts";
    private_formArray[3]["value"] = "12";
}

追加します Object {name="Peanuts", value="12"} Comicbook オブジェクトへ

Answer 13

obj['key3'] = value3またはobj.key3 = value3のどちらかがobjに新しいペアを追加します。

しかし、私はjQueryの言及はなかったけど、あなたがそれを使用している場合は、$.extend(obj,{key3: 'value3'})てオブジェクトを追加することができます。例えば：ます。

var obj = {key1: 'value1', key2: 'value2'};
$('#ini').append(JSON.stringify(obj));

$.extend(obj,{key3: 'value3'});

$('#ext').append(JSON.stringify(obj));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="ini">Initial: </p>
<p id="ext">Extended: </p>

のjQuery。の延在する（ターゲット【、物体1] [、objectN]）のマージ最初のオブジェクトに2つの以上のオブジェクトの内容

そしてそれはまた、再帰が$.extend(true,object1,object2);と/変更を加えることができます：

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};
$("#ini").append(JSON.stringify(object1));    

$.extend( true, object1, object2 );
 
$("#ext").append(JSON.stringify(object1));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="ini">Initial: </p>
<p id="ext">Extended: </p>