字节跳动青训营前端笔试练习

不定项选择题

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

答案：ABCD
解析：
HTML5 的一些最有趣的新特性：

• 新的语义元素，比如 <header>, <footer>, <article>,<section>。
• 新的表单控件，比如数字、日期、时间、日历和滑块。
• 强大的图像支持（借由 <canvas> 和 <svg>）
• 强大的多媒体支持（借由 <video> 和 <audio>）
• 强大的新 API，比如用本地存储取代 cookie。

2. 下面可以继承的属性有哪些？
   A. font-size
   B. background
   C. color
   D. cursor

答案：ACD
解析：详见CSS简单的继承

3. 对于一条100M的宽带，理论下载速度上限是多少？
   A. 12.5MB/s
   B. 100MB/s
   C. 10MB/s
   D. 10Mb/s

答案：A
解析：宽带速率的单位是Mbps，指每秒传输的位（比特）数量。我们常说的网速都是以MB/s为单位，MB/s的含义是兆字节每秒。1Byte＝8bit，所以下载速度上限为100/8=12.5MB/s

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

答案：AD
解析：

• ES6 借鉴 C++、Java、C# 和 Python 语言，引入了for...of循环，作为遍历所有数据结构的统一的方法。一个数据结构只要部署了Symbol.iterator属性，就被视为具有 iterator 接口，就可以用for...of循环遍历它的成员。也就是说，for...of循环内部调用的是数据结构的Symbol.iterator方法。for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串。所以说for of是不能遍历普通对象的（除非它署了Symbol.iterator属性）
• for in是JavaScript原有的遍历方法，遍历对象的“可枚举”属性

两者区别：

• for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。
• for in总是得到对象的key或数组、字符串的下标。
• for of总是得到对象的value或数组、字符串的值，另外还可以用于遍历Map和Set。

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

答案：A
解析：
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

6. 以下哪些 script 标签属性会使脚本有可能在 DOMContentLoaded 事件之后加载？
   A. <script async>
   B. <script defer>
   C. <script type="module">
   D. <script type="module" async>

答案：AD
解析：
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded​ 事件被触发，而无需等待样式表、图像和子框架的完全加载。简单来说，DOMContentLoaded​ 就是浏览器已完全加载 HTML，并构建了 DOM 树，而样式表之类的东西可能尚未加载完成。JS 的加载分为两个部分：下载和执行。它会阻止页面的渲染，为了解决这个问题，ECMAScript 引入了 defer​ 和 async​ 两个属性。MDN中明确defer​属性会令脚本在文档解析完成后、触发 DOMContentLoaded​ 事件前执行。这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded​ 事件前执行。 有 defer​ 属性的脚本会阻止 DOMContentLoaded​ 事件，直到脚本被加载并且解析完成。而async​ 属性会在 HTML 解析期间异步下载文件，并在完成下载后立即暂停 HTML 解析器去执行 script 中的代码。但如果在下载脚本的期间HTML加载完成了，就有可能在DOMContentLoaded​ 事件之后加载。所以，这题选带有async的AD

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

答案：BD
解析：
块级元素：比如div;p;h系列，他们是独占一行的，支持width、height、边距（margin、padding）属性，宽度默认所在容器的宽度，了解高度塌陷就不难知道块级元素的高度默认由其中的内容决定，但也支持height属性

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

答案：A
解析：
域：指浏览器不能执行其他网站的脚本
同源：即指在同一个域，就是两个页面具有相同的协议 protocol，主机 host 和端口号 port，如果其中有一项不同就叫跨域


同源策略：若页面的源和页面运行过程中加载的源不一致时，出于安全考虑，浏览器会对跨域的资源访问进行一些限制

9. 下列哪些可以实现浏览器存储数据？
   A. cookie
   B. localStorage
   C. session
   D. sessionStorage

答案：ABD
解析：cookie是老牌的存储型缓存。后来HTML5推出了WebStorage浏览器存储机制，其又分为sessionStorage和localStorage，选ABD。

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

答案：A
解析：

• 设置数组的length值为小于当前值的非负整数n，则任何索引大于或等于n的数组元素都会从数组中被删除
• 如果给一个索引为i​的数组元素赋值，而i大于或等于数组当前的length，则数组的length属性会被设 置为i+1​
• 对数组元素使用delete操作符不会修改length属性，使用splice()​会
• 如果省略数组字面量中的一个值，被省略的元素是不存在的，但它的索引是存在的
  B错，arr.length应为11
  C错，arr.length不变，为5
  D错，arr2.length=3
  

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

答案：D

12. 如以下代码所示，给 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, 3
B. 2, 1, 4, 3
C. 1, 2, 3, 4
D. 1, 3, 2, 4
答案：A
解析：此题考察异步编程，在JS的执行机制中

• 遇到同步代码直接执行
• 遇到异步代码先放一边，并且将他回调函数存起来，存的地方叫事件队列
• 等所有同步代码都执行完，再从事件队列中把存起来的所有异步回调函数拿出来按顺序执行

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

答案：D
解析：ABC都是常用的方法。如果父元素设置浮动，那么爷爷级元素又会受到高度坍塌等影响，这种方法是不推荐的，详见清除浮动的四种方式及其原理理解
14. 以下代码的运行结果是？

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

