摘要：阿里前端筆試題，題目不多，難度也不大，我只記錄了兩道稍微有點難度的編程題。題目如下的功能是，將一個字面量對象轉化為一個格式的字符串。

阿里前端筆試題，題目不多，難度也不大，我只記錄了兩道稍微有點難度的編程題。題目如下：
1.JSON.stringify 的功能是，將一個 JavaScript 字面量對象轉化為一個 JSON 格式的字符串。例如:

const obj = {a:1, b:2}
JSON.stringify(obj) // => "{"a":1,"b":2}"

當要轉化的對象有“環”存在時（子節點屬性賦值了父節點的引用），為了避免死循環，JSON.stringify 會拋出異常，例如：

const obj = {
  foo: {
    name: "foo",
    bar: {
      name: "bar"
      baz: {
        name: "baz",
        aChild: null // 待會將指向obj.bar
      }
    }
  }
}
obj.foo.bar.baz.aChild = obj.foo // foo->bar->baz->aChild->foo形成環
JSON.stringify(obj) // => TypeError: Converting circular personucture to JSON

請完善以下“環”檢查器函數 cycleDetector，當入參對象中有環時返回 true，否則返回 false。

function cycleDetector(obj) {   
  // 請添加代碼
}

解題思路：首先很容易想到要遍歷這個對象，然后判斷屬性值是否為一個對象，如果是，則遞歸遍歷這個屬性值，但難點是該如何判斷這個屬性值是否為某個父節點的引用，要怎樣拿到父節點的引用呢？？？
其實我們可以先用一個數組cache用來保存對象類型的屬性值，再用一個標記變量來標記是否有環，然后遍歷時判斷這個屬性值類型是否為一個對象，如果是，則判斷這個屬性值是否在那個cache數組里，如果在，則表明有環，如果不在，則把這個屬性值添加到數組里，再遞歸遍歷這個屬性值即可。

具體代碼如下：

function cycleDetector(obj) {
    let hasCircle = false, //用一個變量去標記是否有環
        cache = []; //保存值為對象的屬性值
    (function(obj) {
        Object.keys(obj).forEach(key => {
            const value = obj[key]
            if (typeof value == "object" && value !== null) {
                const index = cache.indexOf(value)
                if (index !== -1) { //如果cache中存在這個value，則表示有環
                    hasCircle = true
                    return
                } else {
                    cache.push(value)
                    arguments.callee(value)
                }
            }
        })
    })(obj)
    return hasCircle
}

2.實現一個EventEmitter類，這個類包含以下方法：
on（監聽事件，該事件可以被觸發多次）
once（也是監聽事件，但只能被觸發一次）
fire（觸發指定的事件）
off（移除指定事件的某個回調方法或者所有回調方法）

class EventEmitter {
  /**請補充你的代碼***/
}
const event = new EventEmitter()
const drank = (person) => {
  console.log(person + "喝水")
}
event.on("drank", drank)
event.on("eat", (person) => {
  console.log(person + "吃東西")
})
event.once("buy", (person) => {
  console.log(person + "買東西")
})
event.fire("drank", "我")   // 我喝水  
event.fire("drank", "我")   // 我喝水  
event.fire("eat", "其它人")   // 其它人吃東西
event.fire("eat", "其它人")   // 其它人吃東西
event.fire("buy", "其它人")  //其它人買東西
event.fire("buy", "其它人")  //這里不會再次觸發buy事件，因為once只能觸發一次
event.off("eat")  //移除eat事件
event.fire("eat", "其它人")  //這里不會觸發eat事件，因為已經移除了

解題思路：這題其實就是實現發布-訂閱模式了，難點在于怎樣實現once事件，即只觸發一次。其實也就是要實現兩種類型的事件，我們可以用不同的對象去保存這兩種類型的事件，然后在fire的時候，這兩種事件都要被處理即可。
具體代碼如下：

class EventEmitter {
    constructor() {
        this.queue = {} //可觸發多次的事件
        this.onceQueue = {} //只能觸發一次的事件
    }
    on(event, fn) {  //監聽事件，可以觸發多次
        if (!this.queue[event]) this.queue[event] = []
        this.queue[event].push(fn)
    }
    once(event, fn) {   //監聽事件，只能觸發一次
        if (!this.onceQueue[event]) {
            this.onceQueue[event] = {
                fns: [],
                hasFired: false
            }
        }
        this.onceQueue[event].fns.push(fn)
    }
    fire() {  //觸發指定的事件
        const event = [].shift.call(arguments), //取得事件名稱
            fns = this.queue[event],  //取得該事件里所有的回調函數（可以觸發多次的事件）
            onceFns = this.onceQueue[event]  //取得該事件里所有的回調函數（只能觸發一次的事件）
        if (fns && fns.length != 0) {
            let i = 0,fn
            while (fn = fns[i++]) {
                fn.apply(this, arguments)
            }
        }
        if (onceFns && !onceFns.hasFired) {
            let i = 0,fn
            while (fn = onceFns.fns[i++]) {
                fn.apply(this, arguments)
            }
            this.onceQueue[event].hasFired = true
        }
    }
    off(event, fn = null) { //可移除特定事件里的某個回調函數或者所有回調函數
        const fns = this.queue[event]
        if (!fns || fns.length == 0) return
        if (fn) { //移除該事件特定的回調
            this.queue[event] = fns.filter(item => {
                return item !== fn
            })
        } else { //移除該事件所有的回調
            this.queue[event] = []
        }
    }
}

原文地址：https://lenshen.com/2017/08/2...
最后，我的github:https://github.com/lensh