腾讯课堂 IMWeb 七天前端求职提升营 Day 7

字数 2767阅读 488
Unsplash

本次的系列博文主要是针对 腾讯课堂七天前端求职提升营 课程中,所推送的面试题目及编程练习的一次汇总,期间还包括三次直播课的分享,均由腾讯导师给大家讲解,该系列博文的发布已得到 IMWeb 前端学院助教的许可

IMWeb 前端学院 授权转发

0. 课程目录

腾讯课堂 IMWeb 七天前端求职提升营 Day 1
腾讯课堂 IMWeb 七天前端求职提升营 Day 2
腾讯课堂 IMWeb 七天前端求职提升营 Day 3
腾讯课堂 IMWeb 七天前端求职提升营 Day 4
腾讯课堂 IMWeb 七天前端求职提升营 Day 5
腾讯课堂 IMWeb 七天前端求职提升营 Day 6
腾讯课堂 IMWeb 七天前端求职提升营 Day 7

1. 经典前端面试题

问题1: display:none和visibility:hidden的区别

答案:display:none 隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,就当他从来不存在。
visibility:hidden 隐藏对应的元素,但是在文档布局中仍保留原来的空间。

问题 2: position 的 absolute 与 fixed 共同点与不同点

答案:
共同点:
① 改变行内元素的呈现方式,display 被置为block
② 让元素脱离普通流,不占据空间;
③ 默认会覆盖到非定位元素上

不同点:
absolute 的“根元素”是可以设置的,而 fixed 的“根元素”固定为浏览器窗口。
② 当你滚动网页,fixed 元素与浏览器窗口之间的距离是不变的。

问题 3: CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3 新增伪类有那些?

