由浅入深的前端面试题 和矫情的“浪漫主义”诗句
好吧,我承认太标题党了,这篇文章是通过一道前端面试题引出的纯技术讨论。我先要矫情无比的从中外诗歌说起。
传统的佛学经典里,被世人熟知的有这样一句话:“一花一世界,一叶一菩提,一木一浮生,一草一天堂,一砂一极乐,一方一净土,一笑一尘缘,一念一清静。”
昔时佛祖拈花,惟迦叶微笑,既而步往极乐。从一朵花中便能悟出整个世界,得升天堂,佛祖就是佛祖,谁人能有这样的境界。
同时,早在18世纪,英国伟大的浪漫主义诗人Black名为《天真的暗示》的诗中,也类似写道:"To see a world in a grain of sand, and a heaven in a wild flower",一颗沙里一个世界,一朵野花一座天堂。
转念,虽卑为码农,我们写出的代码,却彰显了功力:菜鸟和大神之间的差距,往往工程线上卑微的几行代码,便有天壤之差。
一道系列面试题,在JS知识体系中虽沧海一粟,但考察点充分评判面试者的能力。
管中窥豹,期待读者有不同想法与我讨论。
题目背景
题目是我在《effective javascript》一书中提取的。这一星期陆陆续续面试了不少于10个人,其中不乏工作履历突出的候选者。
但是很遗憾没有能完全在较短时间内有较高质量的回答。
题目前身
这道题可以分为前后两个部分,第一部分很简单,一般有一定JS OOP基础的候选者应该都可以答好:
一个社交网络有一组成员(member),每个成员有一个自己的名字,和存储其朋友信息的列表。请实现这样一个Member构造器。
正确答案不难理解:
function Member (name) {this.name = name;this.friends = [];
}复制代码
是不是非常简单。它的典型错误包括但是不限于:
function Member (name) {this.name = name;
}
Member.prototype.friends = [];复制代码
关于方法和属性是应该放在原型上,还是构造函数中,如果您不明白的话,是时候补一补原型原型链的知识了。推荐给大家看一下我的同事颜海镜早在3年前的一篇文章。
同样,这道题上我会顺便考察一下面试者对JS中变量的存储方式,包括堆栈存储的不同情况和引用赋值的掌握情况。
题目变身
以上是对JS基础的考察,但是在这道题目的基础上,我进行了更深一步提问。希望对候选者的临场思维、JS基础甚至一些设计能力,又更进一步认识。
我要实现一个带环社交网络(社交圈):
var a = new Member('Alice');
var b = new Member('Bob');
var c = new Member('Carol');
var d = new Member('Dieter');
var e = new Member('Eli');
var f = new Member('Fatima');a.friends.push(b);
b.friends.push(c);
c.friends.push(e);
d.friends.push(b);
e.friends.push(d, f);复制代码
这种情况下,需要实现一个inNetwork方法,判断某目标成员是否在另一个对象成员的社交圈中。规定:顺着社交链能找到目标成员,就认为在社交圈中。否则,不在其社交圈。
解题思路
如果刚接触到这样的题目,尤其是在面试现场,作为面试者很可能会慌乱一下。这时候,需要做的就是先准确分析题目。
根据题目,画出符合上述题目代码的实例化网络:
接下来思考,搜索意味着需要遍历整个社交网络。我们应该:
1)以单个根节点开始,
2)然后添加发现的节点,
3)移除访问过的节点,防止死环
最终实现:
Member.prototype.inNetwork = function (target) {var visited = {};var worklist = [this]; // 用于存放社交链上的个体信息,初始时以“自己”作为根节点while (worklist.length > 0) {// 将worklist里的最后一项成员删除并取出var member = worklist.pop();// 如果存在环的情况,需要避免重复访问if (member.name in visited) {continue;}visited[member.name] = member;if (member === target) {return true;}// 将当前成员的朋友列表加入worklist当中,他们都在根节点的社交链上member.friends.forEach(function(friend) {worklist.push(friend);})}return false;
}复制代码
我在代码中加上了注释,如果您还不明白也没有关系。建议去跑一下程序,进行debugger和console,尝试去理解。
测试:
a.inNetwork(f) // true
f.inNetwork(a) //false复制代码
哈哈,果然Alice能通过朋友圈查找到Fatima,而Fatima却不能反向找到Alice!当然,这样我认为是违反人类社会常识的。但是,谁让他是题目呢?
一道简单的题却覆盖了很多知识点,比如:while循环中的流程控制(continue),数组的基本方法(pop,forEach,push),for...in等等。
它的典型错误包括但是不限于:使用对象承载worklist,然后用for...in循环遍历worklist。
这样做的问题在于:for...in循环并没有要求枚举对象的修改与当前循环保持一致。事实上,标准规范规定了:
“如果被枚举对象在枚举期间添加了新的属性,那么枚举期间并不能保证新添加的属性能够访问”。
总结
这道题考察了面试者包括JS OOP在内的多项基础,尤其是后半道考察了候选者的思维能力、反应能力。如果读者不能理解,欢迎留言问我。或者去查阅:《effective javascript》一书。
扯回原诗句,谈一下感悟,在天体的转动和岁月的轮回中,我们分明的感受到每一个个体所拥有生命周期的单薄无力,在宏大的宇宙观中恐怕渺小不及沧海一粟。诗句的后半句拿出来共勉:“Hold infinity in the palm of your hand, and eternity in an hour 把无限放在你的手上,永恒在一刹那里收藏”。
在前端快速迭代发展的学习中,作为初学者,往往面对浩瀚的知识海洋望洋兴叹,此时基础便是那能够收藏“永恒和无限”的潘多拉魔盒。
本文对你有帮助?欢迎扫码加入前端学习小组微信群:
由浅入深的前端面试题 和矫情的“浪漫主义”诗句相关推荐
- 由浅入深的前端面试题 和矫情的“浪漫主义”诗句 1
好吧,我承认太标题党了,这篇文章是通过一道前端面试题引出的纯技术讨论.我先要矫情无比的从中外诗歌说起. 传统的佛学经典里,被世人熟知的有这样一句话:"一花一世界,一叶一菩提,一木一浮生,一草 ...
- 「前端面试题系列7」Javascript 中的事件机制(从原生到框架)
前言 这是前端面试题系列的第 7 篇,你可能错过了前面的篇章,可以在这里找到: 理解函数的柯里化 ES6 中箭头函数的用法 this 的原理以及用法 伪类与伪元素的区别及实战 如何实现一个圣杯布局? ...
- 前端面试题整理(定期更新)
前言 因为面试的原因,最近又开始关注前端面试题,浏览过网上很多面试题集合,有很多小伙伴整理的很全面,但是我发现其中有很多技术点在当下已不再流行,而面试题一般都是映射开发中常遇到的一些技能和问题,再结合 ...
- JavaScript中的load事件的作用_史上最全的web前端面试题汇总及答案JavaScript之二(二)...
作者:樱桃小丸子儿 链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...
- noah的前端面试题(三)|掘金技术征文
上一篇 前端面试题(二) 1.JavaScript对于cookie的读.写操作 写入 cookie function setCookie(cName, cValue, days) { var expi ...
- 应届生web前端面试题_2020最新Web前端经典面试题试题及答案(持续更新)
Web前端面试题 Web前端面试题:说说你对webpack的看法 解析:webpack是一个模块打包工具,可以使用webpack管理你的模块依赖,并编译输出模块们所需要的静态文件.能很好的管理.打包w ...
- 前端面试题(html篇)
前端面试题(html篇) 转载于:https://www.cnblogs.com/mc67/p/5311613.html
- java 前端页面传过来的值怎么防止篡改_答对这40道经典web前端面试题,想不拿到offer都难!...
想成功就业web前端工程师,想要能高薪就业,那么除了好的web前端技能以外,还得有好的面试技巧,如果提前就了解更多企业的面试要求及面试题目,那么可以让我们的面试成功的几率大大的提高. 今天小编就整理了 ...
- 下面有关html5标签说法错误的有,前端面试题(2016含答案)
标签定义命令按钮,比如单选按钮.复选框或按钮 8) 下述有关css属性position的属性值的描述,说法错误的是? a. b. c. d. static:没有定位,元素出现在正常的流中 fixed: ...
最新文章
- 织梦直接写php标签,非常实用的织梦dede所有标签调用方法大全 .
- Floating Window 详解
- Log4j使用及配置
- Altium Designer隐藏或显示元件名字
- python 猜数字大小
- pyc文件反编译为py文件
- C语言用数组(顺序表)实现大小固定的队列的方法
- 嵌入式linux开发课程设计,嵌入式Linux开发课程设计指导书
- NonfairSync.tryAcquire
- P5283-[十二省联考2019]异或粽子【可持久化Trie,堆】
- js有默认参数的函数加参数_函数参数:默认,关键字和任意
- 解决Ubuntu下切换到root用户后没有声音问题
- Redis:08---字符串对象
- 灵动标签内sql语句调用
- ubuntu显卡驱动下载安装
- php二维数组声明方式,二维数组怎么定义
- Excel如何快速对比数据
- 一图看懂16个英语时态
- 深入windows的关机消息截获-从XP到Win7的变化
- C++模板的类的展开
热门文章
- 任天堂Switch会员+扩展包售价30美元太贵
- 前端导出zip格式压缩包
- 物质的构成,分子、原子、中子、质子等的关系。
- 彻底解决“整个网络”的怪病
- 中国“苹果皮”之父:希望与苹果公司展开合作
- QT4.7.3交叉编译到ARM后,字体大小如何调整?
- 诛仙手游服务器购买无限制,全新福利提升 摆摊amp;购买增加次数限制_18183诛仙手游专区...
- 吴恩达 深度学习 编程作业(2-2)- Optimization Methods
- VM虚拟机7.0,下载——安装全过程。
- 什么是Spring的依赖注入?