大家好！前段時(shí)間，在瀏覽最新的 TC39 提案時(shí)，我偶然發(fā)現(xiàn)了一個(gè)讓我興奮但又有點(diǎn)懷疑的提案。這是關(guān)于 JavaScript 的部分應(yīng)用程序語法。乍一看，這似乎是解決許多常見編碼問題的完美方法，但當(dāng)我仔細(xì)考慮時(shí)，我意識(shí)到它既有很多值得喜歡的地方，也有一些改進(jìn)的空間。 ?

更好的是，這些擔(dān)憂引發(fā)了一個(gè)全新的想法，可以使 JavaScript 變得更加強(qiáng)大。讓我?guī)ど线@段旅程，并通過現(xiàn)實(shí)的例子來說明這些功能如何改變我們每天的編碼方式。

TLDR：這篇文章來自我對(duì)提案的舊問題：https://github.com/tc39/proposal-partial-application/issues/53

---

提案

部分應(yīng)用程序允許您“預(yù)設(shè)”函數(shù)的一些參數(shù)，返回一個(gè)新函數(shù)以供以后使用。我們當(dāng)前的代碼如下所示：

const fetchWithAuth = (path: string) => fetch(
  { headers: { Authorization: "Bearer token" } },
  path,
);
fetchWithAuth("/users");
fetchWithAuth("/posts");

該提案為此引入了 ~() 語法：

const fetchWithAuth = fetch~({ headers: { Authorization: "Bearer token" } }, ?);
fetchWithAuth("/users");
fetchWithAuth("/posts");

看看發(fā)生了什么？ fetchWithAuth 函數(shù)預(yù)先填充 headers 參數(shù)，因此您只需提供 URL。它類似于 .bind() 但更靈活且更易于閱讀。

該提案還允許您使用 ?作為未填充參數(shù)的占位符和...作為剩余參數(shù)。例如：

const sendEmail = send~(user.email, ?, ...);
sendEmail("Welcome!", "Hello and thanks for signing up!");
sendEmail("Reminder", "Don't forget to confirm your email.");

我最喜歡的部分是我不需要重復(fù)類型注釋！

聽起來很有用，對(duì)吧？但還有很多東西需要解開。

---

參考透明度的案例

讓我們從一個(gè)實(shí)際的痛點(diǎn)開始：函數(shù)閉包和過時(shí)的變量引用。

假設(shè)您正在安排一些通知。你可能會(huì)寫這樣的內(nèi)容：

function notify(state: { data?: Data }) {
  if (state.data) {
      setTimeout(() => alert(state.data), 1000)
  }
}

你已經(jīng)看到問題了嗎？ “數(shù)據(jù)”屬性可能會(huì)在超時(shí)期間發(fā)生變化，并且警報(bào)將不顯示任何內(nèi)容！修復(fù)此問題需要顯式傳遞值引用，希望“setTimeout”接受其他參數(shù)以將其傳遞到回調(diào)中：

function notify(state: { data?: Data }) {
  if (state.data) {
      setTimeout((data) => alert(data), 1000, state.data)
  }
}

還不錯(cuò)，但 API 并未廣泛支持。部分應(yīng)用可以使這種模式更加普遍：

function notify(state: { data?: Data }) {
  if (state.data) {
      setTimeout(alert~(state.data), 1000)
  }
}

通過在函數(shù)創(chuàng)建時(shí)鎖定 state.data，我們可以避免由于過時(shí)的引用而出現(xiàn)意外錯(cuò)誤。

---

減少重復(fù)計(jì)算

部分應(yīng)用程序的另一個(gè)實(shí)際好處是消除處理大型數(shù)據(jù)集時(shí)的冗余工作。

例如，你有一個(gè)映射邏輯，它需要為每個(gè)迭代步驟計(jì)算額外的數(shù)據(jù)：

const fetchWithAuth = (path: string) => fetch(
  { headers: { Authorization: "Bearer token" } },
  path,
);
fetchWithAuth("/users");
fetchWithAuth("/posts");

問題在于代理訪問 this.some.another，調(diào)用每個(gè)迭代步驟非常繁重。最好像這樣重構(gòu)這段代碼：

const fetchWithAuth = fetch~({ headers: { Authorization: "Bearer token" } }, ?);
fetchWithAuth("/users");
fetchWithAuth("/posts");

通過部分應(yīng)用，我們可以做得更簡潔：

const sendEmail = send~(user.email, ?, ...);
sendEmail("Welcome!", "Hello and thanks for signing up!");
sendEmail("Reminder", "Don't forget to confirm your email.");

通過烘焙共享計(jì)算，您可以使代碼更加簡潔且更易于遵循，而不會(huì)犧牲性能。

