前端档案

# 八股文-002

2021中高级前端面试题总结

# 1.HTML中居中的方式

  • text-align:center方式，水平居中块级元素中的行内元素，如inline，inline-block
  • margin:0 auto方式，这种对齐方式要求内部元素是块级元素，并且不能脱离文档流（如设置position:absolute）,否则无效。
  • display:table-cell，配合width，text-align:center,vertical-align:middle让大小不固定元素垂直居中,这个方式将要对其的元素设置成为一个td，float、absolute等属性都会影响它的实现，不响应margin属性;
  • 垂直居中，行内元素的垂直居中把height和line-height的值设置成一样的即可。
  • 使用css3的translate水平垂直居中元素 ，设置top：50%，left：50%，然后使用transform来向左向上偏移半个内元素的宽和高。
  • 使用css3计算的方式居中元素calc，例如：left: calc(50% - 元素固定宽度);
  • 使用弹性盒(display：flex)，display:flex;justify-content:center;align-items:center;

# 2.如何把行内元素转成块级元素， 有多少种方式？

  • 使用display:block
  • 使用float
  • 使用position（absolute和fixed）

# 3.display:none 与 visibility：hidden 的区别

  • 如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。
  • 给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。
  • visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别。
  • visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样。

# 4.什么是伪类 和 伪元素，有哪些，区别是什么？

伪类用于定义元素的特殊状态。例如，它可以用于：

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式
选择器 例子 例子描述
:active a:active 选择活动的链接。
:checked input:checked 选择每个被选中的 <input> 元素。
:disabled input:disabled 选择每个被禁用的 <input> 元素。
:empty p:empty 选择没有子元素的每个 <p> 元素。
:enabled input:enabled 选择每个已启用的 <input> 元素。
:first-child p:first-child 选择作为其父的首个子元素的每个 <p> 元素。
:first-of-type p:first-of-type 选择作为其父的首个 <p> 元素的每个 <p> 元素。
:focus input:focus 选择获得焦点的 <input> 元素。
:hover a:hover 选择鼠标悬停其上的链接。
:in-range input:in-range 选择具有指定范围内的值的 <input> 元素。
:invalid input:invalid 选择所有具有无效值的 <input> 元素。
:lang(language) p:lang(it) 选择每个 lang 属性值以 "it" 开头的 <p> 元素。
:last-child p:last-child 选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-type p:last-of-type 选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:link a:link 选择所有未被访问的链接。
:not(selector) :not(p) 选择每个非 <p> 元素的元素。
:nth-child(n) p:nth-child(2) 选择作为其父的第二个子元素的每个 <p> 元素。
:nth-last-child(n) p:nth-last-child(2) 选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。
:nth-last-of-type(n) p:nth-last-of-type(2) 选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数
:nth-of-type(n) p:nth-of-type(2) 选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:only-of-type p:only-of-type 选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-child p:only-child 选择作为其父的唯一子元素的 <p> 元素。
:optional input:optional 选择不带 "required" 属性的 <input> 元素。
:out-of-range input:out-of-range 选择值在指定范围之外的 <input> 元素。
:read-only input:read-only 选择指定了 "readonly" 属性的 <input> 元素。
:read-write input:read-write 选择不带 "readonly" 属性的 <input> 元素。
:required input:required 选择指定了 "required" 属性的 <input> 元素。
:root root 选择元素的根元素。
:target #news:target 选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid input:valid 选择所有具有有效值的 <input> 元素。
:visited a:visited 选择所有已访问的链接。
选择器 例子 例子描述
::after p::after 在每个 <p> 元素之后插入内容。
::before p::before 在每个 <p> 元素之前插入内容。
::first-letter p::first-letter 选择每个 <p> 元素的首字母。
::first-line p::first-line 选择每个 <p> 元素的首行。
::selection p::selection 选择用户选择的元素部分。

CSS 伪元素用于设置元素指定部分的样式。例如，它可用于：

  • 设置元素的首字母、首行的样式
  • 在元素的内容之前或之后插入内容
