ES6高阶函数(books)=>(shelf)=>...逻辑及等价写法咨询

逻辑疑问点：(books) => (shelf) => ... 部分的逻辑是如何流转的

这个写法没有特殊语法黑魔法，本质是箭头函数简写+闭包+函数柯里化三个特性的组合使用。

等价无简写写法 #

你看到的核心简写代码：

const filter = (books) => (shelf) => books.filter((b) => b.shelf === shelf);

和下面这个无任何语法糖的原生JS写法完全等价：

function filter(books) {
  // 第一次调用传入书单时，返回一个新函数，靠闭包记住传入的书单数据
  return function getBooksByShelf(shelf) {
    // 第二次调用传入书架名时，才真正执行过滤逻辑
    return books.filter(function(singleBook) {
      return singleBook.shelf === shelf
    })
  }
}

逐行执行流转过程 #

• 初始化数据阶段：把shelf1和shelf2两个数组合并成allBooks全量书单数组，这一步和普通数组合并逻辑没有区别。
• 第一次调用filter(allBooks)：
  传入全量书单执行filter函数，此时不会执行任何过滤逻辑，只会返回内部定义的getBooksByShelf函数。因为JS闭包特性，这个返回的函数会永久记住本次传入的allBooks参数，我们把这个返回的函数赋值给filterBy变量。
• 第二次调用filterBy("b")：
  给之前拿到的filterBy函数传入目标书架标识"b"，此时才真正执行过滤逻辑：遍历闭包中存储的allBooks数组，筛选出所有shelf属性等于"b"的书籍返回，赋值给booksOnShelf。

简写规则说明 #

箭头函数的简写规则非常简单：如果箭头函数的函数体只有一行返回语句，可以直接省略包裹函数体的大括号{}和return关键字。
所以多层嵌套的单返回值箭头函数，就可以连续简写：

• 两层普通箭头函数完整写法：(a) => { return (b) => { return 最终计算结果 } }
• 简写后：(a) => (b) => 最终计算结果

你示例里的写法就是连续应用了两次这个简写规则而已。
最终执行完代码后booksOnShelf的值为：

[
  { name: "name3", shelf: "b" },
  { name: "name4", shelf: "b" }
]

内容的提问来源于stack exchange，提问作者osomaher