从混乱到清晰：JavaScript 中函数组合和管道的声明式方法

目录

• 整洁代码的艺术
• 纯函数的魔力
• 用函数组合搭建桥梁
• 使用管道简化代码
• 调整管道以满足不断变化的需求
• 避免函数组合的陷阱
• 走向优雅的旅程

---

干净代码的艺术？

你是否曾经盯着别人的代码思考，“这是什么样的魔法？”你没有解决真正的问题，而是迷失在循环、条件和变量的迷宫中。这是所有开发者面临的斗争——混乱与清晰之间的永恒之战。

代码应该编写供人类阅读，并且只是顺便供机器执行。 — Harold Abelson

但是不要害怕！ 干净的代码并不是隐藏在开发者地牢中的神秘宝藏——它是一项你可以掌握的技能。其核心在于声明式编程，其中焦点转移到代码做什么，而将如何留在后台。

让我们通过一个例子来实现这一点。假设您需要找到列表中的所有偶数。以下是我们中的许多人以命令式方法开始的：

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = [];
for (let i = 0; i 



<p>当然，它有效。但说实话，它很吵：手动循环、索引跟踪和不必要的状态管理。乍一看，很难看出代码到底在做什么。现在，让我们将其与<strong>声明式</strong>方法进行比较：<br>
</p>

<pre class="brush:php;toolbar:false">const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

一行，没有杂乱——只有明确的意图：“过滤偶数。”这是简单和重点与复杂和噪音之间的区别。

为什么清洁代码很重要？‍？

干净的代码不仅仅是为了看起来漂亮，而是为了更聪明地工作。六个月后，您是愿意在令人困惑的逻辑迷宫中挣扎，还是阅读实际上可以自我解释的代码？

虽然命令式代码占有一席之地，尤其是在性能至关重要的情况下，但声明性代码通常以其可读性和易于维护性而获胜。

这是一个快速并排比较：

Imperative	Declarative
Lots of boilerplate	Clean and focused
Step-by-step instructions	Expresses intent clearly
Harder to refactor or extend	Easier to adjust and maintain

一旦你接受了干净的声明式代码，你就会想知道如果没有它你是如何管理的。这是构建可预测、可维护系统的关键——而这一切都始于纯函数的魔力。因此，拿起你的编码棒（或一杯浓咖啡☕），加入编写更干净、更强大的代码的旅程吧。 ?✨

---

纯函数的魔力？

您是否遇到过一个函数试图执行所有操作 - 获取数据、处理输入、记录输出，甚至可能冲泡咖啡？这些多任务野兽可能看起来高效，但它们是被诅咒的文物：脆弱、复杂，维护起来是一场噩梦。当然，一定有更好的方法。

简单是可靠性的先决条件。 — Edsger W. Dijkstra

纯净的本质⚗️

纯函数就像施放一个完美的咒语——对于相同的输入它总是产生相同的结果，没有副作用。这种魔法简化了测试、简化了调试并抽象了复杂性以确保可重用性。

要查看差异，这里有一个不纯函数：

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = [];
for (let i = 0; i 



<p>这个函数会修改全局状态——就像一个出错的咒语一样，它不可靠且令人沮丧。它的输出依赖于不断变化的折扣变量，将调试和重用变成了一项乏味的挑战。</p>

<p>现在，让我们制作一个纯函数：<br>
</p>

<pre class="brush:php;toolbar:false">const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

没有全局状态，这个函数是可预测的并且是独立的。测试变得简单，并且可以作为更大工作流程的一部分进行重用或扩展。

通过将任务分解为小的、纯函数，您可以创建一个既健壮又令人愉快的代码库。所以，下次你编写函数时，问问自己：“这个咒语是否专注且可靠——或者它会成为一个被诅咒的神器，准备释放混乱吗？”

---

用功能组合搭建桥梁？

有了纯函数，我们就掌握了简单的技巧。就像乐高积木？，它们是独立的，但仅靠积木并不能建造一座城堡。神奇之处在于将它们结合起来——函数组合的本质，其中工作流在抽象实现细节的同时解决问题。

让我们通过一个简单的例子来看看它是如何工作的：计算购物车的总数。首先，我们将可重用的实用函数定义为构建块：

let discount = 0;   

const applyDiscount = (price: number) => {
  discount += 1; // Modifies a global variable! ?
  return price - discount;
};

// Repeated calls yield inconsistent results, even with same input!
console.log(applyDiscount(100)); // Output: 99
console.log(applyDiscount(100)); // Output: 98
discount = 100;
console.log(applyDiscount(100)); // Output: -1 ?

现在，我们将这些实用函数组合成一个工作流程：

const applyDiscount = (price: number, discountRate: number) => 
  price * (1 - discountRate);

// Always consistent for the same inputs
console.log(applyDiscount(100, 0.1)); // 90
console.log(applyDiscount(100, 0.1)); // 90

这里，每个函数都有明确的目的：求和价格、应用折扣以及对结果进行四舍五入。它们一起形成一个逻辑流，其中一个的输出馈入下一个。 域逻辑很清晰——计算带有折扣的结帐总额。

此工作流程体现了函数组合的力量：专注于内容（代码背后的意图），同时让如何（实现细节）淡入背景。

---

使用管道简化代码✨

函数组合很强大，但随着工作流程的增长，深度嵌套的组合可能会变得难以遵循，就像拆包俄罗斯娃娃？。管道进一步抽象，提供反映自然推理的线性转换序列。

构建一个简单的管道实用程序？️

许多 JavaScript 库（你好，函数式编程爱好者！？）都提供管道实用程序，但创建自己的库却出奇地简单：

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = [];
for (let i = 0; i 



<p>该实用程序将操作链接成清晰、渐进的流程。使用管道重构我们之前的结账示例可以得到：<br>
</p>

<pre class="brush:php;toolbar:false">const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

结果几乎是诗意的：每个阶段都建立在上一个阶段的基础上。这种一致性不仅美观，而且实用，使工作流程足够直观，即使是非开发人员也可以跟踪并理解正在发生的事情。

与 TypeScript 的完美合作？

TypeScript 通过定义严格的输入输出关系来确保管道中的类型安全。使用函数重载，您可以输入如下管道实用程序：

let discount = 0;   

const applyDiscount = (price: number) => {
  discount += 1; // Modifies a global variable! ?
  return price - discount;
};

// Repeated calls yield inconsistent results, even with same input!
console.log(applyDiscount(100)); // Output: 99
console.log(applyDiscount(100)); // Output: 98
discount = 100;
console.log(applyDiscount(100)); // Output: -1 ?

未来一瞥？

虽然创建自己的实用程序很有洞察力，但 JavaScript 提议的管道运算符 (|>) 将使使用本机语法的链接转换变得更加简单。

const applyDiscount = (price: number, discountRate: number) => 
  price * (1 - discountRate);

// Always consistent for the same inputs
console.log(applyDiscount(100, 0.1)); // 90
console.log(applyDiscount(100, 0.1)); // 90

管道不仅简化了工作流程，还减少了认知开销，提供了超出代码范围的清晰度和简单性。

---

调整管道以满足不断变化的需求？

在软件开发中，需求可能会瞬间发生变化。管道使适应变得毫不费力——无论您是添加新功能、重新排序流程还是完善逻辑。让我们通过一些实际场景来探讨管道如何处理不断变化的需求。

添加税收计算？️

假设我们需要在结帐过程中包含销售税。管道使这一切变得简单 - 只需定义新步骤并将其插入正确的位置即可：

type CartItem = { price: number };

const roundToTwoDecimals = (value: number) =>
  Math.round(value * 100) / 100;

const calculateTotal = (cart: CartItem[]) =>
  cart.reduce((total, item) => total + item.price, 0);

const applyDiscount = (discountRate: number) => 
  (total: number) => total * (1 - discountRate);

如果要求发生变化（例如在折扣之前征收销售税），管道可以轻松适应：

// Domain-specific logic derived from reusable utility functions
const applyStandardDiscount = applyDiscount(0.2);

const checkout = (cart: CartItem[]) =>
  roundToTwoDecimals(
    applyStandardDiscount(
      calculateTotal(cart)
    )
  );

const cart: CartItem[] = [
  { price: 19.99 },
  { price: 45.5 },
  { price: 3.49 },
];

console.log(checkout(cart)); // Output: 55.18

添加条件功能：会员折扣？️

管道还可以轻松处理条件逻辑。想象一下为会员提供额外折扣。首先，定义一个实用程序来有条件地应用转换：

const pipe =
  (...fns: Function[]) =>
  (input: any) => fns.reduce((acc, fn) => fn(acc), input);

接下来，将其动态合并到管道中：

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = [];
for (let i = 0; i 



<p>恒等函数充当空操作，使其可重用于其他条件转换。这种灵活性使管道能够无缝适应不同的条件，而不会增加工作流程的复杂性。</p>

<h3>
  
  
  扩展调试管道？
</h3>

<p>调试管道可能会让人感觉很棘手——就像大海捞针一样——除非您配备了正确的工具。一个简单但有效的技巧是插入日志函数来阐明每个步骤：<br>
</p>

<pre class="brush:php;toolbar:false">const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

虽然管道和函数组合提供了显着的灵活性，但了解它们的怪癖可以确保您能够运用它们的力量，而不会陷入常见的陷阱。

---

避免函数组合的陷阱？️

函数组合和管道为您的代码带来了清晰和优雅，但就像任何强大的魔法一样，它们也可能隐藏着陷阱。让我们揭开它们并学习如何轻松避免它们。

陷阱#1：意想不到的副作用？

副作用可能会潜入您的作品中，将可预测的工作流程变成混乱的工作流程。修改共享状态或依赖外部变量可能会使您的代码变得不可预测。

let discount = 0;   

const applyDiscount = (price: number) => {
  discount += 1; // Modifies a global variable! ?
  return price - discount;
};

// Repeated calls yield inconsistent results, even with same input!
console.log(applyDiscount(100)); // Output: 99
console.log(applyDiscount(100)); // Output: 98
discount = 100;
console.log(applyDiscount(100)); // Output: -1 ?

修复：确保管道中的所有函数都是纯净的。

const applyDiscount = (price: number, discountRate: number) => 
  price * (1 - discountRate);

// Always consistent for the same inputs
console.log(applyDiscount(100, 0.1)); // 90
console.log(applyDiscount(100, 0.1)); // 90

陷阱#2：管道过于复杂？

管道非常适合分解复杂的工作流程，但过度使用可能会导致难以遵循的混乱链条。

type CartItem = { price: number };

const roundToTwoDecimals = (value: number) =>
  Math.round(value * 100) / 100;

const calculateTotal = (cart: CartItem[]) =>
  cart.reduce((total, item) => total + item.price, 0);

const applyDiscount = (discountRate: number) => 
  (total: number) => total * (1 - discountRate);

修复：将相关步骤分组到封装意图的高阶函数中。

// Domain-specific logic derived from reusable utility functions
const applyStandardDiscount = applyDiscount(0.2);

const checkout = (cart: CartItem[]) =>
  roundToTwoDecimals(
    applyStandardDiscount(
      calculateTotal(cart)
    )
  );

const cart: CartItem[] = [
  { price: 19.99 },
  { price: 45.5 },
  { price: 3.49 },
];

console.log(checkout(cart)); // Output: 55.18

陷阱#3：调试盲点？

调试管道时，确定哪个步骤导致了问题可能具有挑战性，尤其是在长链中。

修复：注入日志记录或监视函数来跟踪中间状态，正如我们之前在每个步骤中打印消息和值的日志函数所看到的那样。

陷阱#4：类方法中的上下文丢失？

当从类中编写方法时，您可能会丢失正确执行它们所需的上下文。

const pipe =
  (...fns: Function[]) =>
  (input: any) => fns.reduce((acc, fn) => fn(acc), input);

修复：使用 .bind(this) 或箭头函数来保留上下文。

const checkout = pipe(
  calculateTotal,
  applyStandardDiscount,
  roundToTwoDecimals
);

通过留意这些陷阱并遵循最佳实践，无论您的需求如何变化，您都将确保您的组合和管道保持高效且优雅。

---

走向优雅的旅程？

掌握函数组合和管道不仅仅是为了编写更好的代码，而是为了发展你的思维方式，超越实现。它是关于打造能够解决问题的系统，读起来像一个讲得很好的故事，并通过抽象和直观的设计激发灵感。

无需重新发明轮子？

像 RxJS、Ramda 和 lodash-fp 这样的库提供了由活跃社区支持的生产就绪、经过实战测试的实用程序。它们使您能够专注于解决特定领域的问题，而不是担心实现细节。

指导你练习的要点？️

• 干净的代码：干净的代码不仅仅是外观，而是更智能地工作。它创建的解决方案可简化调试、协作和维护。六个月后，您会感谢自己编写的代码实际上能够自我解释。
• 函数组合：结合纯粹、专注的函数来设计工作流程，优雅、清晰地解决复杂问题。
• 管道：通过将逻辑塑造成清晰、直观的流程来抽象复杂性。如果做得好，管道可以提高开发人员的工作效率并使工作流程变得如此清晰，即使是非开发人员也可以理解它们。

最终，您的代码不仅仅是一系列指令——它是您正在讲述的故事，您正在施展的咒语。精心打造，让优雅引领您的旅程。 ?✨

以上是从混乱到清晰：JavaScript 中函数组合和管道的声明式方法的详细内容。更多信息请关注PHP中文网其他相关文章！