ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

freeCodeCamp JavaScript 课程精讲:用方括号索引(Bracket Notation)取出字符串的首字符

freeCodeCamp JavaScript 课程精讲:用方括号索引(Bracket Notation)取出字符串的首字符 freeCodeCamp JavaScript 课程精讲用方括号索引Bracket Notation取出字符串的首字符【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本指南围绕 freeCodeCamp 开源仓库中 Basic JavaScript 单元的经典课时 Use Bracket Notation to Find the First Character in a String 展开系统讲解字符串索引、零基Zero-based计数原理与标准解法并剖析 freeCodeCamp 如何通过断言与正则自动验证代码。学完本课你既能独立通关该课时也能顺势掌握取任意字符、末字符、倒数第 N 个字符的整套字符串访问技能。一、这一课时在课程体系中的位置先理解这份文档的本质它不是纯说明文档而是 freeCodeCamp 课程仓库中以 Markdown frontmatter 形式存储、可被自动判题的教学关卡。文件开头的 YAML frontmatter 是id: bd7123c9c549eddfaeb5bdef title: Use Bracket Notation to Find the First Character in a String challengeType: 1 forumTopicId: 18341 dashedName: use-bracket-notation-to-find-the-first-character-in-a-stringid课时全局唯一标识title课时标题challengeType: 1课时类型编号forumTopicId关联论坛讨论主题的编号dashedNameURL 友好的短横线命名。它在学习序列中的位置可由 basic-javascript.json 确认本课时紧随 Find the Length of a String 之后位于 Understand String Immutability、Use Bracket Notation to Find the Nth Character in a String、取最后一个字符、取倒数第 N 个字符等课时之前形成长度 → 首字符 → 不可变性 → 任意位字符 → 末字符的渐进链条。也就是说本课是整个字符串访问技能线的第一块基石。二、核心概念什么是 Bracket Notation方括号索引课时文档给出的定义非常精炼Bracket notation 是一种在字符串中按特定索引index取得某个字符的方式写法是字符串变量后紧跟方括号、方括号内写索引数字。const firstName Charles; const firstLetter firstName[0];执行之后firstLetter的值就是字符串C。这里最关键、也最反人类直觉的是文档反复强调的思想Most modern programming languages, like JavaScript, dont start counting at 1 like humans do. They start at 0. This is referred to asZero-basedindexing.人类习惯从 1 开始数数而 JavaScript 等编程语言从 0 开始计数这就是零基索引zero-based indexing。因此第一个字符位于索引0而不是索引1——这是字符串访问类题目中最经典、也最容易踩坑的认知点。以文档中的Charles为例字符与索引的对应关系为字符Charles索引0123456课程任务中实际使用的字符串是Lovelace对应关系为字符Lovelace索引01234567可见L正是第 0 个字符lastName[0]的值就是字符串L。注意Lovelace共有 8 个字符其合法索引范围是 0 到 7上界恰好等于字符个数减 1——这正是后文取最后一个字符用length - 1的由来。三、实战任务解析初始代码seed的含义读完概念讲解后文档在# --instructions--中给出任务Use bracket notation to find the first character in thelastNamevariable and assign it tofirstLetterOfLastName.并从如下初始代码开始作答// Setup let firstLetterOfLastName ; const lastName Lovelace; // Only change code below this line firstLetterOfLastName lastName; // Change this line从这段 seed 代码可以拆解出三个信息平台用const声明了只读字符串lastName Lovelace作答时不能修改它目标变量firstLetterOfLastName用let声明、初始为空字符串需要由你赋值平台把改动点刻意留在// Change this line处提示你只需修改这一行。任务真正考查的是把前两个概念串起来识别Lovelace的首字符是L且L位于索引0然后写出lastName[0]。四、标准解法与本地运行验证课时文档在# --solutions--部分给出了完整参考解法let firstLetterOfLastName ; const lastName Lovelace; // Only change code below this line firstLetterOfLastName lastName[0];答案的核心仅一行firstLetterOfLastName lastName[0];。执行后该变量持有字符串L而不是整个lastName也不是lastName[1]那会得到o。你无需配置任何项目环境即可自行验证本机装有 Node.js 的话打开终端或用浏览器开发者工具F12 → Console粘贴下面代码即可看到输出let firstLetterOfLastName ; const lastName Lovelace; firstLetterOfLastName lastName[0]; console.log(firstLetterOfLastName); // 输出 L五、自动测试如何验证你的代码freeCodeCamp 课时之所以能即写即评是因为每个关卡的# --hints--内置了断言。本课的测试断言如下assert(firstLetterOfLastName L);assert(__helpers.removeJSComments(code).match(/firstLetterOfLastName\s*\s*lastName\s*\[\s*\d\s*\]/));两条断言从两个层面约束答案结果正确性firstLetterOfLastName必须用全等运算符与字符L严格相等杜绝类型上的取巧实现方式第二条用正则匹配形如firstLetterOfLastName lastName[数字]的赋值。其中__helpers.removeJSComments(code)先剔除代码中的注释避免在注释里伪造匹配文本\[\s*\d\s*\]表示方括号内包含一个数字允许空白。这意味着直接写firstLetterOfLastName L虽然结果正确却无法通过第二条测试——题目检验的是你是否掌握了用索引取值的语法而非单纯的结果答案。这也体现了整个 Basic JavaScript 单元考察过程、不唯结论的设计理念。六、同类技法横向扩展从首字符到任意字符本课只要求首字符但同目录下的三个相邻课时验证了同一语法的扩展性建议按序练习以形成完整的字符访问矩阵。1. 取第 N 个字符—— 见 Use Bracket Notation to Find the Nth Character in a String既然计算机从 0 开始计数第二个字符位于索引1课时任务最终要求lastName[2]取出第三个字符vconst firstName Ada; const secondLetterOfFirstName firstName[1]; // d2. 取最后一个字符—— 见 Use Bracket Notation to Find the Last Character in a String字符串长度未知时无法写死索引因此引入length属性做减法lastName[lastName.length - 1]即末字符const firstName Ada; const lastLetter firstName[firstName.length - 1]; // a该课时测试还额外要求代码中必须出现.length断言用/\.length/g统计出现次数确保你真正使用这一技巧。3. 取倒数第 N 个字符—— 见 Use Bracket Notation to Find the Nth-to-Last Character in a String同一原理推广到倒数第 N 位用length - N定位lastName[lastName.length - 2]可取出Lovelace中倒数第二个字符cconst firstName Augusta; const thirdToLastLetter firstName[firstName.length - 3]; // s这些课时与 Find the Length of a String、Understand String Immutability 等共同构成 Basic JavaScript 的字符串知识闭环全部源码位于 curriculum/challenges/english/blocks/basic-javascript 目录便于对照研读。七、索引访问的注意点小结综合上述四个课时可以提炼出使用方括号索引的关键规则索引从 0 开始第 1 个字符索引为 0第 N 个字符索引为N - 1末字符用length - 1合法索引上界是字符个数减 1如 8 个字符的Lovelace索引范围是 0 到 7空格与标点同样占位字符串中每个位置都对应一个索引逐字处理时不可忽略空白字符适用场景当需要按位置取字符、或配合循环按序遍历字符串时bracket notation 是最基础的工具也是后续 Basic Algorithm Scripting 中字符串算法题的底层技能。八、在本地阅读与运行这套课程仓库集课程内容与源码于一体阅读零门槛直接打开 bd7123c9c549eddfaeb5bdef.md即可查看--description--概念讲解、--instructions--任务、--hints--测试断言、--seed--初始代码与--solutions--参考解法的完整结构配套课时与课程块整体定义分别在 basic-javascript 目录与 basic-javascript.json 中。若想进一步了解这类课时在网页端如何被渲染与评测可继续浏览 client/src/templates/Challenges 相关源码。九、小结通过本课你可以确认自己掌握了三件事Bracket notation 的定义与写法string[index]用于取出字符串中指定索引位置的字符零基索引的意义首字符是string[0]而非string[1]freeCodeCamp 关卡的结构与判题逻辑--seed--给起点、--hints--用断言与正则双重校验、--solutions--给参考实现确保学习的是原理而非答案。完成本课后建议前往同一目录依次挑战第 N 个字符最后一个字符倒数第 N 个字符三个进阶课时把这套零基索引 length 定位的心智模型固化为扎实的字符串操作能力。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表