前端面试题总结（5）

电玩女神 2022-10-10 01:43 607阅读 0赞

### 一、问题 ###

1、以下代码执行后，console 的输出是？

let x = 10;
    let foo = () => {
    	console.log(x);
    	let x = 20;
    	x++;
    }
    foo();

A、抛出 ReferenceError B、10 C、20 D、21

2、以下代码的执行后，str 的值是：

var str = "Hellllo world";
    str = str.replace(/(l)\1/g, '$1');

3、以下哪个语句打印出来的结果时false？

A、`alert(3==true)` B、`alert(2=="2")`

C、`alert(null == undefined)` D、`alert(isNaN("true"))`

4、添加样式的方式有 【不定项】

A、内联式：即直接加在标签上的样式 如`<div style="width:100px;"></div>`

B、导入样式：@import url(“css/style.css”)

C、嵌入式：即用`<style>.classname {width: 100px;}</style>`标签括起来写在页面中的样式

D、外部引用式：即将样式单独放到一个文件夹中，然后用link标签引入页面的形式，如：`<link rel="stylesheet" type="text/css" href="Css.css" />`

5、以下是css3中支持的单位有？ 【不定项】

A、pt B、vw C、em D、%

6、修改以下哪些CSS属性会导致回流（reflow）？【不定项】

A、color B、width C、display D、font-size

7、如果一个HTML文档内含有阿拉伯文，则应该？

A、使用GBK编码 B、使用utf-8编码

C、使用iso-8859-2编码 D、将阿拉伯文转为图片并嵌入到文档内

8、基于以下 HTML 结构，判断浏览器会发送多少个图片请求？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70]  
9、根据 HTML 规范，以下代码中，外层容器 .outer 的宽高分别是：

10、以下代码执行时不会在控制台输出错误信息的是：

A、

let a = decodeURIComponent('%');

B、

var a;
    a();
    function a() {
    	console.log(a);
    }

C、

Promise.reject(123).finally(a => {
    	console.log(a);
    });

D、

var a = 1;
    let a = 2;
    console.log(a);

11、要运用css3动画，你需要运用什么规则？

12、若需给子scope发送消息，需使用哪个方法

A、`$emit()` B、`$broadcast()`C、`$on()` D、`$send()`

13、div元素的哪些CSS属性的默认值为0？

A、border-top-width B、outline-width

C、padding-top D、margin-top

14、以下说法中正确的是

A、canvas 中绘制的元素不可以通过浏览器提供的接口获取到。

B、SVG 中绘制的元素不可以通过浏览器提供的接口获取到。

C、html 中 A标签 target 属性的默认取值是 \_self，默认在当前窗口打开。

D、为了优化网页的SEO效果，常用 javascript 动态生成网页的title、description、keyword。

15、当用户打开一个网页时，想一直停留在当前打开的页面，禁止页面前进和后退，以下正确的是（ ）

A、window.history.forward(1);

B、window.history.back(1);

C、window.history.go(-1);

D、window.history.forward(-1);

16、css中clear的作用是什么？

A、清除该元素所有样式

B、清除该元素父元素的所有样式

C、指明该元素周围不可出现浮动元素

D、指明该元素的父元素周围不可出现浮动元素

17、在 HTML 音频/视频 DOM 中，\_\_\_\_\_设置是否在页面加载后载入视频 ？

18、下面这段代码：

console.log(1);
    let a = setTimeout(() => {console.log(2)}, 0);
    console.log(3);
    Promise.resolve(4).then(b => {
    console.log(b);
    clearTimeout(a);
    });
    console.log(5);

控制台的输出结果是：

19、给定下面的 HTML 代码：

怎么能够取得 ”wrapper” 中全部项的集合？

