动态地将变量名值对添加到JSON对象

在前端开发中，我们经常需要动态地向一个JSON对象中添加变量名和值对。这些变量可以来自于用户输入、从服务器返回的数据或其他来源。如何动态地添加这些变量是一个常见的问题，本文将介绍几种解决方案。

直接赋值

最简单的方法是使用点表示法或方括号表示法直接为JSON对象添加属性。例如：

var myObj = {};
myObj.prop1 = "value1";
myObj["prop2"] = "value2";

这将创建一个空的JSON对象myObj并添加两个属性prop1和prop2，它们分别具有相应的值。如果要添加多个属性，可以使用循环语句：

for (var i = 0; i < keys.length; i++) {
  var key = keys[i];
  var value = values[i];
  myObj[key] = value;
}

其中keys和values是包含键和值的数组。

虽然这种方法很简单，但它有一些缺点。首先，它只适用于属性名是静态字符串的情况。其次，在处理大量属性时，每次都要访问JSON对象可能会影响性能。因此，对于动态添加属性的情况，我们需要更高效的方法。

使用Object.assign()

ES6引入了Object.assign()方法，它可以将一个或多个源对象的属性复制到目标对象中。例如：

var myObj = {};
Object.assign(myObj, {prop1: "value1", prop2: "value2"});

这将创建一个空的JSON对象myObj并添加两个属性prop1和prop2，它们分别具有相应的值。如果要添加多个属性，只需要添加更多的源对象即可。

虽然Object.assign()方法不会覆盖目标对象中已经存在的属性，但它会修改目标对象。因此，如果需要保留原始JSON对象，请使用空对象作为目标对象：

var myObj = {existingProp: "existingValue"};
var newObj = Object.assign({}, myObj, {prop1: "value1", prop2: "value2"});

这将创建一个新的JSON对象newObj，其中包括myObj中的所有属性以及新添加的属性。

使用ES6展开运算符

除了Object.assign()方法外，ES6还引入了展开运算符...，它可以将一个数组或对象展开为一组单独的参数。例如：

var myObj = {};
var props = {prop1: "value1", prop2: "value2"};
myObj = {...myObj, ...props};

这将创建一个空的JSON对象myObj并添加两个属性prop1和prop2，它们分别具有相应的值。如果要添加多个属性，只需要添加更多的对象即可。

与Object.assign()方法类似，展开运算符也可以用于合并多个对象：

var myObj = {existingProp: "existingValue"};
var props = {prop1: "value1", prop2: "value2"};
var newObj = {...myObj, ...props};

这将创建一个新的JSON对象newObj，其中包括myObj中的所有属性以及新添加的属性。

总结

动态地向JSON对象中添加变量名和值对是前端开发中常见的任务。本文介绍了几种解决方案，包括直接赋值、使用Object.assign()方法和使用ES6展开运算符。如果要添加大量属性，请考虑使用更高效的方法，如Object.assign()方法或展开运算符。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15637