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": "[e-mail]"},
  {name: "江一燕",   "email": "[e-mail]"},
  {name: "李小璐",  "email": "[e-mail]"}
];

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

console.log(emails.join(", ")); // [e-mail], [e-mail], [e-mail]

 

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(", ")); // [e-mail]
filter demo頁面的結果截圖 張鑫旭-鑫空間-鑫生活
實際上，存在一些語法糖可以實現map+filter的效果，被稱之為“數組簡約式(Array comprehensions)”。目前，僅FireFox瀏覽器可以實現，展示下又不會懷孕：
var zhangEmails = [user.email for each (user in users) if (/^zhang/.test(user.email)) ];

console.log(zhangEmails); // [[e-mail]]