面试题

Posted 2021-05-07 smile-xin

一，JS有哪些基本的数据类型？基本数据类型和引用数据类型有什么区别？

基本数据类型：number、Boolean、null、string、undefined、symbol（ES6）

引用数据类型(对象数据类型)：Object、Array、Function

区别：

1、声明变量时内存的分配不同

基本数据类型存放在栈中；

引用数据类型存放在堆中；

2、访问方式不同

基本数据类型直接访问；

引用数据类型要先得到的是这个对象在堆内存中的地址，然后再按照这个地址去获得这个对象中的值，这就是传说中的按引用访问。

3.复制变量时不同

基本数据类型复制变量时，新生变量宛若新个体，不影响原来的变量

引用数据类型复制变量后，一旦新变量发生变化，旧变量也随之变化

4.参数传递的不同

基本数据类型：只是把变量里的值传递给参数，之后参数和这个变量互不影响。

引用数据类型：对象变量它里面的值是这个对象在堆内存中的内存地址，这一点你要时刻铭记在心！因此它传递的值也就是这个内存地址，这也就是为什么函数内部对这个参数的修改会体现在外部的原因了，因为它们都指向同一个对象。

详解请看：https://www.cnblogs.com/cxying93/p/6106469.html

二、介绍箭头函数和普通函数的区别？

1.箭头函数相当于匿名函数，是不能作为构造函数的，不能够使用new

2.箭头函数不绑定arguments,取而代之用rest参数...解决

3.箭头函数会捕获其所在上下文的this值，作为自己的this值。即箭头函数的作用域会继承自外围的作用域。

4.箭头函数当方法使用的时候没有定义this的绑定

5.通过call()或者apply()调用一个函数时，只是传入参数而已，对this并没有影响。

6.箭头函数不能当做Generator函数，不能使用yield关键字 

7.箭头函数没有函数原型

8.箭头函数不能换行

三、常见的HTTP请求头有哪些？HTTP状态码404与301分别代表什么？

Accept: 允许哪些媒体类型。
Accept-Charset: 允许哪些字符集。
Accept-Encoding: 允许哪些编码。
Accept-Language: 允许哪些语言。
Cache-Control: 缓存策略，如no-cache，详见官方文档。
Connection: 连接选项，例如是否允许代理。 
Host: 请求的主机。
If-None-Match: 判断请求实体的Etag是否包含在If-None-Match中，如果包含，则返回304，使用缓存，见Etag。
If-Modified-Since: 判断修改时间是否一致，如果一致，则使用缓存，。 、
If-Match: 与If-None-Match相反。
If-Unmodified-Since: 与If-Modified-Since相反。
Referer: 表明这个请求发起的源头。
User-Agent: 这个大家相信应该很熟悉了，就是经常用来做浏览器检测的userAgent。 
Cache-Control: 缓存策略，如max-age:100，详见官方文档。
Connection: 连接选项，例如是否允许代理。
Content-Encoding: 返回内容的编码，如gzip。
Content-Language: 返回内容的语言。
Content-Length: 返回内容的字节长度。
Content-Type: 返回内容的媒体类型，如text/html。
Data: 返回时间。
Etag: entity tag，实体标签，给每个实体生成一个单独的值，用于客户端缓存，与If-None-Match配合使用。
Expires: 设置缓存过期时间，Cache-Control也会相应变化。
Last-Modified: 最近修改时间，用于客户端缓存，与If-Modified-Since配合使用。
Pragma: 似乎和Cache-Control差不多，用于旧的浏览器。
Server: 服务器信息。 
Vary: WEB服务器用该头部的内容告诉 Cache 服务器，在什么条件下才能用本响应所返回的对象响应后续的请求。假如源WEB服务器在接到第一个请求消息时，其响应消息的头部为：Content-Encoding: gzip; Vary: Content-Encoding那么 Cache 服务器会分析后续请求消息的头部，检查其 Accept-Encoding，是否跟先前响应的 Vary 头部值一致，即是否使用相同的内容编码方法，这样就可以防止 Cache 服务器用自己 Cache 里面压缩后的实体响应给不具备解压能力的浏览器。

一些常见的状态码为：

　　200 - 服务器成功返回网页

　　404 - 请求的网页不存在

　　503 - 服务器超时

　　301(永久移动)请求的网页已永久移动到新位置。服务器返回此响应(对 GET 或 HEAD 请求的响应)时，会自动将请求者转到新位置。您应使用此代码告诉 Googlebot 某个网页或网站已永久移动到新位置。

四、清除浮动的几种方式，各自优缺点

　　（1：使用空标签清除浮动clear:both。

　　　　原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

　　　　优点：通俗易懂，容易掌握

　　　　缺点：会添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦

　　　　建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

　　（2：父级div定义overflow:hidden

　　　　原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

　　　　优点：简单，代码少，浏览器支持好

　　　　缺点：不能和position配合使用，因为超出的尺寸的会被隐藏

　　　　建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用

　　（3：父级div定义伪类:after和zoom(用于非IE浏览器)

　　　　原理：IE8以上和非IE浏览器才支持:after，原理和方法1有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

　　　　优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）。

　　　　缺点：代码多，要两句代码结合使用，才能让主流浏览器都支持

　　　　建议：推荐使用，建议定义公共类，以减少CSS代码

五、如何居中不定宽高的div

　　　提供三种方法，供参考

　　　　　　使用Flex

　　　　　　只需要在父盒子设置：display: flex; justify-content: center;align-items: center;

　　　使用 CSS3 transform

　　　　　　父盒子设置:position:relative

　　　　　　Div 设置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;

　　　使用 display:table-cell 方法

　　　　　　父盒子设置:display:table-cell; text-align:center;vertical-align:middle;

　　　　　　Div 设置: display:inline-block;vertical-align:middle;

六、relative与absolute的有什么不同？

1、文档流不同

relative 不脱离文档流，absolute 脱离文档流。

2、分级不同

relative 参考自身静态位置通过 top(上),bottom（下）,left（左）,right（右） 定位，并且可以通过z-index进行层次分级。

absolute通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

3、定位不同

absolute是绝对定位，绝对定位就是相对于父元素的定位，不受父元素内其他子元素的影响；

而relative是相对定位，相对定位是相对于同级元素的定位，也就是上一个同级元素。

七、什么是cookie？cookie能做什么事和有什么意义？

Cookie 是一小段文本信息，伴随着用户请求和页面在 Web 服务器和浏览器之间传递。用户每次访问站点时，Web 应用程序都可以读取 Cookie 包含的信息。

cookie帮助 Web 站点保存有关访问者的信息

八、介绍下对浏览器内核的理解？

主要分成两个部分：渲染引擎(Render Engine)和JS引擎。

 

渲染引擎：负责取得网页的内容(html,xml和图像等)，整理讯息(例如假如css)，以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。

 

JS引擎：解析和执行javascript来实现网页的动态效果。

常见的浏览器内核有哪些？

Trident内核：IE，360，搜过浏览器；

Gecko内核：Netscape6及以上版本，

Presto内核：Opera

Blink内核：Opera；

Webkit内核：Safari，Chrome