尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

freeCodeCamp 每日编程挑战解析:Challenge 281 “Bingo Range“ 的 BINGO 字母数字区间映射实现

freeCodeCamp 每日编程挑战解析:Challenge 281 “Bingo Range“ 的 BINGO 字母数字区间映射实现 freeCodeCamp 每日编程挑战解析Challenge 281 Bingo Range 的 BINGO 字母数字区间映射实现【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本篇技术指南聚焦 freeCodeCamp 每日编程挑战Daily Coding Challenge系列中的 Challenge 281 Bingo Range完整拆解其题目规格、5 组测试断言、种子代码与官方解法并深入其所在的daily-coding-challenges-javascript板块板块结构结合 API 层查询路由、日期调度工具与数据库种子脚本讲清楚一道每日挑战从题干到线上运行的完整技术链路。读完你将掌握 BINGO 字母—数字区间映射这类查表 区间生成问题的标准解法并理解它在 freeCodeCamp 工程体系中的落地方式。一、挑战概述把 BINGO 字母映射为数字区间Bingo Range 是 freeCodeCamp 每日编程挑战第 281 号题目完整题目定义位于 curriculum/challenges/english/blocks/daily-coding-challenges-javascript/69f35a5bb823ed620fcb7cba.md。它要求实现一个getBingoRange(letter)函数给定一个宾果BINGO字母返回该字母对应的数字区间数组且区间内数字必须从小到大排列。题目本身的难度定位是查表映射 区间数组生成属于每日挑战中入门级但高频复用的模式先把领域规则编码为数据结构映射表再用编程语言把映射结果展开为具体输出。这种规则 → 数据 → 生成的三段式在后续众多挑战如 Challenge 167: Bingo! Letter、Challenge 242: Next Bingo Number中反复出现。二、题目规格与 BINGO 映射表挑战的 frontmatter 声明了如下元信息id: 69f35a5bb823ed620fcb7cba title: Challenge 281: Bingo Range challengeType: 28 dashedName: challenge-281其中challengeType: 28表示这是一道每日编程挑战Daily Coding Challenge类型的题目dashedName与title共同构成其在板块与 URL 中的稳定标识。该编号在 板块结构 中被登记为第 281 个挑战前后分别是 Challenge 280 Mongo ID Date 与 Challenge 282 Sleep Debt。题目的核心是一张标准 BINGO 字母与数字区间的映射表题干原文位于 题目文件| Letter | Number Range | | - | - | |B| 1-15 | |I| 16-30 | |N| 31-45 | |G| 46-60 | |O| 61-75 |这是真实宾果游戏Bingo的规则映射75 个号码按 15 个为一组分别对应 B1–15、I16–30、N31–45、G46–60、O61–75。返回值必须是包含该区间全部数字的数组例如getBingoRange(B)应返回[1, 2, 3, ..., 15]共 15 个元素。三、测试断言5 组全覆盖校验题目通过 5 组assert.deepEqual断言对实现进行黑盒校验分别覆盖全部 5 个字母题目文件assert.deepEqual(getBingoRange(B), [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]); assert.deepEqual(getBingoRange(I), [16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]); assert.deepEqual(getBingoRange(N), [31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45]); assert.deepEqual(getBingoRange(G), [46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60]); assert.deepEqual(getBingoRange(O), [61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75]);这里有三个值得注意的验证要点使用deepEqual而非equal返回的是数组必须逐元素深度比较只比对引用或会误判。顺序敏感deepEqual对数组元素顺序严格校验因此区间必须从小到大生成倒序或乱序都会失败。边界完整每组断言都包含区间两端点如 B 的1与15任何一端缺失都会导致断言失败这强制要求实现覆盖整个闭区间。从测试组织的角度看这也体现了 freeCodeCamp 挑战的一贯风格断言文本与可执行的testString成对出现既能展示给学习者阅读也能直接交由测试运行器执行。四、种子代码与解题起点题目提供的种子seed代码如下题目文件function getBingoRange(letter) { return letter; }种子函数名、参数与返回语句均已给定学习者只需填充中间逻辑。种子默认直接return letter显然无法通过任何断言——它的作用是让学习者开箱即跑在编辑器里看到测试失败再逐步实现正确逻辑。五、官方解法逐行拆解题目自带的参考解法题目文件如下function getBingoRange(letter) { const ranges { B: [1, 15], I: [16, 30], N: [31, 45], G: [46, 60], O: [61, 75] }; const [start, end] ranges[letter]; return Array.from({ length: end - start 1 }, (_, i) start i); }逐行解析查表用对象字面量ranges建立字母到[起点, 终点]的映射。与题干表格完全一致是规则数据化的典型做法。解构const [start, end] ranges[letter]用数组解构取出区间两端start为下界、end为上界。区间生成Array.from({ length: end - start 1 }, (_, i) start i)是生成连续整数数组的惯用法end - start 1计算区间元素个数例如 B 为15 - 1 1 15Array.from的第一个参数提供类数组对象{ length: n }映射函数(_, i) start i用索引i从start起依次递增天然保证结果从小到大。该解法的核心价值在于把区间生成与具体业务规则解耦——无论区间是 1–15 还是 61–75生成逻辑只需一行日后若要调整映射只需修改ranges表而无需改动生成代码。六、其他可行的解题思路官方解法之外本题还有多种等价实现可作对比学习方式一循环 pushfunction getBingoRange(letter) { const ranges { B: [1, 15], I: [16, 30], N: [31, 45], G: [46, 60], O: [61, 75] }; const [start, end] ranges[letter]; const result []; for (let i start; i end; i) { result.push(i); } return result; }方式二显式展开完整区间function getBingoRange(letter) { const ranges { B: Array.from({ length: 15 }, (_, i) i 1), I: Array.from({ length: 15 }, (_, i) i 16), // ... 依次类推 }; return ranges[letter]; }方式三基于偏移量的数学推导function getBingoRange(letter) { const base { B: 0, I: 15, N: 30, G: 45, O: 60 }[letter]; return Array.from({ length: 15 }, (_, i) base i 1); }三种方式的取舍很清晰官方解法查表存起止点 Array.from在可读性与可维护性上最佳循环版最符合初学者的直觉偏移量版代码最短但把规则隐含在数学关系里可读性稍差。注意方式三基于每组恰好 15 个这一前提若要支持不均匀分组查表法仍然最稳妥。七、挑战在 freeCodeCamp 工程体系中的落地Challenge 281 并非孤立的 Markdown 文件它位于完整的每日编程挑战运行体系中下面从三个层面说明其落地方式。7.1 板块与课程结构daily-coding-challenges-javascript板块在 curriculum/structure/blocks/daily-coding-challenges-javascript.json 中定义其中记录了helpCategory: JavaScript、blockLayout: legacy-challenge-list等属性以及从 Challenge 1 Vowel Balance 到 Challenge 365 The Last Challenge: Bucket Fill 3 的完整challengeOrder。Challenge 281 的 id69f35a5bb823ed620fcb7cba与标题在该顺序表中一一对应保证课程构建时能按序生成学习页面。7.2 数据库种子365 天的发布节奏这些挑战并非一次性全部上线而是以每日一题的形式发布。种子脚本 tools/daily-challenges/seed-daily-challenges.ts 清晰地展示了调度逻辑从2025-08-11START_DATE开始每道挑战的日期比上一道晚一天date: new Date(START_DATE.getTime() i * ONE_DAY_IN_MS)脚本断言总数为 365 个挑战并校验 JavaScript 与 Python 两份挑战数量一致写入 MongoDB 的DailyCodingChallenges集合使用replaceOne upsert支持重复执行。由此可以推算Challenge 281 的发布日期约为 2026 年 5 月中旬之后每天解锁下一题直到 Challenge 365 结束API 路由注释明确注明最后一道挑战日期为 2026-08-10。种子脚本中的防护逻辑也值得注意——它硬编码了startDateString并在不一致时抛错避免发布后意外改动起始日期。7.3 API 查询层与日期工具挑战数据通过公开 API 提供给客户端。路由定义在 api/src/daily-coding-challenge/routes/daily-coding-challenge.ts提供 6 个 GET 端点| 端点 | 说明 | | - | - | |/daily-coding-challenge/date/:date| 按YYYY-MM-DD精确查询某天挑战 | |/daily-coding-challenge/day/:day| 按MM-DD查询自动映射到源年份 | |/daily-coding-challenge/today| 查询今天按美国中部时间的挑战 | |/daily-coding-challenge/month/:month| 按YYYY-MM查询整月挑战列表 | |/daily-coding-challenge/all| 查询全部已发布挑战 | |/daily-coding-challenge/newest| 查询最新一道挑战的日期 |这些端点的请求与响应结构由 api/src/daily-coding-challenge/schemas/daily-coding-challenge.ts 用 TypeBox 定义单条挑战响应包含id、date、challengeNumber、title、description以及javascript/python两套语言各自的tests与challengeFiles——这正是 Challenge 281 这类挑战被渲染到学习界面时的数据结构。日期处理逻辑集中在 api/src/daily-coding-challenge/utils/helpers.tsgetNowUsCentral/getUtcMidnight以美国中部时间为基准计算今天dateStringToUtcMidnight把YYYY-MM-DD解析为 UTC 零点getSourceDate把任意日期映射回 2025-08-11 至 2026-08-10 的源挑战区间含 2 月 29 日回落 2 月 28 日的特殊处理。客户端侧client/src/utils/daily-coding-challenge-validator.ts 使用 Joi 对从数据库获取的挑战数据做 schema 校验确保tests、challengeFiles等字段完整才能安全地进入编辑器与测试运行流程。八、总结与延伸Challenge 281 Bingo Range 是一道典型的查表 区间生成入门题但它串联起了 freeCodeCamp 每日挑战体系的完整链路从 题干文件 的规格与断言到 板块结构 的课程编排再到 种子脚本 的逐日发布、API 路由 的按日期查询与 日期工具 的时区换算。理解这一条链路既能帮你快速解决同类映射题如 Bingo 系列的其他挑战也能让你对一道编程题目如何从 Markdown 变成线上每日更新的学习内容建立完整认知。延伸练习建议尝试为getBingoRange补充非法输入如A、小写b的处理逻辑或者用同样的查表 Array.from模式把 BINGO 规则推广到自定义的字母—区间映射场景体会数据驱动解法的可扩展性。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表