如何在JS中实现方法链接？
我想链接这些方法调用：
utils.map([1,2,3,4,5], function (el) { return ++el; } )和
utils.filter(function (el) {return !el%2; }它们各自都工作得很好，但以下各项不能正常工作。我怎样才能让下面的代码工作呢？
utils
.map([1,2,3,4,5], function (el) { return ++el; })
.filter(function (el) { return !el%2; }下面是我的utils对象：
var utils = {
each: function (collection, iteratee){
return collection.forEach(iteratee);
},
map: function (collection, iteratee) {
return collection.map(iteratee);
},
filter: function (collection, predicate) {
return collection.filter(predicate);
},
find: function (collection, predicate) {
return collection.find(predicate);
}
}我知道当我链接两个方法时，参数会发生变化，我只需要提供iteratee而不是一个集合。如何做到这一点？
提前谢谢。如果需要，我愿意解释一个特定的概念。
回答 3
Stack Overflow用户
发布于 2016-03-09 18:32:26
如果你想像那样链接函数，每个函数都需要返回"this“。
Stack Overflow用户
发布于 2016-03-09 18:48:54
请注意，为了使forEach可链接，您需要添加return语句。与MDN docs on forEach中的一样
与
map()或reduce()不同，它总是返回未定义的值，并且是不可链接的。典型的用例是在链的末端执行副作用。
其次，像map和filter这样的原始方法已经适用于链接。正如您在问题末尾提到的，您的方法需要第一个参数作为方法的主题，这是一种与链接不兼容的模式。使用链接时，主体必须是公开方法的对象。
您可以通过每次在链中传递新的utils-like对象来允许链接。对于创建utils的这些新实例，更容易将其定义为函数对象，因为这允许您使用new关键字创建新的utils对象。因为它实际上是一个构造函数，所以最好用大写字母来编写Utils：
function Utils(collection) { // "constructor"
this.collection = collection;
this.each = function(iteratee){
this.collection.forEach.call(this.collection, iteratee);
return this;
},
this.map = function(iteratee){
return new Utils(this.collection.map.call(this.collection, iteratee));
},
this.filter = function(predicate){
return new Utils(this.collection.filter.call(this.collection, predicate));
},
this.find = function(predicate){
return new Utils(this.collection.find.call(collection, predicate));
}
};
// test it
result = new Utils([1,2,3,4,5])
.map(function (el) { return ++el; })
.filter(function (el) { return !(el%2); });
document.write(JSON.stringify(result.collection));
输出：
2,4,6
在这里，Utils是一个构造函数，它返回一个对象，其中的方法作用于私有集合属性。除了forEach之外，每个方法都返回一个新的Utils对象，因为它只能返回当前对象。
因此，在此脚本中，对map的测试调用实际上是对Utils.map的调用。
应该说，与map、filter、...可以是链式的。但我想您有其他计划来扩展此模式。
次要注意:在表达式!el%2中，您可能希望首先计算模运算符，然后计算!，但它是在另一个方向执行的。因此，我在上面的代码中添加了括号。
Stack Overflow用户
发布于 2021-01-14 08:24:51
这是带有ES6类设计的trincot响应的更新版本。
class Collection {
constructor(collection) {
if (collection == null || !Array.isArray(collection)) {
throw new Error('collection is null or not an array');
}
this.collection = collection;
}
each(iteratee) {
this.collection.forEach.call(this.collection, iteratee);
return this;
}
map(iteratee) {
return new Collection(this.collection.map.call(this.collection, iteratee));
}
filter(predicate) {
return new Collection(this.collection.filter.call(this.collection, predicate));
}
find(predicate) {
return this.collection.find.call(this.collection, predicate);
}
contains(value) {
return this.collection.includes.call(this.collection, value);
}
get() {
return this.collection;
}
}
const result = new Collection([1, 2, 3, 4, 5])
.map(el => ++el)
.filter(el => !(el % 2))
.get();
console.log(result);
console.log(new Collection([1, 2, 3, 4, 5]).find(e => e === 2));
console.log(new Collection([1, 2, 3, 4, 5]).contains(2));.as-console-wrapper { top: 0; max-height: 100% !important; }
https://stackoverflow.com/questions/35888688
复制相似问题
腾讯云开发者
