1743

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

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

オブジェクトにフィールドkey3を追加するにはどうすればよいですか?value3

4

26 に答える 26

2754

オブジェクトに新しいプロパティを追加するには、次の 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");

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

配列リテラル表記:

var arr = [];

Array コンストラクターの表記法:

var arr = new Array();
于 2009-07-22T23:25:19.920 に答える
108

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

obj['key']またはによる追加obj.keyは、すべて堅実な純粋な JavaScript の回答です。ただし、LoDash ライブラリと Underscore ライブラリはどちらも、一般にオブジェクトと配列を操作するときに、多くの追加の便利な機能を提供します。

.push()オブジェクト用ではなく、配列用です。

探しているものに応じて、使いやすく、 の感覚に似た機能を提供する 2 つの特定の機能がありますarr.push()。詳細については、ドキュメントを確認してください。優れた例がいくつかあります。

_.merge (ロダッシュのみ)

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 と同様に機能し、Babelのような 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}
于 2014-11-24T18:11:22.310 に答える
74

これらのいずれかを使用できます (key3 が使用する実際のキーである場合)

arr[ 'key3' ] = value3;

また

arr.key3 = value3;

key3 が変数の場合、次のようにする必要があります。

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

この後、リクエストすると、リテラルであるarr.a_keyの値が返されます。value33

于 2009-07-22T23:22:21.657 に答える
31 
arr.key3 = value3;

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

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

しかし、それはまだ正しくありません。実際には次のようになります。

var arr = [{key: key1, value: value1}, {key: key2, value: value2}];
于 2009-07-22T23:25:33.723 に答える
7

次の Javascript 仕様 (候補ステージ 3) の簡潔でエレガントな方法は次のとおりです。

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

より深い議論はObject spread vs Object.assignとDr. Axel Rauschmayers site にあります。

リリース 8.6.0 以降、node.js で既に機能しています。

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

于 2017-11-25T10:17:41.317 に答える
7

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

arr.key3 = value3;
于 2009-07-22T23:25:57.670 に答える
5

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

ただし、jQuery について言及されていないことは知っていますが、使用している場合は、.xml からオブジェクトを追加できます$.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>

于 2015-06-08T17:17:04.680 に答える
5

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

オブジェクトを Firebug する:

console.log(Comicbook);

戻り値：

[オブジェクト { name="スパイダーマン", value="11"}, オブジェクト { name="マルシプラミ", value="18"}, オブジェクト { name="ガーフィールド", 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 オブジェクトに追加されます

于 2012-08-01T14:28:41.827 に答える
4

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 ( IdentifierNameを含む) を使用できます。

于 2013-08-02T03:51:40.443 に答える