答案:
CSS 选择符:
① ID 选择器 (#myid)
② 类选择器 (.myclassname)
③ 标签选择器 (div, h1, p)
④ 相邻选择器 (h1 + p)
⑤ 子选择器 (ul > li)
⑥ 后代选择器 (li a)
⑦ 通配符选择器 ( * )
⑧ 属性选择器 (a[rel = "external"])
⑨ 伪类选择器 (a: hover, li:nth-child)

可继承的样式:
① font-size
② font-family
③ color
④ text-indent

不可继承的样式:
① border
② padding
③ margin
④ width
⑤ height

优先级算法:
① 优先级就近原则,同权重情况下样式定义最近者为准;
② 载入样式以最后载入的定位为准;
!important > id > class > tag
!important 比内联优先级高,但内联比 id 要高

CSS3 新增伪类举例:
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。

问题 4:你知道多少种 Doctype 文档类型?

答案:
① 该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
② HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。
③ XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。
④ Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。

2. 前端常见题目个人思考题

1、请说出三种减少页面加载时间的方法

2、哪些操作会造成内存泄漏?

3. 在线编程任务

—— 所有 AC 代码均在 JavaScript(V8 6.0.0)下提交通过 ——

题目 37:统计一个数字在排序数组中出现的次数。

思路: 一般首先会想到顺序遍历一遍,时间复杂度 o(n),如果这么简单,这道题就没什么必要出了。其实这道题也很容易想到二分查找,时间复杂度为 o(logn),但是二分查找需要注意一个细节,就是当遇到重复元素时,让 mid 指针跳过所有重复元素,这也是很多粗心的小伙伴非常容易忽略的

是很多面试官喜欢问的一个查找问题

function GetNumberOfK(data, k)  
{  
    // write code here  
    var l = 0,r = data.length,mid;  
    while(l < r){  
        mid = Math.floor((l+r)/2);  
        if(data[mid] < k ){  
            while(data[mid] == data[mid+1]){  
                mid++;  
            }  
            l = ++mid;  
        }else if(data[mid] > k){  
            while(data[mid] == data[mid-1]){  
                mid--;  
            }  
            r = --mid;  
        }else{  
            var sign1 = mid,sign2 = mid;  
            while(sign1 <= r && data[sign1] == data[sign1+1]){  
                sign1++;  
            }  
            while(sign2 >= l && data[sign2] == data[sign2-1]){  
                sign2--;  
            }  
            return sign1-sign2+1;  
        }  
    }  
    return 0;  
}  

题目 38:输入一棵二叉树,求该树的深度。从根结点到叶结点依次经过的结点(含根、叶结点)形成树的一条路径,最长路径的长度为树的深度。

思路:从根结点到叶结点依次经过的结点(含根、叶结点)形成树的一条路径,最长路径的长度为树的深度。

function TreeDepth(pRoot)
{
    // write code here
    
    if (pRoot == null) {
        return 0;
    }
    
    var nLeft = TreeDepth(pRoot.left);
    var nRight = TreeDepth(pRoot.right);

    return (nLeft > nRight) ? (nLeft + 1) : (nRight + 1);
}

题目 39:输入一棵二叉树,判断该二叉树是否是平衡二叉树。

function IsBalanced_Solution(pRoot)
{
    // write code here
    if(pRoot == null)
        return true;

    var left = TreeDepth(pRoot.left);
    var right = TreeDepth(pRoot.right);
    var diff = left - right;

    if(diff > 1 || diff < -1)
        return false;

    return IsBalanced_Solution(pRoot.left)
        && IsBalanced_Solution(pRoot.right);
    

}

function TreeDepth(pRoot)
{
    // write code here
    
    if (pRoot == null) {
        return 0;
    }
    
    var nLeft = TreeDepth(pRoot.left);
    var nRight = TreeDepth(pRoot.right);

    return (nLeft > nRight) ? (nLeft + 1) : (nRight + 1);
}

题目 40:一个整型数组里除了两个数字之外,其他的数字都出现了两次。请写程序找出这两个只出现一次的数字。

Array.prototype.uniq = function () {
    var res = [];
    var json = {};

    for (var i = 0; i < this.length; i++) {
        if (!json[this[i]]) {
            res.push(this[i]);
            json[this[i]] = 1;
        }
    }

    return res;
}

function FindNumsAppearOnce(array)
{
    // write code here
    // return list, 比如[a,b],其中ab是出现一次的两个数字

    var a = array;
    var b = a.uniq();
    var arr = [];
    var k = 0;

    for (var i = 0; i < b.length; i++) {
        for (var j = 0; j < a.length; j++) {
            if (a[j] == b[i]) {
                k++;
            }
        }
        if (k === 1) {
            arr.push(b[i]);
        }
        k = 0; // 重新赋值0,继续下一次循环
    }

    return arr;
}

题目 41:小明很喜欢数学,有一天他在做数学作业时,要求计算出 9~16 的和,他马上就写出了正确答案是 100。但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为 100(至少包括两个数)。没多久,他就得到另一组连续正数和为 100 的序列: 18, 19, 20, 21, 22。现在把问题交给你,你能不能也很快的找出所有和为 S 的连续正数序列? Good Luck!

输出描述:
输出所有和为 S 的连续正数序列。序列内按照从小至大的顺序,序列间按照开始数字从小到大的顺序

思路:
定义两个指针 start < end,一起从前往后扫描
sum > S, start++,
sum < S, end++,
sum == S,
判断 start + 1 < end ? start++ : break,这里如果 start + 1 < end,那么往后走肯定结果也是大于 S 的,所以直接跳出循环就可以了。

还有一个值得注意的地方,就是每次计算 sum 的时候,可以在上次的基础上进行计算,这样更加优化。

function FindContinuousSequence(sum)  
{  
    if(sum <= 2)  
        return [];  
    var result = [];  
    // write code here  
    var a = 1,  
        b = 2,  
        s = 3;  
    while(a <= Math.floor(sum/2)){  
        if(s < sum){  
            b++;  
            s += b;  
        }else if(s > sum){  
            s -= a;  
            a++;  
        }else{  
            var temp = [];  
            for(var i=a;i <= b;i++)  
                temp.push(i);  
            result.push(temp);  
            if(a+1 < b){  
                s -= a;  
                a++;  
            }else{  
                break;  
            }  
        }  
    }  
    return result;  
} 

题目 42:输入一个递增排序的数组和一个数字 S,在数组中查找两个数,是的他们的和正好是 S,如果有多对数字的和等于 S,输出两个数的乘积最小的。

输出描述:
对应每个测试案例,输出两个数,小的先输出。

思路:
定义两个指针 start = 0,end = array.length - 1,s = array[start] + array[end],然后夹逼遍历

① s < sum,因为是递增序列,所以start++
② s > sum, end--
③ s == sum, 在这个地方是可以优化的,普通的思路可能在这里判断乘积是不是小于之前的乘积,然后继续遍历,其实因为这个序列是递增的,所以两头的乘积是最小的,及第一个 s == sum 就是我们所求的,证明如下:

x + y >= 2sqrt(x * y),
x * y <= ((x + y) / 2)^2 = (sum^2) / 4

y - x 越大,乘积就越小,等号成立条件是 x == y

function FindNumbersWithSum(array, sum)  
{  
    // write code here  
    if(array.length < 2)  
        return [];  
    var start = 0,  
        end = array.length-1;  
    while(start < end){  
        if(array[start]+array[end] < sum){  
            start++;  
        }else if(array[start]+array[end] > sum){  
            end--;  
        }else{  
            return [array[start],array[end]];  
        }  
    }  
    return [];  
}  

—— 题目来源 剑指 offer ——

4. 鹅厂求职直播课:细解鹅厂面试题_曹栋清导师

面试前最好有准备自己的项目或者 Demo,一般来说,面试官都会提问:

  • 你之前做过最复杂的 WEB 项目是什么?以及该项目的原理、开发项目时所遇到的困难,项目的改进

  • 你最擅长的语言是什么?(这里以 JavaScript 为例)请讲一下闭包是什么?什么时候会用到闭包?原型,跨域,作用域的原理(是如何工作的)

面试考察什么
面试主要环节

自我介绍主要是简单介绍个人的信息,在前端领域的一些积累,以及个人项目的简单介绍,并且会在根据你的描述询问你在做项目过程中,遇到最复杂的点是什么,尝试了那些解决方法,最后达到了什么效果,以此来体现你的能力

面试的形式
重点考察的能力
前端面试的主要方面

前端也有可能会考察到算法部分,因为算法是我们编程素养的一部分

学习方法:你最近看的一本 WEB 前端的书籍 / 博文,或者你最近学习的一个东西

面试怎么问
如何更好的回答面试题

回答一定要准确,若是暂时没想到答案,可以向面试官征求:可不可以给我 2 分钟的时间思考一下?

这样的面试不可取
实战题

通过一个问题,来看到你思考问题的深度,包括接受挑战的应对,对新方法的尝试,以及其他一些能力,都能借此展示出来

常见问题

遇到不会的问题,如果你有一些思路,那就将你的思路表达出来;如果真的是不知道,那就不要不懂装懂,可以跟面试官说,这个问题我可能现在并不知道答案,但给我时间,我会尝试怎么解决,尝试去给出思路

向面试官提问:可以包括你所面试的部门的一些信息、个人的一些利益相关,以及刚刚面试过程中一些没有解决的问题

最后,面试是一面镜子,照出来的是你平时的自己,所以你要把工作做在平时,好的面试官,发现的一定是真实的你,只有把真实的你做到足够优秀,才能够在最终的面试得到很好的表现

End of File

行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下喜欢关注,为了我能早日成为简书优秀作者献上一发助攻吧,谢谢!^ ^

推荐阅读更多精彩内容