Mar*_*ijn 2 javascript functional-programming
在尝试编写一些非常棒的JS时,我遇到了一些奇怪的JS行为.我创建了一段代码来演示我的问题:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var images = $('.images').children();
var filtered = images.filter(function(i, image) {
console.log(this);
}, "abc");
});
</script>
</head>
<body>
<div class="options">
<div class="filters">
</div>
<ol class="pagination">
</ol>
</div>
<div class="results">
<ul class="images">
<li data-category="Zakelijk">Result 1</li>
<li data-category="Speels">Result 2</li>
<li data-category="Blogging">Result 3</li>
<li data-category="Zakelijk">Result 4</li>
<li data-category="Speels">Result 5</li>
<li data-category="Blogging">Result 6</li>
<li data-category="Zakelijk">Result 7</li>
<li data-category="Speels">Result 8</li>
<li data-category="Blogging">Result 9</li>
<li data-category="Zakelijk">Result 10</li>
<li data-category="Speels">Result 11</li>
<li data-category="Blogging">Result 12</li>
<li data-category="Zakelijk">Result 13</li>
<li data-category="Speels">Result 14</li>
<li data-category="Blogging">Result 15</li>
</ul>
</div>
</body>
</html>
好的,现在我的问题.使用Array.filter方法时,您将回调函数作为第一个参数传递,将可选上下文作为第二个参数传递.正如你所看到的,我正在传递"abc"作为背景(这是荒谬的,当然).我希望我的控制台会抛出很多"abc",而是打印出jQuery元素!
请问有人对此有所启发吗？
谢谢,
马亭
正如你所看到的,我正在传递"abc"作为背景(这是荒谬的,当然).我希望我的控制台会抛出很多"abc",而是打印出jQuery元素!
你使用的filter是没有上下文参数的jQuery,而不是ES5 Array#filter,因为你正在调用filter一个jQuery对象,而jQuery对象不是数组(虽然它们提供了很多类似于数组的功能,而且有几个"方法"具有相似的名称 - 包括filter).
三种选择:
makeArray您可以使用jQuery makeArray将jQuery对象转换为数组,例如:
$(function() {
var images = $.makeArray($('.images').children());
var filtered = images.filter(function(i, image) {
console.log(this);
}, "abc");
});
proxy/bind或者,您可以使用jQuery的proxy函数(或ES5 Function#bind)来绑定您传递给jQuery的迭代器函数,filter因此它忽略了thisjQuery的供应:
$(function() {
var images = $('.images').children();
var filtered = images.filter($.proxy(function(i, image) {
console.log(this);
}, "abc"));
});
Array#filterjQuery对象或者您可以Array#filter直接应用于jQuery对象:
$(function() {
var images = $('.images').children();
var filtered = Array.prototype.filter.call(images, function(i, image) {
console.log(this);
}, "abc");
});
......既然Array#filter被明确定义到任何类似数组上工作,而不仅仅是Array秒.最后可能实际上是最有效的方法.小提琴