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

资讯详情

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

freeCodeCamp Profile Lookup 挑战:3 步写出零失误的通讯录查找函数

freeCodeCamp Profile Lookup 挑战:3 步写出零失误的通讯录查找函数 freeCodeCamp Profile Lookup 挑战3 步写出零失误的通讯录查找函数【免费下载链接】TVBoxOSCTVBoxOSC - 一个基于第三方项目的代码库用于电视盒子的控制和管理。项目地址: https://gitcode.com/GitHub_Trending/tv/TVBoxOSCfreeCodeCamp 仓库的 basic-javascript 模块里有一道 JavaScript 挑战叫 Profile Lookup资料卡查询。它表面上只是让你补一个函数却用不到 15 行代码压进四个考点for 循环遍历、运行时属性名取值、判定优先级和返回值类型保持。这是典型的组合考点题。先把题面用大白话读一遍你会收到两个输入name一个名字和 prop以字符串传进来的属性名。contacts 数组是一本写好的通讯录每一项是一个人。你的任务找到 firstName 与 name 匹配的那个人返回他 prop 属性的值。麻烦在两条报错分支人没找到返回 No such contact人找到了但他没有这个属性返回 No such property。注意优先级——先查人找到人才谈查属性。哪怕人不在通讯录、属性名也根本不存在只报 No such contact。判断顺序命中条件返回值1整个数组里找不到 firstName 匹配的联系人No such contact2人找到了但 prop 不是他的属性No such property3人和属性都命中该属性的原值可能是字符串也可能是数组题目给的初始代码如下数据做了精简const contacts [ { firstName: Akira, lastName: Laine, number: 0543236543, likes: [Pizza, Coding, Brownie Points], }, // ……还有两个人结构相同 ]; function lookUpProfile(name, prop) { // 在这里补全函数体 }看数据能发现两条线索每人的字段类型并不完全一样likes 是数组number 是字符串而且 prop 是个变量不是固定键名。动手之前先想清楚这三个问题第一prop 是一个装着属性名的字符串你要动态读取那个键名对应的值该写什么语法第二返回值可能是字符串、可能是数组、还可能是报错文案怎么保证返回的东西和原始值类型一致不被你顺手转换掉第三人和属性都无效时该报哪条错判定顺序写反了会撞断言。 这三个问题就是这道题的三个坑。先记在脑子里写完代码再回来逐条验证。先写第一版再看它卡在 || 的边界上最直觉的写法其实能过全部官方断言function lookUpProfile(name, prop) { for (let i in contacts) { if (contacts[i].firstName name) { return contacts[i][prop] || No such property; } } return No such contact; }for...in按键名遍历用在数组上拿到的其实是下标在这里挨个过每个人取值用方括号 contacts[i][prop]人没找到就在循环结束后兜底 No such contact。问题出在||上如果某个属性值恰好是假值空字符串、0、false、null它会被当成没有这个属性直接替换成报错文案。当前测试数据里没有这种属性所以测试能过但逻辑埋了雷。想改是因为要把属性存不存在和属性值真不真彻底解耦用 hasOwnProperty判断对象自身是否拥有某个属性的方法做显式检查而不是靠 || 的短路副作用function lookUpProfile(name, prop) { for (const contact of contacts) { if (contact.firstName name) { if (Object.prototype.hasOwnProperty.call(contact, prop)) { return contact[prop]; } return No such property; } } return No such contact; }for...of 直接遍历数组元素不用绕下标意图更直白。name 一命中先用 hasOwnProperty 查属性存在就原样返回原值哪怕它是假值也不误判不存在才回 No such property。判定顺序不变整个人都找不到才会走到最后一行报 No such contact。这三种写法最容易翻车对照你自己的代码⚠️ 错法一用点语法取值return contact.prop;错在哪点号读到的是字面键 prop而不是变量 prop 里装的属性名结果永远是 undefined。纠正改用方括号 contact[prop]。错法二先判属性再判人for (const contact of contacts) { if (!(prop in contact)) return No such property; if (contact.firstName name) return contact[prop]; }错在哪name 和 prop 都无效时断言要 No such contact这样却先报了 No such property。纠正把 name 的查找完整做完找到人再谈 prop。错法三把数组拼成字符串return contact[prop].join(, );错在哪官方断言用 deepEqual逐元素比较两个数组是否相等校验要求 likes 数组原样返回一 join 就变字符串必挂。纠正属性值直接返回不做任何转换。写完之后顺手把仓库里这两个文件读掉这道题把四个知识点压进了一个函数对象数组遍历、运行时属性名的安全取值、固定的判定优先级、返回值类型保持。先读判定顺序再用 for...of 加 hasOwnProperty 落地最后过一遍错题本——三步走完断言全绿。想核对完整题面和六条断言看 curriculum/challenges/english/blocks/basic-javascript/5688e62ea601b2482ff8422b.md想确认它在课程里的坐标翻 curriculum/structure/blocks/basic-javascript.json。能独立写出来后就去挑战它的 Lab 版 Build a Profile Lookup——那关要你从零搭一个完整的查找小工具才是这道题真正的下一站。【免费下载链接】TVBoxOSCTVBoxOSC - 一个基于第三方项目的代码库用于电视盒子的控制和管理。项目地址: https://gitcode.com/GitHub_Trending/tv/TVBoxOSC创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表