腾讯课堂 IMWeb 七天前端求职提升营 Day 7
腾讯课堂 IMWeb 七天前端求职提升营 Day 7
本次的系列博文主要是针对 腾讯课堂七天前端求职提升营 课程中，所推送的面试题目及编程练习的一次汇总，期间还包括三次直播课的分享，均由腾讯导师给大家讲解，该系列博文的发布已得到 IMWeb 前端学院助教的许可
课程目录
经典前端面试题
问题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（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
前端常见题目个人思考题
1、请说出三种减少页面加载时间的方法
2、哪些操作会造成内存泄漏？
在线编程任务
—— 所有 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 = arraystart + arrayend，然后夹逼遍历
① 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 ——
鹅厂求职直播课：细解鹅厂面试题_曹栋清导师
面试前最好有准备自己的项目或者 Demo，一般来说，面试官都会提问：
- 你之前做过最复杂的 WEB 项目是什么？以及该项目的原理、开发项目时所遇到的困难，项目的改进
- 你最擅长的语言是什么？（这里以 JavaScript 为例）请讲一下闭包是什么？什么时候会用到闭包？原型，跨域，作用域的原理（是如何工作的）
自我介绍主要是简单介绍个人的信息，在前端领域的一些积累，以及个人项目的简单介绍，并且会在根据你的描述询问你在做项目过程中，遇到最复杂的点是什么，尝试了那些解决方法，最后达到了什么效果，以此来体现你的能力
前端也有可能会考察到算法部分，因为算法是我们编程素养的一部分
学习方法：你最近看的一本 WEB 前端的书籍 / 博文，或者你最近学习的一个东西
回答一定要准确，若是暂时没想到答案，可以向面试官征求：可不可以给我 2 分钟的时间思考一下？
通过一个问题，来看到你思考问题的深度，包括接受挑战的应对，对新方法的尝试，以及其他一些能力，都能借此展示出来
遇到不会的问题，如果你有一些思路，那就将你的思路表达出来；如果真的是不知道，那就不要不懂装懂，可以跟面试官说，这个问题我可能现在并不知道答案，但给我时间，我会尝试怎么解决，尝试去给出思路
向面试官提问：可以包括你所面试的部门的一些信息、个人的一些利益相关，以及刚刚面试过程中一些没有解决的问题
最后，面试是一面镜子，照出来的是你平时的自己，所以你要把工作做在平时，好的面试官，发现的一定是真实的你，只有把真实的你做到足够优秀，才能够在最终的面试得到很好的表现