前端面试每日一题（总结版）

这里是每日一题的汇总版，首发于 b 站动态，每日一题，在不知不觉中学到前端知识，每天更新。

2020年4月20日(typeof能判断出哪些数据类型？)

typeof能判断出哪些数据类型？
typeof能直接判断出 Number，String，Boolean，undefined，Symbol
typeof(null)返回 object，判断数组和对象返回 object，判断函数返回 function

2020年4月21日 (CSS 中盒模型有几种，有什么不同？)

CSS 中盒模型有几种，有什么不同？
CSS 盒模型分为 W3C 标准盒模型和 IE 模型，W3C 标准盒模型中有元素的宽度 width 还有 border，padding， margin，其中 content 的高度和宽度不包含 padding 和 border。
IE 盒模型中也有这几种属性，但是 content 包含 padding 和 margin。

2020年4月22日 (new 操作符)

使用 new 创建对象时，new 运算符做了哪些事？

创建一个新对象
将构造函数的作用域赋给新对象（this 就指向了这个新对象）
执行构造函数中的代码（初始化对象）
返回新对象

2020年4月23日(值类型和引用类型的区别)

值类型和引用类型的区别？

值类型是不可变的数据类型，例如 let a = 10; 在内存中的执行过程是先创建一块内存空间存储 10，然后再令 a 指向这块内存空间。如果这时候令 a=20; 会在内存中再开辟一段内存空间里面存放 20，然后将 a 指向这段内存空间，之前的那个内存空间会被销毁。所以值类型是不可变的，要想改变必须将之前的销毁然后创建新的内存空间。

引用类型是可变的数据类型，例如 obj = { x: 1} 在内存中 obj 中存放的是 { x: 1 } 这个对象的地址，这个对象是在堆中存储的，通过 obj.x=3 改变对象的属性，这个时候并不会将之前的对象销毁，因此引用类型是可变的数据类型。

2020 年4月24日(<!DOCTYPE>的作用)

注意 <!DOCTYPE> 并不是 HTML 标签。

总结来说有这两个作用：

1）声明文档的类型，

2）告诉浏览器应该以什么样的标准解析这个文档

浏览器有两个模式，怪异模式和标准模式，声明 <!DOCTYPE html> 作用就是告诉浏览器你即将要处理的是 HTML 文档，并且在渲染文档时要按照标准模式的方式。

MDN 解释

在HTML中，文档类型声明是必要的。所有的文档的头部，你都将会看到”<!DOCTYPE html>” 的身影。这个声明的目的是防止浏览器在渲染文档时，切换到我们称为“怪异模式(兼容模式)”的渲染模式。“<!DOCTYPE html>” 确保浏览器按照最佳的相关规范进行渲染，而不是使用一个不符合规范的渲染模式。

2020年4月25日（语义化标签的理解）

语义化标签的理解

按照字面意思理解就是有语义的标签，要做到用最合适的标签做最合适的事，例如要做一个导航栏，要用 Nav 而不是 div。

使用语义化标签有很多好处：

开发者看到文档后能够做到见名知义，有利于团队维护和开发。

能让页面呈现清晰的结构，机器更容易理解，有利于爬虫和搜索引擎的抓取（SEO的优化）

CSS 选择器优先级

！importtant 优先级最高 > 内联样式 > ID 选择器 > 类，属性，伪类 > 元素，伪元素

注意点：不会进位，一万个类选择器也抵不上一个id选择器，相同权重，后写的生效。

2020年4月26日（new 运算符的底层代码实现）

new 运算符的底层代码实现

// func 为传入的构造函数
const new2 = fucntion (func) {
  const o = Object.create(func.prototype);
  const k = func.call(o);
	return k === 'object' ? k : o;
}

上面这种写法没有考虑带参数的情况。

2020年4月27日（CSS 对于选择器的解析顺序）

今天的每日一题和大家分享一下 CSS 对于选择器的解析顺序。

以一段代码为例：

body div .hello {
  color: #ccc;
}

按照我们正常的思维是浏览器会选取寻找 body，然后再去找 body 下的 div，然后再去找 div 下的 .hello 类。但是浏览器与这个过程正好相反，它会先去找到 .hello 这个类，然后再去验证它有一个父元素是 div，然后 div 再验证它是否有一个父元素是 body。

之所以按照这样的流程是出于性能的考虑，如果是第一种方式，找 body 下的 div 时有可能有特别多的 div，然后再在这些 div 中寻找 .hello 类时是非常耗时的。

2020 年4月28日（CSS 中清除浮动常用的两种方法）

今天和大家分享一下 CSS 中清除浮动常用的两种方法，学累了就来看看吧。

CSS 清除浮动

父元素触发 BFC（例如可以采用 overflow：hidden 使父元素触发 BFC）
利用伪元素，给父元素的最后面添加一个伪元素，令伪元素 clear: both，这样就会使得左右两边都没有浮动元素，又因为它是父元素的最下面的一个元素，所以它只能在父元素的最下面并且左右都没有浮动元素，这样浮动元素就在它的上面，父元素就不会发生告诉塌陷了。

代码示例：
```
父元素::after {
  content: '';
  clear: both; /* 使左右两边没有浮动元素 */
  display: block;
  visibility: hidden;
  height: 0;
}
```