选择器 例子 例子描述
:active a:active 选择活动的链接。
:checked input:checked 选择每个被选中的 <input> 元素。
:disabled input:disabled 选择每个被禁用的 <input> 元素。
:empty p:empty 选择没有子元素的每个 <p> 元素。
:enabled input:enabled 选择每个已启用的 <input> 元素。
:first-child p:first-child 选择作为其父的首个子元素的每个 <p> 元素。
:first-of-type p:first-of-type 选择作为其父的首个 <p> 元素的每个 <p> 元素。
:focus input:focus 选择获得焦点的 <input> 元素。
:hover a:hover 选择鼠标悬停其上的链接。
:in-range input:in-range 选择具有指定范围内的值的 <input> 元素。
:invalid input:invalid 选择所有具有无效值的 <inuput> 元素。
:lang(language) p:lang(it) 选择每个 lang 属性值以 "it" 开头的 <p> 元素。
:last-child p:last-child 选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-type p:last-of-type 选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:link a:link 选择所有未被访问的链接。
:not(selector) :not(p) 选择每个非 <p> 元素的元素。
:nth-child(n) p:nth-child(2) 选择作为其父的第二个子元素的每个 <p> 元素。
:nth-last-child(n) p:nth-last-child(2) 选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。
:nth-last-of-type(n) p:nth-last-of-type(2e'f) 选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数
:nth-of-type(n) p:nth-of-type(2) 选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:only-of-type p:only-of-type 选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-child p:only-child 选择作为其父的唯一子元素的 <p> 元素。
:optional input:optional 选择不带 "required" 属性的 <input> 元素。
:out-of-range input:out-of-range 选择值在指定范围之外的 <input> 元素。
:read-only input:read-only 选择指定了 "readonly" 属性的 <input> 元素。
:read-write input:read-write 选择不带 "readonly" 属性的 <input> 元素。
:required input:required 选择指定了 "required" 属性的 <input> 元素。
:root root 选择元素的根元素。
:target #news:target 选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid input:valid 选择所有具有有效值的 <input> 元素。
:visited a:visited 选择所有已访问的链接。

伪类和伪元素的根本区别在于：它们是否创造了新的元素。

伪类：

伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。 获取不存在与DOM树中的信息。比如<a>标签的:link、visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取； 获取不能被常规CSS选择器获取的信息。比如伪类:target，它的作用是匹配文档(页面)的URI中某个标志符的目标元素。

伪元素：

伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：documen接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。 伪元素的由两个冒号::开头，然后是伪元素的名称。 使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::。 一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。 注：不排除未来会加入同时使用多个伪元素的机制。

第一段话是伪元素的清晰定义，也是伪元素与伪类最大的区别。简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。

最后，总结一下伪类与伪元素的特性及其区别：

  1. 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
  2. 伪元素本质上是创建了一个有内容的虚拟容器；
  3. CSS3中伪类和伪元素的语法不同；
  4. 可以同时使用多个伪类，而只能同时使用一个伪元素；

# 5.box-sizing是什么，各个参数含义

box-sizing属性定义了 user agent (opens new window)应该如何计算一个元素的总宽度和总高度。

在 CSS 盒子模型 (opens new window)的默认定义里，你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。

# 属性值

content-box

默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距、边框和外边距都在这个盒子的外部。 比如说，.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。

尺寸计算公式：

width = 内容的宽度

height = 内容的高度

宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。

border-box

width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型 (opens new window)。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。

尺寸计算公式：

width = border + padding + 内容的宽度

height = border + padding + 内容的高度

**注1：**border-box不包含margin。

**注2：**对于新的web站点，你可能希望首先将box-sizing设置为border-box，如下所示： * { box-sizing: border-box; } 这使得处理元素大小的工作变得容易得多，并且通常消除了在布局内容时可能遇到的许多陷阱。然而，在某些情况下，你应谨慎使用这个属性。例如： 你正在编写一个将由其他人使用的共享组件库，如果他们网站的其余部分没有设置此值，他们可能会发现很难使用你的组件库。

# 6.JS中map和filter区别，是否会改变原数组？

map() 会根据提供的函数对指定序列做映射。

第一个参数 function 以参数序列中的每一个元素调用 function 函数，返回包含每次 function 函数返回值的新列表。

filter() 函数用于过滤序列，过滤掉不符合条件的元素，返回由符合条件元素组成的新列表。

该接收两个参数，第一个为函数，第二个为序列，序列的每个元素作为参数传递给函数进行判，然后返回 true 或 false，最后将返回 true 的元素放到新列表中。

map和filter都不会改变原数组。

# 7.JS中，不通过insetAfter()的方式，如何在元素后插入一个新元素？

检查目标元素是不是parent的最后一个子元素，即比较parent元素的lastChild属性值与目标元素是否存在“等于“关系：

if (parent.lastChild == targetElement)

如果是，就用appendChild方法把新元素追加到parent元素上，这样新元素恰好被插入到目标元素之后：

parent.appendChild(newElement)

如果不是， 就把新元素插入到目标元素和目标元素的下一个元素中间。目标元素下一个兄弟元素即目标元素的nextSibling属性。用insertBerfore方法把新元素插入到目标元素的下一个兄弟元素之间。

# 8.判断一个变量是数组有几种方式？

  1. instanceof ，原型判断，写法：变量 instanceof Array
  2. proto，原型判断，写法：变量.proto === Array.prototype
  3. constructor，原型判断，写法：变量.constructor === Array
  4. Object.prototype.toString，通过object类型的副属性class去判断的其中函数的class是Function，结果是[object Function]， 普通的对象是Object，结果是[object Object]，写法：Object.prototype.toString.call(变量) === '[object Array]'
  5. Array.isArray，es6新增的方法，写法：Array.isArray(变量)

# 9.JS中如何区别Object 和 Array？

typeof一般测试基本类型（Undefined、Null、Boolean、Number、String)，对引用类型（数组，对象，函数），数组和对象返回object，函数引用类型返回Function。typeof对于区分数组和对象是没有用的。

