备战青训营笔试——前端选择题（上）

江漓Jeffrey
992 阅读7分钟

备战青训营笔试——前端选择题（上）

前言

青训营笔试将至，希望能通过写文章的方式，和大家一起复习相关知识点，备战笔试。

本人前端菜鸡，希望大家多多指教。后续我也会推出选择题下部分和每天的编程题（赶得完的话）。最后呢，祝大家都能顺顺利利地通过笔试。

‍

DAY 1

  1. 下列哪些是 HTML5 的新特性？
    A. 语义标签
    B. Canvas 绘图
    C. <audio>元素
    D. 增强型表单
  2. 下面可以继承的属性有哪些？
    A. font-size
    B. background
    C. color
    D. cursor

根据W3school的描述

HTML5 的一些最有趣的新特性：

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

可知第一题选ABCD。更多关于html5的知识请点击W3school

‍

第二题，嗯，本人学疏才浅，放个链接大家一起学习吧

点我学习：css的简单继承

所以，第二题选ACD。

‍

DAY 2

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

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

熟悉宽带的同学都应该知道宽带速率的单位是Mbps，指每秒传输的位（比特）数量。而我们常说的网速都是以MB/s 为单位，MB/s的含义是兆字节每秒。结合计算机知识，1Byte＝8bit，大写B是小写b的8倍。所以100/8=12.5，第一题选A。

对于第二题(选AD)，首先，for of是ES6 引入的，参考阮一峰的《ECMAScript 6 入门》

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。

示例代码

var arr = ['a', 'b', 'c', 'd'];

for (let a in arr) {
  console.log(a); // 0 1 2 3
}

for (let a of arr) {
  console.log(a); // a b c d
}

forEach也是一种常用的遍历方法：

const arr = ['apple', 'peach', 'orange'];
arr.forEach(function (element, index) {
  console.log(element); // apple peach orange
  console.log(index);   // 0 1 2
});

DAY 3

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

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

对于事件冒泡，“冒泡”这词就形象地表明它是从里到外的。事件冒泡的详细介绍如下：

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

所以第一题选A。

更多相关知识：彻底搞懂JS事件冒泡与捕获​

第二题，对于DOMContentLoaded​事件，MDN是这样解释的：

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded​ 事件被触发，而无需等待样式表、图像和子框架的完全加载。

简单来说，DOMContentLoaded​ 就是浏览器已完全加载 HTML，并构建了 DOM 树，而样式表之类的东西可能尚未加载完成。

JS 的加载分为两个部分：下载和执行。它会阻止页面的渲染，为了解决这个问题，ECMAScript 引入了 defer​ 和 async​ 两个属性。

MDN中明确defer​属性会令脚本在文档解析完成后、触发 DOMContentLoaded​ 事件前执行。

这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded​ 事件前执行。 有 defer​ 属性的脚本会阻止 DOMContentLoaded​ 事件，直到脚本被加载并且解析完成。

而async​ 属性会在 HTML 解析期间异步下载文件，并在完成下载后立即暂停 HTML 解析器去执行 script 中的代码。但如果在下载脚本的期间HTML加载完成了，就有可能在DOMContentLoaded​ 事件之后加载。

所以，这题选带有async的AD。

参考：

DAY 4

  1. 以下哪些是 CSS 块级元素的特性？
    A. 宽度默认由其中的内容决定
    B. 高度默认由其中的内容决定
    C. 可以被分拆到多行
    D. 可以通过 height 属性指定高度
  2. 以下关于跨域说法错误的是？
    A. example.com 和 example.com 是相同的域名，属于同源
    B. 跨域资源共享规范中规定了除了 GET 之外的 HTTP 请求，或者搭配某些 MINE 类型的 POST 请求，浏览器都需要先发一个 OPTIONS 请求。
    C. CSS 中通过 @font-face 使用字体也会有跨域问题
    D. Cookie，LocalStorage 和 IndexedDB 都会受到同源策略的限制

第一题考的是块级元素，先复习一下：

块级元素：

  • 比如div;p;h系列
  • 独占一行
  • 支持width、height、边距（margin、padding）属性
  • 宽度默认所在容器的宽度

支持height属性，所以说D是对的。了解高度塌陷​就不难知道块级元素的高度默认由其中的内容决定。答案：BD

补充：

  1. 行内元素（内联元素）：

    • 如a;img;span
    • 与其他行内元素并排
    • 不支持width、height、边距（margin、padding）属性
    • 默认的宽度就是文本内容的宽度
    • 只能容纳文本级元素和内联元素
    • 浮动后变为块级

  2. 行内/块级转换

    • display属性

      3个值：inline、block、inline-block（行内块元素）。

    • 浮动float属性

      3个值：left、right、none

      浮动会改变display的值为block（块级元素）

第二题选A放链接大家一起学习：

DAY 5

  1. 下列哪些可以实现浏览器存储数据？
    A. cookie
    B. localStorage
    C. session
    D. sessionStorage
  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

第一题，cookie不用说，老牌的存储型缓存。后来HTML5推出了WebStorage浏览器存储机制，其又分为sessionStorage和localStorage，选ABD。

详见juejin.cn/post/718285…

第二题考察的是数组的length属性，翻阅《JavaScript权威指南（原书第7版）》可知：

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

所以这题选A

‍

avatar
文章
阅读
粉丝