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

好吧，我承認(rèn)太標(biāo)題黨了，這篇文章是通過(guò)一道前端面試題引出的純技術(shù)討論。我先要矯情無(wú)比的從中外詩(shī)歌說(shuō)起。

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

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

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

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

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

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

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

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

正確答案不難理解：

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

是不是非常簡(jiǎn)單。它的典型錯(cuò)誤包括但是不限于：

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

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

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

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

我要實(shí)現(xiàn)一個(gè)帶環(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);

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

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

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

1）以單個(gè)根節(jié)點(diǎn)開始，

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

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

最終實(shí)現(xiàn)：

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

    while (worklist.length > 0) {
        // 將worklist里的最后一項(xiàng)成員刪除并取出
        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é)點(diǎn)的社交鏈上
        member.friends.forEach(function(friend) {
            worklist.push(friend);
        })
    }
    return false;
}

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

測(cè)試：

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

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

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

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

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

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

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

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

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