A、$(‘\#wrapper’).children();

B、$(‘\#wrapper’).html();

C、$(‘\#wrapper’).contents();

D、$(‘\#wrapper’).find(“all”);

### 二、解答 ###

#### 1、A ####

”let块级作用域，所以不会去访问外部的x“是错误的，这题的本质是暂时死区的问题

如图，我单单是去掉了在function中let的定义![img][]

这里边的console.log的结果是1，证明了是可以访问function之前定义的变量的，

而之所以会产生reference error是因为**暂时死区的问题(temperal dead zone)**，我为此查了下红宝书，

![在这里插入图片描述][2021062516451984.png]

就是说虽然let语句不像var语句会产生hoisting（变量提升），JavaScript引擎也会意识到在后边的let定义，只是不支持在let声明语句之前引用该变量而已。所以，只要在同一个block中，let是在后边定义的，就不能在之前引用该变量。与此同时，也不能再去取嵌套外层的值了（x=1）

#### 2、Hello world ####

对于正则表达式 /(l)\\1/g，其中(l)是第一个分组，\\1指向第一个分组，即\\1重复了第一个分组的内容，所以该正则表达式可以表示成/(ll)/g

而对于第二个参数$1，表示用第一个分组的内容 l 对匹配到的部分进行替换(即 ll 替换成 l )，同时正则表达式有g表示全局匹配，所以4个ll被替换成2个ll。

#### 3、A ####

A、

1 == true // 布尔值会转成number true即为1 所以结果是true

2 == true // 布尔值会转成number true即为1 所以结果是false

3 == true // 布尔值会转成number true即为1 所以结果是false

1 == false // 布尔值会转成number false即为0 所以结果是false

0 == false // 布尔值会转成number false即为0 所以结果是true

B、数字字符串2会转换成数字2在和数字2进行比较 。  
== js会优先选择将字符串转成数字==

C、Javascript规范中提到， 要比较相等性之前，不能将null和undefined转换成其他任何值，并且规定null和undefined是相等的。

null和undefined都代表着无效的值。

D、

isNaN() 函数用于检查其参数是否是非数字值。

如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。

#### 4、ABCD ####

1.  导入样式：在 .css文件中使用@import url("…")来引入另一个css样式表
2.  外部样式：在html页面中的head中使用 link 标签引入，如`<link rel="stylesheet" type="text/css" href="a.css" />`
3.  内部样式(嵌入式)：在HTML页面中的 style 标签中使用样式 , `<style type="text/css">...</style>`
4.  内联样式：与html标签的内部使用style属性设置的样式，直接与当前html标签相关联，如`<div style=" width:100px; "></div>`

#### 5、ABCD ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 2]

#### 6、BCD ####

在讨论回流与重绘之前，我们要知道：

1.  浏览器使用流式布局模型 (Flow Based Layout)。
2.  浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。
3.  有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。
4.  由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一。

**一句话：回流必将引起重绘，重绘不一定会引起回流。**

**回流 (Reflow)**

当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。

会导致回流的操作：

1.  **调整窗口大小，浏览器窗口尺寸改变——resize事件发生时**
2.  **元素尺寸改变——边距、填充、边框、宽度和高度；改变字体大小**
3.  **页面渲染初始化**
4.  **元素位置改变**
5.  **样式表变动**
6.  **元素内容变化，尤其是输入控件**
7.  **CSS伪类激活**
8.  **DOM操作，添加或者删除可见的DOM元素**
9.  **offsetWidth, width, clientWidth, scrollTop/scrollHeight的计算， 会使浏览器将渐进回流队列Flush，立即执行回流。内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变**

#### 7、B ####

UTF-8（8-bit Unicode Transformation Format，万国码）。用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。 GBK是汉字编码，是双字节码，可表示繁体字和简体字。 ISO8859-2 字符集，也称为 Latin-2，收集了 东欧 字符。 Unicode是国际组织制定的可以容纳世界上所有文字和符号的字符编码方案。目前的Unicode字符分为17组编排，0x0000 至 0x10FFFF，每组称为平面（Plane），而每平面拥有65536个码位，共1114112个。然而目前只用了少数平面。UTF-8、UTF-16、UTF-32都是将数字转换到程序数据的编码方案。

#### 8、3 ####

经过测试的结果是:

1.  只要是img src引用的都会请求；
2.  background: url()所属样式如果挂靠在某个元素上，就一定会请求；单独写了这么一个样式并不请求。

所以这道题目中，只有\#bg不请求。

#### 9、高 50px，宽 100% ####

span是display:inline 设置宽高是不起作用的，宽高是由自身的撑起的，

div是display:block，宽高若有设置就是设置的，没有设置，取默认值。高为自身撑起的，宽为100%

![在这里插入图片描述][20210625164620295.png]

#### 10、B ####

A 选项主要是 URI 编码，主要是对特殊字符进行转义，具体规则可以查阅[相关资料][Link 1]。

其实可以简单理解成转义，类似于在字符串中输出`\`需要写成`\\`一样，`%`在这里就是一个转义字符。只有转义字符的开头却没有要被转义的东西，肯定是会报错的。

B 选项主要是变量提升，并且函数优先于变量进行提升。其他人已经说得很好了。

C 选项需要 catch 被 reject 的 Promise，才能不抛出错误。这里的错误类似于执行了一个会抛出异常的操作，但却没有捕获。这是一种可以正常运行的写法：

Promise
        .reject(123)
        .catch(err => console.log(err))
        .finally(a => console.log(a));

D 选项因为 let 的 TDZ（“暂时性死区”），在 let 的**块**作用域中无法重复声明，也无法在声明语句之前使用（没有变量提升）。简而言之，在 let 语句出现之前，都是无法使用该变量的。

补充一点。这种情况下是可以正常运行的：

var a = 1;
    {
        let a = 2;  
    }
    console.log(a);

#### 11、@keyframes规则 ####

要运用css3动画，需要运用@keyframes规则和animation属性

#### 12、B ####

[http://www.tuicool.com/articles/qIBNve][http_www.tuicool.com_articles_qIBNve]

Angular 的知识，没有$send.

*  $emit只能向parent controller传递event与data
 *  $broadcast只能向child controller传递event与data
 *  $on用于接收event与data

#### 13、CD ####

border-top-width:默认值medium,定义中等的上边框。  
outline-width:默认值medium,规定中等的轮廓。

#### 14、AC ####

![在这里插入图片描述][20210625164639218.png]  
1.历史：

**canvas是html5提供的新元素。**

而svg存在的历史要比canvas久远，已经有十几年了。svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。

2.功能：

canvas可以看做是一个画布，其绘制出来的图形为**标量图**。可以在canvas中引入jpg或png这类格式的图片。在实际开发中，大型的**网络游戏**都是用canvas画布做出来的，并且canvas的技术现在已经相当的成熟。另外，我们喜欢用canvas来做一些统计用的**图表，如柱状图曲线图或饼状图等。**

而svg，所绘制的图形为**矢量图**，不能引入普通的图片，因为矢量图的不会失真的特点，在项目中我们会用来做一些**动态的小图标**。这个特点也很适合被用来做地图，**百度地图**就是用svg技术做出来的。

3.技术：

canvas里面绘制的图形**不能被引擎抓取**，canvas中我们绘制图形通常是通过**javascript**来实现。

而svg里面的图形可以被**引擎抓取**，支持事件的绑定，svg更多的是通过**标签**来实现。我再来介绍一个svg的js库：TWO.JS。其中包含two.js和three.js前者用于绘制二维图形，后者用于绘制三维图形。TWO.JS可以支持三种格式，svg（默认）、canvas、和WEBGL。当然也可以在普通div中引入。

#### 15、AD ####

选AD。

B. Window History Back

history.back() 方法加载历史列表中前一个 URL。 这等同于在浏览器中点击后退按钮。

C. 跳转到 history 中指定的一个点

你可以用 go() 方法载入到会话历史中的某一特定页面， 通过与当前页面相对位置来标志 (当前页面的相对位置标志为0).

向后移动一个页面 (等同于调用 back()):

window.history.go(-1);

向前移动一个页面, 等同于调用了 forward():

window.history.go(1);

AD.

1.这种方法是用于防止由下一个页面返回的。 简单的说，页面A（A中有这段代码）转向页面B， 这时，B向A转向是被禁止。

<SCRIPT language="JavaScript"> 
    	javascript:window.history.forward(1); 
    </SCRIPT>

2.有时候我们再做网页时不希望某个网页通过浏览器的前进后退按钮来后退或前进，可以通过简单的办法达到该效果

window.history.forward(1),总是会将window.history.list里面你的所有页面走完，直到页面再也不能往前.

对于window.history.list.length=5的时候，无论在哪个页面发起history,forward(1)，都会走到当前页面。

因此是可以很好地阻止页面后退，缺点是带来了很多的额外的http request,因为需要一个页面一个页面后退。

在我们的一个application里面我发现，window.history.forward(1)，会走到某个页面，停止。以至于在那个页面之后的页面，就无法实现组织后退的功能。

#### 16、C ####

clear : none | left | right | both.

对于CSS的清除浮动(clear)，一定要牢记：这个规则只**能影响使用清除的元素本身，不能影响其他元素。**

清除浮动方法，

1，给父级元素添加class=“clearflex”

2，在css中给父级添加属性：overflow：hidden；（我比较喜欢这个）

3，伪元素清除法，

4，建立空的div，命名为clear，在css中添加clear：both；

#### 17、preload ####

**autoplay 属性规定一旦视频就绪马上开始播放。**

**preload 属性规定是否在页面加载后载入视频。**  
**如果设置了 autoplay 属性，则忽略该属性。**

#### 18、1 3 5 4 ####

执行顺序是先执行同步的任务–输出1,3,5  
在执行异步任务：其中异步任务分为宏任务和微任务，微任务优先级高于宏任务。promise.then执行的微任务，输出4，然后clearTimeout(a)清除了定时器，于是不再打印2。

结果输出：1,3,5,4

19、C

$(‘\#wrapper’).children(); //（只沿着 DOM 树向下遍历单一层级）查询直接的子元素。而不管子元素的子元素。children只能拿到元素节点但拿不到文本节点

$(‘\#wrapper’).html(); //返回的是dom结构。而不是集合

$(‘\#wrapper’).contents();

$(‘\#wrapper’).find(“all”); //并没有all这个元素

contents() 方法获得匹配元素集合中每个元素的子节点，包括文本和注释节点。

find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。

html() 方法返回或设置被选元素的内容 (inner HTML)。

children() 方法返回匹配元素集合中每个元素的子元素，添加可选参数可通过选择器进行过滤。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70]: /images/20221005/00f3a934f38240c0973c701125e9f1aa.png
[img]: /images/20221005/cf62a0dbd758482aa0655ad3a9f38193.png
[2021062516451984.png]: /images/20221005/056107b7abc84525abe00527f117d477.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 1]: /images/20221005/3216e34baa02420587d19ce442a82da3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 2]: /images/20221005/20220ee07d134ad5a7abf0c14408a505.png
[20210625164620295.png]: /images/20221005/b0c997b21533413d80f15e82d67fc62d.png
[Link 1]: https://zh.wikipedia.org/wiki/%E7%99%BE%E5%88%86%E5%8F%B7%E7%BC%96%E7%A0%81
[http_www.tuicool.com_articles_qIBNve]: http://www.tuicool.com/articles/qIBNve
[20210625164639218.png]: /images/20221005/4235acaa604f4f76bc0bedee30b05d00.png