JS遍历对象或者数组

JS遍历对象或者数组
一.纯js实现
Js代码
1. <script>
2. var obj = {"player_id":"GS001","event_id":"1","destroy":"97%"};
3. var props = "";
4. for(var p in obj){
5. if(typeof(obj[p])=="function"){
6. obj[p]();
7. }else{
8. props+= p + "=" + obj[p] + " ";
9. }
10. }
11. alert(props);
12. </script>
```
<script>
  var obj = {"player_id":"GS001","event_id":"1","destroy":"97%"};
  var props = "";
  for(var p in obj){
      if(typeof(obj[p])=="function"){
            obj[p]();
      }else{
            props+= p + "=" + obj[p] + " ";
         }
  }
  alert(props);
</script>
```
二.jquery实现

1.遍历对象
Js代码
1. $(function(){
2. var tbody = "";
3. //------------遍历对象 .each的使用-------------
4. //对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式，必须保证JSON的格式要求，回调的对象必须使用eval函数进行转化（否则将得不到Object）。本文不作详细介绍服务器端回调的数据问题，我们将直接自定义对象)
5. var obj =[{"name":"admin","password":"123456"}];
6. $("#result").html("------------遍历对象 .each的使用-------------");
7. alert(obj);//是个object元素
8. //下面使用each进行遍历
9. $.each(obj,function(n,value) {
10. alert(n+' '+value);
11. var trs = "";
12. trs += "<tr><td>" + value.name +"</td> <td>" + value.password +"</td></tr>";
13. tbody += trs;
14. });
16. $("#project").append(tbody);
18. });
```
$(function(){
       var tbody = "";    
    //------------遍历对象 .each的使用-------------
      //对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式，必须保证JSON的格式要求，回调的对象必须使用eval函数进行转化（否则将得不到Object）。本文不作详细介绍服务器端回调的数据问题，我们将直接自定义对象)
    var obj =[{"name":"admin","password":"123456"}];
    $("#result").html("------------遍历对象 .each的使用-------------");
      alert(obj);//是个object元素
    //下面使用each进行遍历
    $.each(obj,function(n,value) { 
           alert(n+' '+value);
           var trs = "";
             trs += "<tr><td>" + value.name +"</td> <td>" + value.password +"</td></tr>";
             tbody += trs;       
           });

         $("#project").append(tbody);
     
  });
```
2.遍历数组
Js代码
1. $(function(){
2. var tbody = "";
3. //------------遍历数组 .each的使用-------------
4. var anArray = ['one','two','three'];
5. $("#result").html("------------遍历数组 .each的使用-------------");
6. $.each(anArray,function(n,value) {
7. alert(n+' '+value);
8. var trs = "";
9. trs += "<tr><td>" +value+"</td></tr>";
10. tbody += trs;
11. });
12. $("#project").append(tbody);
14. });
```
  $(function(){
     var tbody = "";
     //------------遍历数组 .each的使用-------------
     var anArray = ['one','two','three'];
     $("#result").html("------------遍历数组 .each的使用-------------");
           $.each(anArray,function(n,value) {
             alert(n+' '+value);
             var trs = "";
             trs += "<tr><td>" +value+"</td></tr>";
             tbody += trs;
           });
          $("#project").append(tbody);
     
  });
```
3.遍历List集合
Js代码
1. $(function(){
2. var tbody = "";
3. //------------遍历List集合 .each的使用-------------
4. var obj =[{"name":"zhangsan","password":"123456"},{"name":"lisi","password":"333333"}];
5. $("#result").html("遍历List集合 .each的使用");
6. alert(obj);//是个object元素
7. //下面使用each进行遍历
8. $.each(obj,function(n,value) {
9. alert(n+' '+value);
10. var trs = "";
11. trs += "<tr><td>" +value.name+"</td> <td>" + value.password +"</td></tr>";
12. tbody += trs;
13. });
14. $("#project").append(tbody);
15. });
```
  $(function(){
    var tbody = "";
    //------------遍历List集合 .each的使用-------------
    var obj =[{"name":"zhangsan","password":"123456"},{"name":"lisi","password":"333333"}];
    $("#result").html("遍历List集合 .each的使用");
    alert(obj);//是个object元素
    //下面使用each进行遍历
    $.each(obj,function(n,value) { 
       alert(n+' '+value);
       var trs = "";
       trs += "<tr><td>" +value.name+"</td> <td>" + value.password +"</td></tr>";
       tbody += trs;       
    });
    $("#project").append(tbody);
  });
```
一个完整的例子,向一个select添加元素
Html代码
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <script type="text/javascript" src="../js/jquery-1.6.js"></script>
6. </head>
8. <body>
9. <script type="text/javascript">
10. var cities = new Array({"id":1,"name":"nanjing"},{"id":2,"name":"shanghai"});
11. function add(){
12. var added = "";
13. $.each(cities,function(n, value){
14. //n表示下标
15. var str = "";
16. str = '<option id=' + value.id + ' value='+ '"' + value.name + '">' + value.name + '</option>' + '<br/>';
17. added += str;
18. });
19. //alert(added);
20. $("#selector").append(added);
21. }
23. function add2(){
24. var added = '';
25. for(var i = 0; i < cities.length; i++ ){
26. var data = "";
27. for(var k in cities[i]){
28. if(typeof(cities[i][k])=="function"){
29. cities[i][k]();
30. }else{
31. data += k + "=" + cities[i][k] + ' ';
32. }
33. }
34. added += data;
35. }
36. var select = document.getElementById("test");
37. select.innerHTML = added;
38. }
39. $(function(){
40. $("#add").click(function(){
41. add();
42. });
43. });
44. </script>
45. <button id="add">显示select</button><br/><br/>
46. <select id="selector">
47. </select>
48. <div id="test">
49. </div>
51. </body>
相关阅读:
Docker 文档编译
 Docker CentOS 安装方法
 Docker CentOS 安装要求
 Docsify 的文档页面标题在那里设置
 Docsify 的 GitHub 链接在那里设置的
 GitHub 中如何启用 GitHub Pages 中的子域名
 Spring API 的 CORS 测试提示错误 Reason: header ‘authorization’ is not allowed
Spring API 的 CORS 测试
 CentOS 7 安装 JDK 11
Postman API 获得文件如何保存
原文地址：https://www.cnblogs.com/wnlja/p/4175664.html