第五届字节跳动青训营

文章目录

• 第五届字节跳动青训营
• • 青训营 – 前端练习题
  • • 每日一练
    • 编程题
    • • 前端编程题
      • • [342. 4的幂](https://leetcode.cn/problems/power-of-four/)
        • [125. 验证回文串](https://leetcode.cn/problems/valid-palindrome/)
        • [5. 最长回文子串](https://leetcode.cn/problems/longest-palindromic-substring/description/)
      • 后端编程题
      • • 题目1
        • 题目2
        • 题目3
  • 青训营 – 前端进阶班笔试（A卷）
  • • 单选题
    • 不定选择
    • 编程题
    • • 第一题
      • 第二题
    • 简答题

青训营 – 前端练习题

每日一练

DAY 1

选择题 1：下列哪些是 HTML5 的新特性？A. 语义标签B. Canvas 绘图C. 元素D. 增强型表单

【答案】ABCD

选择题 2：下面可以继承的属性有哪些？A. font-sizeB. backgroundC. colorD. cursor

【答案】ACD

【解析】

• css不可以继承的属性：display、margin、padding、border、background、width、min-width、max-width、height、min-height、max-height、overflow、position、top、bottom、left、right、z-index、float、clear、table-layout、vertical-align、page-bread-before、page-bread-after、unicode-bidi

• 所有元素都可以继承：visibility、cursor

• 子元素可以继承：letter-spacing（字符间距）、word-spacing（单词间距）、white-space（如何处理元素内的空白）、line-height（设置行高，内联元素不可以继承，设置为行内块元素可以继承）、color、font、font-size、font-family、font-style、font-weight、font-variant（大写字母）、text-decoration（文本下划线、中划线）、text-transform（首字母大写、转大写）、direction（rtl-文本方向从右向左）、text-indent（首行缩进）、text-align（文本对齐）

• 列表元素（li）可继承：list-style、list-style-type、list-style-position、list-style-image

• 表格元素可继承：border-collapse

DAY 2

选择题 1：对于一条100M的宽带，理论下载速度上限是多少？A. 12.5MB/sB. 100MB/sC. 10MB/sD. 10Mb/s

【答案】A

【解析】1Byte = 8bit，因此理论下载速度上限是：100Mb/s ÷ 8 = 12.5MB/s

选择题 2：关于 for of 和 for in 的描述，正确的是？A. for in 可以循环普通对象B. for of 可以循环普通对象C. 都不可以循环数组D. 都可以循环数组

【答案】AD

【解析】使用 for…of 遍历必须在原型上拥有 [Symbol.iterator] 接口才行，而一般用 for…in 遍历对象，Array 在一定程度上也属于对象，因此可以遍历，只不过 key 值为数组的下标值

DAY 3

选择题 1：关于事件冒泡描述正确的是？A. 从目标元素向 document 冒泡B. 从 document 向目标元素冒泡C. 从 document 向目标元素冒泡，再从目标元素向 document 冒泡D. 以上都不是

【答案】A

选择题 2：以下哪些 script 标签属性会使脚本有可能在 DOMContentLoaded 事件之后加载？A. B. C. D. 

【答案】AD

DAY 4

选择题 1：以下哪些是 CSS 块级元素的特性？A. 宽度默认由其中的内容决定B. 高度默认由其中的内容决定C. 可以被分拆到多行D. 可以通过 height 属性指定高度

【答案】BD

【解析】块级元素默认情况独占一行，C 选项的可以被分拆到多行不知道啥意思

选择题 2：以下关于跨域说法错误的是？A. http://example.com/a.html 和 https://example.com/b.htm 是相同的域名，属于同源B. 跨域资源共享规范中规定了除了 GET 之外的 HTTP 请求，或者搭配某些 MINE 类型的 POST 请求，浏览器都需要先发一个 OPTIONS 请求。C. CSS 中通过 @font-face 使用字体也会有跨域问题D. Cookie，LocalStorage 和 IndexedDB 都会受到同源策略的限制

【答案】A

【解析】A 选项，同源策略：协议、域名、端口号相同；B 选项，是简单请求和复杂请求的区别；C 选项，Web fonts 仍然受到同域限制 (字体文件必须和调用它的网页同一域)；D 选项，正如大多数的 web 储存解决方案一样，localStorage 和 IndexedDB 也遵守同源策略，因此当你在某个域名下操作储存数据的时候，你不能操作其他域名下的数据

DAY 5

选择题 1：下列哪些可以实现浏览器存储数据？A. cookieB. localStorageC. sessionD. sessionStorage

【答案】ABD

选择题 2：对以下代码说法正确的是？let arr = [1,2,3,4,5];let arr2 = [1, , 3];A. 执行 arr.length = 3，此时数组为 [1,2,3]B. 执行 arr[10] = 11，此时 arr.length 为 6C. 执行 delete arr[2]，此时 arr.length 为 4，数组为 [1,2,4,5]D. arr2.length 的长度为 2

【答案】A

【解析】B 选项，执行 arr[10] = 11，此时 arr.length 为 11；C 选项，执行 delete arr[2]，此时 arr.length 为 5，数组为 [ 1, 2, , 4, 5 ]；D 选项，arr2.length 的长度为 3

DAY 6

选择题 1：在 css 选择器当中，优先级排序正确的是？A. id选择器>标签选择器>类选择器B. 标签选择器>类选择器>id选择器C. 类选择器>标签选择器>id选择器D. id选择器>类选择器>标签选择器

【答案】D

选择题 2：如以下代码所示，给 body 绑定两个事件后，调用 document.body.click() 输出的结果是？document.body.addEventListener('click', () => {Promise.resolve().then(() => console.log(1))console.log(2);}, false);document.body.addEventListener('click', () => {Promise.resolve().then(() => console.log(3))console.log(4);}, false);A. 2, 4, 1, 3B. 2, 1, 4, 3C. 1, 2, 3, 4D. 1, 3, 2, 4

【答案】A

【解析】addEventListener 的事件不会被覆盖，都会被按顺序执行，然后就是事件循环了，上面的代码相当于：

Promise.resolve().then(() => console.log(1))console.log(2);Promise.resolve().then(() => console.log(3))console.log(4);

因此很容易看出来选 A

附加一道事件循环的题：

//请写出输出内容async function async1() {console.log('async1 start');await async2();console.log('async1 end');}async function async2() {console.log('async2');}console.log('script start');setTimeout(function() {console.log('setTimeout');}, 0)async1();new Promise(function(resolve) {console.log('promise1');resolve();}).then(function() {console.log('promise2');});console.log('script end');

【答案】

script startasync1 startasync2promise1script endasync1 endpromise2setTimeout

【解析】await 相当于把之后的代码放入微任务队列中

DAY 7

选择题 1：浮动会导致页面的非正常显示，以下几种清除浮动的方法，哪个是不推荐使用的？A. 在浮动元素末尾添加一个空的标签例如 B. 通过设置父元素overflow值为hidden；C. 给父元素添加clearfix类D. 父元素也设置浮动

【答案】D

选择题 2：以下代码的运行结果是？var f = function () { console.log('1'); } function f() { console.log('2'); }f();A. undefinedB. 报错C. 2D. 1

【答案】D

【解析】js 预解析，上面的代码相当于：

var f;function f() { console.log('2'); }f = function () { console.log('1'); } f();

DAY 8

选择题 1：下列说法正确的有哪些？A. visibility:hidden 表示所占据的空间位置仍然存在，仅为视觉上的完全透明B. display:none 不为被隐藏的对象保留其物理空间C. visibility:hidden 与display:none 两者没有本质上的区别D. visibility:hidden 回流与重绘

【答案】AB

【解析】具体的对比参数如下：

选择题 2：若主机甲与主机已已建立一条 TCP 链接，最大段长（MSS）为 1KB，往返时间（RTT）为 2 ms，则在不出现拥塞的前提下，拥塞窗口从 8KB 增长到 32KB 所需的最长时间是？A. 4msB. 8msC. 24msD. 48ms

【答案】D

【解析】TCP 的拥塞控制包括：慢开始、拥塞避免、快重传、快恢复。这里是考察慢开始➕拥塞避免，因为当指数增长到 ssthresh 时会变成拥塞避免算法，即每个 RTT 后每次增长 1 个 MSS，题目问到最长时间，如果当 8KB 到 32KB为线性增长那时间肯定是最长的，所以所需的最长时间是：(32 – 8) * 2ms = 48ms

DAY 9

选择题 1：以下对HTML标签的使用，哪些是符合语义的？A. 使用 table 展示表格数据B. 使用 span 表示按钮C. 使用 article 展示文章内容D. 使用 p 标签展示文章标题

【答案】AC

选择题 2：包过滤防火墙对数据包的过滤依据不包括哪些？A. 源IP地址B. 源端口号C. MAC 地址D. 目的 IP 地址

【答案】C

【解析】包过滤是在 IP 层实现的，包过滤根据数据包的源 IP 地址、目的 IP 地址、协议类型（TCP 包、UDP 包、ICMP 包）、源端口、目的端口等包头信息及数据包传输方向等信息来判断是否允许数据包通过

编程题

前端编程题

342. 4的幂

/** * @param {number} n * @return {boolean} */function isPowerOfFour(n) {n = +n;return (n & (n - 1)) === 0 && n % 3 === 1;};

125. 验证回文串

/** * @param {string} s * @return {boolean} */function isPalindrome(s) {s = s.toLowerCase().match(/[0-9a-zA-Z]+/g)?.join('');if (s === undefined) return true;let left = 0, right = s.length - 1;while (left <= right) {if (s[left++] !== s[right--]) return false;}return true;};

5. 最长回文子串

/** * @param {string} s * @return {string} */function longestPalindrome(s) {const len = s.length;let idx = null;for (let i = 0; i < len; i++) {let { len: len1, idx: idx1 } = expand(i, i);let { len: len2, idx: idx2 } = expand(i, i + 1);const temp = len1 >= len2 ? idx1 : idx2;idx = calcLen(temp) > calcLen(idx) ? temp : idx;}return s.substring(idx[0], idx[1] + 1);function expand(left, right) {while (left >= 0 && right < len && s[left] === s[right]) {left--;right++;}return {len: right - left - 1,idx: [left + 1, right - 1]}}function calcLen(list) {if (list === null) return -1;return list[1] - list[0] + 1;}};

后端编程题

题目1

题目

实现一个 36 进制的加法 0-9 a-z。

示例

输入：“abbbb”,“1”

输出：“abbbc”

/** * @param {string} num1 * @param {string} num2 * @return {string} */const map = new Map(new Array(36).fill().map((item, index) => [index.toString(36), index]));const map_reverse = new Map(new Array(36).fill().map((item, index) => [index, index.toString(36)]));function add36Base(num1, num2) {let carry = 0, p1 = num1.length - 1, p2 = num2.length - 1, result = "";while (p1 >= 0 || p2 >= 0) {let sum = (map.get(num1[p1]) ?? 0) + (map.get(num2[p2]) ?? 0) + carry;carry = Math.floor(sum / 36);result = map_reverse.get(sum % 36) + result;p1--;p2--;}return (carry ? carry : '') + result;}

题目2

题目

抖音电影票业务支持电影院选座，需要在用户买票时自动推荐座位，如果一个用户买了多张票，则需要推荐相邻(上下相邻、左右相邻都可)的座位。现在使用一个二维数组来表示电影院的座位，数组中 0 表示未被选座，1 表示已被选座或者为障碍物，请实现一个方法求出给定影院中最大可推荐的相邻座位个数。

示例

输入：

[1,0,0,1,0,0,0]

[1,0,0,0,0,1,1]

[0,0,0,1,0,0,0]

[1,1,0,1,1,0,0]

输出：18

function maxAreaOfRecommendSeats(grid) {const row = grid.length, column = grid[0].length, map = genMap(row, column);let result = 0, cnt = 0;for (let i = 0; i < row; i++) {for (let j = 0; j < column; j++) {if (grid[i][j] === 0 || map[i][j]) continue;walk(i, j);result = Math.max(result, cnt);cnt = 0;}}return result;function walk(i, j) {if (!ifExit(i, j) || grid[i][j] === 0 || map[i][j]) return;map[i][j] = true;cnt++;walk(i + 1, j);walk(i - 1, j);walk(i, j + 1);walk(i, j - 1);}function ifExit(i, j) {return (grid[i] ?? false) && (grid[i][j] ?? false) && true;}function genMap(row, column) {const result = [];for (let i = 0; i < row; i++) {result.push(new Array(column).fill(false));}return result;}}

题目3

热身题

93. 复原 IP 地址

/** * @param {string} s * @return {string[]} */function restoreIpAddresses(s) {const result = [], path = [], len = s.length;recursion(0);return result;function recursion(start) {if (len - 1 - path.at(-1) > (4 - path.length) * 3 || !ifIPValid(path)) return;path.length === 4 && result.push(sliceIP(path).join('.'));for (let i = start; i < len; i++) {path.push(i);recursion(i + 1);path.pop();}}function ifIPValid(idx) {return sliceIP(idx).every(item => {if (item.startsWith("0")) return item.length === 1;return item <= 255;})}function sliceIP(idx) {return idx.reduce((pre, curr, index) =>(pre.push(s.slice((idx[index - 1] + 1 || 0), curr + 1)), pre), []);}}

题目

有效 IP 地址正好由四个整数（每个整数位于 0 到 255 之间组成，且不能含有前导 0），整数之间用 ‘.’ 分隔。

例如：“0.1.2.201” 和 “192.168.1.1” 是有效 IP 地址，但是 “0.011.255.245”、“192.168.1.312” 和 “192.168@1.1” 是无效 IP 地址。

给定一个字符串 s，非数字的字符可替换为任意不包含在本字符串的数字，同样的字符只能替换为同样的数字，用以表示一个 IP 地址，返回所有可能的有效 IP 地址，这些地址可以通过在 s 中插入 ‘.’ 来形成。你不能重新排序或删除 s 中的任何数字，你可以按任何顺序返回答案。

示例 1

输入：20212118136

输出：

20.212.118.136

202.12.118.136

202.121.18.136

202.121.181.36

示例 2

输入：11a2b22a037

输出：114.252.240.37

/** * @param {string} s * @return {string[]} */function restoreIpAddressesWithLetters(s) {const list = [...new Set(s.match(/[a-zA-Z]/g))], letterVal = new Map(), result = [];recursion(0);return result;function recursion(index) {if (letterVal.size === list.length) {[...letterVal].forEach(item => s = s.replaceAll(item[0], item[1]));result.push(...restoreIpAddresses(s));return;}for (let i = 0; i <= 9; i++) {letterVal.set(list[index], i);recursion(index + 1);letterVal.delete(list[index]);}}}

青训营 – 前端进阶班笔试（A卷）

‼️ 以下答案的来源为作者本人的思考，并非官方的参考答案，如有错误敬请见谅，仅供参考！！！

单选题

1. 以下权重第二高的是A. 行内样式B. 类选择器C. 标签选择器D. id选择器

【我的答案】D

【解析】行内样式 > id选择器 > 类选择器 > 标签选择器

2. 已知两个长度分别为 m 和 n 的升序链表，若将他们合并为一个长度为 m+n 的降序链表，则最坏情况下的时间复杂度是多少A. O(n)B. O(min(m,n))C. O(max(m,n))D. O(m*n)

【我的答案】C

【解析】但是我觉得最坏的情况是 O(m+n)，最好的情况是 O(min(m,n))，不清楚这道题想表达啥

3. 以下哪项可以去除变量str中的所有空格A. str.replace(/\s*/g, "")B. str.replace(/^\s*/, "")C. str.replace(/(\s*$)/g, "")D.str.replace(/^\s|\s$/g, "")

【我的答案】A

【解析】首先要想替换全部空格肯定要有 g 模式，况且加了 g 也只能替换字符串开头的空格，所以排出 C; A 选项是正确的；C 选项只能替换字符串结束的空格；D 选项能替换字符串开头和结束的空格

4. http 状态码 502 代表的是A. 链接超时B. 网关错误C. 服务器内部错误D. 服务器拒绝访问

【我的答案】B

【解析】链接超时 – 408，网关错误 – 502，服务器内部错误 – 500，服务器拒绝访问 – 403

5. 要使一棵非空二叉树的先序序列与中序序列相同，其所有的非叶节点须满足的条件是A. 只有左子树B. 节点的度均为1C. 节点的度均为2D. 只有右子树

【我的答案】D

【解析】先序序列：中左右，中序序列：左中右，将每个答案带入，可以发现当只有右子树的时候先序序列与中序序列的结果都为：中右，因此是相同的

6. 以下哪些语句可以判断对象 string1 是否为 StringA. string1 instanceof StringB. string1 is StringC. 以上答案都不正确D. typeof string1 === 'string'

【我的答案】A

【解析】A 选项是正确的；B 选项，js 没有 is 这个关键字，但是有 in 这个关键字；D 选项，因为为对象字符串，所以 typeof string1 的结果为 'object'

⚠️ 题目中说了是对象字符串，不是字符串，所以定义变量的时候为 let string1 = new String('hello world');

7. 以下不属于 JS 基本数据类型的是A. SymbolB. RegExpC. StringD. Null

【我的答案】B

【解析】JS 基本数据类型有：Null、Undefined、Boolean、Number、String、Symbol(es6)、BigInt(es11)

8. 以下结果为 true 的是A. NaN == NaNB. !null == undefinedC. !{} == []D. 0 === '0'

【我的答案】C

【解析】A 选项，NaN 和任何都是 false，包括 NaN 本身；B 选项，其实 null 和 undefined 只有它俩双等比较时才为 true，其余的都为 false，所以可直接排除，!null 的值为 true；C 选项，因为任何的数组和对象转换后都为 true，所以 !{} 的值为 false，而此时左右两边不是同类型，右边需要转成基本数据类型，结果为 ''，因此等价于比较 false == ''，非数字的基本类型比较将两边转为数字类型，所以为 0 == 0，因此为 true；D 选项，三等号需要比较类型，因此为 false

9. 以下哪个三角形的直角朝右A. width: 0; height: 0; border-width: 20px 20px 20px 20px; border-style: solid; border:color: transparent transparent transparent red;B. width: 0; height: 0; border-right: solid transparent 20px; border-top: solid red 20px;C. width: 0; height: 0; border-top: solid red 20px; border-right: solid transparent 20px; border-bottom: solid transparent 20px; border-left: solid transparent 20px;D. border-width: 20px 20px 20px 20px; border-style: solid; border-color: transparent transparent transparent red;

【我的答案】D

【解析】A 选项的 border:color 改为 border-color 也可以使得直角朝右，这个太阴险了；B 选项的直角朝左上角；C 选项的直角朝下；D 选项的直角朝右角

10. 以下关于原型链的描述正确的是A. 通过原型链继承的属性和对象自己定义的属性等效B. 在对象上访问不存在的属性时，会依次遍历整条原型链C. 所有 JavaScript 中的对象都是位于原型链顶端的 `Object` 的实例D. 通过原型链可以模拟对象的私有属性

【我的答案】B

【解析】A 选项，对象自己定义的属性与原型链继承的属性相同时，自身的属性优先级高；C 选项，原型链顶端的是 null，但是访问不存在的属性返回的是 undefined，访问原型如果不存在则为 null；D 选项，这是不可以的，原型链上的属性也会被遍历出来

不定选择

1. HTML 表单包含以下哪些类型A. emailB. numberC. colorD. url

【我的答案】ABCD

【解析】包含的值有：button、checkbox、color、date、datetime、datetime-local、email、file、hidden、image、month、number、password、radio、range、reset、search、submit、tel、text、time、url、week

2. 一个栈的进栈顺序为 a,b,c,d,e，出栈的可能输出序列是A. edcbaB. dceabC. abcdeD. decba

【我的答案】ACD

【解析】只要模仿出栈入栈的顺序来判断是否是可能的输出序列，或者可以写一个程序来验证，只要最后的栈中没有元素剩余则为可能的输出序列，js 代码如下：

/** * 判断是否为可能的出栈序列 * @param {string} stack_in 入栈序列 * @param {string} stack_out 出栈序列 */function ifStackSequence(pushed, popped) {let p1 = 0, p2 = 0, len = pushed.length, stack = [];while (true) {while (p1 < len && stack[0] !== popped[p2]) {stack.unshift(pushed[p1]);p1++;}while (p2 < len && stack[0] === popped[p2]) {stack.shift();p2++;}if (p1 === len) {if (stack.length === 0) return true;return false;}}}console.log(ifStackSequence('abcde', 'edcba')); // trueconsole.log(ifStackSequence('abcde', 'dceab')); // falseconsole.log(ifStackSequence('abcde', 'abcde')); // trueconsole.log(ifStackSequence('abcde', 'decba')); // true

3. 下列哪种数组的方法会修改数组本身A. sliceB. sortC. unshiftD. splice

【我的答案】BCD

【解析】有 7 个方法会修改数组本身：pop、push、shift、unshift、splice、sort、reverse，在 vue2 中的数组响应式也是重写数组这 7 个方法达到监听数据修改的

4. 在给主机配置 IP 地址时，哪一个不能使用A. 29.9.255.18B. 192.5.91.255C. 220.103.256.56D. 127.21.19.109

【我的答案】CD

【解析】其中 A、B、C 这3类（如下表格）由InternetNIC在全球范围内统一分配，D、E类为特殊地址。

**D类IP地址：**D类IP地址在历史上被叫做多播地址，即组播地址。在以太网中，多播地址命名了一组应该在这个网络中应用接收到一个分组的站点。多播地址的最高位必须是 1110，范围从 224.0.0.0 到 239.255.255.255。

**E类IP地址：**E类IP地址是以“1111”开始，他的第一字节的范围是240_{255，为将来使用保留，即其中240.0.0.0}255.255.255.254作为保留地址，255.255.255.255作为广播地址。

特殊的网址：

1. 每一个字节都为0的地址（0.0.0.0）对应于当前主机；
2. IP地址中的每一个字节都为1的IP地址（255.255.255.255）是当前子网的广播地址；
3. IP地址中凡是以 11110 开头的E类IP地址都保留用于将来和实验使用。
4. IP地址中不能以十进制 127 作为开头，该类地址中数字 127.0.0.1 到 127.255.255.255 用于回路测试，如：127.0.0.1 可以代表本机IP地址，用 http://127.0.0.1 就可以测试本机中配置的 Web 服务器。
5. 网络ID的第一个6位组也不能全置为 0，全 0 表示本地网络。

因此个人觉得只有 「A、B、C」 三类以及除**「特殊的网址」**之外的 IP 可以被分配

编程题

JavaScript Node 模板

const rl = require("readline").createInterface({ input: process.stdin });var iter = rl[Symbol.asyncIterator]();const readline = async () => (await iter.next()).value;void async function () {// Write your code herewhile(line = await readline()){let tokens = line.split(' ');let a = parseInt(tokens[0]);let b = parseInt(tokens[1]);console.log(a + b);}}()

⚠️ 编程题的**「输入」和「输出」**都要自己写，要用 readline() 读入，用 console.log() 输出，这是第一次使用牛客平台进行考试，不太熟悉，这个 node 环境的模板我都研究了半天，没想到最后的输出使用的 log 这是我没想到的，在那里 return 了半天也没反应

第一题

就是训练营练习题里的125. 验证回文串，上面已经写过了

const rl = require("readline").createInterface({ input: process.stdin });var iter = rl[Symbol.asyncIterator]();const readline = async () => (await iter.next()).value;void async function () {let s = "";while(line = await readline()){s= line;}let result = "TRUE"; s = s.toLowerCase().match(/[0-9a-zA-Z]+/g)?.join('');if (s === undefined) return true;let left = 0, right = s.length - 1;while (left <= right) {if (s[left++] !== s[right--]) return false;}return true;}()

题目里写的是输出 true or false，但是这里需要最后输出是字符串的 "TRUE" 和 "FALSE"，太坑了

第二题

原题是3. 无重复字符的最长子串，主要用到的是「滑动窗口」思想，也很容易就能写完

const rl = require("readline").createInterface({ input: process.stdin });var iter = rl[Symbol.asyncIterator]();const readline = async () => (await iter.next()).value;void async function () {let s = "";while(line = await readline()){s = line;}let result = 0, currentLen = 0, list = [];for (let i = 0, len = s.length; i < len; i++) {let char = s[i], idx = list.indexOf(char);if (idx < 0) {currentLen++;list.push(char);} else {result = currentLen > result ? currentLen : result;list = [...list.slice(idx + 1), char];currentLen = list.length;}}console.log(Math.max(result, currentLen));}()

简答题

react 和 vue 的区别，以及各自的优缺点

可以自己百度一下得到答案