在前端开发中，我们经常需要动态地向一个JSON对象中添加变量名和值对。这些变量可以来自于用户输入、从服务器返回的数据或其他来源。如何动态地添加这些变量是一个常见的问题，本文将介绍几种解决方案。
直接赋值
最简单的方法是使用点表示法或方括号表示法直接为JSON对象添加属性。例如：
--- ----- - --- ----------- - --------- -------------- - ---------
这将创建一个空的JSON对象myObj并添加两个属性prop1和prop2，它们分别具有相应的值。如果要添加多个属性，可以使用循环语句：
--- ---- - - -- - - ------------ ---- - --- --- - -------- --- ----- - ---------- ---------- - ------ -
其中keys和values是包含键和值的数组。
虽然这种方法很简单，但它有一些缺点。首先，它只适用于属性名是静态字符串的情况。其次，在处理大量属性时，每次都要访问JSON对象可能会影响性能。因此，对于动态添加属性的情况，我们需要更高效的方法。
使用Object.assign()
ES6引入了Object.assign()方法，它可以将一个或多个源对象的属性复制到目标对象中。例如：
--- ----- - --- -------------------- ------- --------- ------ -----------
这将创建一个空的JSON对象myObj并添加两个属性prop1和prop2，它们分别具有相应的值。如果要添加多个属性，只需要添加更多的源对象即可。
虽然Object.assign()方法不会覆盖目标对象中已经存在的属性，但它会修改目标对象。因此，如果需要保留原始JSON对象，请使用空对象作为目标对象：
--- ----- - -------------- ----------------- --- ------ - ----------------- ------ ------- --------- ------ -----------
这将创建一个新的JSON对象newObj，其中包括myObj中的所有属性以及新添加的属性。
使用ES6展开运算符
除了Object.assign()方法外，ES6还引入了展开运算符...，它可以将一个数组或对象展开为一组单独的参数。例如：
--- ----- - --- --- ----- - ------- --------- ------ ---------- ----- - ---------- ----------
这将创建一个空的JSON对象myObj并添加两个属性prop1和prop2，它们分别具有相应的值。如果要添加多个属性，只需要添加更多的对象即可。
与Object.assign()方法类似，展开运算符也可以用于合并多个对象：
--- ----- - -------------- ----------------- --- ----- - ------- --------- ------ ---------- --- ------ - ---------- ----------
这将创建一个新的JSON对象newObj，其中包括myObj中的所有属性以及新添加的属性。
总结
动态地向JSON对象中添加变量名和值对是前端开发中常见的任务。本文介绍了几种解决方案，包括直接赋值、使用Object.assign()方法和使用ES6展开运算符。如果要添加大量属性，请考虑使用更高效的方法，如Object.assign()方法或展开运算符。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/15637