web-dev-qa-db-ja.com

JavaScriptオブジェクトにキーと値のペアを追加する方法を教えてください。

これが私のオブジェクトリテラルです。

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

オブジェクトに{key3: value3}を追加するにはどうすればいいですか？

javascriptobject-literal
1146
James Skidmore

オブジェクトに新しい properties を追加する方法は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");

real JavaScript配列は、次のいずれかを使用して構成できます。

配列リテラル表記：

var arr = [];

配列コンストラクタの表記：

var arr = new Array();
1902
Ionuț G. Stan

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() triggers setters がスプレッド構文ではないことに注意してください。

実例

現在の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"};

おっと...私は夢中になりました。将来からの情報の密輸は違法です。曖昧にしました！

202
7vujy0f0hy

大きなプロジェクトを書くとき、私は LoDash / Underscore が好きになりました。

obj['key']またはobj.keyによる追加は、すべて確実な純粋なJavaScriptの回答です。しかし、LoDashとUnderscoreの両方のライブラリは、オブジェクトと配列全般を扱うときに便利な機能を数多く提供します。

.Push()はArrays 用であり、 objects 用ではありません。

あなたが探しているものに応じて、arr.Push()のような感じに似た機能を与えるのに便利であるかもしれない2つの特定の機能があります。より多くの情報についてはドキュメントをチェックしてください、彼らはそこにいくつかの素晴らしい例を持っています。

_.merge （Lodashのみ）

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}

_.defaults

2番目のオブジェクトにはデフォルトが含まれています。デフォルトが存在しない場合はベースオブジェクトに追加されます。 keyが既に存在する場合は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と同様に機能し、あなたが Babel のようなES6/ES2015 polyfillをすでに使用しているなら自分自身で polyfill 。

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}
82
Sir.Nathan Stassen

あなたはこれらのどちらかを使うことができます（key3があなたが使いたい実際のキーであるならば）

arr[ 'key3' ] = value3;

または

arr.key3 = value3;

Key3が変数の場合は、次のようにします。

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

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

65
seth
arr.key3 = value3;

あなたのARRは実際には配列ではないので...それはプロトタイプオブジェクトです。実際の配列は次のようになります。

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

しかし、それはまだ正しくありません。それは実際にあるはずです：

var arr = [{key: key1, value: value1}, {key: key2, value: value2}];
29
Robert Koritnik
var employees = []; 
employees.Push({id:100,name:'Yashwant',age:30});
employees.Push({id:200,name:'Mahesh',age:35});
25
Vicky

私はこれについてすでに受け入れられた答えがあることを知っています、しかし私は私が私の考えをどこかに文書化することを考えました。これが最善の解決策であるかどうかわからないので、このアイデアに気を配ってください。

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

あなたはこのようにそれを利用するでしょう：

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

プロトタイプ関数がthisを返しているので、obj変数の末尾まで.Pushを連鎖させることができます。obj.Push(...).Push(...).Push(...);

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

9
sadmicrowave

@ Ionuț G. Stan の答えでクラスを作ることができます。

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が不慣れです、コメントは歓迎です。私のために働きます。

8
Eduen Sarceno

単にプロパティを追加する：

そしてこのオブジェクトに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);
  1. オブジェクト拡散演算子...
const obj = {
  prop1: 1,
  prop2: 2
}

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

console.log(newObj);

どちらを使いますか？

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

ほとんどの回答ですでに言及されている2つの最もよく使われる方法

obj.key3 = "value3";

obj["key3"] = "value3";

プロパティを定義するもう1つの方法は、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
});

このメソッドは、プロパティを定義しながらさらに制御したい場合に便利です。定義されたプロパティは、ユーザーが列挙可能、構成可能、および書き込み可能として設定できます。

6
Sanchay Kumar

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

arr.key3 = value3;
6
bdukes

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

オブジェクトをFirebug： 

console.log(Comicbook);

以下を返します。

[オブジェクト{名前= "スパイダーマン"、値= "11"}、オブジェクト{名前= "マルシプラミ"、値= "18"}、オブジェクト{名前= "ガーフィールド"、値= "2"}]

コード： 

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

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

