第五届字节跳动青训营寒假 —— 前端专场

第五届字节跳动青训营寒假 —— 前端专场

青训营 - 前端练习题

每日一练

DAY 1

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

【答案】ABCD

选择题 2：
下面可以继承的属性有哪些？
A. font-size
B. background
C. color
D. 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/s
B. 100MB/s
C. 10MB/s
D. 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. <script async>
B. <script defer>
C. <script type="module">
D. <script type="module" async>

【答案】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. cookie
B. localStorage
C. session
D. 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 为 6
C. 执行 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, <1 empty item>, 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, 3
B. 2, 1, 4, 3
C. 1, 2, 3, 4
D. 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 start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

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

DAY 7

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

【答案】D

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

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

【答案】D

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