摘要：好吧，我承認太標題黨了，這篇文章是通過一道前端面試題引出的純技術(shù)討論。我先要矯情無比的從中外詩歌說起。這一星期陸陸續(xù)續(xù)面試了不少于個人，其中不乏工作履歷突出的候選者。這樣做的問題在于循環(huán)并沒有要求枚舉對象的修改與當(dāng)前循環(huán)保持一致。

好吧，我承認太標題黨了，這篇文章是通過一道前端面試題引出的純技術(shù)討論。我先要矯情無比的從中外詩歌說起。

傳統(tǒng)的佛學(xué)經(jīng)典里，被世人熟知的有這樣一句話：“一花一世界，一葉一菩提，一木一浮生，一草一天堂，一砂一極樂，一方一凈土，一笑一塵緣，一念一清靜。”

昔時佛祖拈花，惟迦葉微笑，既而步往極樂。從一朵花中便能悟出整個世界，得升天堂，佛祖就是佛祖，誰人能有這樣的境界。

同時，早在18世紀，英國偉大的浪漫主義詩人Black名為《天真的暗示》的詩中，也類似寫道："To see a world in a grain of sand, and a heaven in a wild flower"，一顆沙里一個世界，一朵野花一座天堂。

轉(zhuǎn)念，雖卑為碼農(nóng)，我們寫出的代碼，卻彰顯了功力：菜鳥和大神之間的差距，往往工程線上卑微的幾行代碼，便有天壤之差。

一道系列面試題，在JS知識體系中雖滄海一粟，但考察點充分評判面試者的能力。
管中窺豹，期待讀者有不同想法與我討論。

題目是我在《effective javascript》一書中提取的。這一星期陸陸續(xù)續(xù)面試了不少于10個人，其中不乏工作履歷突出的候選者。
但是很遺憾沒有能完全在較短時間內(nèi)有較高質(zhì)量的回答。

這道題可以分為前后兩個部分，第一部分很簡單，一般有一定JS OOP基礎(chǔ)的候選者應(yīng)該都可以答好：

一個社交網(wǎng)絡(luò)有一組成員（member），每個成員有一個自己的名字，和存儲其朋友信息的列表。請實現(xiàn)這樣一個Member構(gòu)造器。

正確答案不難理解：

function Member (name) {
    this.name = name;
    this.friends = [];
}

是不是非常簡單。它的典型錯誤包括但是不限于：

function Member (name) {
    this.name = name;
}
Member.prototype.friends = [];

關(guān)于方法和屬性是應(yīng)該放在原型上，還是構(gòu)造函數(shù)中，如果您不明白的話，是時候補一補原型原型鏈的知識了。推薦給大家看一下我的同事顏海鏡早在3年前的一篇文章。

同樣，這道題上我會順便考察一下面試者對JS中變量的存儲方式，包括堆棧存儲的不同情況和引用賦值的掌握情況。

以上是對JS基礎(chǔ)的考察，但是在這道題目的基礎(chǔ)上，我進行了更深一步提問。希望對候選者的臨場思維、JS基礎(chǔ)甚至一些設(shè)計能力，又更進一步認識。

我要實現(xiàn)一個帶環(huán)社交網(wǎng)絡(luò)（社交圈）：

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);

這種情況下，需要實現(xiàn)一個inNetwork方法，判斷某目標成員是否在另一個對象成員的社交圈中。規(guī)定：順著社交鏈能找到目標成員，就認為在社交圈中。否則，不在其社交圈。

如果剛接觸到這樣的題目，尤其是在面試現(xiàn)場，作為面試者很可能會慌亂一下。這時候，需要做的就是先準確分析題目。
根據(jù)題目，畫出符合上述題目代碼的實例化網(wǎng)絡(luò)：

接下來思考，搜索意味著需要遍歷整個社交網(wǎng)絡(luò)。我們應(yīng)該：

1）以單個根節(jié)點開始，

2）然后添加發(fā)現(xiàn)的節(jié)點，

3）移除訪問過的節(jié)點，防止死環(huán)

最終實現(xiàn)：

Member.prototype.inNetwork = function (target) {
    var visited = {};
    var worklist = [this]; // 用于存放社交鏈上的個體信息，初始時以“自己”作為根節(jié)點

    while (worklist.length > 0) {
        // 將worklist里的最后一項成員刪除并取出
        var member = worklist.pop();
        // 如果存在環(huán)的情況，需要避免重復(fù)訪問
        if (member.name in visited) {
             continue;
        }
        visited[member.name] = member;
        if (member === target) {
            return true;
        }
        // 將當(dāng)前成員的朋友列表加入worklist當(dāng)中，他們都在根節(jié)點的社交鏈上
        member.friends.forEach(function(friend) {
            worklist.push(friend);
        })
    }
    return false;
}

我在代碼中加上了注釋，如果您還不明白也沒有關(guān)系。建議去跑一下程序，進行debugger和console，嘗試去理解。

測試：

a.inNetwork(f) // true
f.inNetwork(a) //false

哈哈，果然Alice能通過朋友圈查找到Fatima，而Fatima卻不能反向找到Alice!當(dāng)然，這樣我認為是違反人類社會常識的。但是，誰讓他是題目呢？

一道簡單的題卻覆蓋了很多知識點，比如：while循環(huán)中的流程控制（continue），數(shù)組的基本方法（pop,forEach,push），for...in等等。

它的典型錯誤包括但是不限于：使用對象承載worklist，然后用for...in循環(huán)遍歷worklist。

這樣做的問題在于：for...in循環(huán)并沒有要求枚舉對象的修改與當(dāng)前循環(huán)保持一致。事實上，標準規(guī)范規(guī)定了：

“如果被枚舉對象在枚舉期間添加了新的屬性，那么枚舉期間并不能保證新添加的屬性能夠訪問”。

這道題考察了面試者包括JS OOP在內(nèi)的多項基礎(chǔ)，尤其是后半道考察了候選者的思維能力、反應(yīng)能力。如果讀者不能理解，歡迎留言問我?；蛘呷ゲ殚啠骸秂ffective javascript》一書。

扯回原詩句，談一下感悟，在天體的轉(zhuǎn)動和歲月的輪回中，我們分明的感受到每一個個體所擁有生命周期的單薄無力，在宏大的宇宙觀中恐怕渺小不及滄海一粟。詩句的后半句拿出來共勉：“Hold infinity in the palm of your hand, and eternity in an hour 把無限放在你的手上，永恒在一剎那里收藏”。

在前端快速迭代發(fā)展的學(xué)習(xí)中，作為初學(xué)者，往往面對浩瀚的知識海洋望洋興嘆，此時基礎(chǔ)便是那能夠收藏“永恒和無限”的潘多拉魔盒。