面试题分享

liaoyg8023 发布于2019-08-02 10:23 / 693人阅读

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

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

题目如下：
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");


结果截图：

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

混合云私有云面试题栈面试题笔试面试题面试题内容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52313.html

前端最强面经汇总

摘要：获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码，也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素，方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。花了很长时间整理的前端面试资源，喜欢请大家不要吝啬star~ 别只收藏，点个赞，点个star再走哈~ 持续更新中……，可以关注下github 项目地址 https:...

wangjuntytl 2019-08-26 10:41 评论0 收藏0
工作面试

摘要：作者简书款精致简洁的个人面试简历模板包含等格式，方便自由修改和学习。要换工作还不来看看面试题马上就要到三月份这个跳槽季了来看看面试题吧史上最全面试资料集合教你如何面试教你如何写简历分享给正在找工作或者准备找工作的童鞋们。 2016 年末，腾讯，百度，华为，搜狗和滴滴面试题汇总 2016 年未，腾讯，百度，华为，搜狗和滴滴面试题汇总杭州找Android工作的点点滴滴写在前面的话我从...

luodongseu 2019-06-25 11:53 评论0 收藏0
分享一下软件测试面试历程和套路，真的很实在

摘要：软件测试自学秘诀面试失败一天，心态稳的一批，因为面试的全是外包人事帮我联系的公司，工资全都是一万以上，之前只有四五千的自己根本不觉得自己能胜任。个人是去年年底零基础转行，两三千培训费学出来，学完后也是稀里糊涂，仅是知道功能测试就是找问题，其他接口，性能，数据库，python基础，虚拟机搭建网站都实现了课程展示那样。面试资...

Lyux 2021-11-23 09:51 评论0 收藏0
Android-Java面试

摘要：好不容易在月号这天中午点左右接到了来自阿里的面试电话。这里会不断收集和更新基础相关的面试题，目前已收集题。面试重难点的和的打包过程多线程机制机制系统启动过程，启动过程等等扫清面试障碍最新面试经验分享，此为第一篇，开篇。 2016 年末，腾讯，百度，华为，搜狗和滴滴面试题汇总 2016 年未，腾讯，百度，华为，搜狗和滴滴面试题汇总各大公司 Java 后端开发面试题总结各大公司 Jav...

changfeng1050 2019-06-25 11:52 评论0 收藏0
Android-Java面试

摘要：好不容易在月号这天中午点左右接到了来自阿里的面试电话。这里会不断收集和更新基础相关的面试题，目前已收集题。面试重难点的和的打包过程多线程机制机制系统启动过程，启动过程等等扫清面试障碍最新面试经验分享，此为第一篇，开篇。 2016 年末，腾讯，百度，华为，搜狗和滴滴面试题汇总 2016 年未，腾讯，百度，华为，搜狗和滴滴面试题汇总各大公司 Java 后端开发面试题总结各大公司 Jav...

TalkingData 2019-08-15 13:28 评论0 收藏0
前端--通用知識 - 收藏集 - 掘金

摘要：闭包有多重前端知识点大百科全书前端掘金，，技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。 Vue全家桶实现还原豆瓣电影wap版 - 掘金用vue全家桶仿写豆瓣电影wap版。最近在公司项目中尝试使用vue，但奈何自己初学水平有限，上了vue没有上vuex，开发过程特别难受。于是玩一玩本项目，算是对相关技术更加熟悉了。原计划仿写完所有页面，碍于豆瓣的接口API有限，实现页面也有...

王笑朝 2019-08-20 16:57 评论0 收藏0