freeCodeCamp 基础 JavaScript 课程解析用函数Functions编写可复用代码【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp在 freeCodeCamp 的 JavaScript 算法与数据结构课程的Basic JavaScript板块中Write Reusable JavaScript with Functions 这一课首次系统性地引入函数概念教你把代码拆分为可复用、可随时调用的小单元。通过本课学习你不仅能掌握函数定义与调用的基础语法还能理解 freeCodeCamp 在线课堂如何通过自动测试逐条校验你的代码为后续学习传参、返回值与作用域奠定基础。一、本节挑战在课程中的位置本课对应的挑战源文件位于仓库curriculum/challenges/english/blocks/basic-javascript/56bbb991ad1ed5201cd392cf.md文件名中嵌入的56bbb991ad1ed5201cd392cf是它在 freeCodeCamp 课程体系中的唯一挑战 ID。从 Basic JavaScript 板块结构定义 可以看到该板块helpCategory 为 JavaScript共 113 道挑战的编排逻辑序号挑战标题主题47Shopping List购物清单数组综合练习48Write Reusable JavaScript with Functions函数入门本课49Passing Values to Functions with Arguments参数与实参50Return a Value from a Function with Returnreturn 返回值51Global Scope and Functions全局作用域52Local Scope and Functions局部作用域53Global vs. Local Scope in Functions全局与局部作用域对比也就是说本课是 Basic JavaScript 板块中进入函数世界的起点它先让学习者认识函数可以把一段代码打包成可复用单元随后的课程才逐步加入参数、返回值与作用域规则。理解了这一点就能明确本课的目标边界——只聚焦于定义 调用两个最基础动作。二、核心概念什么是函数原文档给出的定义非常精炼In JavaScript, we can divide up our code into reusable parts calledfunctions.即函数function是把一段代码划分出来的可复用部分。当同一段逻辑需要在多处出现时不必复制粘贴整段代码而是把它放进函数里需要时调用即可。函数声明function declaration的基本形态如下function functionName() { console.log(Hello World); }逐段拆解这段语法function声明函数的关键字functionName函数名遵循标识符命名规则应能表达函数用途一对圆括号()函数定义阶段的参数占位位置。本课示例不含参数圆括号为空一对花括号{}函数体即每次调用函数时都会执行的全部语句。原文档强调了一个重要事实花括号之间的所有代码每次调用函数时都会被完整执行一遍。因此函数天然具备复用逻辑、统一行为的价值——只要修改函数体一处所有调用点都会同步生效。三、调用函数名称加圆括号定义函数只是打包代码真正执行还需要调用call或调用invoke它。调用方式是用函数名加一对圆括号functionName();执行上述语句后控制台dev console会输出一次Hello World。这里有几个初学者容易混淆的点值得强调定义与调用是两步动作。只写function functionName() { ... }不会触发函数体执行必须出现functionName();才会真正运行。圆括号是调用标记。函数名后面紧跟()表示要执行它如果不加圆括号而只写functionName在 JavaScript 中拿到的是对函数本身的引用后续学习回调函数时常用函数体并不会执行。可以反复调用。functionName(); functionName();会连续输出两次Hello World这正是可复用最直观的体现。四、本课任务创建并调用 reusableFunction--instructions--部分给出了两道明确指令创建一个名为reusableFunction的函数向控制台打印字符串Hi World调用该函数。挑战的初始代码--seed-contents--是一个空白的编辑器需要你从零写起。--solutions--部分给出了官方参考答案function reusableFunction() { console.log(Hi World); } reusableFunction();对照参考答案可以确认两个要点函数体的输出内容必须精确匹配Hi World大小写、空格都不能错因为自动判题会做严格字符串比对函数定义之后必须单独调用一次reusableFunction();两条指令缺一不可。五、自动判题机制hints 是如何验证你通过的freeCodeCamp 的挑战都通过 Markdown 中的--hints--段落声明自动测试。本课共有三条断言逐条对应前面的指令要求。1. reusableFunction 必须是一个函数assert(typeof reusableFunction function);通过typeof运算符确认reusableFunction的类型是function。只要定义动作缺失或定义成了普通变量这条就会失败。2. 调用后必须输出 Hi Worldassert(testConsole());这条依赖文档中--before-each--段落注入的辅助函数testConsole。它在每次测试执行前会缓存原始console与原生console.log临时覆写console.log当检测到消息精确等于Hi World时置hiWorldWasLogged true在覆写期间主动调用一次reusableFunction()最后恢复原生console.log并返回hiWorldWasLogged。因此这条断言验证的不只是函数被定义而是调用后确实向控制台输出了正确字符串。3. 定义之后必须真的调用过const functionStr reusableFunction __helpers.removeWhiteSpace(reusableFunction.toString()); const codeWithoutFunction __helpers.removeWhiteSpace(__helpers.removeJSComments(code)).replace(/reusableFunction\(\)\{/g, ); assert(/reusableFunction\(\)/.test(codeWithoutFunction));这条测试先剔除代码中的注释与空白字符__helpers.removeWhiteSpace、__helpers.removeJSComments再把定义语句本身的reusableFunction(){}模式移除最后用正则/reusableFunction\(\)/检查源码中确实存在独立的调用表达式。这样的写法能有效避免只定义、没调用或通过注释里的函数名蒙混过关的取巧情况。六、挑战源文件的结构化格式本课文件.md本身并不是给人阅读的普通文章而是 freeCodeCamp 课程引擎可以解析的结构化源数据。文件开头由---包裹的 frontmatter 声明了元信息id: 56bbb991ad1ed5201cd392cf # 挑战唯一 ID课程顺序引用依赖它 title: Write Reusable JavaScript with Functions # 挑战标题 challengeType: 1 # 挑战类型标识 forumTopicId: 18378 # 关联论坛讨论主题 ID dashedName: write-reusable-javascript-with-functions # URL 友好的短横线命名正文则通过若干语义化区块组织内容本课用到了区块作用# --description--面向学习者的概念讲解本课的函数介绍与示例# --instructions--可操作的任务清单# --before-each--每次测试运行前注入的辅助脚本# --hints--自动判定的断言清单# --seed-contents--初始种子代码本课为空需从零编写# --solutions--官方参考答案用于示例展示与测试对照如果对这套格式本身感兴趣可以进一步查看仓库中的挑战结构与校验相关工具例如curriculum/schema/challenge-schema.js挑战结构约束与 Basic JavaScript 板块结构定义 basic-javascript.json。而本课源文件同目录下还存放着整个 Basic JavaScript 板块的全部 100 余个挑战例如前一课的 Shopping List 与紧随其后的 Passing Values to Functions with Arguments。七、学完本课后下一步与自学建议在课程中的衔接本课只是函数的第一课。紧接着的下一个挑战 Passing Values to Functions with Arguments 就会引入**参数parameters与实参arguments**的概念参数是函数定义时占位用的变量实参是调用时真正传入的值。例如function testFun(param1, param2) { console.log(param1, param2); } testFun(Hello, World);再往后课程还会依次讲解return返回值、全局/局部作用域以及undefined 返回值等进阶主题。因此建议按板块顺序逐课推进确保函数体系的知识环环相扣。自学验证建议在本地浏览器控制台或 Node.js 环境中可以自行验证本课知识function reusableFunction() { console.log(Hi World); } reusableFunction(); // 控制台输出: Hi World reusableFunction(); // 再次调用再次输出: Hi World尝试对比以下两种情况能帮助你加深对定义与调用区别的理解// 只定义、不调用没有任何控制台输出 function demo() { console.log(never shown); } // 引用而不调用同样没有任何输出demo 是函数对象本身 demo; // 调用圆括号触发执行 demo();结语Write Reusable JavaScript with Functions 虽然只覆盖了函数最基础的定义 调用语法但它奠定了整个函数体系的学习起点。通过本文对挑战源文件、板块排序与自动判题逻辑的逐层拆解你可以看到 freeCodeCamp 如何用结构化的 Markdown 源数据驱动一套完整的在线练习闭环——而理解这套机制无论对你完成当前挑战还是日后为开源社区贡献课程内容都大有裨益。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考