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

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: Ajax 的优缺点都有什么？

答案:
① 页面无刷新，用户体验非常好。
② 使用异步方式与服务器通信，具有更加迅速的响应能力。
③ 可以把一些服务器负担的工作转到客户端，利用客户端闲置的能力来处理，减轻服务器负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担。
④ 基于标准化并被广泛支持的技术，不需要下载插件或者小程序。

Ajax 的缺点:
① Ajax 不支持浏览器 back 按钮。
② 安全问题， Ajax暴露了与服务器交互的细节。
③ 对搜索引擎的支持比较弱。
④ 破坏了程序的异常机制。
⑤ 不容易调试。

问题 2: 简述一下 Ajax 的工作原理

答案: Ajax 的核心是 JavaScript 对象 XmlHttpRequest。该对象在Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。

问题 3: CSS + DIV 开发 Web 页面的优势有哪些？

答案:
① CSS + DIV，这个网页设计模式中，DIV 承担了网页的内容，CSS 承担了网页的样式。这样就使网页的内容和样式的分离开来。有利于页面的维护升级。
② 有助于提高搜索引擎亲和力（快速找到需要的数据，而不是像在 TABLE 中一层层的查找）
③ 有助于页面的重构（换皮肤如 blog，直接套用另外一套样式就可以实现，而不用改动网页脚本）

问题 4: 简述 DIV 元素和 SPAN 元素的区别

答案: DIV 默认情况下是分行显示，SPAN 在同行显示。

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

1、前端安全方面有没有了解？CSRF 如何攻防？

2、 说说你对 SVG 理解?

3. 在线编程任务

内容节选自博客园，由博客主 echoVic 授权转发

echoVic 授权转发

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

题目 25：输入一个复杂链表（每个节点中有节点值，以及两个指针，一个指向下一个节点，另一个特殊指针指向任意一个节点），返回结果为复制后复杂链表的 head。（注意，输出结果中请不要返回参数中的节点引用，否则判题程序会直接返回空）

思路：
递归思想：把大问题转换为若干小问题。
将复杂链表分为头结点和剩余结点两部分，剩余部分采用递归方法。

function RandomListNode(x) {
    this.label = x;
    this.next = null;
    this.random = null;
}

function Clone(pHead) {
    if (!pHead) {
        return null;
    }
    // 复制头结点
    var node = new RandomListNode(pHead.label);
    node.random = pHead.random;
    // 递归其他节点
    node.next = Clone(pHead.next);
    return node;
}

题目 26：输入一棵二叉搜索树，将该二叉搜索树转换成一个排序的双向链表。要求不能创建任何新的结点，只能调整树中结点指针的指向。

思路：
① 递归思想：把大问题转换为若干小问题；
② 由于 JavaScript 中并没有链表或者 Tree 这样的原生数据结构，都是通过对象模拟的，因此最终要返回的是指向双向链表首结点的指针；
③ 将左子树构成双向链表，返回的是左子树的尾结点，将其连接到 root 的左边；
④ 将右子树构成双向链表，将其追加到 root 结点之后，并返回尾结点；
⑤ 向左遍历返回的链表至头结点处，即为所求双向链表的首结点。

function Convert(pRootOfTree) {
    if (!pRootOfTree) {
        return null;
    }
    var lastNode = null;
    lastNode = ConvertNode(pRootOfTree, lastNode);
    var head = lastNode;
    while (head && head.left) {
        head = head.left;
    }
    return head;
}

function ConvertNode(node, lastNode) {
    if (!node) {
        return;
    }
    if (node.left) {
        lastNode = ConvertNode(node.left, lastNode);
    }
    node.left = lastNode;
    if (lastNode) {
        lastNode.right = node;
    }
    lastNode = node;
    if (node.right) {
        lastNode = ConvertNode(node.right, lastNode);
    }
    return lastNode;
}

题目 27：输入一个字符串,按字典序打印出该字符串中字符的所有排列。例如输入字符串 abc，则打印出由字符 a, b, c 所能排列出来的所有字符串 abc, acb, bac, bca, cab 和 cba。

输入描述：输入一个字符串,长度不超过 9 (可能有字符重复),字符只包括大小写字母。

