面试题分享

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

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

['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');

结果截图：

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