使用 JavaScript 向 JSON 对象添加新属性（元素）

Posted 2023-02-21

【中文标题】使用 JavaScript 向 JSON 对象添加新属性（元素）

【英文标题】：Add new attribute (element) to JSON object using JavaScript

【发布时间】：2010-10-18 16:56:57

【问题描述】：

如何？

【参考方案1】：

JSON 代表 javascript 对象表示法。 JSON 对象实际上是一个尚未转换为它所代表的对象的字符串。

要为 JS 中的现有对象添加属性，您可以执行以下操作。

object["property"] = value;

或

object.property = value;

如果您提供一些额外的信息，例如您需要在上下文中做什么，您可能会得到更量身定制的答案。

【讨论】：

@shanehoban 这里 a 是 JSON，a.s 正如你刚刚定义的那样是一个字符串。现在您正尝试将["subproperty"] 添加到字符串中。你现在明白为什么会出现错误了吗？

对于初学者，请记住，正如 Quintin 所说，JSON“对象”根本不是对象，它只是一个字符串。在使用他的 object["property"] = value;

示例之前，您需要使用 JSON.parse() 将其转换为实际的 Javascript 对象

@shanehoban 检查我在顶部的答案，您将了解如何一次添加多个属性。

@EduardoLucio 那是因为你应该使用JSON.stringify。

@EduardoLucio 问题是console.log 不适合序列化。使用console.log(JSON. stringify(object))。

【参考方案2】：

var jsonObj = 
    members: 
           
            host: "hostName",
            viewers: 
            
                user1: "value1",
                user2: "value2",
                user3: "value3"
            
        


var i;

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



console.log(jsonObj);

【讨论】：

正是我想要的，当必须以编程方式构造名称时添加一个元素

很好的例子。这对我有帮助。

【参考方案3】：

JSON 对象只是一个 javascript 对象，因此 Javascript 是一种基于原型的语言，您所要做的就是使用点符号来处理它。

mything.NewField = 'foo';

【讨论】：

就是这样，我喜欢javascript原型！

【参考方案4】：

从 2015 年开始使用 ECMAScript，您可以使用传播语法（…三个点）：

let  people =  id: 4 ,firstName: 'John';
people =  ...people, secondName: 'Fogerty';

它允许你添加子对象：

people =  ...people, city:  state: 'California' ;

结果是：

  
   "id": 4,
   "firstName": "John",
   "secondName": "Forget",
   "city":   
      "state": "California"
   

您还可以合并对象：

var mergedObj =  ...obj1, ...obj2 ;

【参考方案5】：

感谢这篇文章。我想添加一些有用的东西。

对于IE来说，很好用

object["property"] = value;

语法，因为 IE 中的一些特殊词可能会给你一个错误。

一个例子：

object.class = 'value';

这在 IE 中失败，因为“class”是一个特殊的词。我花了几个小时来处理这个。

【讨论】：

@Sunil Garg 您将如何将该值作为子对象存储到原始对象中的某个父对象？

【参考方案6】：

您也可以使用ECMAScript 2015 中的Object.assign。它还允许您一次添加嵌套属性。例如：

const myObject = ;

Object.assign(myObject, 
    firstNewAttribute: 
        nestedAttribute: 'woohoo!'
    
);

Ps：这不会覆盖具有分配属性的现有对象。相反，它们将被添加。但是，如果您将值分配给现有属性，那么它将被覆盖。

【参考方案7】：

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++) 
        y = arguments[i];
        for(var key in y)
            if(!(y[key] instanceof Function))
                x[key] = y[key];
            
                   
    ;

    return x;

扩展多个 json 对象（忽略函数）：

extend(obj: 'hej', obj2: 'helo', obj3: objinside: 'yes');

将生成单个 json 对象

【参考方案8】：

您还可以直接在对象文字中动态添加带有变量的属性。

const amountAttribute = 'amount';
const foo = 
                [amountAttribute]: 1
            ;
foo[amountAttribute + "__more"] = 2;

结果：

    amount: 1, 
    amount__more: 2

【参考方案9】：

您还可以使用 extend 函数将新的 json 对象添加到您的 json 中，

var newJson = $.extend(, my:"json", other:"json");
// result -> my: "json", other: "json"

扩展函数的一个很好的选择是递归合并。只需添加真值作为第一个参数（阅读文档以获取更多选项）。例如，

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

【讨论】：

extend() 是 jQuery 的一部分

【参考方案10】：

使用 jquery 的 $.extend()，如下所示：

token = _token:window.Laravel.csrfToken;
data = v1:'asdass',v2:'sdfsdf'
dat = $.extend(token,data); 

我希望你为他们服务。