摘要：前段時(shí)間看見(jiàn)我們班群里分享了一張圖片，上面有些題目，我自己做了一遍，覺(jué)得還是可以歸納分享出來(lái)的，聽(tīng)說(shuō)是阿里的題目，我也不知真假，看題目，出的還是有點(diǎn)技術(shù)含量的。我覺(jué)得學(xué)習(xí)應(yīng)該是積極主動(dòng)的行為，所以分享的方法沒(méi)有注釋信息。

作為一個(gè)前端一年多了，總覺(jué)得自也該寫(xiě)寫(xiě)自己的博客了。其實(shí)早就想寫(xiě)了，但是不知道寫(xiě)點(diǎn)什么，感覺(jué)自己還是小白，也不想自己寫(xiě)出的東西誤人子弟。前段時(shí)間看見(jiàn)我們班群里分享了一張圖片，上面有些題目，我自己做了一遍，覺(jué)得還是可以歸納分享出來(lái)的，聽(tīng)說(shuō)是阿里的題目，我也不知真假，看題目，出的還是有點(diǎn)技術(shù)含量的。好了，話不多說(shuō)就是干。這篇博客只是對(duì)這些題的個(gè)人解答方法，我自己針對(duì)個(gè)別題目也在百度上搜過(guò)，總覺(jué)得自己的寫(xiě)法可以繼續(xù)優(yōu)化，不是很好，希望對(duì)于前端同學(xué)有所幫助。大神就請(qǐng)繞道啦~

題目如下：
1、字符串?dāng)?shù)組去除重復(fù)的項(xiàng)，例如：

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

function quchong(arr) {
    var a = [];
    for(var i=0,len=arr.length;i
注意：“indexOf”方法是ECMAscript5方法，IE8以上支持；
2、寫(xiě)一個(gè)轉(zhuǎn)換函數(shù)，把JSON對(duì)象的key從橫杠形式（Pascal）轉(zhuǎn)換成小駝峰形式（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
代碼3：
function trans(str) {
    var re = /-(w)/g;
    str = str.replace(re, function ($0, $1) {
        return $1.toUpperCase();
    });
};

注意：前兩種方法都類似字符串拼接的方法，第一種主要是通過(guò)字符串方法slice來(lái)截取字符串；第二種方法主要是通過(guò)數(shù)組和字符串的轉(zhuǎn)換，來(lái)完成字符串的拼接；第三種方法適合熟悉正則表達(dá)式的同學(xué)，這里主要使用了replace的回調(diào)函數(shù)方法。
3、寫(xiě)一個(gè)類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));
   
結(jié)果截圖：

注意：這種方法在《JavaScript設(shè)計(jì)模式》一書(shū)中叫類式繼承，有興趣的同學(xué)可以了解一下。
4、給一個(gè)div：

用原生js讓這個(gè)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;
    }
}
5、寫(xiě)一個(gè)函數(shù)實(shí)現(xiàn)數(shù)字格式化輸出，比如輸入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;
}
注意：如果數(shù)字不是很大，可以直接使用toLocaleString()的方法；如果需要格式化的數(shù)字有小數(shù)部分，還需要把小數(shù)部分截取出來(lái)，格式化整數(shù)部分再拼接輸出結(jié)果。
toLocaleString方法使用截圖：

6、編寫(xiě)一個(gè)函數(shù)parseQueryString，它的用途是把URL參數(shù)解析為一個(gè)對(duì)象。
代碼：
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
7.編寫(xiě)一個(gè)函數(shù)flatten，傳入僅包含數(shù)字的多維數(shù)組，返回拍平后的結(jié)果。
如：傳入[1,[2,3]],返回[1,2,3]。
代碼：
var result = [];
function flatten(arr) {
    if(arr.length>0) {
        for(var i=0,len=arr.length;i0) {
                flatten(arr[i])
            } else {
                result.push(arr[i]);
            }
        }
    }
    return result;
}
注意：這里用到了遞歸的方法，如果數(shù)組中的元素還是數(shù)組且子數(shù)組的長(zhǎng)度大于零，就繼續(xù)調(diào)用本方法。
8、寫(xiě)一個(gè)類EventEmitter，實(shí)現(xiàn)簡(jiǎn)單的發(fā)布訂閱功能：
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");
    
結(jié)果截圖：

注意：如果想鏈?zhǔn)剑▁x.xx.xx）使用發(fā)布訂閱功能，需要在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");


結(jié)果截圖：

隨記：我的第一篇博客寫(xiě)好了，分享的方法可能不是最好的，但是是我認(rèn)為比較通俗易懂的。我覺(jué)得學(xué)習(xí)應(yīng)該是積極主動(dòng)的行為，所以分享的方法沒(méi)有注釋信息。如果對(duì)你有幫助，麻煩多多鼓勵(lì)咯。前端的知在我看來(lái)是片汪洋大海，還有很多技術(shù)還在匯入其中，我希望，這次的分享只是開(kāi)始，以后能有更優(yōu)質(zhì)的前端知識(shí)跟大家分享。