【前端一面】- 构建知识体系,一步一步诱导面试官问自己会的问题

558 阅读6分钟

前言

最近校招又开始了,金九银十,在校的小伙伴们应该在不停的努力刷题投简历面试中,作为面试官可能我的面试经验不足,不过作为面试的学生,我也算是经历了大大小小很多场面试。写一些小总结,来给大家分享一下~

为什么强调是业务一面, 因为一面是考察基础知识,作为面试官,我可能更看重知识掌握面的广度,而知识点与知识点之间往往都是相关联的,所以更适合考生或者面试官构建知识网络和试题网络

面试技巧

题目我说的是一步一步诱导面试官往自己擅长的问题上去问,接下来就详细的通过一道实际而又简单普通的问题来给大家说明一下。

数组去重

如果面试官出这个题,相信大部分小伙伴都在心里窃喜,这也太简单了。嗯,确实是一道简单的问题,那么我就来给大家分析一下如果通过回答一道简单的问题从而诱导面试官再问我其他我会的问题。

基本解法

/**
 *  第一种,indexOf
 **/
function arrUnique(arr) {
    var result=[];
    for(var i=0; i<arr.length; i++) {
        if(result.indexOf(arr[i]) === -1) {
            result.push(arr[i])
        }
    }
    return result;
}

/**
 *  第二种,includes
 **/
function arrUnique(arr) {
    var result=[];
    for(var i=0; i<arr.length; i++) {
        if(!result.includes(arr[i])) {
            result.push(arr[i])
        }
    }
    return result;
}

/**
 *  第三种,reduce
 **/
function arrUnique(arr) {
    return arr.reduce(function(pre,cur) {
        return pre.includes(cur) ? pre : [...pre,cur]
    },[])
}

/**
 * 第四种,Map
 **/
function arrUnique(arr) {
    var result = [];
    var map = new Map();
    for(var i = 0; i < arr.length; i++) {
        if(!map.has(arr[i])) {
            map.set(arr[i]);
            result.push(arr[i]);
        }
    }
    return result;
}
/**
 *  第五种,Set
 **/
function arrUnique(arr) {
    retrun [...new Set(arr)]; // return Array.from(new Set(arr));
}

除了上面几种常见的,还有很多方法,那么我们就来分析一下,如何回答。

面试官提问,数组去重? -> 第一次回答,选择 2 || 3

根据选择不同,下面你需要掌握的知识点也是不同的。

  • 选择第二种做回答

    有人可能会问了,第一种和第二种有什么区别吗?嗯,有区别,可能大部分人都知道第一种或者很多面试题答案也都是第一种,但是就我个人而言,回答第二种更为合理,为什么?因为条件语句的括号内的表达式应该是bool值,而第一种使用的Array.indexOf()的定义是找到某元素在数组中的下标,而Array.includes()则是判断数组是否包含某元素,在没有Array.includes()这个API之前,我们可以用indexOf来代替,既然有了,其实使用Array.includes()是更好的选择。

这里如果面试官问了,也算是一个知识点,没问也没关系,因为关键点不在这里,😄。

  • 选择第三种做回答

    这里强调一下,选择第三种做回答,你要考虑好面试官接下来一连串的reduce攻击,嗯,个人觉得reduce算是数组操作里比较复杂高级的操作了。当然里面的知识点也相对多一下,嗯,参数就四个。所以如果你选择了第三种,就记得恶补reduce知识点哦

那到这里这道题就完事了吗?上面第一次回答里面分别夹带这另外一个知识点,如果面试官问,就正中你们下怀,不问也没有损失了,因为伏笔不在这里。为什么上面给出了五种答案,我要选择前三种来回答呢(感觉后面的更好)?因为你需要诱导面试官继续问啊!!!接着往下聊

面试官提问,时间复杂度?

上面的回答,如果不出意外,面试官可能会问你时间复杂度是多少?那么你就需要回去补一补数据结构和算法的知识了,嗯,这里直接说时间复杂度是o(n^2)

面试官提问,有没有更好的办法? -> 回答Map || Set

这时候,你脑海中那个更好的办法,嗯,也就是Map和Set的方式就出现了。上面的回答只是为了现在的来做铺垫。

  • 回答Map

    这里的知识点就是Map的key value可以让我们找一个值的时候o(1),所以提高了效率。

  • 回答Set

    这里要强调一下技巧了,回答Set还分为手写和口述两种,因为手写代码是很精确的,你会把[...new Set(arr)] 或 Array.from(new Set(arr))写出来,当然,你要是没写出来我建议你还是去补一下相关知识点。而口述的方式这里要说一下技巧:一定不要简单的回答,使用Set,要诱导,回答:使用ES6的Set和扩展运算符(或Array.from)来实现

面试官提问,为什么要搭配扩展运算符和Array.from?

因为Set返回的是一个类数组对象。

面试官提问,什么是类数组对象?

到这里我们就成功把面试官诱导到类数组对象知识点上了,当然,前提是你掌握了,哈哈。然后可能会问相关问题,比如类数组对象和数组的相同点和不同点,怎么区分等等。

这里可能涉及到的知识点,arguments,document.getElementsXXX()和Array.isArray()等

到这里可能有人会问了,怎么可能这么顺利?哈哈,当然不可能这么顺利,因为每个面试官的状态和习惯不同,不过这道题的扩展和相关知识点就是这些,当你涉及到相关知识点的时候,面试官即使不问也会心里知道你了解这个概念。当然思考的方向可能也会在某个地方断掉,比如在你用Set回答的时候,他可能就会问你,既然提到了ES6,就来说说ES6新特性吧,等等。

知识网络图

上面是我做的简单的知识网络图,每一个分支都是可以扩展的,小伙伴们可以遇到一个题就思考该题考查的知识点网络,然后不断的扩充,这也是一个思路哦~其实很多面试题都是和这个一样的,一道题多种解法或者多个知识点,我们只要掌握它们然后回答的时候适当强调,其实很有机会诱导面试官去继续深问的~

总结

标题可能夸张了,并不是所有面试官都会顺着你的思路走的哦,有的面试官就直接做题做完看一下,那我也无能为力啊,这个文章不仅仅是面试技巧,也是分享一下前端基础知识的网络构建,把大家学到的东西关联起来,更成体系~

这篇文章并不想往更多更深的讲,就通过上面一道浅显的题和知识点扩展,给准备面试的小伙伴们一个思路,你可以把每一道题作为一个中心点,然后扩展其相关知识点,当你的知识层面掌握到一定程度的时候,你会发现,每一次面试都能跟面试官谈的很开心~因为他问了什么,他接下来要问什么,你都能掌握个大概了,祝好~