方法链允许一系列函数

Source: Dev.to

JavaScript 中的方法链

方法链指在同一个对象或结果上依次调用多个方法。这种模式在数组方法（如 filter、map、reduce 等）中很常见，因为每个方法都会返回一个新的数组或值，从而让下一个方法可以基于该结果继续操作。

示例：链式调用数组方法

const numbers = [1, 2, 3, 4, 5];

const result = numbers
  .filter(num => num % 2 === 0) // Filter even numbers
  .map(num => num * 2) // Double each remaining number
  .reduce((acc, num) => acc + num, 0); // Sum up the doubled numbers

console.log(result); // Outputs 18 (2*2 + 4*2 + 5*2)

工作原理

Filter

创建一个只包含原数组中偶数的新数组。

Map

将过滤后的数组中的每个数字翻倍，生成另一个新数组。

Reduce

对映射后的数组中的所有翻倍数字求和，得到一个单一的值（本例中为 18）。

示例：对对象数组进行链式调用

let cart = [
  { name: "Drink", price: 3.12 },
  { name: "Steak", price: 45.15 },
  { name: "Drink", price: 11.01 },
];

const drinkTotal = cart
  .filter(item => item.name === "Drink")
  .map(item => item.price)
  .reduce((total, price) => total + price, 0)
  .toFixed(2);

console.log(`Total Drink Cost $${drinkTotal}`); // Total Drink $14.13

方法链的好处

• 可读性提升 – 数据转换的流程清晰且线性。
• 减少中间变量的需求 – 每一步都会返回一个值供下一步使用。
• 更具声明性的代码 – 表达 应该做什么 而不是 如何管理临时状态。

祝编码愉快！ 🔥