1.通过ES6中的Array.isArray来识别

Array.isArray([])  //true
Array.isArray({})  //false

2.通过instanceof来识别

[] instanceof Array   //true
{} instanceof Array   //false

3.通过调用constructor来识别

{}.constructor    //返回object
[].constructor    //返回Array

4.通过Object.prototype.toString.call方法来识别

Object.prototype.toString.call([])   //["object Array"]
Object.prototype.toString.call({})   //["object Object"]

5.通过isPrototypeOf()函数来识别

Array.prototype.isPrototypeOf(arr) //true表示是数组，false不是数组

# 10.事件代理、事件冒泡、事件捕获是什么？

**事件代理：**又称之为事件委托，是JavaScript中常用绑定事件的常用技巧。“事件代理”是把原本需要绑定在子元素的响应事件（click、keydown......）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

事件代理优点：

  1. 可以大量节省内存占用，减少事件注册；
  2. 可以实现当新增子对象时无需再次对其绑定（动态绑定事件）。

一个事件触发后，会在子元素和父元素之间传播（propagation），这种传播分成三个阶段：

  • **捕获阶段：**从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capture phase），捕获阶段不会响应任何事件；
  • **目标阶段：**在目标节点上触发，称为“目标阶段”
  • **冒泡阶段：**从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层。

# 11.axios 原理

axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。axios可以用在浏览器和 node.js 中是因为，它会自动判断当前环境是什么，如果是浏览器，就会基于XMLHttpRequests实现axios。如果是node.js环境，就会基于node内置核心模块http实现axios。

  • XMLHttpRequest 是浏览器内置的一个对象，它为客户端提供了在客户端和服务器之间传输数据的功能。
  • process 对象是node内置的一个全局变量，提供有关信息，控制当前 Node.js 进程。通过判断process是否存在，来判断是否是node环境。

特征：

  1. Make XMLHttpRequests from the browser（从浏览器发起XMLHttpRequests请求）
  2. Make http requests from node.js（从node.js发起http请求）
  3. Supports the Promise API（支持PromiseAPI）
  4. Intercept request and response（拦截请求和响应）
  5. Transform request and response data（转换请求和响应数据）
  6. Cancel requests（取消请求）
  7. Automatic transforms for JSON data（自动转换json数据）
  8. Client side support for protecting against XSRF（客户端支持自动防止XSRF）

# 12.什么是跨域？如何处理？

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。

非同源限制：

  1. 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
  2. 无法接触非同源网页的 DOM
  3. 无法向非同源地址发送 AJAX 请求

解决方法：

1. 设置document.domain解决无法读取非同源网页的 Cookie问题

因为浏览器是通过document.domain属性来检查两个页面是否同源，因此只要通过设置相同的document.domain，两个页面就可以共享Cookie（此方案仅限主域相同，子域不同的跨域应用场景。）

2. 跨文档通信 API：window.postMessage()

调用postMessage方法实现父窗口http://test1.com (opens new window)向子窗口http://test2.com (opens new window)发消息（子窗口同样可以通过该方法发送消息给父窗口），它可用于解决以下方面的问题： 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4.上面三个场景的跨域数据传递

