js属性名用变量代替

怼烎@ 2022-12-20 12:43 112阅读 0赞

在前端中，我们有时候需要利用变量名来设置属性名，虽然不是很常见，但是也是一个应用场景。这时候，我们如果想当然的，直接使用变量来设置，那么可能不会达到我们想要的结果的。我们先来通过示例来演示一下。

假设，我们希望设置user = \{name:"buejee"\}，变量a = "name"，我们直接用变量设置：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70][]

得到的结果出乎意料，并不是我们想要的\{name:"buejee"\}，而是\{a:"buejee"\}。

1、如下所示，我们改变一下，通过中括号\[\]方式设置：

![20201112151800412.png][]

成功通过变量名设置了我们的属性名。

设想一下，如果我们拼接一下变量是什么结果呢？

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1][]

2、 貌似拼接是不行的，但是我们非要拼呢？使用eval

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 2][]

在js中使用eval是一种很耗性能的操作，可读性非常差，不适宜优化，在万不得已的情况下是不建议使用的。

3、另外，还有一种办法就是借助JSON工具，如下所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 3][]

通过以上的代码，发现还是通过中括号\[\]的方式赋值还是最容易理解，也是最简单的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70]: /images/20221120/574fbce907ee40048c34928a60f6f889.png
[20201112151800412.png]: /images/20221120/25ae88545038417b8a71696b97e28125.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1]: /images/20221120/a8bbb287ba1f4e77bb50c77a804368c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 2]: /images/20221120/12e571c9ae1e4482922a04b071d1664b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 3]: /images/20221120/b763e9e9686242a5a48bf0393727591b.png