javascript - JavaScript 中的菊花链方法

Question

周末可能会想到这一点，我很想知道当像下面的代码一样将方法链接在一起时到底发生了什么:

const posts = [{}, {}, {}, ...]

posts
  .filter(({ node }) => node.fields.slug !== '/about/')
  .reverse()
  .slice(0, 5)

每个 Array.prototype 方法在以某种方式转换数据后返回一个数组。 filter 和 slice 都返回原始数组的副本，并带有规定的转换。我很想知道 JavaScript 是否像我在 elixir 中看到的那样执行一些内部管道。我认为每个方法都需要一个数组才能工作，但不一定作为参数。

我不相信上面的相似。我知道第一个 arg 必须是管道运算符在 elixir 中工作的先前操作返回的任何内容:

posts
  |> filter(({ node }) => node.fields.slug !== '/about/')
  |> reverse()
  |> slice(0,5)

不确定到哪里去更好地理解这一点，所以如果你能给我指明正确的方向，我会继续阅读。我只是想知道，非常感谢您提供的信息。

Answer 1

没有什么比返回 this 或其他一些新对象更复杂的了。一个简单的例子是:

function Num(val) { // Num contructor
    this.val = val;
};

Num.prototype.increment = function () {
    this.val++;
    return this;
}

Num.prototype.decrement = function () {
    this.val--;
    return this;
}

Num.prototype.getVal = function(){
    return this.val;
}

var num = new Num(0);
num.increment().increment().decrement().increment();
console.log(num.getVal()); // 2

非链接方式是:

var num = new Num(0);
num.increment();
num.increment();
num.decrement();
num.increment();
console.log(num.getVal()); // 2

使用链接的一个很好的理由是当方法返回一个新的不可变对象(immutable对象)(例如字符串)但您不关心中间对象，您只想要最终结果时:

var username = " Dave"; // user input with leading whitespace
var lowercase = username.trim().toLowerCase(); // "dave"

在这种情况下不使用链接不会产生所需的结果(无空格):

var username = " Dave"; // user input with leading whitespace
username.trim();
var lowercase = username.toLowerCase(); // " dave"

如果您重新分配返回值，您仍然可以避免链接:

var username = " Dave"; // user input with leading whitespace
var lowercase = username.trim();
lowercase = lowercase.toLowerCase(); // "dave"

为了完整起见，如果您想使上面的 Num 示例不可变:

Num.prototype.increment = function () {
    return new Num(this.val + 1);
}