# 实用的数据转换该技能涵盖您每天执行的数据转换：使用数组、重塑对象、标准化 API 响应、对数据进行分组以及安全访问嵌套值。每个部分首先展示命令式方法，然后展示等效的功能，并对每种方法何时发挥作用进行诚实的评估。 ** ** ## 目录 1. 数组操作 2. 对象转换 3. 数据标准化 4. 分组和聚合 5. 空安全访问 6. 现实世界的例子 7. 何时使用什么 ** ** ## 1\.数组运算数组操作是数据转换的基础。让我们用富有表现力的、可链接的操作来代替冗长的循环。 ### 地图：变换每个元素 **任务**：将一系列价格从美分转换为美元。 #### 命令式方法 const 价格以分 = [999, 1499, 2999, 4999]; 函数convertToDollars(价格: number[]): number[] { const 结果：number[] = []； for (让 i = 0; i < 价格.长度; i++) { 结果.push(价格[i] / 100); } 返回结果； } const 美元 = ConvertToDollars(pricesInCents); // [9.99, 14.99, 29.99, 49.99] #### 函数式方法 const 价格以分 = [999, 1499, 2999, 4999]; const toDollars = (分: 数字): 数字 => 美分 / 100; const 美元 =pricesInCents.map(toDollars); // [9.99, 14.99, 29.99, 49.99] **为什么这里的功能性更好**：意图很明确。 `map` 表示“变换每个元素”。转换逻辑（“toDollars”）已命名且可重用。没有索引管理，没有手动数组构建。 ### 过滤器：保留匹配的内容 **任务**：从列表中获取所有活动用户。 #### 命令式方法界面用户{ id：字符串；名称：字符串；是否活跃：布尔值； } 函数 getActiveUsers(用户: 用户[]): 用户[] { const 结果：User[] = []； for (const user of users) { if (用户.isActive) { 结果.push(用户); } } 返回结果； } #### 函数式方法 const isActive = (用户: 用户): boolean => user.isActive; const activeUsers = users.filter(isActive); // 或者内联简单谓词 const activeUsers = users.filter(user => user.isActive); **为什么这里函数式更好**：谓词（`isActive`）与迭代逻辑分离。您可以独立地重用、测试和组合谓词。 ### 减少：积累成新的东西 **任务**：计算购物车中商品的总价。 #### 命令式方法接口购物车项目{ 名称：字符串；价格：数量；数量：数量； } 函数calculateTotal(items: CartItem[]): number { 让总计 = 0； for (const item of items) { 总计 += 商品.价格 * 商品.数量; } 返回总计； } #### 函数式方法 constcalculateTotal=（项目：CartItem[]）：数量=> 项目.减少（ (总计, 项目) => 总计 + 项目.价格 * 项目.数量, 0 ）； // 或者打破行总计计算 const lineTotal = (item: CartItem): number => item.price * item.quantity; constcalculateTotal=（项目：CartItem[]）：数量=> items.map(lineTotal).reduce((a, b) => a + b, 0); **诚实的评估**：对于简单的求和，命令式循环实际上是相当可读的。当您需要将累积与其他转换组合在一起时，或者当归约逻辑足够复杂以从命名中受益时，函数式版本会大放异彩。 ### 链接：组合操作 **任务**：获取所有活跃高级用户的姓名，按字母顺序排序。 #### 命令式方法界面用户{ id：字符串；名称：字符串；是否活跃：布尔值；等级：“免费”| '优质的'; } 函数 getActivePremiumNames(用户: User[]): string[] { 常量结果：字符串[] = []； for (const user of users) { if (user.isActive && user.tier === '高级') { 结果.push(用户名); } } 结果.sort((a, b) => a.localeCompare(b)); 返回结果； } #### 函数式方法 const getActivePremiumNames = (用户: User[]): string[] => 用户 .filter(用户 => 用户.isActive) .filter(用户 => user.tier === '高级') .map(用户=>用户名) .sort((a, b) => a.localeCompare(b)); // 或者使用命名谓词以供重用 const isActive = (用户: 用户): boolean => user.isActive; const isPremium = (user: User): boolean => user.tier === 'premium'; const getName = (user: User): string => user.name; const 按字母顺序 = (a: 字符串, b: 字符串): 数字 => a.localeCompare(b); const getActivePremiumNames = (用户: User[]): string[] => 用户 .过滤器（处于活动状态） .filter(isPremium) .map(getName) .sort(按字母顺序); **为什么功能性在这里更好**：链中的每个步骤都有一个职责。您可以将转换理解为一系列步骤：“过滤活动、过滤高级、获取名称、排序”。添加或删除步骤很简单。 ### 使用 fp-ts 数组模块 fp-ts 提供了额外的数组实用程序和更好的组合支持：从 'fp-ts/Array' 导入 * as A；从 'fp-ts/Option' 导入 * as O；从 'fp-ts/function' 导入 { pipeline } ； // 安全头（第一个元素）首先 const = 管道( [1,2,3], A.头）； // 一些(1) 常量firstOfEmpty = 管道( [] 作为数字[]， A.头）； // 无 // 通过索引安全查找常量第三=管道（ ['a'，'b'，'c'，'d']， A.查找(2) ）； // 一些('c') // 使用谓词查找找到常量 = 管道( 用户， A.findFirst(user => user.id === 'abc123') ）； // 选项<用户> // 分为两组 const [不活动，活动] = 管道( 用户， A.partition(user => user.isActive) ）； // 取前N个元素常量 topThree = 管道( 排序分数， A.左转(3) ）； // 唯一值 const uniqueTags = 管道( 所有标签， A.uniq({ 等于: (a, b) => a === b }) ）； ** ** ## 2\.对象转换对象需要不断重塑：选择字段、省略敏感数据、合并设置和更新嵌套值。 ### 选择：选择特定字段 **任务**：仅从用户对象中提取公共字段。 #### 命令式方法界面用户{ id：字符串；名称：字符串；电子邮件：字符串；密码哈希：字符串；内部注释：字符串； } 函数 getPublicUser(用户：用户): { id: 字符串;名称：字符串；电子邮件：字符串} { 返回{ id: 用户.id, 名称：用户名，电子邮件：用户.电子邮件， }; } #### 函数式方法 // 通用选择实用程序 const pick = ( 键：K[] ) => (对象: T): Pick => 键.减少( （结果，关键）=> { 结果[键] = obj[键]; 返回结果； }, {} 作为 Pick ）； const getPublicUser = pick<用户, 'id' | '名字' | '电子邮件'>(['ID', '姓名', '电子邮件']); const publicUser = getPublicUser(用户); **为什么这里功能性更好**：`pick` 实用程序可以在您的代码库中重复使用。类型安全确保您只能选择存在的键。 ### 省略：删除特定字段 **任务**：在记录之前删除敏感字段。 #### 命令式方法函数 sanitizeForLogging(user: User): 省略 { const { 密码哈希、internalNotes、...安全 } = 用户；安全返回； } #### 函数式方法 // 通用省略实用程序 const 省略 = ( 键：K[] ) => (obj: T): 省略 => { 常量结果 = { ...obj }; for（键的常量键）{ 删除结果[键]； } 返回结果为 Omit; }; const sanitizeForLogging = 省略<用户，'passwordHash' | '内部注释'>([ '密码哈希', '内部注释', ]); **诚实的评估**：对于一次性省略，解构（命令式方法）非常好并且非常可读。当您有许多此类转换或需要组合它们时，函数式“omit”实用程序会带来回报。 ### 合并：合并对象 **任务**：将用户设置与默认值合并。 #### 命令式方法界面设置{ 主题：“光”| '黑暗的'; 字体大小：数字；通知：布尔值；语言：字符串； } 函数合并设置（默认值：设置，用户设置：部分<设置> ): 设置 { 返回{ 主题：userSettings.theme !== 未定义？ userSettings.theme : defaults.theme, fontSize: userSettings.fontSize !== 未定义？ userSettings.fontSize : defaults.fontSize, 通知： userSettings.notifications !== 未定义？用户设置.通知：默认值.通知，语言：userSettings.language !== 未定义？用户设置. 语言 : 默认. 语言, }; } #### 函数式方法常量合并设置 = ( 默认值：设置，用户设置：部分<设置> ): 设置 => ({ ...默认值， ...用户设置， }); // 用法常量默认值：设置= { 主题：“光”，字体大小：14，通知：真实，语言: 'en', }; const userPrefs: Partial<设置> = { 主题：“黑暗”，字体大小：16， }; const FinalSettings = mergeSettings(默认值, userPrefs); // { 主题: 'dark', fontSize: 16, 通知: true, 语言: 'en' } **为什么这里函数式更好**：扩展语法简洁，可以处理任意数量的键。稍后的价差会覆盖之前的价差，从而为您提供自然的“默认值覆盖”行为。 ### 深度合并：嵌套对象组合 **任务**：合并嵌套的配置对象。 #### 命令式方法接口配置{ 应用程序编程接口：{ 基址：字符串；超时：数量；重试次数：次数； }; 用户界面：{ 主题：字符串；动画：布尔值； }; } 函数深度合并（目标：配置，来源：部分<配置> ): 配置 { const 结果 = { ...目标 }; if (source.api) { 结果.api = { ...target.api, ...source.api }; } if (source.ui) { 结果.ui = { ...目标.ui, ...源.ui }; } 返回结果； } #### 函数式方法 // 一层嵌套的通用深度合并 const deepMerge = >( 目标：T，来源：{ [K in keyof T]?: Partial } ): T => { const 结果 = { ...目标 }; for (Object.keys(source) 的 const key as Array) { if (源[key] !== 未定义) { 结果[键] = { ...目标[键], ...源[键] }; } } 返回结果； }; // 用法常量默认配置：配置= { api: { baseUrl: 'https://api.example.com', 超时: 5000, 重试次数: 3 }, ui: { 主题: '光', 动画: true }, }; const customConfig = deepMerge(defaultConfig, { api: { 超时: 10000 }, ui: { 主题: '黑暗' }, }); // 保留 api.baseUrl，覆盖 api.timeout // 覆盖 ui.theme，保留 ui.animations ### 不可变更新：更改嵌套值 **任务**：更新深度嵌套的值而不发生突变。 #### 命令式（变异）方法接口状态{ 用户：{ 简介：{ 设置：{ 主题：字符串； }; }; }; } 函数 updateTheme(state: State, newTheme: string): void { state.user.profile.settings.theme = newTheme; // 突变！ } #### 函数式（不可变）方法 // 手动展开嵌套 const updateTheme = (state: State, newTheme: string): State => ({ ...状态，用户：{ ...状态.用户，简介：{ ...状态.用户.个人资料，设置：{ ...状态.用户.配置文件.设置，主题：新主题， }, }, }, }); // 有了类似透镜的助手 const updatePath = ( 对象：T，路径：字符串[]，值：V ): T => { if (path.length === 0) 返回值与 T 一样未知； const [头，...其余] = 路径；返回{ ...对象， [头]: updatePath((obj as Record<字符串, 未知>)[头], 休息, 值), } 作为 T； }; const newState = updatePath(state, ['用户', '个人资料', '设置', '主题'], '暗'); **诚实的评估**：扩展嵌套冗长但明确。对于深层嵌套更新，请考虑使用“immer”或 fp-ts 镜头等库。函数式方法的冗长是不变性的代价。 ** ** ## 3\.数据标准化 API 响应很少符合您的应用程序所需的形状。规范化将嵌套的非规范化数据转换为平面索引结构。 ### API 对应用程序状态的响应 **任务**：将嵌套 API 响应转换为规范化状态。 #### API 响应（您得到的）接口 ApiResponse { 订单：数组<{ id：字符串；客户 ID：字符串；客户名称：字符串；客户电子邮件：字符串；项目：数组<{ 产品ID：字符串；产品名称：字符串；数量：数量；价格：数量； }>; 总计：数量；状态：字符串； }>; } #### 应用程序状态（您需要什么）接口标准化状态{ 订单：{ byId: 记录<字符串, 订单>; allIds: 字符串[]; }; 客户：{ byId：记录<字符串，客户>； allIds: 字符串[]; }; 产品：{ byId：记录<字符串，产品>； allIds: 字符串[]; }; } 接口顺序{ id：字符串；客户 ID：字符串； itemIds: 字符串[]; 总计：数量；状态：字符串； } 接口客户{ id：字符串；名称：字符串；电子邮件：字符串； } 接口产品{ id：字符串；名称：字符串；价格：数量； } #### 命令式方法函数normalizeApiResponse（响应：ApiResponse）：NormalizedState { 常量状态：NormalizedState = { 订单: { byId: {}, allIds: [] }, 客户：{ byId：{}，allIds：[] }，产品：{ byId: {}, allIds: [] }, }; for (const order of response.orders) { // 提取客户 if (!state.customers.byId[order.customerId]) { state.customers.byId[order.customerId] = { id: 订单.customerId, 名称：订单.客户名称，电子邮件：订单.客户电子邮件， }; state.customers.allIds.push(order.customerId); } // 提取产品并构建项目 ID const itemIds: string[] = []; for (order.items 的 const item) { if (!state.products.byId[item.productId]) { state.products.byId[item.productId] = { id: 商品.productId, 名称：商品.产品名称，价格：商品.价格， }; state.products.allIds.push(item.productId); } itemIds.push(item.productId); } // 添加标准化顺序 state.orders.byId[order.id] = { id: 订单.id, 客户ID：订单.客户ID，项目 ID，总计：订单.总计，状态：订单.状态， }; state.orders.allIds.push(order.id); } 返回状态； } #### 函数式方法从 'fp-ts/function' 导入 { pipeline } ；从 'fp-ts/Array' 导入 * as A；从 'fp-ts/Record' 导入 * as R； // 创建规范化集合的助手接口 NormalizedCollection { byId: 记录<字符串, T>; allIds: 字符串[]; } const createNormalizedCollection = ( 项目：T[] ): NormalizedCollection => ({ byId: 管道( 物品， A.reduce({} as Record, (acc, item) => ({ ...ACC， [项目.id]：项目， }）） ), allIds: items.map(item => item.id), }); // 提取实体 const extractCustomers = (orders: ApiResponse['orders']): Customer[] => 管道（订单， A.map(顺序=>({ id: 订单.customerId, 名称：订单.客户名称，电子邮件：订单.客户电子邮件， }））， A.uniq({ 等于: (a, b) => a.id === b.id }) ）； const extractProducts = (orders: ApiResponse['orders']): Product[] => 管道（订单， A.flatMap(order => order.items), A.map(项目 => ({ id: 商品.productId, 名称：商品.产品名称，价格：商品.价格， }））， A.uniq({ 等于: (a, b) => a.id === b.id }) ）； const extractOrders = (orders: ApiResponse['orders']): Order[] => 订单.map（订单=>（{ id: 订单.id, 客户ID：订单.客户ID， itemIds: order.items.map(item => item.productId), 总计：订单.总计，状态：订单.状态， })); // 组合成最终的标准化 const normalizeApiResponse =（响应：ApiResponse）：NormalizedState =>（{ 订单：createNormalizedCollection(extractOrders(response.orders)), 客户：createNormalizedCollection(extractCustomers(response.orders)), 产品：createNormalizedCollection(extractProducts(response.orders)), }); **为什么这里的功能性更好**：每次提取都是独立且可测试的。 `createNormalizedCollection` 帮助器是可重用的。添加新的实体类型意味着添加一个新的提取函数。 ### 将 API 响应转换为 UI 就绪数据 **任务**：将 API 数据转换为您的组件所需的数据。 // API 给你这个接口 ApiUser { 用户 ID：字符串；名字：字符串；姓氏：字符串；电子邮件地址：字符串；创建于：字符串； // ISO 字符串 avatar_url: 字符串 |无效的; } // 组件需要这个界面显示用户{ id：字符串；全名：字符串；电子邮件：字符串；成员自：字符串； //“2024 年 1 月” 头像网址：字符串； // 有后备 } #### 函数式方法 const formatDate = (isoString: string): string => { const 日期 = 新日期(isoString); return date.toLocaleDateString('en-US', { 月: 'short', 年: 'numeric' }); }; const DEFAULT_AVATAR = 'https://example.com/default-avatar.png'; const toDisplayUser = (apiUser: ApiUser): DisplayUser => ({ id: apiUser.user_id, 全名：`${apiUser.first_name} ${apiUser.last_name}`, 电子邮件：apiUser.email_address， memberSince: formatDate(apiUser.created_at), avatarUrl: apiUser.avatar_url ??默认头像， }); // 转换用户数组 const toDisplayUsers = (apiUsers: ApiUser[]): DisplayUser[] => apiUsers.map(toDisplayUser); ** ** ## 4\.分组和聚合分组和聚合数据对于报告、仪表板和分析至关重要。 ### GroupBy：按键组织 **任务**：按客户对订单进行分组。 #### 命令式方法接口顺序{ id：字符串；客户 ID：字符串；总计：数量；日期：字符串； } 函数 groupByCustomer(orders: Order[]): Record { const 结果：Record = {}; for (const order of order) { if (!result[order.customerId]) { 结果[订单.customerId] = []; } 结果[order.customerId].push(order); } 返回结果； } #### 函数式方法 // 通用 groupBy 实用程序 const groupBy = ( getKey: (项目: T) => K ) => (项目: T[]): 记录 => 项目.减少（（组，项目）=> { const key = getKey(项目); 返回{ ...团体， [键]：[...（组[键] || []），项目]， }; }, {} 作为记录）； // 用法 const groupByCustomer = groupBy(order => order.customerId); const orderByCustomer = groupByCustomer(orders); // 或者内联 const orderByStatus = groupBy((order: Order) => order.status)(orders); **使用 fp-ts NonEmptyArray.groupBy** ：从 'fp-ts/NonEmptyArray' 导入 * 作为 NEA；从 'fp-ts/function' 导入 { pipeline } ； // NEA.groupBy 保证结果中非空数组 const orderByCustomer = 管道( orders as NEA.NonEmptyArray, // 必须非空 NEA.groupBy(order => order.customerId) ）； // 记录<字符串，NonEmptyArray<顺序>> ### CountBy：计数出现次数 **任务**：按状态计算订单。 #### 命令式方法函数 countByStatus(orders: Order[]): Record { const 计数：Record<字符串，数字> = {}； for (const order of order) { 计数[订单.状态] = (计数[订单.状态] || 0) + 1; } 返回计数； } #### 函数式方法 // 通用 countBy 实用程序 const countBy = ( getKey: (项目: T) => K ) => (项目: T[]): 记录 => 项目.减少（（计数，项目）=> { const key = getKey(项目); 返回{ ...计数， [键]：（计数[键] || 0）+ 1， }; }, {} 作为 Record ）； // 用法 const orderCountByStatus = countBy((order: Order) => order.status)(orders); // { 待处理：5，已发货：12，已交付：8 } ### SumBy：聚合数值 **任务**：计算每个产品类别的总收入。 #### 命令式方法界面销售{ 产品ID：字符串；类别：字符串；金额：数量； } 函数 sumByCategory(sales: Sale[]): Record { const 总计：Record<字符串，数字> = {}； for (const sale of sales) { 总计[销售.类别] = (总计[销售.类别] || 0) + 销售.金额; } 返回总计； } #### 函数式方法 // 通用 sumBy 实用程序 const sumBy = ( getKey: (项目: T) => K, getValue: (项目: T) => 数字 ) => (项目: T[]): 记录 => 项目.减少（（总计，项目）=> { const key = getKey(项目); 返回{ ...总计， [键]：（总计[键] || 0）+ getValue（项目）， }; }, {} 作为 Record ）； // 用法 const 收入按类别 = sumBy( （销售：销售）=> 销售.类别，（销售：销售）=> sale.amount ）（销售）； // { 电子产品：15000，服装：8500，书籍：3200 } ### 复杂聚合示例 **任务**：计算具有数量和单价的行项目的总计。接口行项{ 产品ID：字符串；产品名称：字符串；数量：数量；单价：数量； } 接口发票{ id：字符串；行项：行项[]；税率：数字； } #### 函数式方法 const lineTotal = (项目: LineItem): 数字 => 商品.数量 * 商品.单位价格; const 小计 = (项目: LineItem[]): 数量 => items.reduce((sum, item) => sum + lineTotal(item), 0); constcalculateTax = (金额: 数字, 税率: 数字): 数字 => 金额*费率； constcalculateInvoiceTotal = (发票: 发票): { 小计：数量；税：数量；总计：数量； } => { const sub = 小计(发票.lineItems); const 税=calculateTax(sub,invoice.taxRate); 返回{ 小计：小计，税，总计：分税+税， }; }; // 为了清楚起见，使用 fp-ts 管道从 'fp-ts/function' 导入 { pipeline } ； constcalculateInvoiceTotal = (发票: 发票) => { 常量子 = 管道( 发票.行项目， A.map(lineTotal), A.reduce(0, (a, b) => a + b) ）；返回{ 小计：小计，税：子*发票.taxRate，总计：子 * (1 + 发票.taxRate), }; }; ** ** ## 5\.空安全访问停止编写“if (x && x.y && x.y.z)”。安全地导航嵌套结构，不会出现运行时错误。 ### 问题接口配置{ 数据库？：{ 连接？：{ 主机？：字符串；端口？：号码； }; 池？：{ 最大？：数量； }; }; 特点？：{ 实验性的？：{ 启用？：布尔值； }; }; } #### 命令式（详细）方法函数 getDatabaseHost(config: Config): string { 如果（配置数据库 && 配置.数据库.连接 && 配置.数据库.连接.主机）{ 返回config.database.connection.host； } 返回“本地主机”； } #### 可选链接（现代 TypeScript） const getDatabaseHost =（配置：配置）：字符串=> 配置.数据库?.连接?.主机?? '本地主机'; **诚实的评估**：对于简单的访问模式，可选链（`?.`）是完美的。它内置于语言中并且非常可读。当您需要对可能缺失的值进行运算时，请使用 fp-ts 选项。 ### 何时使用选项在以下情况下使用 fp-ts 选项： * 您需要对可能缺失的值进行多个操作 * 您想要将“缺失”与其他虚假值区分开来 * 您正在构建一条转型管道从 'fp-ts/Option' 导入 * as O；从 'fp-ts/function' 导入 { pipeline } ； // 返回 Option 的安全属性访问 const prop = (key: K) => (对象: T | null | 未定义): O.Option => obj != null && obj 中的键？ O.some(obj[key] 作为 T[K]) ：O.无； // 使用 flatMap 进行链式访问 const getDatabaseHost = (config: Config): O.Option => 管道（ O.一些（配置）， O.flatMap(prop('数据库')), O.flatMap(prop('连接')), O.flatMap(prop('主机')) ）； // 使用默认值提取常量主机=管道（获取数据库主机（配置）， O.getOrElse(() => 'localhost') ）； ### 安全数组访问从 'fp-ts/Array' 导入 * as A；从 'fp-ts/Option' 导入 * as O；从 'fp-ts/function' 导入 { pipeline } ； // 命令式：如果数组为空则抛出异常常量第一个=项目[0]； // 可能是未定义的！ // 安全：返回选项 const 首先 = A.head(items); // 选项<项目> // 获取第一个项目的名称，或默认值 const 名字 = 管道( 物品， A.头， O.map(item => item.name), O.getOrElse(() => '没有项目') ）； // 通过索引安全查找常量第三=管道（物品， A.查找(2), O.map(item => item.name), O.getOrElse(() => '未找到') ）； ### 安全记录/字典访问从 'fp-ts/Record' 导入 * as R；从 'fp-ts/Option' 导入 * as O；从 'fp-ts/function' 导入 { pipeline } ； const users: Record<字符串, 用户> = { 'user-1': { 名称: 'Alice', 电子邮件: 'alice@example.com' }, 'user-2': { 姓名: 'Bob', 电子邮件: 'bob@example.com' }, }; // 命令式：可能是未定义的 const user = users['user-3']; // 用户 |未定义 // 安全：返回选项 const user = R.lookup('user-3')(users); // 选项<用户> // 获取用户电子邮件或默认电子邮件常量电子邮件 = 管道( 用户， R.lookup('user-3'), O.map(u => u.email), O.getOrElse(() => 'unknown@example.com') ）； ### 组合多个可选值 **任务**：获取用户的显示名称，这需要名字和姓氏。接口配置文件{ 名字？：字符串；姓氏？：字符串；昵称？：字符串； } // 命令式函数 getDisplayName(个人资料：个人资料): 字符串 { if (profile.firstName && profile.lastName) { 返回 `${profile.firstName} ${profile.lastName}`; } if (个人资料.昵称) { 返回个人资料.昵称； } 返回“匿名”； } // 带选项的函数从 'fp-ts/Option' 导入 * as O；从 'fp-ts/function' 导入 { pipeline } ； const getDisplayName = (个人资料:个人资料): 字符串 => 管道（ // 首先尝试全名奥多， O.bind('first', () => O.fromNullable(profile.firstName)), O.bind('last', () => O.fromNullable(profile.lastName)), O.map(({ 第一个, 最后一个 }) => `${first} ${last}`), // 回到昵称 O.alt(() => O.fromNullable(profile.nickname)), // 最后，默认为匿名 O.getOrElse(() => '匿名') ）； ** ** ## 6\.现实世界的例子 ### 示例 1：将 API 响应转换为 UI 就绪数据 // API 响应接口 ApiOrder { 订单 ID：字符串；客户：{ id：字符串；全名：字符串； }; line_items：数组<{ 产品 ID：字符串；产品名称：字符串；数量：数量；单价：数量； }>; 订单日期：字符串；状态：'待定' | '处理' | '已发货' | '发表'; } // 用户界面需要什么接口订单摘要{ id：字符串；客户名称：字符串； itemCount：数量；总计：数量；格式化总计：字符串；日期：字符串；状态标签：字符串；状态颜色：字符串； } // 转换 const STATUS_CONFIG: 记录<字符串, { 标签: 字符串;颜色：字符串 }> = { 待处理：{标签：'待处理'，颜色：'黄色'}，处理：{标签：'处理'，颜色：'蓝色'}，已发货：{ 标签：'已发货'，颜色：'紫色' }，已交付：{ 标签：'已交付'，颜色：'绿色' }， }; const formatCurrency = (分: 数字): 字符串 => `$${(分/100).toFixed(2)}`; const formatDate = (iso: string): string => new Date(iso).toLocaleDateString('en-US', { 月份：“短”，日：'数字'，年份：'数字'， }); const toOrderSummary = (订单: ApiOrder): OrderSummary => { const 总计 = order.line_items.reduce( (sum, item) => sum + item.qty * item.unit_price, 0 ）； const status = STATUS_CONFIG[order.status] ?? STATUS_CONFIG.待定；返回{ id: 订单.order_id, 客户名称：订单.客户.全名， itemCount: order.line_items.reduce((sum, item) => sum + item.qty, 0), 总计， formattedTotal：格式货币（总计），日期：formatDate(order.order_date), 状态标签：状态.标签，状态颜色：状态.颜色， }; }; // 转换所有订单 const toOrderSummaries = (订单: ApiOrder[]): OrderSummary[] => order.map(toOrderSummary); ### 示例 2：将用户设置与默认值合并界面应用程序设置{ 主题：{ 模式：“轻”| '黑暗' | '系统'; 主要颜色：字符串；字体大小：'小' | '中等' | '大的'; }; 通知：{ 电子邮件：布尔值；推：布尔值；短信：布尔值；频率：“立即”| '每日' | '每周'; }; 隐私：{ 显示个人资料：布尔值；显示活动：布尔值；允许分析：布尔值； }; } 类型 DeepPartial = { [P in keyof T]?: T[P] 扩展对象 ? DeepPartial : T[P]; }; const DEFAULT_SETTINGS: AppSettings = { 主题：{ 模式：'系统'，主要颜色：'#007bff'，字体大小：'中'， }, 通知：{ 电子邮件：真实，推：真实，短信：假的，频率：“立即”， }, 隐私：{ 显示个人资料：真实，显示活动：真实，允许分析：正确， }, }; const 深度合并设置 = ( 默认值：应用程序设置，用户：DeepPartial ): 应用程序设置 => ({ 主题: { ...defaults.theme, ...user.theme }, 通知：{ ...defaults.notifications, ...user.notifications }, 隐私：{ ...defaults.privacy, ...user.privacy }, }); // 用法 const userPreferences: DeepPartial = { 主题：{模式：'黑暗'}，通知：{ sms：true，频率：'每日'}， }; const FinalSettings = deepMergeSettings(DEFAULT_SETTINGS, userPreferences); ### 示例 3：按客户对订单进行总计分组接口顺序{ id：字符串；客户 ID：字符串；客户名称：字符串；项目：数组<{名称：字符串；价格：数量；数量：数量 }>; 日期：字符串； } 接口客户订单摘要{ 客户 ID：字符串；客户名称：字符串； orderCount：数量；总花费：数量；订单：订单[]； } constcalculateOrderTotal = (订单: 订单): 数量 => order.items.reduce((sum, item) => sum + item.price * item.quantity, 0); const groupOrdersByCustomer = (订单: Order[]): CustomerOrderSummary[] => { const grouped = groupBy((order: Order) => order.customerId)(orders); return Object.entries(grouped).map(([customerId, customerOrders]) => ({ 客户 ID, 客户名称：客户订单[0].客户名称， orderCount: customerOrders.length, 总支出：customerOrders.reduce( (总和, 订单) => 总和 + 计算订单总计(订单), 0 ), 订单：客户订单， })); }; ### 示例 4：安全访问深度嵌套配置接口应用程序配置{ 服务？：{ API？：{ 端点？：{ 用户？：字符串；订单？：字符串；产品？：字符串； }; 授权？：{ 类型？： '承载' | '基本' | 'oauth'; 令牌？：字符串； }; }; 数据库？：{ 主要？：{ 主机？：字符串；端口？：号码；名称？：字符串； }; }; }; } 从 'fp-ts/Option' 导入 * as O；从 'fp-ts/function' 导入 { pipeline } ； // 创建类型安全的配置访问器常量 getConfigValue = ( 配置：应用程序配置，路径：（配置：AppConfig）=> T |未定义，默认值：T ): T => 路径(配置) ??默认值； // 与可选链接一起使用（最简单） const apiUsersEndpoint = getConfigValue( 配置， c => c.services?.api?.endpoints?.users, '/api/用户' ）； // 对于更复杂的场景，使用Option const getEndpoint = (config: AppConfig, name: '用户' | '订单' | '产品'): string => 管道（ O.fromNullable(config.services), O.flatMap(s => O.fromNullable(s.api)), O.flatMap(a => O.fromNullable(a.endpoints)), O.flatMap(e => O.fromNullable(e[name])), O.getOrElse(() => `/api/${name}`) ）； // 多个值的可重用模式 const getDbConfig = (config: AppConfig) => ({ 主机：config.services?.database?.primary?.host ?? '本地主机', 端口：config.services?.database?.primary?.port ?? 5432, 名称：config.services?.database?.primary?.name ?? '应用程序', }); ** ** ## 7\.何时使用什么 ### 在以下情况下使用本机方法： * **简单的转换**：`.map()`、`.filter()`、`.reduce()` 非常好 * **无需组合** ：您正在进行一次性转换 * **团队熟悉度** ：每个人都知道本机方法 * **可选链就足够了** : `obj?.prop?.value ?? default` 满足您的空安全需求 // Native 在这里没问题 const activeUserNames = 用户 .filter(u => u.isActive) .map(u => u.name); ### 在以下情况下使用 fp-ts： * **可能失败的链接操作**：多个步骤，每个步骤都不会返回任何内容 * **组合转换**：构建可重用的转换管道 * **类型安全的错误处理** ：您希望编译器跟踪潜在的故障 * **复杂的数据管道**：许多步骤受益于显式组合 // fp-ts 在这里闪耀常量结果 = 管道( 用户， A.findFirst(u => u.id === userId), O.flatMap(u => O.fromNullable(u.profile)), O.flatMap(p => O.fromNullable(p.settings)), O.map(s => s.theme), O.getOrElse(() => '默认') ）； ### 在以下情况下使用自定义实用程序： * **特定于域的操作**：数据的`groupBy`、`countBy`、`sumBy` * **重复模式**：您发现自己多次编写相同的转换 * **团队约定**：在整个代码库中建立一致的模式 // 重复使用时自定义实用程序会得到回报 const 收入按地区 = sumBy( （销售：销售）=> sale.region，（销售：销售）=> sale.amount ）（销售）； ### 性能考虑因素 * **链接创建中间数组** : `arr.filter().map()` 创建一个数组，然后创建另一个数组 * **对于热路径，考虑`reduce`**：一次遍历数据 * **优化前测量**：优化的可读性成本通常不值得 // 如果性能很重要（并且您已经测量过！） const 结果 = items.reduce((acc, item) => { if (item.isActive) { acc.push(item.name.toUpperCase()); } 返回帐户； }, [] 作为字符串[]); // 与更具可读性（但需要 2 遍）的版本相比常量结果 = 项目 .filter(item => item.isActive) .map(item => item.name.toUpperCase()); ** ** ## 总结任务|当务之急|功能性|推荐 ---|---|---|--- 变换数组元素 |带push的for循环| `.map()` |使用地图过滤阵列|带条件的 for 循环 | `.filter()` |使用过滤器积累价值|带累加器的 for 循环 | `.reduce()` |复杂时使用reduce，简单时使用loop 按键分组| for 对象循环 | `groupBy` 实用程序 |创建可重用的实用程序选择对象字段 |手动属性副本 | `pick` 实用程序 |一次性使用传播，重复使用效用合并对象 |逐个物业|扩展语法 |使用传播深度合并 |嵌套条件|递归实用程序 |使用实用程序或库空安全访问 | `如果 (x && x.y)` | `?.` 或选项|使用“?.”表示简单，使用选项进行组合规范化 API 数据 |嵌套循环|提取函数 |分解为可组合函数 **函数式方法在以下情况下更好：** * 您需要编写操作 * 你想要可重用的转换 * 你更看重显式数据流而不是隐式状态 * 缺失值的类型安全很重要 **命令式方法在以下情况下是可以接受的：** * 转变是一次性的 * 逻辑简单且线性 * 性能至关重要并且您已经测量过 * 团队对此更加满意

实用的数据转换

包含技能