資訊專欄INFORMATION COLUMN
摘要：好吧，我承認太標題黨了，這篇文章是通過一道前端面試題引出的純技術討論。我先要矯情無比的從中外詩歌說起。這一星期陸陸續續面試了不少于個人，其中不乏工作履歷突出的候選者。這樣做的問題在于循環并沒有要求枚舉對象的修改與當前循環保持一致。
好吧，我承認太標題黨了，這篇文章是通過一道前端面試題引出的純技術討論。我先要矯情無比的從中外詩歌說起。
傳統的佛學經典里，被世人熟知的有這樣一句話：“一花一世界，一葉一菩提，一木一浮生，一草一天堂，一砂一極樂，一方一凈土，一笑一塵緣，一念一清靜?！?/p>
昔時佛祖拈花，惟迦葉微笑，既而步往極樂。從一朵花中便能悟出整個世界，得升天堂，佛祖就是佛祖，誰人能有這樣的境界。
同時，早在18世紀，英國偉大的浪漫主義詩人Black名為《天真的暗示》的詩中，也類似寫道："To see a world in a grain of sand, and a heaven in a wild flower"，一顆沙里一個世界，一朵野花一座天堂。
轉念，雖卑為碼農，我們寫出的代碼，卻彰顯了功力：菜鳥和大神之間的差距，往往工程線上卑微的幾行代碼，便有天壤之差。
一道系列面試題，在JS知識體系中雖滄海一粟，但考察點充分評判面試者的能力。
管中窺豹，期待讀者有不同想法與我討論。
題目是我在《effective javascript》一書中提取的。這一星期陸陸續續面試了不少于10個人，其中不乏工作履歷突出的候選者。
但是很遺憾沒有能完全在較短時間內有較高質量的回答。
這道題可以分為前后兩個部分，第一部分很簡單，一般有一定JS OOP基礎的候選者應該都可以答好：
一個社交網絡有一組成員（member），每個成員有一個自己的名字，和存儲其朋友信息的列表。請實現這樣一個Member構造器。
正確答案不難理解：
function Member (name) {
this.name = name;
this.friends = [];
}
是不是非常簡單。它的典型錯誤包括但是不限于：
function Member (name) {
this.name = name;
}
Member.prototype.friends = [];
關于方法和屬性是應該放在原型上，還是構造函數中，如果您不明白的話，是時候補一補原型原型鏈的知識了。推薦給大家看一下我的同事顏海鏡早在3年前的一篇文章。
同樣，這道題上我會順便考察一下面試者對JS中變量的存儲方式，包括堆棧存儲的不同情況和引用賦值的掌握情況。
題目變身以上是對JS基礎的考察，但是在這道題目的基礎上，我進行了更深一步提問。希望對候選者的臨場思維、JS基礎甚至一些設計能力，又更進一步認識。
我要實現一個帶環社交網絡（社交圈）：
var a = new Member("Alice");
var b = new Member("Bob");
var c = new Member("Carol");
var d = new Member("Dieter");
var e = new Member("Eli");
var f = new Member("Fatima");
a.friends.push(b);
b.friends.push(c);
c.friends.push(e);
d.friends.push(b);
e.friends.push(d, f);
這種情況下，需要實現一個inNetwork方法，判斷某目標成員是否在另一個對象成員的社交圈中。規定：順著社交鏈能找到目標成員，就認為在社交圈中。否則，不在其社交圈。
解題思路如果剛接觸到這樣的題目，尤其是在面試現場，作為面試者很可能會慌亂一下。這時候，需要做的就是先準確分析題目。
根據題目，畫出符合上述題目代碼的實例化網絡：
接下來思考，搜索意味著需要遍歷整個社交網絡。我們應該：
1）以單個根節點開始，
2）然后添加發現的節點，
3）移除訪問過的節點，防止死環
最終實現：
Member.prototype.inNetwork = function (target) {
var visited = {};
var worklist = [this]; // 用于存放社交鏈上的個體信息，初始時以“自己”作為根節點
while (worklist.length > 0) {
// 將worklist里的最后一項成員刪除并取出
var member = worklist.pop();
// 如果存在環的情況，需要避免重復訪問
if (member.name in visited) {
continue;
}
visited[member.name] = member;
if (member === target) {
return true;
}
// 將當前成員的朋友列表加入worklist當中，他們都在根節點的社交鏈上
member.friends.forEach(function(friend) {
worklist.push(friend);
})
}
return false;
}
我在代碼中加上了注釋，如果您還不明白也沒有關系。建議去跑一下程序，進行debugger和console，嘗試去理解。
測試：
a.inNetwork(f) // true f.inNetwork(a) //false
哈哈，果然Alice能通過朋友圈查找到Fatima，而Fatima卻不能反向找到Alice!當然，這樣我認為是違反人類社會常識的。但是，誰讓他是題目呢？
一道簡單的題卻覆蓋了很多知識點，比如：while循環中的流程控制（continue），數組的基本方法（pop,forEach,push），for...in等等。
它的典型錯誤包括但是不限于：使用對象承載worklist，然后用for...in循環遍歷worklist。
這樣做的問題在于：for...in循環并沒有要求枚舉對象的修改與當前循環保持一致。事實上，標準規范規定了：
“如果被枚舉對象在枚舉期間添加了新的屬性，那么枚舉期間并不能保證新添加的屬性能夠訪問”。
總結這道題考察了面試者包括JS OOP在內的多項基礎，尤其是后半道考察了候選者的思維能力、反應能力。如果讀者不能理解，歡迎留言問我。或者去查閱：《effective javascript》一書。
扯回原詩句，談一下感悟，在天體的轉動和歲月的輪回中，我們分明的感受到每一個個體所擁有生命周期的單薄無力，在宏大的宇宙觀中恐怕渺小不及滄海一粟。詩句的后半句拿出來共勉：“Hold infinity in the palm of your hand, and eternity in an hour 把無限放在你的手上，永恒在一剎那里收藏”。
在前端快速迭代發展的學習中，作為初學者，往往面對浩瀚的知識海洋望洋興嘆，此時基礎便是那能夠收藏“永恒和無限”的潘多拉魔盒。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50525.html
摘要：好吧，我承認太標題黨了，這篇文章是通過一道前端面試題引出的純技術討論。我先要矯情無比的從中外詩歌說起。這一星期陸陸續續面試了不少于個人，其中不乏工作履歷突出的候選者。這樣做的問題在于循環并沒有要求枚舉對象的修改與當前循環保持一致。 好吧，我承認太標題黨了，這篇文章是通過一道前端面試題引出的純技術討論。我先要矯情無比的從中外詩歌說起。 傳統的佛學經典里，被世人熟知的有這樣一句話：一花一世...
摘要：通過點擊事件來更換不同的值和文章內容。文章排版整潔，注意詩游戲玩轉簡書的第一步，從這個專題開始。專題主編蘇錦年投稿須知本專題收錄古詩詞現代詩以及詩詞點評及指導。內容必須為原創，切勿用其他詩人的詩句。 接著上一篇我們接著講,關于這個網站的專題頁面和2015精選頁面，如果有小伙伴沒看過上一篇文章，這里附上上一篇文章的的鏈接基于Vue,Vue-router,Vuex的簡書網站模仿這里是網站的...
閱讀 1270·2021-11-15 18:14
閱讀 3125·2021-08-25 09:38
閱讀 2663·2019-08-30 10:55
閱讀 2672·2019-08-29 16:39
閱讀 1304·2019-08-29 15:07
閱讀 2445·2019-08-29 14:14
閱讀 810·2019-08-29 12:36
閱讀 909·2019-08-29 11:21
