blocks|key|1370071|text|JSON代表JavaScript+Object+Notation。JSON对象实际上是一个字符串，它还没有转换成它所表示的对象。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1370072|要向JS中的现有对象添加属性，可以执行以下操作。|1370073|object["property"]+=+value;|code-block|syntax|javascript|1370074|或|1370075|object.property+=+value;|1370076|如果你提供一些额外的信息，比如你需要在上下文中做什么，你可能会得到一个更有针对性的答案。|1370077|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

JSON stands for JavaScript Object Notation. A JSON object is really a string that has yet to be turned into the object it represents.

To add a property to an existing object in JS you could do the following.

<pre><code>object["property"] = value;
</code></pre>

or 

<pre><code>object.property = value;
</code></pre>

If you provide some extra info like exactly what you need to do in context you might get a more tailored answer.

blocks|key|1585172|text|var+jsonObj+=+{
++++members:+
+++++++++++{
++++++++++++host:+"hostName",
++++++++++++viewers:+
++++++++++++{
++++++++++++++++user1:+"value1",
++++++++++++++++user2:+"value2",
++++++++++++++++user3:+"value3"
++++++++++++}
++++++++}
}

var+i;

for(i=4;+i<=8;+i%2B%2B){
++++var+newUser+=+"user"+%2B+i;
++++var+newValue+=+"value"+%2B+i;
++++jsonObj.members.viewers[newUser]+=+newValue+;

}

console.log(jsonObj);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1585173|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var jsonObj = {
 members: 
 {
 host: "hostName",
 viewers: 
 {
 user1: "value1",
 user2: "value2",
 user3: "value3"
 }
 }
}

var i;

for(i=4; i&lt;=8; i++){
 var newUser = "user" + i;
 var newValue = "value" + i;
 jsonObj.members.viewers[newUser] = newValue ;

}

console.log(jsonObj);
</code></pre>

blocks|key|1370086|text|JSON对象只是一个javascript对象，所以如果Javascript是一种基于原型的语言，那么您所要做的就是使用点符号对其进行寻址。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1370087|mything.NewField+=+'foo';|code-block|syntax|javascript|1370088|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

A JSON object is simply a javascript object, so with Javascript being a prototype based language, all you have to do is address it using the dot notation.

<pre><code>mything.NewField = 'foo';
</code></pre>

blocks|key|1370255|text|从2015年开始，您可以在ECMAScript中使用扩展语法(…三个点)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1370256|let++people+=+{+id:+4+,firstName:+'John'};
people+=+{+...people,+secondName:+'Fogerty'};|code-block|syntax|javascript|1370257|它允许您添加子对象：|1370258|people+=+{+...people,+city:+{+state:+'California'+}};|1370259|结果将是：|1370260|{++
+++"id":+4,
+++"firstName":+"John",
+++"secondName":+"Forget",
+++"city":+{++
++++++"state":+"California"
+++}
}|1370261|您还可以合并对象：|1370262|var+mergedObj+=+{+...obj1,+...obj2+};|1370263|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

With ECMAScript since 2015 you can use Spread Syntax ( …three dots):

<pre><code>let people = { id: 4 ,firstName: 'John'};
people = { ...people, secondName: 'Fogerty'};
</code></pre>

It's allow you to add sub objects:

<pre><code>people = { ...people, city: { state: 'California' }};
</code></pre>

the result would be:

<pre><code>{ 
 "id": 4,
 "firstName": "John",
 "secondName": "Forget",
 "city": { 
 "state": "California"
 }
}
</code></pre>

You also can merge objects:

<pre><code>var mergedObj = { ...obj1, ...obj2 };
</code></pre>

blocks|key|1370198|text|您也可以使用ECMAScript+2015中的Object.assign。它还允许您一次添加嵌套属性。例如：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1370199|const+myObject+=+{};

Object.assign(myObject,+{
++++firstNewAttribute:+{
++++++++nestedAttribute:+'woohoo!'
++++}
});|code-block|syntax|javascript|1370200|Ps:这不会用分配的属性覆盖现有的对象。相反，它们将被添加。但是，如果您为现有属性赋值，那么它将被覆盖。|1370201|entityMap^0|6|F|N|D|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

You can also use <code>Object.assign</code> from <code>ECMAScript 2015</code>. It also allows you to add nested attributes at once. E.g.:

<pre><code>const myObject = {};

