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

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:last-of-type 选择属于其父元素的最后

元素的每个

元素。
p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。
p:only-child 选择属于其父元素的唯一子元素的每个

元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。
: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 ——