---

為什么要添加新語法？

現(xiàn)在，這就是我開始撓頭的地方。雖然提議的語法很優(yōu)雅，但 JavaScript 已經(jīng)有很多運(yùn)算符。特別是問號(hào)運(yùn)算符？。添加 ~() 可能會(huì)使語言更難學(xué)習(xí)和解析。

如果我們可以在不引入新語法的情況下實(shí)現(xiàn)相同的功能怎么辦？

---

基于方法的替代方案

想象一下使用 tie 方法擴(kuò)展 Function.prototype：

function notify(state: { data?: Data }) {
  if (state.data) {
      setTimeout(() => alert(state.data), 1000)
  }
}

它有點(diǎn)冗長，但避免引入全新的運(yùn)算符。使用額外的特殊符號(hào)作為占位符，我們可以替換問號(hào)。

function notify(state: { data?: Data }) {
  if (state.data) {
      setTimeout((data) => alert(data), 1000, state.data)
  }
}

它是完美的多重堆積，沒有額外的構(gòu)建時(shí)間復(fù)雜性！

function notify(state: { data?: Data }) {
  if (state.data) {
      setTimeout(alert~(state.data), 1000)
  }
}

但這只是冰山一角。它使得占位符概念可以在不同的 API 之間重用。

---

惰性操作：更進(jìn)一步

這就是事情變得非常有趣的地方。如果我們擴(kuò)展符號(hào)概念以啟用惰性操作會(huì)怎么樣？

示例 1：組合 .filter() 和 .map()

假設(shè)您正在處理電子商務(wù)網(wǎng)站的產(chǎn)品列表。您只想顯示打折商品，并對(duì)其價(jià)格進(jìn)行四舍五入。通常，你會(huì)這樣寫：

class Store  {
  data: { list: [], some: { another: 42 } }
  get computedList() {
    return this.list.map((el) => computeElement(el, this.some.another))
  }
  contructor() {
    makeAutoObservable(this)
  }
}

但這需要迭代數(shù)組兩次。通過惰性操作，我們可以將這兩個(gè)步驟合并為一次：

class Store  {
  data: { list: [], some: { another: 42 } }
  get computedList() {
    const { another } = this.some
    return this.list.map((el) => computeElement(el, another))
  }
  contructor() {
    makeAutoObservable(this)
  }
}

Symbol.skip 告訴引擎從最終數(shù)組中排除項(xiàng)目，使操作既高效又富有表現(xiàn)力！

示例 2：.reduce() 中的提前終止

想象一下計(jì)算前五次銷售的總收入。通常，您會(huì)在 .reduce() 中使用條件：

class Store  {
  data: { list: [], some: { another: 42 } }
  get computedList() {
    return this.list.map(computeElement~(?, this.some.another))
  }
  contructor() {
    makeAutoObservable(this)
  }
}

這可行，但它仍然處理數(shù)組中的每個(gè)項(xiàng)目。通過惰性減少，我們可以發(fā)出提前終止的信號(hào)：

function notify(state: { data?: Data }) {
  if (state.data) {
      setTimeout(alert.tie(state.data), 1000)
  }
}

Symbol.skip 的存在可以告訴引擎一旦滿足條件就停止迭代，從而節(jié)省寶貴的周期。

---

為什么這很重要

這些想法——部分應(yīng)用、引用透明和惰性操作——不僅僅是學(xué)術(shù)概念。他們解決現(xiàn)實(shí)世界的問題：

• 更簡潔的 API 使用： 預(yù)先鎖定參數(shù)并避免過時(shí)的引用。
• 提高性能：消除冗余計(jì)算并實(shí)現(xiàn)更高效的迭代。
• 更強(qiáng)的表現(xiàn)力：編寫簡潔的聲明性代碼，更易于閱讀和維護(hù)。

無論我們堅(jiān)持使用 ~() 還是探索像 tie 和 Symbol.skip 這樣的替代方案，基本原理都具有巨大的潛力來提高我們編寫 JavaScript 的水平。

我投票支持符號(hào)方法，因?yàn)樗苋菀滋畛洳⑶矣卸喾N用途。

---

接下來是什么？

我很好奇——你覺得怎么樣？ ~() 是正確的方向嗎，還是我們應(yīng)該探索基于方法的方法？ 惰性操作將如何影響您的工作流程？評(píng)論里一起討論吧！

JavaScript 的美妙之處在于它由社區(qū)驅(qū)動(dòng)的演變。通過分享和辯論想法，我們可以塑造一種更適合每個(gè)人的語言。讓我們繼續(xù)對(duì)話吧！

以上是重新思考 JavaScript。部分應(yīng)用、引用透明和惰性操作的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！