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. });
  15. $("#project").append(tbody);
  16. });
$(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);
  13. });
  $(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>
  7. <body>
  8. <script type="text/javascript">
  9. var cities = new Array({"id":1,"name":"nanjing"},{"id":2,"name":"shanghai"});
  10. function add(){
  11. var added = "";
  12. $.each(cities,function(n, value){
  13. //n表示下标
  14. var str = "";
  15. str = ‘<option id=‘ + value.id + ‘ value=‘+ ‘"‘ + value.name +  ‘">‘ + value.name + ‘</option>‘ + ‘<br/>‘;
  16. added += str;
  17. });
  18. //alert(added);
  19. $("#selector").append(added);
  20. }
  21. function add2(){
  22. var added = ‘‘;
  23. for(var i = 0; i < cities.length; i++ ){
  24. var data = "";
  25. for(var k in cities[i]){
  26. if(typeof(cities[i][k])=="function"){
  27. cities[i][k]();
  28. }else{
  29. data +=  k + "=" +  cities[i][k] + ‘ ‘;
  30. }
  31. }
  32. added += data;
  33. }
  34. var select = document.getElementById("test");
  35. select.innerHTML = added;
  36. }
  37. $(function(){
  38. $("#add").click(function(){
  39. add();
  40. });
  41. });
  42. </script>
  43. <button id="add">显示select</button><br/><br/>
  44. <select id="selector">
  45. </select>
  46. <div id="test">
  47. </div>
  48. </body>
时间： 2024-10-10 06:21:16

JS遍历对象或者数组的相关文章

js遍历对象的数组

遍历数组: 1.js关键for遍历 2.jquery提供each功能 ----------------------------------- $.each(array, function(){ alert(this); }); ----------------------------------- 对象遍历: js: --------------------------------------------- for (var k in obj) { alert(obj[k]). } jquery

js 遍历对象

function allPrpos(obj) { // 用来保存所有的属性名称和值 var props = ""; // 开始遍历 for(var p in obj){ // 方法 if(typeof(obj[p])=="function"){ obj[p](); }else{ // p 为属性名称,obj[p]为对应属性的值 props+= p + "=" + obj[p]+"<br />"; } } // 最后

jquery中each遍历对象和数组示例

通用遍历方法,可用于遍历对象和数组.$().each(),回调函数拥有两个参数: 第一个为对象的成员或数组的索引,第二个为对应变量或内容.如需退出each循环可使回调函数返回false 现有如下两个select 计划类别: <select id="PLANTYPE"> <option value="0">-所有-</option> <option value="1">新建</option>

jquery中each遍历对象和数组

jquery中each可用于遍历对象和数组,如需退出each循环可使回调函数返回false 1.$().each(),回调函数拥有两个参数: 第一个为对象的成员或数组的索引,第二个为对应变量或内容.如需退出each循环可使回调函数返回false 例子: 现有如下两个select 计划类别: <select id="PLANTYPE"> <option value="0">-所有-</option> <option value

js for in 遍历对象与数组

遍历对象 let obj = { q:'9', w:'5', e:'2', t:'7', c:'3' } //for in 遍历对象 key为对象的属性名称,遍历属性值时用[]操作符访问 //通过[]操作符为对象添加属性或访问属性时,属性名称可以是任何字符串. for (let key in obj) { console.log('obj的key:',key,' obj的value:',obj[key]); } // 遍历一个对象组合成一个新对象 let colums = []; for (le

jQuery遍历对象、数组、集合实例

1.jquery 遍历对象 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  <HTML>   <HEAD>    <TITLE> New Document </TITLE>    <script language="javascript" type="text/javascript"

jquery 遍历对象、数组、集合

转:http://blog.sina.com.cn/s/blog_5db0dfe40100hay7.html 使用了jquery有段时间了,整理下jquery中的遍历问题. 1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>  <HEAD>   <TITLE> New Document </TITLE>   &l

javaScript遍历对象、数组总结

javaScript遍历对象总结 1.使用Object.keys()遍历 var obj = {'0':'a','1':'b','2':'c'}; Object.keys(obj).forEach(function(key){ console.log(key,obj[key]); }); 2.使用for..in..遍历 var obj = {'0':'a','1':'b','2':'c'}; for(var i in obj) { console.log(i,":",obj[i]);

JS中对象转数组方法总结

1.Array.from() 方法,用于数组的浅拷贝.就是将一个类数组对象或者可遍历对象转换成一个真正的数组.eg: let obj = { 0: 'nihao', 1: 'haha', 2: 'gansha', 'length': 3 } let arr = Array.from(obj) console.log(arr); tips: 1. object中必须有length属性,返回的数组长度取决于length长度         2.key 值必须是数值 2.Object.values(o