js是基于对象的语言-小悟

看看实现同一功能的两种不同方法

第一种

$(document).ready(function(){
var a=[{name:'d-3',value:'d3'},{name:'d-4',value:'d4'},{name:'a-3',value:'a3'},{name:'a-4',value:'a4'},
       {name:'a-1',value:'a1'},{name:'a-2',value:'a2'},{name:'d-1',value:'d1'},{name:'d-2',value:'d2'},
       {name:'c-2',value:'c2'},{name:'c-3',value:'c3'},{name:'c-4',value:'c4'},{name:'b-1',value:'b1'},
       {name:'b-2',value:'b2'},{name:'b-3',value:'b3'},{name:'b-4',value:'b4'},{name:'c-1',value:'c1'}];

function testA(a){
    var b=[];
    while(a.length>0){
         var c=a.shift();
         var flag=false;
        for(var i=0,len=b.length;i<len;i++){
            if(b[i][0].name.split('-')[0]==c.name.split('-')[0]){
               b[i].push(c);
                flag=true;
                break;
            }

        }
        if(flag==false){
            b.push([c]);
    //      b[(b.length-1)].name=c.name.split('-')[0];              
            }

    }   
    return b;
}
//把数据画成table    
//数组无序，还涉及排序
    function getValue(data,key){
        var result;
        for(var i=0,len=data.length;i<len;i++){
            if(data[i].name.split('-')[1]==key){
                result=data[i].value;
                break;
            }
        }
        return result;
    }
var tableData=testA(a);
var htmlTable='<tr><td>名字</td><td>1</td><td>2</td><td>3</td><td>4</td></tr>';
    for(var i=0,len=tableData.length;i<len;i++){
        var td0=tableData[i][0].name.split('-')[0];
        var td1=getValue(tableData[i],'1');
        var td2=getValue(tableData[i],'2');
        var td3=getValue(tableData[i],'3');
        var td4=getValue(tableData[i],'4');
        htmlTable+='<tr><td>'+td0+'</td><td>'+td1+'</td><td>'+td2+'</td><td>'+td3+'</td><td>'+td4+'</td></tr>'; 
    }
    var tbl=document.createElement('table');
    document.getElementsByTagName('body')[0].appendChild(tbl);
    tbl.innerHTML=htmlTable;    
});

第二种

$(document).ready(function(){
var a=[{name:'d-3',value:'d3'},{name:'d-4',value:'d4'},{name:'a-3',value:'a3'},{name:'a-4',value:'a4'},
       {name:'a-1',value:'a1'},{name:'a-2',value:'a2'},{name:'d-1',value:'d1'},{name:'d-2',value:'d2'},
       {name:'c-2',value:'c2'},{name:'c-3',value:'c3'},{name:'c-4',value:'c4'},{name:'b-1',value:'b1'},
       {name:'b-2',value:'b2'},{name:'b-3',value:'b3'},{name:'b-4',value:'b4'},{name:'c-1',value:'c1'}];
function testB(a){
    var b;
    a.forEach(function(item){
        b=b||{};
        b[item.name.split('-')[0]]=b[item.name.split('-')[0]]||{};
        b[item.name.split('-')[0]][item.name.split('-')[1]]=item.value;     
    })
  return b; 
}
var tableData=testB(a);
var htmlTable='<tr><td>名字</td><td>1</td><td>2</td><td>3</td><td>4</td></tr>';
    for(var item in tableData){
        htmlTable+='<tr><td>'+item+'</td><td>'+tableData[item]['1']+'</td><td>'+tableData[item]['2']+'</td><td>'+tableData[item]['3']+'</td><td>'+tableData[item]['4']+'</td></tr>';    
    }   

  var tbl=document.createElement('table');
  document.getElementsByTagName('body')[0].appendChild(tbl);
  tbl.innerHTML=htmlTable;  
});

第二种比第一种方便很多，利用对象属性的遍历和匹配