// 父窗口打开一个子窗口
var openWindow = window.open('http://test2.com', 'title');
 
// 父窗口向子窗口发消息(第一个参数代表发送的内容，第二个参数代表接收消息窗口的url)
openWindow.postMessage('Nice to meet you!', 'http://test2.com');

调用message事件，监听对方发送的消息

// 监听 message 消息
window.addEventListener('message', function (e) {
  console.log(e.source); // e.source 发送消息的窗口
  console.log(e.origin); // e.origin 消息发向的网址
  console.log(e.data);   // e.data   发送的消息
},false);

3. JSONP

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。 核心思想：网页通过添加一个 <script> 元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

// 原生实现
// 向服务器发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字
<script src="http://test.com/api/data?callback=dosomething"></script>
 
// 处理服务器返回回调函数的数据
<script type="text/javascript">
    function dosomething(res){
        // 处理获得的数据
        console.log(res.data)
    }
</script>

// JQuery ajax
$.ajax({
    url: 'http://www.test.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",    // 自定义回调函数名
    data: {}
});

// Vue
this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

// React
import JsonP from 'jsonp'
class Axios {
    static jsonp(options){
        return new Promise((resolve,reject)=>{
            JsonP(options.url,{
                param:'callback'
            },function(err,res){
                if(res.status === 'success') {
                    resolve(res)
                } else {
                    reject(err)
                }
            })
        })
    }
}

Axios.jsonp({url:'path'}).then((res)=>{
    console.log(res)
}).catch((err)=>{
    console.log(err)
})

4.CORS

CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。 普通跨域请求：只需服务器端设置Access-Control-Allow-Origin 带cookie跨域请求：前后端都需要进行设置（根据xhr.withCredentials字段判断是否带有cookie）

// 原生ajax
var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
 
// 前端设置是否带cookie
xhr.withCredentials = true;
xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};


// jQuery ajax 
$.ajax({
   url: 'http://www.test.com:8080/login',
   type: 'get',
   data: {},
   xhrFields: {
       withCredentials: true    // 前端设置是否带cookie
   },
   crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie
});


// vue-resource
Vue.http.options.credentials = true


//axios 
axios.defaults.withCredentials = true

# 13.你知道哪些HTTP状态码？

状态码 类别 描述
1xx Informational（信息状态码） 接受请求正在处理
2xx Success（成功状态码） 请求正常处理完毕
3xx Redirection（重定向状态码） 需要附加操作已完成请求
4xx Client Error（客户端错误状态码） 服务器无法处理请求
5xx Server Error（服务器错误状态码） 服务器处理请求出错

常用状态码：

状态码 状态码英文名称 描述
200 OK 请求成功。一般用于GET与POST请求
204 No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档
206 Partial Content 是对资源某一部分的请求，服务器成功处理了部分GET请求，响应报文中包含由Content-Range指定范围的实体内容。
301 Moved Permanently 永久性重定向。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302 Found 临时性重定向。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
303 See Other 查看其它地址。与302类似。使用GET请求查看
304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
307 Temporary Redirect 临时重定向。与302类似。使用GET请求重定向，会按照浏览器标准，不会从POST变成GET。
400 Bad Request 客户端请求报文中存在语法错误，服务器无法理解。浏览器会像200 OK一样对待该状态吗
401 Unauthorized 请求要求用户的身份认证，通过HTTP认证（BASIC认证，DIGEST认证）的认证信息，若之前已进行过一次请求，则表示用户认证失败
402 Payment Required 保留，将来使用
403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求
404 Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面。也可以在服务器拒绝请求且不想说明理由时使用
500 Internal Server Error 服务器内部错误，无法完成请求，也可能是web应用存在bug或某些临时故障
501 Not Implemented 服务器不支持请求的功能，无法完成请求
503 Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中

# 14.简述路由原理

路由分为后端路由和前端路由。

后端路由

又称服务器端路由，当服务器收到客户端发来的HTTP请求，就会根据请求的URL，来找到相应的映射函数，然后执行该函数，将执行结果的返回值发送给客户端。

对于最简单的静态资源服务器，可以认为，所有的URL的映射函数就是一个文件读取操作。而对于动态资源，映射函数可能是一个数据库读取操作，也可能是进行一些数据操作，等等。然后根据读取的数据，在服务器端就使用相应的模块来对页面进行渲染后，再返回渲染完毕的页面。这种方式在早期的前端开发中非常普遍，像京东的页面就是一个后端路由，他请求的是一个页面。