思路：
① 递归思想：把大问题转换为若干小问题；
② n 个元素的全排列 = (n-1) 个元素全排列 + 一个元素作为前缀。
③ 递归的出口：只有一个元素的全排列，此时排序完成，输出数组。
④ 遍历字符串，将每个字符放在第一个元素作为前缀，并将其余元素继续全排列。
⑤ 新建一个 isRepeat 空对象，用来判断字符是否重复，若重复则跳过排序。

function Permutation(str) {
    var result = [];
    if (str.length <= 0) {
        return [];
    }
    var sortTemp= "";
    var arr = str.split("");
    result = sortString(arr, sortTemp, []);
    return result;
}

function sortString(arr, sortTemp, res) {
    if (arr.length == 0) {
        res.push(sortTemp);
    } else {
        var isRepeat = {};
        for (var i = 0; i < arr.length; i++) {
            if (!isRepeat[arr[i]]) {
                var temp = arr.splice(i, 1)[0]; // 取出第i个字符
                sortTemp+= temp; // 第i个字符设为前缀
                sortString(arr, sortTemp, res);
                arr.splice(i, 0, temp); // 补全取出的元素，恢复原字符串
                sortTemp= sortTemp.slice(0, sortTemp.length - 1); // 清空sortTemp
                isRepeat[temp] = true;
            }
        }
    }
    return res;
}

题目 28：数组中有一个数字出现的次数超过数组长度的一半，请找出这个数字。例如输入一个长度为 9 的数组 {1,2,3,2,2,2,5,4,2}。由于数字 2 在数组中出现了 5 次，超过数组长度的一半，因此输出 2。如果不存在则输出 0。

思路：
① 新建一个空对象 obj 保存数组中数字出现的次数；
② 遍历数组，如果该数字出现过，则 obj 中以该数字为 key 的 value 加 1；
③ 若该数字未出现过，则 obj 中以该数字为 key 的 value 设为 1；
④ 遍历 obj 对象，返回 value 大于数组长度一半的 key，即为所求数字。

function MoreThanHalfNum_Solution(numbers)
{
  var obj = {};
  var length = numbers.length;
  numbers.forEach(function(d) {
    if (obj[d]) {
      obj[d]++;
    } else {
      obj[d] = 1;
    }
  })
  for (var i in obj) {
    if (obj[i] > Math.floor(length / 2)) {
      return i;
    }
  }
  return 0;
}

题目 29：输入 n 个整数，找出其中最小的 k 个数。例如输入 4, 5, 1, 6, 2, 7, 3, 8 这 8 个数字，则最小的 4 个数字是 1, 2, 3, 4。

思路：使用 JavaScript 的 Array 对象的 sort() 方法进行自小到大排序，然后输出最小的 k 个数。

function GetLeastNumbers_Solution(input, k)
{
    if(input.length < k) return false;
    input.sort(function(a,b){return a-b;});
    return input.slice(0,k);
}

题目 30：HZ 偶尔会拿些专业问题来忽悠那些非计算机专业的同学。今天测试组开完会后，他又发话了：在古老的一维模式识别中，常常需要计算连续子向量的最大和，当向量全为正数的时候，问题很好解决。但是，如果向量中包含负数，是否应该包含某个负数，并期望旁边的正数会弥补它呢？例如：{ 6, -3, -2, 7, -15, 1, 2, 2}，连续子向量的最大和为 8 (从第 0 个开始，到第 3 个为止)。你会不会被他忽悠住？(子向量的长度至少是 1)

思路：
① 遍历数组，遇到负的和则放弃之前的结果，重新积累，这期间保留最大值；
② 用 sum 记录最终返回的最大和，用 tempsum 记录累计值；
③ 对于数组中的一个数 array[i]，若其左边的累加和非负,那么加上 array[i]；
④ 判断此时的 tempsum 是否大于 sum，若大于此时的 sum，则用 sum 记录下来。

function FindGreatestSumOfSubArray(array) 
{ 
    if (array.length < 0) 
        return 0; 
    var sum = array[0], 
        tempsum = array[0]; //注意初始值 不能设为0 防止只有负数
    for (var i = 1; i < array.length; i++) { 
        tempsum = (tempsum < 0) ? array[i] : tempsum + array[i]; 
        sum = (tempsum > sum) ? tempsum : sum; 
    } 
    return sum; 
} 

—— 题目来源 剑指 offer ——

End of File

---

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