如何在 JS 中完成方法链？

Question

我想链接这些方法调用：

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);
    }
}

我知道当我链接两个方法时，参数会发生变化，我必须只提供迭代对象而不是集合。如何做到这一点？

提前致谢。如果需要，我愿意解释特定概念。

Answer 1

如果你想像这样链接函数，每个函数都需要返回“this”。

Answer 2

请注意，为了使forEach 可链接，您需要添加return 语句。如MDN docs on forEach：

与map() 或reduce() 不同，它总是返回未定义的值并且不可链接。典型的用例是在链的末端执行副作用。

其次，map 和 filter 这样的原始方法已经适合链接。正如您在问题末尾已经提到的，您的方法要求第一个参数是方法的 subject，这是一种与链接不兼容的模式。使用链接，主体必须是公开方法的对象。

您可以通过每次通过链传递一个类似utils 的新对象来允许链接。要创建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 是一个构造函数，它返回一个对象，该对象具有作用于私有集合属性的方法。每个方法都返回一个新的Utils 对象，forEach 的情况除外，因为它只能返回当前对象。

所以在这个脚本中，对map 的测试调用实际上是对Utils.map 的调用。

应该说这并没有比 map, filter, ... 可以链接的原生方式带来太多好处。但我想你还有其他计划来扩展这种模式。

次要注意：在表达式!el%2 中，您可能想先计算模运算符，然后计算!，但它执行的方向相反。所以我在上面的代码中加了括号。

Answer 3

这是 trincot 响应的更新版本，采用 ES6 类设计。

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; }