各位老铁，大家好！我是你们的老朋友，今天咱们来聊聊JavaScript中一个相对高级但贼好用的特性——Pattern Matching（模式匹配）。
虽然JavaScript标准本身并没有直接内置像Rust、Scala或Haskell那样强大的模式匹配机制，但我们可以通过一些技巧和库，在JavaScript中实现类似的功能，让代码更简洁、更具可读性，并且能处理更复杂的逻辑。
Pattern Matching是个啥？
简单来说，Pattern Matching就是一种根据数据的结构或值来执行不同操作的方式。它有点像switch语句，但更强大，可以匹配更复杂的模式，比如对象的形状、数组的结构等等。
为啥要用Pattern Matching？
- 代码更简洁： 避免大量的
if...else或switch语句嵌套。 - 可读性更高： 模式匹配的语法通常更接近数据的结构，更容易理解代码的意图。
- 类型安全： 可以在编译时或运行时检查匹配的模式是否符合预期，减少错误。
- 强大的解构能力： 可以同时解构数据并进行匹配，一步到位。
JavaScript中的Pattern Matching实现方式
由于JavaScript本身没有内置Pattern Matching，我们可以通过以下几种方式来实现：
- 基于
if...else和switch的朴素实现 - 使用第三方库
接下来，咱们就逐一看看这些方法，并通过实例代码来演示它们的用法。
1. 基于if...else和switch的朴素实现
这是最基本的方法，也是最容易理解的。它利用JavaScript的条件语句和逻辑运算符，来模拟模式匹配的行为。
例子：匹配不同的HTTP状态码
function handleHttpStatus(statusCode) {
if (statusCode === 200) {
console.log("请求成功");
} else if (statusCode === 400) {
console.log("客户端错误");
} else if (statusCode === 404) {
console.log("资源未找到");
} else if (statusCode >= 500 && statusCode < 600) {
console.log("服务器错误");
} else {
console.log("未知状态码");
}
}
handleHttpStatus(200); // 输出: 请求成功
handleHttpStatus(404); // 输出: 资源未找到
handleHttpStatus(503); // 输出: 服务器错误
handleHttpStatus(999); // 输出: 未知状态码优点：
- 简单易懂，不需要额外的依赖。
- 适用于简单的模式匹配场景。
缺点：
- 代码冗长，容易出错，特别是当模式变得复杂时。
- 可读性差，难以维护。
- 无法进行深层次的解构。
例子：匹配对象属性
function processUser(user) {
if (user && user.name && user.age) {
console.log(`用户 ${user.name}，年龄 ${user.age}`);
if (user.address && user.address.city) {
console.log(`居住在 ${user.address.city}`);
} else {
console.log("用户地址信息不完整");
}
} else {
console.log("用户信息不完整");
}
}
const user1 = { name: "张三", age: 30, address: { city: "北京" } };
const user2 = { name: "李四", age: 25 };
const user3 = null;
processUser(user1); // 输出: 用户 张三，年龄 30n居住在北京
processUser(user2); // 输出: 用户 李四，年龄 25n用户地址信息不完整
processUser(user3); // 输出: 用户信息不完整可以看到，当需要匹配嵌套的对象属性时，代码会变得非常复杂。
2. 使用第三方库
为了解决朴素实现的缺点，我们可以使用一些第三方库来提供更强大的Pattern Matching功能。常用的库包括：
- ts-pattern: 一个专门为TypeScript设计的Pattern Matching库，支持多种模式匹配，包括字面量、变量、通配符、数组、对象等。
- match-iz: 一个轻量级的Pattern Matching库，支持简单的模式匹配和解构。
- ramda: 一个函数式编程库，提供了一些用于模式匹配的函数，如
cond。
2.1 使用 ts-pattern (虽然名字带ts，但它也能在js里使用)
ts-pattern 是一个功能非常强大的库，它提供了丰富的模式匹配语法，可以轻松处理各种复杂的场景。
安装：
npm install ts-pattern例子：匹配不同的数据类型
const { match, P } = require('ts-pattern');
function processData(data) {
return match(data)
.with(P.string, (str) => `这是一个字符串: ${str}`)
.with(P.number, (num) => `这是一个数字: ${num}`)
.with(P.boolean, (bool) => `这是一个布尔值: ${bool}`)
.with(P.nullish, () => "这是 null 或 undefined")
.with({ type: 'user', name: P.string, age: P.number }, (user) => `这是一个用户对象: ${user.name}, ${user.age}`)
.otherwise(() => "未知数据类型");
}
console.log(processData("hello")); // 输出: 这是一个字符串: hello
console.log(processData(123)); // 输出: 这是一个数字: 123
console.log(processData(true)); // 输出: 这是一个布尔值: true
console.log(processData(null)); // 输出: 这是 null 或 undefined
console.log(processData({ type: 'user', name: "王五", age: 35 })); // 输出: 这是一个用户对象: 王五, 35
console.log(processData([])); // 输出: 未知数据类型解释：
match(data)：开始一个模式匹配表达式，data是要匹配的数据。.with(P.string, (str) => ...)：定义一个匹配规则，如果data是字符串，则执行后面的函数，并将字符串赋值给str。P.string、P.number、P.boolean、P.nullish：是ts-pattern提供的预定义模式，用于匹配不同的数据类型。{ type: 'user', name: P.string, age: P.number }：匹配一个对象，并且对象的type属性必须是"user"，name属性必须是字符串，age属性必须是数字。.otherwise(() => ...)：定义一个默认的匹配规则，如果所有其他的规则都不匹配，则执行这个函数。
例子：匹配数组结构
const { match, P } = require('ts-pattern');
function processArray(arr) {
return match(arr)
.with([1, 2, 3], () => "这是一个包含 1, 2, 3 的数组")
.with([P.number, P.number, P.number], (a, b, c) => `这是一个包含三个数字的数组: ${a}, ${b}, ${c}`)
.with([P.string, P.string, P.string], (a, b, c) => `这是一个包含三个字符串的数组: ${a}, ${b}, ${c}`)
.with(P.array(P.number), (numbers) => `这是一个全部是数字的数组: ${numbers.join(', ')}`)
.otherwise(() => "未知数组结构");
}
console.log(processArray([1, 2, 3])); // 输出: 这是一个包含 1, 2, 3 的数组
console.log(processArray([4, 5, 6])); // 输出: 这是一个包含三个数字的数组: 4, 5, 6
console.log(processArray(["a", "b", "c"])); // 输出: 这是一个包含三个字符串的数组: a, b, c
console.log(processArray([7, 8, 9, 10])); // 输出: 这是一个全部是数字的数组: 7, 8, 9, 10
console.log(processArray([1, "a", 3])); // 输出: 未知数组结构解释：
[1, 2, 3]：匹配一个包含1, 2, 3的数组。[P.number, P.number, P.number]：匹配一个包含三个数字的数组，并将这三个数字分别赋值给a, b, c。P.array(P.number): 匹配一个全部由数字组成的数组，并将整个数组赋值给numbers。
例子：使用通配符
const { match, P } = require('ts-pattern');
function processPoint(point) {
return match(point)
.with({ x: 0, y: P.number }, (p) => `在 x 轴上，y 坐标为 ${p.y}`)
.with({ x: P.number, y: 0 }, (p) => `在 y 轴上，x 坐标为 ${p.x}`)
.with({ x: P.number, y: P.number }, (p) => `不在坐标轴上，坐标为 (${p.x}, ${p.y})`)
.otherwise(() => "不是一个有效的坐标点");
}
console.log(processPoint({ x: 0, y: 5 })); // 输出: 在 x 轴上，y 坐标为 5
console.log(processPoint({ x: 3, y: 0 })); // 输出: 在 y 轴上，x 坐标为 3
console.log(processPoint({ x: 2, y: 4 })); // 输出: 不在坐标轴上，坐标为 (2, 4)
console.log(processPoint({ z: 1 })); // 输出: 不是一个有效的坐标点解释：
{ x: 0, y: P.number }：匹配一个对象，x属性必须是0，y属性必须是数字，并将y属性的值赋值给p.y。P.number：是一个通配符，表示匹配任意数字。
2.2 使用 match-iz
match-iz 是一个更轻量级的Pattern Matching库，它提供了简单的模式匹配和解构功能。
安装：
npm install match-iz例子：匹配不同的数据类型
const match = require('match-iz').default;
function processData(data) {
return match(data)(
(x = String) => `这是一个字符串: ${x}`,
(x = Number) => `这是一个数字: ${x}`,
(x = Boolean) => `这是一个布尔值: ${x}`,
(x = null) => "这是 null",
(x = undefined) => "这是 undefined",
(x = { type: 'user', name: String, age: Number }) => `这是一个用户对象: ${x.name}, ${x.age}`,
() => "未知数据类型"
);
}
console.log(processData("hello")); // 输出: 这是一个字符串: hello
console.log(processData(123)); // 输出: 这是一个数字: 123
console.log(processData(true)); // 输出: 这是一个布尔值: true
console.log(processData(null)); // 输出: 这是 null
console.log(processData(undefined)); // 输出: 这是 undefined
console.log(processData({ type: 'user', name: "王五", age: 35 })); // 输出: 这是一个用户对象: 王五, 35
console.log(processData([])); // 输出: 未知数据类型解释：
match(data)：开始一个模式匹配表达式，data是要匹配的数据。(x = String) => ...：定义一个匹配规则，如果data是字符串，则执行后面的函数，并将字符串赋值给x。 这里的String、Number、Boolean实际上是构造函数，match-iz 用它们来判断类型。(x = { type: 'user', name: String, age: Number }) => ...：匹配一个对象，并且对象的type属性必须是"user"，name属性必须是字符串，age属性必须是数字, 并将对象赋值给x。() => ...：定义一个默认的匹配规则，如果所有其他的规则都不匹配，则执行这个函数。
例子：匹配数组结构
const match = require('match-iz').default;
function processArray(arr) {
return match(arr)(
([1, 2, 3]) => "这是一个包含 1, 2, 3 的数组",
([a = Number, b = Number, c = Number]) => `这是一个包含三个数字的数组: ${a}, ${b}, ${c}`,
([a = String, b = String, c = String]) => `这是一个包含三个字符串的数组: ${a}, ${b}, ${c}`,
() => "未知数组结构"
);
}
console.log(processArray([1, 2, 3])); // 输出: 这是一个包含 1, 2, 3 的数组
console.log(processArray([4, 5, 6])); // 输出: 这是一个包含三个数字的数组: 4, 5, 6
console.log(processArray(["a", "b", "c"])); // 输出: 这是一个包含三个字符串的数组: a, b, c
console.log(processArray([1, "a", 3])); // 输出: 未知数组结构2.3 使用 ramda
ramda 是一个强大的函数式编程库，它提供了一些用于模式匹配的函数，如 cond。
安装：
npm install ramda例子：匹配不同的HTTP状态码
const R = require('ramda');
const handleHttpStatus = R.cond([
[R.equals(200), R.always("请求成功")],
[R.equals(400), R.always("客户端错误")],
[R.equals(404), R.always("资源未找到")],
[R.both(R.gte(R.__, 500), R.lt(R.__, 600)), R.always("服务器错误")],
[R.T, R.always("未知状态码")]
]);
console.log(handleHttpStatus(200)); // 输出: 请求成功
console.log(handleHttpStatus(404)); // 输出: 资源未找到
console.log(handleHttpStatus(503)); // 输出: 服务器错误
console.log(handleHttpStatus(999)); // 输出: 未知状态码解释：
R.cond：接受一个条件-函数对的列表，并返回第一个条件为真的函数的结果。R.equals(200)：判断输入是否等于 200。R.always("请求成功")：返回一个始终返回 "请求成功" 的函数。R.both(R.gte(R.__, 500), R.lt(R.__, 600))：判断输入是否大于等于 500 且小于 600。R.__是一个占位符，表示函数的输入。R.T：始终返回true，用于定义默认情况。
总结：
| 实现方式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
if...else |
简单易懂，不需要额外的依赖。 | 代码冗长，容易出错，特别是当模式变得复杂时。可读性差，难以维护。无法进行深层次的解构。 | 简单的模式匹配，不需要复杂的解构和类型检查。 |
ts-pattern |
功能强大，支持多种模式匹配，包括字面量、变量、通配符、数组、对象等。提供类型安全检查。代码简洁，可读性高。 | 学习成本较高。需要安装额外的依赖。 | 复杂的模式匹配，需要类型安全检查，代码可读性要求高。 |
match-iz |
轻量级，简单易用。支持简单的模式匹配和解构。 | 功能相对简单，不支持复杂的模式匹配。类型安全检查有限。 | 简单的模式匹配，不需要复杂的解构和类型检查。 |
ramda (with cond) |
函数式编程风格，代码简洁。与其他 ramda 函数可以很好地结合使用。 |
学习成本较高，需要了解函数式编程的概念。模式匹配能力相对简单。 | 简单的模式匹配，需要函数式编程风格。 |
最佳实践
- 根据场景选择合适的库： 如果需要强大的模式匹配功能和类型安全检查，
ts-pattern是一个不错的选择。如果只需要简单的模式匹配，match-iz或ramda也是可以考虑的。 - 保持代码简洁： 避免过度复杂的模式匹配，尽量将模式分解成更小的、更易于理解的部分。
- 添加注释： 在代码中添加注释，解释模式匹配的意图，提高代码的可读性。
- 测试： 编写单元测试，确保模式匹配的逻辑正确。
总结
虽然JavaScript没有内置Pattern Matching，但通过一些技巧和库，我们仍然可以在JavaScript中实现类似的功能。Pattern Matching可以使代码更简洁、更具可读性，并且能处理更复杂的逻辑。选择合适的实现方式，并遵循最佳实践，可以更好地利用Pattern Matching来提高代码质量。
好啦，今天的分享就到这里，希望对大家有所帮助！下次再见！