組查找與括號屬性訪問)
12 行代碼跑通 freeCodeCamp 的 Profile Lookup對象數(shù)組查找與括號屬性訪問【免費(fèi)下載鏈接】TVBoxOSCTVBoxOSC - 一個基于第三方項目的代碼庫用于電視盒子的控制和管理。項目地址: https://gitcode.com/GitHub_Trending/tv/TVBoxOSC在 freeCodeCamp 的 Profile Lookup 挑戰(zhàn)里你要按姓名在對象數(shù)組里查聯(lián)系人并返回他的某個屬性。可如果憑直覺寫lookUpProfile(Akira, likes)完全可能返回undefined。本文用這道對象數(shù)組查找題講清括號屬性訪問的用法、兩種缺失語義的處理12 行代碼全部講透——適合正在刷 JS 基礎(chǔ)練習(xí)、又被這類函數(shù)題卡住的你。先查人、再查屬性把題面翻譯成判定表函數(shù)簽名是固定的lookUpProfile(name, prop)name是名字字符串prop是屬性名字符串。被查詢的數(shù)據(jù)是contacts對象數(shù)組每個元素代表一個人const contacts [ { firstName: Akira, lastName: Laine, number: 0543236543, likes: [Pizza, Coding] }, { firstName: Kristian, lastName: Vos, number: unknown, likes: [JavaScript, Gaming] }, // ... 其余兩個略 ]; function lookUpProfile(name, prop) { // Only change code below this line }注意字段是異構(gòu)的number是字符串likes是數(shù)組各對象擁有的屬性集合也不完全一樣。判定邏輯由此拆成三條分支成功分支某個聯(lián)系人的firstName與name相等且prop確實是這個對象的屬性 → 原樣返回該屬性的值字符串就返回字符串?dāng)?shù)組就返回數(shù)組。失敗分支 A缺人整個數(shù)組里沒有任何firstName匹配name→ 返回No such contact此時prop是否合法都不重要。失敗分支 B缺屬性人找到了但prop不在那個對象上 → 返回No such property。關(guān)鍵在后半句兩種失敗語義不同優(yōu)先級固定。先判人人查不到就直接報缺人人命中之后才輪到判屬性。順序一顛倒lookUpProfile(Bob, potato)就會被判成屬性不存在而官方預(yù)期是人不存在。兩種寫法一次講透官方短路與顯式檢查官方版for...in 加 ||freeCodeCamp 的參考答案用for...in遍歷下標(biāo)再用一個||兜底function lookUpProfile(name, prop) { for (let i in contacts) { // i 依次取 0、1、2、3 if (contacts[i].firstName name) { // 括號訪問讀取 prop 指向的屬性取不到就用 || 兜底 return contacts[i][prop] || No such property; } } // 整輪遍歷沒命中才說明這個人不在數(shù)組里 return No such contact; }為什么return No such contact要放在循環(huán)外面因為必須把整個數(shù)組走完、firstName一個都沒對上才能下結(jié)論人不在通訊錄里若第一個對象沒匹配就報缺人等于把后面的數(shù)據(jù)全部誤判為不存在。而一旦命中就立刻return先查人、后查屬性的順序天然被保住。這里用到的括號屬性訪問就是obj[key]里key為變量時的讀法——prop是運(yùn)行時傳進(jìn)來的鍵名只有括號語法才能解釋它。??邊界提示contacts[i][prop]在屬性不存在時讀到undefined||順勢換成提示語?？僧?dāng)合法值本身就是假值——比如age: 0、flag: false、空字符串——||會把正常返回值一并吞掉誤報 No such property。官方測試數(shù)據(jù)里恰好都是真值所以能過但這個隱患是真實存在的。更穩(wěn)的版本for...of 加 hasOwnPropertyfunction lookUpProfile(name, prop) { for (const contact of contacts) { if (contact.firstName name) { // 只問屬性在不在不問值是不是真值 if (Object.prototype.hasOwnProperty.call(contact, prop)) { return contact[prop]; // 0、false、空串都原樣返回 } return No such property; } } return No such contact; }與官方版相比只有兩處差異直接遍歷對象本體而不是下標(biāo)以及把||捷徑換成一次顯式的hasOwnProperty.call檢查。hasOwnProperty判斷對象是否擁有某個自有屬性只關(guān)心在不在不關(guān)心值真假于是age: 0這類假值會被如實返回 0而官方版會把它誤報成缺屬性。兩者都能通過全部官方斷言但后一種在語義上更誠實。四個高頻錯誤錯誤代碼改正確代碼點(diǎn)語法取屬性contact.prop→contact[prop]。點(diǎn)語法讀的是字面鍵prop永遠(yuǎn)是undefined變量只能經(jīng)括號解釋為鍵名。判空順序?qū)懛聪炔閜rop是否合法再找人 → 人命中之后才查prop。否則lookUpProfile(Bob, potato)會錯報 No such property。對整數(shù)組做統(tǒng)一 prop 校驗?zāi)胮rop去挨個校驗所有聯(lián)系人 → 只對命中的那個對象校驗。字段各不一致有效性只能以實際匹配到的對象為準(zhǔn)。把 likes 拼成字符串contact.likes.join(, )→contact.likes。斷言校驗返回值是數(shù)組join 一轉(zhuǎn)成字符串就掛了。在 freeCodeCamp 倉庫里驗證它 挑戰(zhàn)文件curriculum/challenges/english/blocks/basic-javascript/5688e62ea601b2482ff8422b.md的 front-matter 記錄了challengeType: 1瀏覽器控制臺函數(shù)題與dashedName: profile-lookup。其中的--hints--段落就是斷言腳本在線編輯器運(yùn)行時它會拿你的補(bǔ)全函數(shù)逐條執(zhí)行 assert--seed-contents--段落則是你在編輯器里看到的初始代碼只有注釋標(biāo)出的區(qū)域開放編輯。回到自己的控制臺驗證把||換成hasOwnProperty.call再跑一遍全部六條斷言確認(rèn)行為一致。手工給 contacts 加一個number: 0的聯(lián)系人分別調(diào)用兩種寫法看一個返回 No such property、另一個返回 0。用contacts.find(c c.firstName name)加可選鏈重寫循環(huán)體驗函數(shù)式風(fēng)格?，F(xiàn)在就把這道題做掉然后到空文件里手寫本文的三種版本——當(dāng)你能說清每個版本會吞掉哪些假值時這道題才算真正屬于你。【免費(fèi)下載鏈接】TVBoxOSCTVBoxOSC - 一個基于第三方項目的代碼庫用于電視盒子的控制和管理。項目地址: https://gitcode.com/GitHub_Trending/tv/TVBoxOSC創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 12 行代碼跑通 freeCodeCamp 的 Profile Lookup：對象數(shù)組查找與括號屬性訪問
12 行代碼跑通 freeCodeCamp 的 Profile Lookup對象數(shù)組查找與括號屬性訪問【免費(fèi)下載鏈接】TVBoxOSCTVBoxOSC - 一個基于第三方項目的代碼庫用于電視盒子的控制和管理。項目地址: https://gitcode.com/GitHub_Trending/tv/TVBoxOSC在 freeCodeCamp 的 Profile Lookup 挑戰(zhàn)里你要按姓名在對象數(shù)組里查聯(lián)系人并返回他的某個屬性。可如果憑直覺寫lookUpProfile(Akira, likes)完全可能返回undefined。本文用這道對象數(shù)組查找題講清括號屬性訪問的用法、兩種缺失語義的處理12 行代碼全部講透——適合正在刷 JS 基礎(chǔ)練習(xí)、又被這類函數(shù)題卡住的你。先查人、再查屬性把題面翻譯成判定表函數(shù)簽名是固定的lookUpProfile(name, prop)name是名字字符串prop是屬性名字符串。被查詢的數(shù)據(jù)是contacts對象數(shù)組每個元素代表一個人const contacts [ { firstName: Akira, lastName: Laine, number: 0543236543, likes: [Pizza, Coding] }, { firstName: Kristian, lastName: Vos, number: unknown, likes: [JavaScript, Gaming] }, // ... 其余兩個略 ]; function lookUpProfile(name, prop) { // Only change code below this line }注意字段是異構(gòu)的number是字符串likes是數(shù)組各對象擁有的屬性集合也不完全一樣。判定邏輯由此拆成三條分支成功分支某個聯(lián)系人的firstName與name相等且prop確實是這個對象的屬性 → 原樣返回該屬性的值字符串就返回字符串?dāng)?shù)組就返回數(shù)組。失敗分支 A缺人整個數(shù)組里沒有任何firstName匹配name→ 返回No such contact此時prop是否合法都不重要。失敗分支 B缺屬性人找到了但prop不在那個對象上 → 返回No such property。關(guān)鍵在后半句兩種失敗語義不同優(yōu)先級固定。先判人人查不到就直接報缺人人命中之后才輪到判屬性。順序一顛倒lookUpProfile(Bob, potato)就會被判成屬性不存在而官方預(yù)期是人不存在。兩種寫法一次講透官方短路與顯式檢查官方版for...in 加 ||freeCodeCamp 的參考答案用for...in遍歷下標(biāo)再用一個||兜底function lookUpProfile(name, prop) { for (let i in contacts) { // i 依次取 0、1、2、3 if (contacts[i].firstName name) { // 括號訪問讀取 prop 指向的屬性取不到就用 || 兜底 return contacts[i][prop] || No such property; } } // 整輪遍歷沒命中才說明這個人不在數(shù)組里 return No such contact; }為什么return No such contact要放在循環(huán)外面因為必須把整個數(shù)組走完、firstName一個都沒對上才能下結(jié)論人不在通訊錄里若第一個對象沒匹配就報缺人等于把后面的數(shù)據(jù)全部誤判為不存在。而一旦命中就立刻return先查人、后查屬性的順序天然被保住。這里用到的括號屬性訪問就是obj[key]里key為變量時的讀法——prop是運(yùn)行時傳進(jìn)來的鍵名只有括號語法才能解釋它。??邊界提示contacts[i][prop]在屬性不存在時讀到undefined||順勢換成提示語?？僧?dāng)合法值本身就是假值——比如age: 0、flag: false、空字符串——||會把正常返回值一并吞掉誤報 No such property。官方測試數(shù)據(jù)里恰好都是真值所以能過但這個隱患是真實存在的。更穩(wěn)的版本for...of 加 hasOwnPropertyfunction lookUpProfile(name, prop) { for (const contact of contacts) { if (contact.firstName name) { // 只問屬性在不在不問值是不是真值 if (Object.prototype.hasOwnProperty.call(contact, prop)) { return contact[prop]; // 0、false、空串都原樣返回 } return No such property; } } return No such contact; }與官方版相比只有兩處差異直接遍歷對象本體而不是下標(biāo)以及把||捷徑換成一次顯式的hasOwnProperty.call檢查。hasOwnProperty判斷對象是否擁有某個自有屬性只關(guān)心在不在不關(guān)心值真假于是age: 0這類假值會被如實返回 0而官方版會把它誤報成缺屬性。兩者都能通過全部官方斷言但后一種在語義上更誠實。四個高頻錯誤錯誤代碼改正確代碼點(diǎn)語法取屬性contact.prop→contact[prop]。點(diǎn)語法讀的是字面鍵prop永遠(yuǎn)是undefined變量只能經(jīng)括號解釋為鍵名。判空順序?qū)懛聪炔閜rop是否合法再找人 → 人命中之后才查prop。否則lookUpProfile(Bob, potato)會錯報 No such property。對整數(shù)組做統(tǒng)一 prop 校驗?zāi)胮rop去挨個校驗所有聯(lián)系人 → 只對命中的那個對象校驗。字段各不一致有效性只能以實際匹配到的對象為準(zhǔn)。把 likes 拼成字符串contact.likes.join(, )→contact.likes。斷言校驗返回值是數(shù)組join 一轉(zhuǎn)成字符串就掛了。在 freeCodeCamp 倉庫里驗證它 挑戰(zhàn)文件curriculum/challenges/english/blocks/basic-javascript/5688e62ea601b2482ff8422b.md的 front-matter 記錄了challengeType: 1瀏覽器控制臺函數(shù)題與dashedName: profile-lookup。其中的--hints--段落就是斷言腳本在線編輯器運(yùn)行時它會拿你的補(bǔ)全函數(shù)逐條執(zhí)行 assert--seed-contents--段落則是你在編輯器里看到的初始代碼只有注釋標(biāo)出的區(qū)域開放編輯。回到自己的控制臺驗證把||換成hasOwnProperty.call再跑一遍全部六條斷言確認(rèn)行為一致。手工給 contacts 加一個number: 0的聯(lián)系人分別調(diào)用兩種寫法看一個返回 No such property、另一個返回 0。用contacts.find(c c.firstName name)加可選鏈重寫循環(huán)體驗函數(shù)式風(fēng)格?，F(xiàn)在就把這道題做掉然后到空文件里手寫本文的三種版本——當(dāng)你能說清每個版本會吞掉哪些假值時這道題才算真正屬于你。【免費(fèi)下載鏈接】TVBoxOSCTVBoxOSC - 一個基于第三方項目的代碼庫用于電視盒子的控制和管理。項目地址: https://gitcode.com/GitHub_Trending/tv/TVBoxOSC創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考