妙味面试题第四季:UC国际前端笔试题

自从开始为大家解答面试题以后,这种形式还是颇受欢迎的,既可以交流技术,又能帮助大家在面试后积极学习,是一个正能量满满的事情,既然如此,那我们就再接再厉,持续更新!

先看看这次收到的面试题:

相对于前三季的面试题,这次的题型不再局限在知识点上,而是更考验逻辑性、知识点的运用能力、实际解决问题能力,还有与实战开发紧密接合的内容,可谓干货满满!

因此本次的讨论,对于有些题型,我们想与大家共同探讨,而非给出所谓参考答案。面试题活动进行到这个阶段,希望再上一个台阶,借着这个过程可以与大家一起交流思想、共同探讨一些原理性的内容和具体的方法论,期待此举能够引发大家思考、共同提升技术!


UC国际前端笔试题

1. 现有一数组 a,长度未知,数组每一项的数据类型约定为 Number,请用 JavaScript 实现以下逻辑:(5分)

  1. 如果 a 的长度为零,则为其添加一个新项,值为 1。
  2. 如果 a 的长度不为零,则按照 先进先出 的原则,移除一项。
  3. 评分标准:代码越精简越好,<=30 字符 10 分,<=35 字符 6 分, >35 字符 3 分(空格不算)

参考答案

a[a.length?'shift':'push'](1);

// 纯数组方法的使用,只要知道数组这几个方法的用法就能看明白,就不展开分析了。

2. 请阅读以下代码,并把运行结果写到下方注释中。(5分)

var func = (function(a) {
    this.a = a;
    return function(a) {
        a += this.a;
        return a;
    }
})(function(a, b) {
    return a;
}(1, 2));

// func(4) = _________;

参考答案

5

分析

  1. 首先 var func = 后面是一个自执行函数
(function(a) {
    this.a = a;
    return function(a) {
        a += this.a;
        return a;
    }
})
  1. 执行上面函数的时候传入了另外一个自执行函数:
function(a, b) {
    return a;
}(1, 2)
  1. 执行上面函数,返回的结果为 1
  2. 把 1 作为参数传给了第一个自执行函数
(function(a) {  // a = 1
    // this 为 window,this.a = 1,等于 window.a = 1;
    this.a = a;
    // 返回内部函数
    return function(a) {
        a += this.a;
        return a;
    }
})(1)
  1. 上面自执行函数执行完成后返回一个内部函数,赋值给了 func,也就是
var func = function(a) {
    a += this.a;
    return a;
}
  1. 调用 func(4)
function(a) {
    // 注意这里的a是局部(参数)变量,this是window
    // a = a + this.a;
    // a = 4 + 1
    a += this.a;
    // 返回结果 5
    return a;
}

3. 用 JavaScript 实现以下功能:

不使用 loop 生成一个长度 n=100,每一项的数据类型为 Number,值等于其下标的数组 array。(5分)

参考答案

var arr = [];
~function(n) {
    if (n < 100) {
        arr.push(n);
        arguments.callee(arr.length);
    }
}(0);

// 不用循环就把事给办了~嗯,逻辑也不算复杂,分析就略过吧。
// 有问题可在底下留言,我们会去回复大家问题的。

6. 列举 3 种提取网页所有链接的方法,并说明其优劣。(5分)

参考答案

  1. 方法一:通过 DOM 分析
var aElements = document.querySelectorAll('a');
for (var i=0; i < aElements.length; i++) {
    if (aElements[i].href) {
        console.log(aElements[i].href);
    }
}
  1. 方法二:通过正则匹配
var docHtml = document.documentElement.innerHTML;
var data = [];
docHtml.replace(/<a[^>]*href=(['"])([^>'"]+)\1[^>]*>/gi, function($0, $1, $2) {
    data.push($2);
});
console.dir(data);

目前所列这两种方法算是抛砖引玉吧,不知道大家是否能想出第三种方法?可在底下留言,我们共同探讨哈~

如果网页中存在动态生成的链接地址,列举3种提取地址的方法?(5分)

ㄒoㄒ~~~

发这表情是有原因的,何谓 “动态生成的链接地址?”,结合第一个提问,面试官究竟在考核什么知识点?有高人能 真正 明白的,可否告之一二?大家共同探讨。

提取所有链接地址后,请问有什么方法找出具有相同结构规则的链接地址?(5分)

举例:

  1. http://uc.cn/events/101 和 http://uc.cn/events/102 是同类结构的链接地址
  2. http://uc.cn/events/1 和 http://uc.cn/help/ 不属于同类结构的链接地址

参考答案

这个规则还是有点模糊,比如字母数字中横线混合的:http://uc.cn/events-1 和 http://uc.cn/events-2 算是同类结构吗?如果简单点话,那么可以按照协议、域名、端口、目录进行初步提取,目录方面再根据类型,比如字符、数字规则进行提取。

这道题答的有点累心,主要是不明其意,如若面试过程中被问到这些不太清楚题意的题目,还是仔细问清楚考官究竟要考什么,问清楚了再答不迟。或许是我们理解能力不够吧……继续这个表情:ㄒoㄒ~~~

7. 请用 JS 编写正则,对符合规则的白名单 url 地址替换为可点击的超链接。(10分)

白名单为:*.uc.cn 所有的二级域名,以及在其下的所有服务

var content = "欢迎访问 http://web.uc.cn/guild/home 以上就是我要说的,谢谢。"
//code here
var regex = ______________________________________;

console.log( content.replace(regex, '<a href="$1">$1</a>') );

参考答案

/(http|https):\/\/([a-zA-Z\d]+\.)*uc\.cn(\/[a-zA-Z\d]*)*(\.[\w\-]+)*\/?(\?([\w\-\.,@?^=%&:\/~\+#]*)+)?/

// 要是正则不太明白的童鞋,看到这儿估计会晕……你说咋办?要么看妙味视频自己研究,要么就来实体学习吧……
// 再不然,“从入门到放弃?”

8. 如果以上的正则属于核心代码,对性能要求极高,并且修改发布也是高风险操作,容易影响全局。你会做一些什么工作来保证每次发布的修改,性能都是可衡量的,出问题的概率是最低的?(10分)

参考答案

单元测试: 写相对刁钻的测试用例重复测试,测试过程中记录执行时间与消耗资源。


相关链接

>> 2017年第一波JavaScript前端面试题

>> WEB前端面试题解答帖,面试前后必看!!!

>> 妙味面试题第三季更新喽~超值干货越看越猛烈!


妙味课堂 - 实体班课程 - 报名通道:

  • QQ:2852509866、2852509867、2852509868
  • TEL:010-57269690
  • 在线时间:周一至周五 9:30-18:00 周六至周日 10:00-17:00

微信扫描二维码,看视频学习:

妙味网友
请登录后留言,请登录注册