Object.assign(myObject, {
 firstNewAttribute: {
 nestedAttribute: 'woohoo!'
 }
});
</code></pre>

Ps: This will not override the existing object with the assigned attributes. Instead they'll be added. However if you assign a value to an existing attribute then it would be overridden.

blocks|key|1370124|text|extend:+function(){
++++if(arguments.length+===+0){+return;+}
++++var+x+=+arguments.length+===+1+?+this+:+arguments[0];
++++var+y;

++++for(var+i+=+1,+len+=+arguments.length;+i+<+len;+i%2B%2B)+{
++++++++y+=+arguments[i];
++++++++for(var+key+in+y){
++++++++++++if(!(y[key]+instanceof+Function)){
++++++++++++++++x[key]+=+y[key];
++++++++++++}
++++++++}+++++++++++
++++};

++++return+x;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1370125|扩展多个json对象(忽略函数)：|unstyled|1370126|extend({obj:+'hej'},+{obj2:+'helo'},+{obj3:+{objinside:+'yes'}});|1370127|将产生单个json对象。|1370128|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>extend: function(){
 if(arguments.length === 0){ return; }
 var x = arguments.length === 1 ? this : arguments[0];
 var y;

 for(var i = 1, len = arguments.length; i &lt; len; i++) {
 y = arguments[i];
 for(var key in y){
 if(!(y[key] instanceof Function)){
 x[key] = y[key];
 }
 } 
 };

 return x;
}
</code></pre>

Extends multiple json objects (ignores functions):

<pre><code>extend({obj: 'hej'}, {obj2: 'helo'}, {obj3: {objinside: 'yes'}});
</code></pre>

Will result in a single json object

blocks|key|1370426|text|您还可以直接在对象文本中动态添加带有变量的属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1370427|const+amountAttribute+=+'amount';
const+foo+=+{
++++++++++++++++[amountAttribute]:+1
++++++++++++};
foo[amountAttribute+%2B+"__more"]+=+2;|code-block|syntax|javascript|1370428|结果如下：|1370429|{
++++amount:+1,+
++++amount__more:+2
}|1370430|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You can also dynamically add attributes with variables directly in an object literal.

<pre><code>const amountAttribute = 'amount';
const foo = {
 [amountAttribute]: 1
 };
foo[amountAttribute + "__more"] = 2;
</code></pre>

Results in:

<pre><code>{
 amount: 1, 
 amount__more: 2
}
</code></pre>

blocks|key|1585229|text|您还可以使用extend函数将新的json对象添加到json中，|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1585230|var+newJson+=+$.extend({},+{my:"json"},+{other:"json"});
//+result+->+{my:+"json",+other:+"json"}|code-block|syntax|javascript|1585231|extend函数的一个很好的选择是递归合并。只需添加真值作为第一个参数(有关更多选项，请阅读文档)。例如，|1585232|var+newJson+=+$.extend(true,+{},+{
++++my:"json",
++++nestedJson:+{a1:1,+a2:2}
},+{
++++other:"json",
++++nestedJson:+{b1:1,+b2:2}
});
//+result+->+{my:+"json",+other:+"json",+nestedJson:+{a1:1,+a2:2,+b1:1,+b2:2}}|1585233|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jQuery.extend/^0|6|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

You can also add new json objects into your json, using the <a href="http://api.jquery.com/jQuery.extend/" rel="nofollow noreferrer">extend</a> function,

<pre><code>var newJson = $.extend({}, {my:"json"}, {other:"json"});
// result -&gt; {my: "json", other: "json"}
</code></pre>

A very good option for the extend function is the recursive merge. Just add the true value as the first parameter (read the documentation for more options). Example,

<pre><code>var newJson = $.extend(true, {}, {
 my:"json",
 nestedJson: {a1:1, a2:2}
}, {
 other:"json",
 nestedJson: {b1:1, b2:2}
});
// result -&gt; {my: "json", other: "json", nestedJson: {a1:1, a2:2, b1:1, b2:2}}
</code></pre>

How do I add new attribute (element) to JSON object using JavaScript?

Add new attribute (element) to JSON object using JavaScript

JSON

如何使用JavaScript向JSON对象添加新的属性(元素)？

问使用JavaScript向JSON对象添加新属性(元素)
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript向JSON对象添加新属性(元素)EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript向JSON对象添加新属性(元素)
EN