A. undefined
B. 报错
C. 2
D. 1

答案：D
解析：当解析器读取js代码时，会先读取函数的声明（函数提升），var声明的变量也存在着变量提升，函数提升优于变量提升。所以f()最开始是打印2，后来被打印1覆盖了。这题选D

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

答案：AB
解析：
总结几种元素消失的属性：

• display:none，不会渲染该元素，元素消失，不占位，会造成浏览器的回流与重绘
• visibility:hidden，元素消失，占位，会造成浏览器的重绘
• opacity: 0，透明度为0，元素看不见，占位，不会引发回流，一般情况下也会引发重绘

回流：当我们修改元素的几何位置属性，如宽度、高度时，浏览器会重新布局，这个过程就叫回流
重绘：当我们修改元素的绘制属性，如背景色、颜色等，浏览器不会重新布局，但是需要重新进入绘制阶段，这个过程就是重绘。

回流一定会触发重绘，重绘不一定会触发回流

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

答案：D，考察计算机网络，（32-8）*2=48ms

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

答案：AC
BD错，按钮是button，文章是article

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

答案：C
解析：数据包过滤是通过对数据包的IP头和TCP头或UDP头的检查来实现的，主要信息有：IP源地址、IP目标地址、协议（TCP包、UDP包和ICMP包）、TCP或UDP包的源端口、TCP或UDP包的目标端口、ICMP消息类型、TCP包头中的ACK位、数据包到达的端口、数据包出去的端口

编程题

1. 给定一个十进制整数字符串，判断它是否是 4 的幂。
   示例 1
   输入："16"，输出：true
   示例 2
   输入："101"，输出：false
   示例 3
   输入："70368744177664"，输出：true
   限定语言：C、 C++、Java、Python、JavaScript V8

答案：

function isPowerOfFour(num) {
  // 补充具体实现
  for(;num>=4&&num%4==0;){
	num=num/4;
  }
  if(num===1){
    console.log(true)
    return true;
  }
  else{
    console.log(false)
    return false;
  }
}
isPowerOfFour(70368744177664);

运行结果

2. 题目
   给定一个字符串，验证它是否是回文串，只考虑字母和数字字符，可以忽略空格、字母的大小写。
   示例
   输入："A man, a plan, a canal: Panama"，输出：true
   限定语言：C、 C++、Java、Python、JavaScript V8

回文串：正读和反读都一样的字符串

解题思路

int i,j,n;
string s=原字符串
n=s.length()
j=n;
string a[i]=原字符串
string b[j]
//该循环用于清理掉非数字字母的字符
for(i=0,j=0;i<n;){
	if(a[i]==a-z||A-Z||0-9){
		b[j]=a[i];
		i++;
		j++;
	}
	else i++;
}
n=j;
i=j;
a[i]=b[j].reverse();
for(i=0,j=0;i<=n;i++,j++){
if(a[i]!=b[j])
	break;
}
//判断是否是跳出循环，若真则不是回文串，若假则是回文串
if(i<=n) printf("false")
else printf("ture")

答案如下

let s = "A man, a plan, a canal: Panama"
s_first = s.replaceAll(/[^a-zA-Z0-9]/g, '').toLowerCase()//清除所有非字母非数字的字符，并将所有大写字母转换成小写
console.log(s_first.split('').reverse().join('') === s_first)

运行结果

或

//这个还没运行成功
bool check(string s) {
    string ss = s;
    reverse(s.begin(), s.end());
    return ss == s;
}

3. 给定一个字符串，找出该字符串中最长回文子串的长度。
   示例 1
   输入："abc"，输出：0
   示例 2
   输入："abcbe"，输出：3
   示例 3
   输入："acdcecdcf"，输出：7
   限定语言：C、 C++、Java、Python、JavaScript V8

解题思路
用动态规划的方法，回文串是对称的。从小的字符段向两端延伸，比如字符a要想延伸回文段就得a两端是相同的字符，比如bab, cac这样，如此递归找到最长的回文段
答案

var longestPalindrome = function(s) {
    let len = s.length;
    let result;
    let i,j,L;
    let dp=Array(len).fill(0).map(x=>Array(len).fill(0));
    //console.log(dp);
    if(len==1){
        return s
    }
    // 只有一个字符的情况是回文
    for(i = 0;i<len;i++){
        dp[i][i] = 1
        result = s[i]
    }
 
    // L是i和j之间的间隔数（因为间隔数从小到大渐增，所以大的间隔数总能包含小的间隔数）
    // i     j
    // abcdcba.length = L   所以 L = j-i+1; => j = i+L-1;
    for ( L = 2; L <= len; L++) {
        // 从0开始
        for ( i = 0; i <= len - L; i++) {
                j = i + L - 1;
            if(L == 2 && s[i] == s[j]) {
                dp[i][j] = 1;
                result = s.slice(i, i + L);
            }else if(s[i] == s[j] && dp[i + 1][j - 1] == 1) {
                dp[i][j] = 1
                result = s.slice(i, i + L);
            }
 
        }
    }
    if(result.length===1) console.log("0")
    else console.log(result.length);
    return result;
}
longestPalindrome("acdcecdcf");//以上只是定义函数，要用的时候别忘了调用函数

运行结果