2020年4月29日（JS 任务队列）

今天和大家来一起学习一下 JavaScript 事件循环机制中的任务队列。

任务队列分为两种，一种是micro task，另一种是 macro-task。

macro-task大概包括：script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。

micro-task大概包括: process.nextTick, Promise, Object.observe(已废弃), MutationObserver(html5新特性)

优先级： micro-task > macro-task；

推荐给大家一个视频，生动形象。两分钟了解 JavaScript EventLoop https://www.bilibili.com/video/BV1kf4y1U7Ln

2020年4月30日（GET 和 POST 的区别）

今天和大家一起来学习一下面试中经常问的 GET 和 POST 的区别，主要有以下几点。

1）GET 在浏览器回退时是不会再次发送 GET 请求的，POST 会再次发送请求

2）GET 请求会被浏览器主动缓存，而 POST 不会，除非手动设置（在地址栏中输入url的方式只能发送 GET 请求）

3）GET 请求的参数会被完整保留在浏览器历史记录里，而 POST 请求中的参数不会被保留

4）GET 请求在 URL 中传送的参数是有长度限制的，而 POST 没有限制

5）GET 参数通过 URL 传递，POST 数据放在 Request body 中

6）GET 比 POST 安全性低，因为参数直接暴露在 URL 上，所以不能用来传递敏感信息

2020 年5月1日（HTTP 中常用的一些状态码）

今天和大家一起来学习一下 HTTP 中常用的一些状态码。

200 OK 请求成功

206 Partial Content 客户端发送了一个带有 Range 头的 GET 请求，服务端成功响应了该请求。在客户端请求一个视频文件的时候，服务端一般都会返回一个 206，表示将部分资源返回给客户端。

301 Moved Permanently 所请求的资源已被永久地移到别的地方。服务端需要在响应的首部添加一个 Location 属性来表示资源已经被移动到哪个 url 。（Location属性是可选的，但是推荐有）

302 Found 所请求的资源被临时移动到别的地方。服务端需要在响应的首部添加 Location 属性来临时定位那个资源。将来还是应该用老的 url 进行访问。（Location属性是可选的，但是推荐有）

304 Not Modified 请求的资源在本地有并且和服务端上的资源一致并没有被修改。

400 Bad Request 告知客户端发送了一个错误的请求，服务端不能理解

401 Unauthorized 请求未经授权，这个状态码必须和 WWW.Authenticate 报头域一起使用 403 Forbidden 请求的资源被禁止访问。

404 Not Found 请求的资源不存在

500 Internal Server Error 服务器发生不可预期的错误原来的缓冲文档还可以继续使用

503 Server Unavailable 服务器现在无法为请求提供服务，将来可能可以。如果服务器知道将来什么时候可以提供服务，可以在响应的首部添加一个 Retry-After 属性告诉客户端什么时候可以再次提供服务。

2020年5月2日（call，apply，bind 之间的区别）

今天和大家聊一下 call，apply，bind 之间的区别？

先来看一下相同点：

它们三个都是改变函数运行时内部 this 的指向，第一个参数指定的对象就是函数运行时 this 指向的对象。

再来看一下不同点：

call 的第二个参数是参数列表的形式，调用 call 的函数会立即执行。

fn1.call(obj, 1, 2, 3)

apply 的第二个参数是一个数组，调用 apply 的函数也会立即执行。

fn1.apply(obj, [1, 2, 3])

bind 的第二个参数是参数列表的形式，调用 bind 的函数会返回一个函数，而不是立即执行。

fn1 = fn1.bind(obj, 1, 2, 3)   // 将 fn1 内部的 this 指向 obj，并且返回绑定后的函数
fn1()

2020年5月3日（比较两个对象的内容是否相等）

由于自己做的一个键盘导航组件中需要用到比较两个对象的内容是否相等，因此根据深拷贝的思想写了一个函数分享给大家，大家可以顺便复习一下深拷贝。（b 站不支持 MarkDown太不方便了，直接粘贴成图片了，代码可以在直播页面上的 GIthub 仓库中获取）

判断两个对象的内容是否相等

2020年5月4日（字节笔试分享）

今天做了字节的笔试，客观题只有五道选择题，一个问答题，还有三道编程题。选择题考查的外边距重叠，事件循环机制（场景题让你写输出），object.keys 的返回值（只是一个选项）,window.postMessage() 跨域，JSONP 跨域只能发送 GET 请求等。

问答题是给你一段代码，让你找出其中的错误，并修正，然后针对这个问题让你写出尽可能多的方案。刚开始没有 Get 到考察的点，后来意识到考察的是 this 并不会遵循作用域链的规则，因此需要 const that = this，然后在子函数中利用 that 才能访问到父函数中的 this。

关于尽可能多的方案，题目中使用两个 class 来实现的，我使用借用构造函数，借助原型链，组合模式这几种都实现了一下。

关于编程题，难度 LeetCode 中等难度上下，平时一定要多刷点题，还有在在线下多练习一下各种形式的输入读取和各种形式的输出，到时候可以把精力都放在算法上。

本文链接：https://www.cnblogs.com/zhangguicheng/p/12825216.html

前端面试每日一题（总结版）