關於如何利用原生js動態給一個空對象添加屬性以及屬性值

時間 2019-12-12

原文原文鏈接

首先，回憶一下，訪問對象屬性一共有兩種方法：點獲取法和方括號獲取法。而咱們最經常使用的就是點獲取法了。可是當咱們遇到須要給對象動態添加屬性和屬性值時，點獲取法好像就不太好用了，尤爲是咱們不知道屬性名的時候更很差辦。這時候，方括號獲取法就派上用場了。下面，來看一個例子，就一目瞭然了。html

代碼以下：ide

 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

相關標籤/搜索