jQuery 的陣列操作:$.map() 與 $.grep()

這陣子在整理系統內的程式碼,發現自己曾經使用一些過時的方法(例如:native javascript 操作陣列),而非使用 jQuery 提供的 API 來撰寫。以下整理並比較這兩種方法的差異。

先製造一筆假資料當範例。

function Person(name, sex) {
  this.name = name;
  this.sex = sex;
};

var people = [
  new Person('Apple', 'female'),
  new Person('Bob', 'male'),
  new Person('Helen', 'female'),
  new Person('Jacky', 'male'),
  new Person('Oliver', 'male')
];

這種產生物件的方法可參考-All-in-one Constructor Pattern

產生一個新的陣列,但只包含原陣列的特定欄位

產生一個新的陣列(nameList),只包含人名(name)這個欄位。

使用 JavaScript 操作

將每個項目的人名(name)丟(push)到新的陣列裡面。

var nameList = [];

$.each(people, function(index, value) {
  nameList1.push(value.name);
});

console.log(nameList); // ["Apple", "Bob", "Helen", "Jacky", "Oliver"]

使用 jQuery 操作

使用 $.map() 將項目的特定欄位丟(return)到新的陣列裡面。

var nameList = $.map(people, function(item, index) {
  return item.name;
})

console.log(nameList); // ["Apple", "Bob", "Helen", "Jacky", "Oliver"]

結果

得到一個新的陣列,只包含人名這個欄位。

$.map()

產生一個新的陣列,但只包含合乎條件的項目

取得女性項目。

使用 JavaScript 操作

先比對是否合乎條件(if(value.sex === 'female'))。若合乎條件,則將項目丟(push)到新的陣列裡面。

var femaleList = [];

$.each(people, function(index, value) {
  if(value.sex === 'female'){
    femaleList.push(value);
  }
});

console.log(femaleList);

使用 jQuery 操作

使用 $.grep() 將符合條件的項目丟(return)到新的陣列裡面。

var femaleList = $.grep(people, function(item, index) {
  return item.sex === 'female';
});

console.log(femaleList);

結果

得到一個新的陣列,但只包含合乎條件的項目。

$.grep()

「學而時習之,不亦說乎?」常常翻新程式碼,檢視是否能優化,是讓自己更進步的好方法 :)

參考資料


這篇文章的原始位置在這裡-jQuery 的陣列操作:$.map() 與 $.grep()

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。
comments powered by Disqus