优点：安全性好，SEO好。

缺点：加大服务器的压力，不利于用户体验，代码冗合。

前端路由

URL到函数的映射。路由的映射函数通常是进行一些DOM的显示隐藏操作。当访问不同路径时，就会显示不同的页面组件。

优点：访问不同页面时，仅仅只是变换了路径而已，没有网络延迟，提升了用户体验。

缺点：使用浏览器的前进后退时，会重新发送请求，没有合理的利用缓存，不利于SEO。

前端路由主要有两种实现方案：hash、history API

**hash：**hash实现就是基于location.hash来实现的，早期前端路由都是用hash。location.hash的值就是URL中#后面的内容。

**history API：**更美观的实现URL的变化，由H5提供的history API。最主要的API：history.pushState()、history.replaceState()。这两个API可以在不刷新的情况下，操作浏览器的历史记录。区别：pushState()是会增加新的历史记录，而replaceState()是替换当前的历史记录。都接受三个参数（state，title，URL）。

hash和history的区别

hash history
兼容更好 更正式美观
只修改#后面内容 可以设置同源下任意URL
新值不能与旧值相同，一样的不会触发动作将记录添加到栈中 新旧值可以相同，pushSate该添加的会添加到栈中
对服务器无需改动 刷新时，若服务器没有响应数据或资源，会404。需要对服务器做一些改造，对不同的路由进行相应的设置。
即不会发送请求 会向服务器发送请求，避免404服务器应该做处理。当匹配不到资源时，应返回同一个html页面

# 15.简述mobx原理

核心概念：observable 可观察对象

在 mobx 中，我们需要在一个值或一个对象被改变时，触发相应的动作或响应，这种模式就是典型的观察者模式（或发布订阅模式），那么这里一个值或一个对象就是被观察者，动作或者响应充当观察者。 首先进行对象代理（proxy 或 defineProperty），这样对象就成了observable对象；其次观察者在执行主体逻辑时会访问代理对象属性，这时代理对象主动上报（reportObserved）自己到观察者的观察对象队列（observing）中，同时也会将观察者放入observable对象的观察者队列（observers）中，观察者和被观察者相互存有对方的引用，关系正式确立；最后，当设置代理对象属性时，代理对象触发（reportChanged）观察者执行主体逻辑。

# 16.简述promise原理

Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

基本过程：

  1. 初始化 Promise 状态（pending）
  2. 立即执行 Promise 中传入的 fn 函数，将Promise 内部 resolve、reject 函数作为参数传递给 fn ，按事件机制时机处理
  3. 执行 then(..) 注册回调处理数组（then 方法可被同一个 promise 调用多次）
  4. Promise里的关键是要保证，then方法传入的参数 onFulfilled 和 onRejected，必须在then方法被调用的那一轮事件循环之后的新执行栈中执行。

真正的链式Promise是指在当前promise达到fulfilled状态后，即开始进行下一个promise.

# 17.简述async await原理

async函数就是generator函数的语法糖，将generator函数的*换成async，将yield替换成await。

async函数对generator的改进：

  1. 内置执行器。Generator 函数的执行必须依靠执行器，而 async 函数自带执行器，无需手动执行 next() 方法。
  2. 更好的语义。async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。
  3. 更广的适用性。co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。
  4. 返回值是 Promise。async 函数返回值是 Promise 对象，比 Generator 函数返回的 Iterator 对象方便，可以直接使用 then() 方法进行调用。

Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象，可以依次遍历 Generator 函数内部的每一个状态，但是只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。 通常，我们把执行生成器的代码封装成一个函数，并把这个执行生成器代码的函数称为执行器,co 模块就是一个著名的执行器。

async隐式返回 Promise 作为结果的函数,那么可以简单理解为，await后面的函数执行完毕时，await会产生一个微任务(Promise.then是微任务)。但是我们要注意这个微任务产生的时机，它是执行完await之后，直接跳出async函数，执行其他代码(此处就是协程的运作，A暂停执行，控制权交给B)。其他代码执行完毕后，再回到async函数去执行剩下的代码，然后把await后面的代码注册到微任务队列当中。

