循环遍历对象的属性

Posted sanerandm

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了循环遍历对象的属性相关的知识,希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 <p>点击下面的按钮,循环遍历对象 "person" 的属性。</p>
 5 <button onclick="myFunction()">点击这里</button>
 6 <p id="demo"></p>
 7 
 8 <script>
 9 function myFunction()
10 {
11 var x;
12 var txt="";
13 var person={"fname":"Bill","lname":"Gates","age":56}; 
14 
15 for (x in person)
16 {
17 txt = txt + x+‘:‘+ person[x] +‘  ‘;
18 }
19 
20 document.getElementById("demo").innerHTML=txt;
21 }
22 </script>
23 </body>
24 </html>

上面代码运行的结果是:fname:Bill lname:Gates age:56

有人不明白17行,txt = 后面为什么还要加txt ,如果去掉的话就只会正剩下最后一个属性。

其实 txt = txt + x+‘:‘+ person[x] +‘ ‘; 的意思就是将值累加起来,我们不妨拆开循环的步骤来看。

第一次循环x=fname person[x]为Bill, txt ="" 则 txt = "" +"fname" +":" +"Bill", txt=“fname:Bill"

第二次循环x= lname person[x]为Gates, txt="fname:Bill" 则 txt = "fname:Bill"+"lname "+":" + "Gates", txt="fname:Bill Iname:Gates"

第三次循环x=age person[x]为56,txt ="fname:Bill Iname:Gates",则txt="fname:Bill Iname:Gates" + "age" + ":" +"56", txt="fname:Bill lname:Gates age:56", 循环结束。

其实  txt = txt + x+‘:‘+ person[x] +‘ ‘; 可以直接写成 txt += x+‘:‘+ person[x] +‘  ‘;

 

以上是关于循环遍历对象的属性的主要内容,如果未能解决你的问题,请参考以下文章

循环遍历具有可观察属性的 Knockout 可观察对象数组

javaScript数组遍历

[转发]for 循环,jQuery循环遍历详解

循环遍历对象中的对象属性

递归循环遍历对象以构建属性列表

循环遍历对象的属性