2023年7月12日 星期三

jQuery.map 及 jQuery.grep 的用法 - 取得object陣列的部份欄位陣列, 符合條件的 object

目的: 1> jQuery.map  : 產生一個新的陣列,但只包含原陣列的特定欄位

          2>jQuery.grep: 產生一個新的陣列,但只包含合乎條件的項目   

Ex: var people =[
{name: 'Apple' , sex: 'female'},
{name: 'Bob' , sex: 'male'},
{name: 'Jacky' , sex: 'male'},
{name: 'Oliver' , sex: 'male'},
{name: 'Helen' , sex: 'female'},
]


處理說明: 1>取得 people 的 name 陣列

    var nameList = $.map(people, function(item, index) { return item.name; });
     --> 結果: [ 'Apple', 'Bob', 'Helen', 'Jacky', 'Oliver']


                  2>取得people 中為女姓的 陣列
     var femaleList = $.grep(people, function(item, index) { return item.sex === 'female'; });
     --> 結果:  [{name: 'Apple' , sex: 'female'},
                        {name: 'Helen' , sex: 'female'},
                      ]

傳統寫法:

1>取得 people 的 name 陣列
      var nameList=[];
      $.each(people,function(index,item){
          nameList.push(people.name);
       }
   -->
      var nameList=$.map(people,function(item,index){ return item.name; });


2>取得 people 中為 femail 的人員陣列

      var femaleList=[];
      $.each(people,function(index,item){
          if (item.sex=='female)
              femaleList.push(item);
       }
   -->
      var femaleList=$.grep(people,function(item,index){ 
       if (item.sex=='female'){
           return item; }
});


沒有留言:

張貼留言