一个线程（或函数）执行到一半，可以暂停执行，将执行权交给另一个线程（或函数），等到稍后收回执行权的时候，再恢复执行。这种可以并行执行、交换执行权的线程（或函数），就称为协程。协程遇到yield命令就暂停，等到执行权返回，再从暂停的地方继续往后执行。它的最大优点，就是代码的写法非常像同步操作，如果去除yield命令，简直一模一样。

# 18.什么是虚拟DOM？

虚拟 DOM 的本质就是 JavaScript 对 象，使用 JavaScript 对象来描述 DOM 的结构。应用的各种状态变化首先作用于虚拟 DOM，最终映射 到 DOM。

前端性能优化的一个秘诀就是尽可能少地操作DOM，不仅仅是DOM相对较慢，更因为频繁变动DOM会造成浏览器的回流或者重回，这些都是性能的杀手，因此我们需要这一层抽象，在patch过程中尽可能地一次性将差异更新到DOM中，这样保证了DOM不会出现性能很差的情况。

其次，现代前端框架的一个基本要求就是无须手动操作DOM，一方面是因为手动操作DOM无法保证程序性能，多人协作的项目中如果review不严格，可能会有开发者写出性能较低的代码，另一方面更重要的是省略手动DOM操作可以大大提高开发效率.

其次，现代前端框架的一个基本要求就是无须手动操作DOM,一方面是因为手动操作DOM无法保证程序性能，多人协作的项目中如果review不严格，可能会有开发者写出性能较低的代码，另一方面更重要的是省略手动DOM操作可以大大提高开发效率。

# 19.vue如何实现路由拦截？

1.全局前置守卫

使用router.beforeEach注册一个全局前置守卫：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。

2.组件内的守卫

在路由组件内直接定义以下路由导航守卫：

  • beforeRouteEnter
  • beforeRouteUpdate (2.2 新增)
  • beforeRouteLeave
const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

# 20.React题，class中请求应该放在哪个生命周期？

放在componentDidMount，它是在组件已经完全挂载到网页上才会调用被执行，所以可以保证数据的加载。此外，在这方法中调用setState方法，会触发重新渲染。所以，官方设计这个方法就是用来加载外部数据用的，或处理其他的副作用代码。

不建议放在constructor，constructor是做组件state初绐化工作，并不是做加载数据这工作的，constructor里也不能setState，还有加载的时间太长或者出错，页面就无法加载出来。所以有副作用的代码都会集中在componentDidMount方法里。

不建议放在componentWillMount，如果认为在componentWillMount里发起请求能提早获得结果，这种想法其实是错误的，通常componentWillMount比componentDidMount早不了多少微秒，网络上任何一点延迟，这一点差异都可忽略不计。且componentWillMount已过时。

# 21.React题，函数组件中如何执行异步请求操作？

useEffect(() => {
    const fetchData = async () => {
      const result = await axios('请求地址');
      // 执行其他操作...
    };

    fetchData();
}, []);

重点：不允许在useEffect函数中直接使用async，通过在effect内部使用异步函数来实现。

# 22.React题，useState为什么不能放在条件里？

只在最顶层使用 Hook，不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。

简单来说，React 靠的是 Hook 调用的顺序知道哪个 state 对应哪个useState。Hook 的调用顺序在每次渲染中都是相同的，所以它能够正常工作。

// ------------
// 首次渲染
// ------------
useState('Mary')           // 1. 使用 'Mary' 初始化变量名为 name 的 state
useEffect(persistForm)     // 2. 添加 effect 以保存 form 操作
useState('Poppins')        // 3. 使用 'Poppins' 初始化变量名为 surname 的 state
useEffect(updateTitle)     // 4. 添加 effect 以更新标题

// -------------
// 二次渲染
// -------------
useState('Mary')           // 1. 读取变量名为 name 的 state（参数被忽略）
useEffect(persistForm)     // 2. 替换保存 form 的 effect
useState('Poppins')        // 3. 读取变量名为 surname 的 state（参数被忽略）
useEffect(updateTitle)     // 4. 替换更新标题的 effect

# 22.React题，setState是异步还是同步？

有时表现出异步，有时表现出同步：

  1. setState只在合成事件和钩子函数中是“异步”的，在原生事件和setTimeout 中都是同步的。
  2. setState 的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形成了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。
  3. setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次setState，setState的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时setState多个不同的值，在更新时会对其进行合并批量更新。

23.React题，你对shouldComponentUpdate的理解

根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下，你应该遵循默认行为。

