FED实验室 - 专注WEB端开发和用户体验

Javascript Array.prototype.filter()

点滴Javascript 煦涵 4076℃ 0评论

现在我们有这么一个需求,过滤出下面数组中hero值为"Benjamin"的元素,并返回一个数组。

var sidekicks = [
    { name: "Robin",     hero: "Benjamin"   },
    { name: "Supergirl", hero: "Superman" },
    { name: "Oracle",    hero: "Benjamin"   },
    { name: "Krypto",    hero: "Superman" }
];

我们常规的方式是遍历比较然后存储:

function filter(arr) {
	var result = [];

	for(var i = 0, ilen = arr.length; i < ilen; i++) {
		var arri = arr[i];

		if(arri.hero === "Benjamin") {
			result.push(arri);
		}
	}
	return result;
}
// Outputs: [
//    { name: "Robin",  hero: "Benjamin"   },
//    { name: "Oracle", hero: "Benjamin"   }
// ]
console.log(filter(sidekicks));

幸运的是,在 ES5规范中,有一个Array.prototype.filter方法,我们可以使用这个方法来简化我们的操作:

function _filter(ele) {
	return ele.hero === "Benjamin";
}

// Outputs: [
//    { name: "Robin",  hero: "Benjamin"   },
//    { name: "Oracle", hero: "Benjamin"   }
// ]
console.log(sidekicks.filter(_filter));

如果您想详细了解Array.prototype.filter方法,请戳这里。上面说了filter方法是ES5中的方法,在IE8及以下浏览器中不兼容。如果你想兼容低版本浏览器,可以使用下面的Polyfill,或者ES5 shim,或者借助第三方库Underscore or Lo-Dash

Array.prototype.filter = Array.prototype.filter || function(fun /*, thisArg */){
    "use strict";

	if (this === void 0 || this === null)
		throw new TypeError();

	var t = Object(this);
	var len = t.length >>> 0;

	if (typeof fun !== "function")
		throw new TypeError();

	var res = [];
	var thisArg = arguments.length >= 2 ? arguments[1] : void 0;

	for (var i = 0; i < len; i++) {
		if (t.hasOwnProperty(i)) {
			var val = t[i];

			// NOTE: Technically this should Object.defineProperty at
			//       the next index, as push can be affected by
			//       properties on Object.prototype and Array.prototype.
			//       But that method's new, and collisions should be
			//       rare, so use the more-compatible alternative.
			if (fun.call(thisArg, val, i, t))
				res.push(val);
		}
	}

	return res;
};

以上就是对filter方法的基本描述,感谢您的阅读,文中不妥之处,还望批评指正。

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持or喜欢 (0)or分享 (0)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