5
nottinhill

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. extend （target [、object1] [、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>
5
Armfoot

available it 既存のキー値を上書きする およびit 使用不可 itの場合、オブジェクトキーが使用可能かどうかを確認します。 値を持つキーを追加します

例1

let my_object = {};

// now i want to add something in it  

my_object.red = "this is red color";

// { red : "this is red color"}

例2

let my_object = { inside_object : { car : "maruti" }}

// now i want to add something inside object of my object 

my_object.inside_object.plane = "JetKing";

// { inside_object : { car : "maruti" , plane : "JetKing"} }

例3

let my_object = { inside_object : { name : "abhishek" }}

// now i want to add something inside object with new keys birth , gender 

my_object.inside_object.birth = "8 Aug";
my_object.inside_object.gender = "Male";


    // { inside_object : 
//             { name : "abhishek",
//               birth : "8 Aug",
//               gender : "Male" 
//            }   
//       }
4
Abhiode
var arrOfObj = [{name: 'eve'},{name:'john'},{name:'jane'}];
    var injectObj = {isActive:true, timestamp:new Date()};

    // function to inject key values in all object of json array

    function injectKeyValueInArray (array, keyValues){
        return new Promise((resolve, reject) => {
            if (!array.length)
                return resolve(array);

            array.forEach((object) => {
                for (let key in keyValues) {
                    object[key] = keyValues[key]
                }
            });
            resolve(array);
        })
    };

//call function to inject json key value in all array object
    injectKeyValueInArray(arrOfObj,injectObj).then((newArrOfObj)=>{
        console.log(newArrOfObj);
    });

このように出力： - 

[ { name: 'eve',
    isActive: true,
    timestamp: 2017-12-16T16:03:53.083Z },
  { name: 'john',
    isActive: true,
    timestamp: 2017-12-16T16:03:53.083Z },
  { name: 'jane',
    isActive: true,
    timestamp: 2017-12-16T16:03:53.083Z } ]
4
Sayed Tauseef Haider Naqvi

ECMA-262（ http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf 、P67）で定義されている プロパティアクセサ によると、存在するオブジェクトにプロパティを追加するには、2つの方法があります。これら2つの方法すべてにおいて、Javascriptエンジンはそれらを同じものとして扱います。

最初の方法はドット記法を使うことです。

obj.key3 = value3;

しかしこのように、ドット表記の後に IdentifierName を使うべきです。

2番目の方法は大括弧表記を使用することです。

obj["key3"] = value3;

そして別の形式：

var key3 = "key3";
obj[key3] = value3;

このように、括弧表記で Expression （include IdentifierName ）を使用できます。

4
Chen Yang

この方法で追加することもできます。

arr['key3'] = value3;

またはこのように：

arr.key3 = value3;

変数key3を使用してオブジェクトにキー入力することを提案する回答は、key3の値が'key3'である場合にのみ機能します。

4
wombleton

次回のJavascript仕様（候補段階3）における簡潔で簡潔な方法は、次のとおりです。

obj = { ... obj, ... { key3 : value3 } }

より深い議論は オブジェクトスプレッドvs Object.assign そして Dr. Axel Rauschmayersのサイト にあります。

これはリリース8.6.0以降、すでにnode.jsで機能します。

最新リリースのVivaldi、Chrome、Opera、およびFirefoxもこの機能を知っていますが、Mirosoftは今日まで、Internet ExplorerでもEdgeでも使用できません。

3
xyxyber

私たちもこれを行うことができます。

var myMap = new Map();
myMap.set(0, 'my value1');
myMap.set(1, 'my value2');
 for (var [key, value] of myMap) {
  console.log(key + ' = ' + value);
 }
3
Miraj Hamid

prependをオブジェクトへのキーと値のペアにするためには、forが最初にその要素で動作するようにします。

    var nwrow = {'newkey': 'value' };
    for(var column in row){
        nwrow[column] = row[column];
    }
    row = nwrow;
0
relipse

同じことを達成するための最良の方法は以下の通りです。

function getKey(key) {
  return `${key}`;
}

var obj = {key1: "value1", key2: "value2", [getKey('key3')]: "value3"};

//console.log(obj);
0
sgajera

それは過去の問題ですが、現在の問題です。もう1つの解決策を提案するでしょう：単にキーと値を関数に渡すと、あなたはマップオブジェクトを得るでしょう。

var map = {};
function addValueToMap(key, value) {
map[key] = map[key] || [];
map[key].Push(value);
}
0
PPing