当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true。首次渲染或使用 forceUpdate() 时不会调用该方法。

此方法仅作为**性能优化的方式 (opens new window)而存在。不要企图依靠此方法来“阻止”渲染，因为这可能会产生 bug。你应该考虑使用内置的** PureComponent 组件，而不是手动编写 shouldComponentUpdate()。PureComponent 会对 props 和 state 进行浅层比较，并减少了跳过必要更新的可能性。

如果你一定要手动编写此函数，可以将 this.props 与 nextProps 以及 this.state 与nextState 进行比较，并返回 false 以告知 React 可以跳过更新。请注意，返回 false 并不会阻止子组件在 state 更改时重新渲染。

不建议在 shouldComponentUpdate() 中进行深层比较或使用 JSON.stringify()。这样非常影响效率，且会损害性能。

目前，如果 shouldComponentUpdate() 返回 false，则不会调用 UNSAFE_componentWillUpdate()，render() 和 componentDidUpdate()。后续版本，React 可能会将 shouldComponentUpdate 视为提示而不是严格的指令，并且，当返回 false 时，仍可能导致组件重新渲染。

# 24.React题，component和PureComponent区别？

Component是class组件的根基，类组件一切始于Component ，在React.Component的子类中有个必须定义的 render() 函数。

React.PureComponent 与 React.Component 很相似。两者的区别在于 React.Component 并未实现 shouldComponentUpdate()，而 React.PureComponent 中以浅层对比 prop 和 state 的方式来实现了该函数。

如果赋予 React 组件相同的 props 和 state，render() 函数会渲染相同的内容，那么在某些情况下使用 React.PureComponent 可提高性能。

注意 React.PureComponent 中的 shouldComponentUpdate() 仅作对象的浅层比较。如果对象中包含复杂的数据结构，则有可能因为无法检查深层的差别，产生错误的比对结果。仅在你的 props 和 state 较为简单时，才使用 React.PureComponent，或者在深层数据结构发生变化时调用 forceUpdate() 来确保组件被正确地更新。你也可以考虑使用 immutable 对象 (opens new window)加速嵌套数据的比较。 此外，React.PureComponent 中的 shouldComponentUpdate() 将跳过所有子组件树的 prop 更新。因此，请确保所有子组件也都是“纯”的组件。

# 25.React题，如何用useEffect实现class的生命周期？

1.useEffect实现componentDidMount的效果：

useEffect(() => {
    // TODO
}, []);
// useEffect 的第二个参数为[]时，
// 表示这个effect只会在componentDidMount和componentWillUnMount的时候调用
// componentWillUnMount调用的是第一个参数返回的回调

2.使用useEffect实现componentDidUpdate的效果：

useEffect(() => {
  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  return () => {
    ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
}, [props.friend.id]); // 仅在 props.friend.id 发生变化时，重新订阅

**提示：**与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。大多数情况下，effect 不需要同步地执行。在个别情况下（例如测量布局），有单独的 useLayoutEffect Hook 供你使用，其 API 与 useEffect 相同。

# 26.React题，useMemo与useCallback区别？

useMemo 和 useCallback 接收的参数都是一样,第一个参数为回调 第二个参数为要依赖的数据

**共同作用： **1.仅仅 依赖数据 发生变化, 才会重新计算结果，也就是起到缓存的作用。

**两者区别： **1.useMemo 计算结果是 return 回来的值, 主要用于 缓存计算结果的值 ，应用场景如： 需要 计算的状态 2.useCallback 计算结果是 函数, 主要用于 缓存函数，应用场景如: 需要缓存的函数，因为函数式组件每次任何一个 state 的变化 整个组件 都会被重新刷新，一些函数是没有必要被重新刷新的，此时就应该缓存起来，提高性能，和减少资源浪费。

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

注意： 不要滥用会造成性能浪费，react中减少render就能提高性能，所以这个仅仅只针对缓存能减少重复渲染时使用和缓存计算结果。

# 27.顺时针循环打印二维数组

有一个 n x n 的二维数组，从 [0,0] 元素开始，顺时针循环打印出该数组内容。

  • 输入：const array = [[1,2,3],[4,5,6],[7,8,9]]
  • 输出：print(array) // 1,2,3,6,9,8,7,4,5

(暂时没有找到比较好的写法 ，大佬还请给个思路。)

更新时间: 3/28/2022, 7:14:34 PM

← 北京互联网企业 →