面试题分享

摘要：前段时间看见我们班群里分享了一张图片，上面有些题目，我自己做了一遍，觉得还是可以归纳分享出来的，听说是阿里的题目，我也不知真假，看题目，出的还是有点技术含量的。我觉得学习应该是积极主动的行为，所以分享的方法没有注释信息。

作为一个前端一年多了，总觉得自也该写写自己的博客了。其实早就想写了，但是不知道写点什么，感觉自己还是小白，也不想自己写出的东西误人子弟。前段时间看见我们班群里分享了一张图片，上面有些题目，我自己做了一遍，觉得还是可以归纳分享出来的，听说是阿里的题目，我也不知真假，看题目，出的还是有点技术含量的。好了，话不多说就是干。这篇博客只是对这些题的个人解答方法，我自己针对个别题目也在百度上搜过，总觉得自己的写法可以继续优化，不是很好，希望对于前端同学有所帮助。大神就请绕道啦~

题目如下：
1、字符串数组去除重复的项，例如：

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

function quchong(arr) {
    var a = [];
    for(var i=0,len=arr.length;i
注意：“indexOf”方法是ECMAscript5方法，IE8以上支持；
2、写一个转换函数，把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
代码3：
function trans(str) {
    var re = /-(w)/g;
    str = str.replace(re, function ($0, $1) {
        return $1.toUpperCase();
    });
};

注意：前两种方法都类似字符串拼接的方法，第一种主要是通过字符串方法slice来截取字符串；第二种方法主要是通过数组和字符串的转换，来完成字符串的拼接；第三种方法适合熟悉正则表达式的同学，这里主要使用了replace的回调函数方法。
3、写一个类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设计模式》一书中叫类式继承，有兴趣的同学可以了解一下。
4、给一个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;
    }
}
5、写一个函数实现数字格式化输出，比如输入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方法使用截图：

6、编写一个函数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
7.编写一个函数flatten，传入仅包含数字的多维数组，返回拍平后的结果。
如：传入[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;
}
注意：这里用到了递归的方法，如果数组中的元素还是数组且子数组的长度大于零，就继续调用本方法。
8、写一个类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");


结果截图：

随记：我的第一篇博客写好了，分享的方法可能不是最好的，但是是我认为比较通俗易懂的。我觉得学习应该是积极主动的行为，所以分享的方法没有注释信息。如果对你有帮助，麻烦多多鼓励咯。前端的知在我看来是片汪洋大海，还有很多技术还在汇入其中，我希望，这次的分享只是开始，以后能有更优质的前端知识跟大家分享。