面試題分享

做爲一個前端一年多了，總以爲自也該寫寫本身的博客了。其實早就想寫了，可是不知道寫點什麼，感受本身仍是小白，也不想本身寫出的東西誤人子弟。前段時間看見咱們班羣裏分享了一張圖片，上面有些題目，我本身作了一遍，以爲仍是能夠概括分享出來的，據說是阿里的題目，我也不知真假，看題目，出的仍是有點技術含量的。好了，話很少說就是幹。這篇博客只是對這些題的我的解答方法，我本身針對個別題目也在百度上搜過，總以爲本身的寫法能夠繼續優化，不是很好，但願對於前端同窗有所幫助。大神就請繞道啦~

題目以下：
一、字符串數組去除重複的項，例如：

['1','2','1','3'] --> ['1','2','3'];
代碼：

function quchong(arr) {
    var a = [];
    for(var i=0,len=arr.length;i<len;i++) {
        if(a.indexOf(arr[i]) == -1) {
            a.push(arr[i]);
        }
    }
    return a;
}

注意：「indexOf」方法是ECMAscript5方法，IE8以上支持；
二、寫一個轉換函數，把JSON對象的key從橫槓形式（Pascal）轉換成小駝峯形式（Camel）。

即["a_b":1] --> ["aB":1]
代碼1：

function trans(obj) {
    var arr = [];
    var newObj = {};
    var pos,key;
    for(var p in obj) {
        key = p;
        pos = p.indexOf('_');
        p = p.slice(0,pos)+''+p.substr(pos+1,1).toLocaleUpperCase()+''+p.slice(pos+2);
        newObj[p] = obj[key];
    }
    return newObj;
}

代碼2：

function trans(obj) {
    var keys = Object.keys(obj);
    var newObj = {};
    var key;
    for(var i =0,len=keys.length;i<len;i++) {
        key = keys[i];
        var arr = key.split("");
        for(var j=0,length=arr.length;j<length;j++) {
            if(arr[j]=="_") {
                arr.splice(j,1);
                arr[j]=arr[j].toUpperCase();
            }
        }
        keys[i] = arr.join("");
        newObj[keys[i]] = obj[key];
    }
    return newObj;
}

代碼3：

function trans(str) {
    var re = /-(\w)/g;
    str = str.replace(re, function ($0, $1) {
        return $1.toUpperCase();
    });
};

注意：前兩種方法都相似字符串拼接的方法，第一種主要是經過字符串方法slice來截取字符串；第二種方法主要是經過數組和字符串的轉換，來完成字符串的拼接；第三種方法適合熟悉正則表達式的同窗，這裏主要使用了replace的回調函數方法。
三、寫一個類Person，擁有屬性age和name，擁有方法say(something)。

代碼：

function Person(age, name) {
        this.age = age;
        this.name = name;
    }
    Person.prototype.say=function() {
        // something
        console.log("let's do something");
    }
   function Superman(power) {
       this.power = power;
   }
   Superman.prototype = new Person(18,"程序員");
   Superman.prototype.fly = function(height) {
       console.log('height:',height);
   }
   var superman = new Superman("電力");
   console.log(superman.name,superman.age,superman.power,superman.fly(300));

結果截圖：

注意：這種方法在《JavaScript設計模式》一書中叫類式繼承，有興趣的同窗能夠了解一下。
四、給一個div：

<div id="draggable" style="width:200px;height: 200px;background: #000;position: absolute;left: 0;top: 0;"></div>
用原生js讓這個div能夠拖拽；
代碼：

window.onload=function() {
    var box = document.getElementById("draggable");
    box.onmousedown = function() {
        document.onmousemove = function(event) {
            var ev = event || window.event;
            box.style.left = (ev.clientX - box.offsetHeight/2)+'px';
            box.style.top = (ev.clientY - box.offsetWidth/2)+'px';
        }
    }
    box.onmouseup = function() {
        document.onmousemove = null;
    }
}

五、寫一個函數實現數字格式化輸出，好比輸入999999999，輸出爲999,999,999。
代碼：

function formarNum(num,sep) {
    sep = sep || ',';
    var reg = /\B(?=(\d{3})+(?!\d))/g;
    var str = num.toString().replace(reg,sep);
    return str;
}

注意：若是數字不是很大，能夠直接使用toLocaleString()的方法；若是須要格式化的數字有小數部分，還須要把小數部分截取出來，格式化整數部分再拼接輸出結果。

toLocaleString方法使用截圖：

六、編寫一個函數parseQueryString，它的用途是把URL參數解析爲一個對象。
代碼：

function parseQuryString(url) {
        var obj = {};
        var str = '';
        var arr = [];
        var item = '';
        if(url.indexOf('?')!=-1) {
            str = url.split('?')[1];
            arr = str.split('&');
            for(var i=0,len=arr.length;i<len;i++) {
                item = arr[i];
                item = item.split('=');
                obj[item[0]] = item[1];
            }
        }
        return obj;
    }

7.編寫一個函數flatten，傳入僅包含數字的多維數組，返回拍平後的結果。
如：傳入[1,[2,3]],返回[1,2,3]。

代碼：

var result = [];
function flatten(arr) {
    if(arr.length>0) {
        for(var i=0,len=arr.length;i<len;i++) {
            if(arr[i] instanceof Array && arr[i].length>0) {
                flatten(arr[i])
            } else {
                result.push(arr[i]);
            }
        }
    }
    return result;
}

注意：這裏用到了遞歸的方法，若是數組中的元素仍是數組且子數組的長度大於零，就繼續調用本方法。
八、寫一個類EventEmitter，實現簡單的發佈訂閱功能：

const e = new EventEmitter();
e.on('update',function(data){console.log(data)});
e.emit('update','message');

代碼：

function EventEmitter(event,cb) {};
    EventEmitter.prototype.on = function(eventName,cb) {
        this[eventName] = cb;
    }
    EventEmitter.prototype.emit = function(eventName,message) {
        this[eventName](message);
    }
    var e = new EventEmitter();
    e.on('update',function(data){console.log(data)});
    e.emit('update','message');

結果截圖：

注意：若是想鏈式（xx.xx.xx）使用發佈訂閱功能，須要在on和emit中將this返回。
例如：

function EventEmitter(event,cb) {};
    EventEmitter.prototype.on = function(eventName,cb) {
        this[eventName] = cb;
        return this;
    }
    EventEmitter.prototype.emit = function(eventName,message) {
        this[eventName](message);
        return this;
    }
    var e = new EventEmitter();
    e.on('update',function(data){console.log(data)}).on('go',function(data){alert(data)});
    e.emit('update','message').emit('go','go home');

結果截圖：

隨記：個人第一篇博客寫好了，分享的方法可能不是最好的，可是是我認爲比較通俗易懂的。我以爲學習應該是積極主動的行爲，因此分享的方法沒有註釋信息。若是對你有幫助，麻煩多多鼓勵咯。前端的知在我看來是片汪洋大海，還有不少技術還在匯入其中，我但願，此次的分享只是開始，之後能有更優質的前端知識跟你們分享。