摘要:前集回顾我们在开开心心做几道机试题中吐了槽,也顺势展开了机试题之旅,本章我们暂时压抑自己的吐槽之心,继续就题目前行。其实和都是构造函数,可以直接调用的。请尝试完成一个解析模块本题考查对的理解,各部分都是什么意思。
前集回顾
我们在开开心心做几道JavaScript机试题 - 01中吐了槽,也顺势展开了机试题之旅,本章我们暂时压抑自己的吐槽之心,继续就题目前行。仍然希望对各位正确认识JavaScript这门语言,已经在面试过程中遇到这些问题时,如何思考!
项目地址:fe-interview
答题之路 11 - 请尝试完成一个类似"_.find"的模块本题主要考查对数组的工具函数的理解、认识。很多朋友习惯了遇事儿就喷一堆for loop在那恶心人,忽略变量污染、不必要的遍历操作、含义模糊等问题可能带来的潜在隐患。对抱有这种错误认识的朋友,只要考考这些常见的数组快捷函数的实现原理,原形毕露!^^
答案:
var find = function(array, func) { for (var i = 0; i < array.length; i++) { if (func(array[i], i)) { return array[i]; } } }; module.exports = find;
12 - 请尝试完成一个类似"_.findlast"的模块关于这一点,可以阅读:Functional programming in Javascript: map, filter and reduce
本题和上题的唯一区别在于,寻找最后一个符合条件的指定元素
答案:
var findlast = function(array, func) { for (var i = array.length - 1; i > -1; i--) { if (func(array[i], i)) { return array[i]; } } }; module.exports = findlast;13 - 请尝试完成一个查找出现频率最高元素的模块
这个考察的就是对数组和literal object的组合使用
答案:
var findmost = function(array, identity) { var occurrence = {}; var most; for (var i = 0; i < array.length; i++) { var item = array[i]; var id = identity ? identity(item) : item; if (!occurrence[id]) { occurrence[id] = {count: 1, raw: item}; } else { occurrence[id].count++; } if (!most || (most !== id && occurrence[id].count > occurrence[most].count)) { most = id; } } return occurrence[most].raw; }; module.exports = findmost;
14 - 请尝试完成一个类似"_.difference"的模块我只用了for loop形式,欢迎更简洁写法的PR
本题考查了两个数组的比较,查找第二数组里没有出现的第一个数组的元素。其中对isNaN有比较细节的针对
答案:
var isNaN = Number.isNaN; var difference = function(arr1, arr2) { return arr1.reduce(function(previous, i) { var found = arr2.findIndex(function(j) { return j === i || (isNaN(i) && isNaN(j)); }); return (found < 0 && previous.push(i), previous); }, []); }; module.exports = difference;
15 - 请尝试完成一个类似"_.camelCase"的模块我的答案用了reduce来获取最终结果;如果有朋友对found < 0 && previous.push(i)不明白,可以看:短路求值。如果对,的使用不了解,那说明你没看上一章
本题考查对字符串的各种处理手段
答案:
var camelcase = function(str) { return str.toLowerCase() .replace(/(s+|-+)(.)/g, function(matched, separator, letter) { return letter.toUpperCase(); }); }; module.exports = camelcase;
16 - 请尝试完成一个类似"_.times"的模块我这里用了一套组合技,先toLowerCase,再配合正则表达式,用一个replace结束战斗
本题考查了对数组便捷函数的理解认识,重点在于第二个参数是callback,很多人都被String和Boolean给吓到了,想不通为什么结果会是那个样子。其实String和Boolean都是构造函数,可以直接调用的。
答案:
var times = function(n, func) { return Array .apply([], new Array(n)) .map(function(item, index) { return func(index); }); }; module.exports = times;17 - 请尝试完成一个类似"_.filter"的模块
不多说了,依旧围绕数组。虽然数组的题比较多,但在面试过程中可以选择做答,不必全部都写
答案:
var filter = function(arr, iteratee) { return arr.reduce(function(previous, item) { return (iteratee(item) && previous.push(item), previous); }, []); }; module.exports = filter;
18 - 请尝试完成一个简单的thunkify函数我的答案仍然利用了reduce和短路求值
这个题目对部分朋友来说,可能又过分了。但相信我,题目不是为了羞辱谁,而是考察关于JavaScript,你到底知道多少?函数式编程不是写Javascript的必需条件,但函数式表达的简洁性,对于代码更深入的理解还是很有帮助的。
关于什么是thunk?我们先来看看简单定义:“一个封装了特定行为使其可以延迟执行的函数,通常我们称之为thunk”,如果希望了解更多关于thunk的内容,看Thoughts On Thunks
答案:
var thunkify = function(func) { return function() { var _this = this; var args = Array.prototype.slice.call(arguments); return function(cb) { try { func.apply(_this, args.concat([cb])); } catch (e) { cb(e); } }; }; }; module.exports = thunkify;
19 - 请尝试完成一个类似"_.zipObject"的模块关于arguments为什么需要Array.prototype.slice.call(arguments)转换成Array,看arguments
答案:
var zipobject = function(arr1, arr2) { return arr1.reduce(function(previous, key, index) { return (previous[key] = arr2[index], previous); }, {}); }; module.exports = zipobject;
20 - 请尝试完成一个类似"_.once"的模块本题考查数组合并/压缩,我用了reduce来处理。通过最近这几题可以看出来,reduce真的能做很多事情哦!
本题考查对“缓存”的理解,很多人会被这个概念唬住,以为又是什么浏览器缓存啦,服务器缓存啦,甚至有人想到了redis、memcached等工具,然后被吓得半死。其实没那么牛逼,你就是写一个变量,只要不销毁,都可以叫缓存。
答案:
var once = function(func) { var value, executed; return function() { var args = Array.prototype.slice.call(arguments); if (!executed) { executed = true; value = func.apply(this, args); return value; } return value; }; }; module.exports = once;
21 - 请尝试完成一个类似"_.flatMap"的模块通过设置一个executed的标记来判断该函数是否已经执行过了
本题考查对map的理解。
答案:
var flatmap = function(array, iteratee) { return Array.prototype.concat.apply([], array.map(iteratee)); }; module.exports = flatmap;
22 - 请尝试完成一个简单的middleware模块一个小技巧,对于二维数组,利用concat函数处理,代码更简洁
多少人写了很久的express,结果搞不清middleware是什么,怎么工作的,如何书写middleware,怎么使用middleware。这一切都源于对“中间件”这个概念的模糊,以及对express中“中间件”的实现原理的不解
答案:
var Middleware = function() { this.pool = []; }; Middleware.prototype.use = function(cb) { this.pool.push(cb.bind(this)); }; Middleware.prototype.start = function(cb) { var _this = this; var pullOut = function() { if (_this.pool.length === 0) { return cb.call(_this); } _this.pool.shift()(pullOut); }; pullOut(); }; module.exports = Middleware;
23 - 请尝试完成一个URL解析模块关于middleware的详细介绍,可以看guide。
本题考查对URl的理解,各部分都是什么意思。在我们过往的经历中,经常发现候选人搞错一些概念,譬如:什么是query parameter,protocol指的是哪一段,domain又是哪一段,我们常说的hash/fragment是什么?分清楚各部分是什么,方便分解这道题
关于URL,你可能想看到如下图解:
答案:
var urlparser = function(url) { var result = /^(?:(https?):)//([.-w]+)(?:([/w]+))?(?:?([w=&]+))?$/.exec(url); var parsed = {protocol: result[1], host: result[2]}; if (result[3]) { parsed.path = result[3]; } if (result[4]) { parsed.query = result[4].split("&") .map((query) => query.split("=")) .reduce((params, pairs) => (params[pairs[0]] = pairs[1], params), {}); } return parsed; }; module.exports = urlparser;
24 - 请尝试完成一个类似"_.throttle"的模块这个答案我用了正则和map、reduce,略显臃肿。强烈欢迎更优解法
这又是个有故事的题,关于“节流阀”,是一种降低计算频率的处理。最常见的使用场景:当页面滚动时计算某一个值,相信如果你直白的在onScroll里写了计算行为后会发现,每移动一个像素都会触发一次计算,如果计算量还有一点大的话,卡不死你。这时候就用到了节流阀的技巧。关于“节流阀”更多详情,请看throttle
答案:
var throttle = function(func, wait) { var last, timer; return function() { var args = Array.prototype.slice.call(arguments); var _this = this, now = new Date().getTime(); if (typeof last === "undefined") { last = now; return func.apply(_this, args); } clearTimeout(timer); if (now - last > wait) { last = new Date().getTime(); return func.apply(_this, args); } timer = setTimeout(function() { last = new Date().getTime(); func.apply(_this, args); }, wait + last - now); }; }; module.exports = throttle;25 - 请尝试完成一个类似angularjs的依赖注入模块
用过AngularJS的朋友肯定都见识到了“依赖注入”的威力(当然如果你是java转型的程序员,更应该有体会),依赖注入是一种解藕手段,我们在java中通常如是介绍:“依赖注入是实现IoC(控制反转)一种方式”。关于依赖注入,你也可以看手写依赖注入
答案:
var Di = function() { this.instanceStore = {}; }; Di.prototype.register = function(name, inst) { this.instanceStore[name] = inst; }; Di.prototype.run = function(arr) { var _this = this, lastIndex = arr.length - 1; arr[lastIndex].apply(null, arr.slice(0, lastIndex) .map(function(name) { var Inst = _this.instanceStore[name]; if (!Inst) { throw new Error("You are expecting a non-exist instance"); } return typeof Inst === "function" ? new Inst() : Inst; })); }; module.exports = Di;
注意我在run实现里的typeof Inst === "function" ? new Inst() : Inst;使得如果注册的是一个构造函数,那么每次使用都会注入一个新的实例,这和AngularJS里使用单例的策略不同,这里留下一个问题,如果我希望使用单例策略,答案要做如何修改?
这是余下的15个题目,随时欢迎PR,欢迎指正,欢迎优化。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/79879.html
摘要:碰到这种面试官,你只有是个题霸,再加上眼缘够才能顺利入围。只要按照我题目的思路,甚至打出来测试用例看看,就能实现这个题目了。答案根据的,对答案做出修正。另我的答案绝不敢称最佳,随时欢迎优化修正。但了解总归是好的。 我们在长期的面试过程中,经历了种种苦不堪言,不诉苦感觉不过瘾(我尽量控制),然后主要聊聊常见JavaScript面试题的解法,以及面试注意事项 忆苦 面试第一苦,面试官的土 ...
摘要:学堂码匠计时器的第一个参数,包含几种不同的书写方法,可以是函数名,匿名函数,代码字符串,还有一些面试题当中会出现函数调用的书写方式。 HTML5学堂-码匠:计时器的第一个参数,包含几种不同的书写方法,可以是函数名,匿名函数,JS代码字符串,还有一些面试题当中会出现函数调用的书写方式。 那么,这些不同的书写方法分别表示什么呢?在计时器中出现的第一个参数,作用域又是在哪里创建的? 计时器第...
摘要:对象方法中的当以对象里的方法的方式调用函数时,它们的是调用该函数的对象。注意,在何处或者如何定义调用函数完全不会影响到的行为。在这次执行期间,函数中的将指向。 原文链接 与其他语言相比,函数的this关键字在JavaScript中的行为略有不同。并且它在严格模式和非严格模式之间也有一些区别。 在绝大多数情况下,函数的调用方式决定了this的值。this不能在执行期间被赋值,在每次函数被...
摘要:年开始的前三个学期有篇的产出。从技术角度来看,编程节奏加紧。十年文学,我等你。写给即将二十岁的你此你非彼你,写给一直伴我的你。巧合遇到你后的这段光阴,无比的充实与激情饱满。编程技术独立的挑战鼓励你。希望足以承担我爱你。 showImg(https://segmentfault.com/img/remote/1460000011417994); 这俩年通过体验博客园、常驻简书、甚至搭建静...
阅读 2928·2021-11-23 09:51
阅读 3748·2021-11-22 15:29
阅读 3210·2021-10-08 10:05
阅读 1533·2021-09-22 15:20
阅读 920·2019-08-30 15:56
阅读 1028·2019-08-30 15:54
阅读 713·2019-08-26 11:54
阅读 2617·2019-08-26 11:32