es6 map()和filter()詳解【轉】

 

 

 

 

原文地址：http://www.zhangxinxu.com/wordpress/2013/04/es5%e6%96%b0%e5%a2%9e%e6%95%b0%e7%bb%84%e6%96%b9%e6%b3%95/

 

 

 

 

 

快捷入口：http://www.cnblogs.com/zxyun/p/7087667.html

 

 

map方法

map方法的做用不難理解，「映射」嘛，也就是原數組被「映射」成對應新數組。下面這個例子是數值項求平方：
var data = [1, 2, 3, 4];

var arrayOfSquares = data.map(function (item) {
  return item * item;
});

alert(arrayOfSquares); // 1, 4, 9, 16
callback須要有return值，若是沒有，就像下面這樣：
var data = [1, 2, 3, 4];
var arrayOfSquares = data.map(function() {});

arrayOfSquares.forEach(console.log);
結果以下圖，能夠看到，數組全部項都被映射成了undefined：

 

在實際使用的時候，咱們能夠利用map方法方便得到對象數組中的特定屬性值們。例以下面這個例子（以後的兼容demo也是該例子）：
var users = [
  {name: "張含韻", "email": "zhang@email.com"},
  {name: "江一燕",   "email": "jiang@email.com"},
  {name: "李小璐",  "email": "li@email.com"}
];

var emails = users.map(function (user) { return user.email; });

console.log(emails.join(", ")); // zhang@email.com, jiang@email.com, li@email.com

 

filter

filter
filter爲「過濾」、「篩選」之意。指數組filter後，返回過濾後的新數組。用法跟map極爲類似：
array.filter(callback,[ thisObject]);
filter的callback函數須要返回布爾值true或false. 若是爲true則表示，恭喜你，經過啦！若是爲false, 只能高歌「我只能無情地將你拋棄……」。
可能會疑問，必定要是Boolean值嗎？咱們能夠簡單測試下嘛，以下：
var data = [0, 1, 2, 3];
var arrayFilter = data.filter(function(item) {
    return item;
});
console.log(arrayFilter); // [1, 2, 3]
有此可見，返回值只要是弱等於== true/false就能夠了，而非非得返回 === true/false.
所以，咱們在爲低版本瀏覽器擴展時候，無需關心是否返回值是不是純粹布爾值（見下黑色代碼部分）：
if (typeof Array.prototype.filter != "function") {
  Array.prototype.filter = function (fn, context) {
    var arr = [];
    if (typeof fn === "function") {
       for (var k = 0, length = this.length; k < length; k++) {
          fn.call(context, this[k], k, this) && arr.push(this[k]);
       }
    }
    return arr;
  };
}
接着上面map篩選郵件的例子，您能夠狠狠地點擊這裏：兼容處理後filter方法測試demo
主要測試代碼爲：
var emailsZhang = users
  // 得到郵件
  .map(function (user) { return user.email; })
  // 篩選出zhang開頭的郵件
  .filter(function(email) {  return /^zhang/.test(email); });

console.log(emailsZhang.join(", ")); // zhang@email.com
filter demo頁面的結果截圖 張鑫旭-鑫空間-鑫生活
實際上，存在一些語法糖能夠實現map+filter的效果，被稱之爲「數組簡約式(Array comprehensions)」。目前，僅FireFox瀏覽器能夠實現，展現下又不會懷孕：
var zhangEmails = [user.email for each (user in users) if (/^zhang/.test(user.email)) ];

console.log(zhangEmails); // [zhang@email.com]