关于如何利用原生js动态给一个空对象添加属性以及属性值

首先，回忆一下，访问对象属性一共有两种方法：点获取法和方括号获取法。而我们最常用的就是点获取法了。但是当我们遇到需要给对象动态添加属性和属性值时，点获取法好像就不太好用了，尤其是我们不知道属性名的时候更不好办。这时候，方括号获取法就派上用场了。下面，来看一个例子，就一目了然了。

代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <p>请输入城市名字</p>
 9     <input type="text" id="input-city"/>
10     <br/>
11     <p>请输入空气污染指数</p>
12     <input type="text" id="input-num"/>
13     <button id="btn">按钮</button>
14 </body>
15 <script>
16     window.onload = function(){
17         var btn = document.getElementById('btn');
18         var input_city = document.getElementById('input-city');
19         var input_num = document.getElementById('input-num');
20 
21 // 先声明一个空对象
22         var obj = {};//用来存放获取到所填写的信息
23 
24 //点击按钮的时候将信息保存到对象中
25         btn.onclick = function(){
26             var city = input_city.value;
27             var num = input_num.value;
28             obj[city] = num;//利用方括号法添加属性和属性值
29             console.log(obj);//会输出obj={xxx：yyyy，zzz：kkk}
30         }
31 
32 
33 
34 
35 
36 
37     }
38 </script>
39 </html>

View Code