前端经典面试题

一.promise理解

使用场景：1.使用promise封装api接口 2、使用promise进行异步操作。

是一个回调函数，用来解决回调地狱的

多个并发请求一共有三种状态：

• (1）pending 进行中 (2）fulfilled 成功状态 (3）rejected 失败状态

• 当我们执行一个异步操作时，Promise会立即返回一个Pending状态的对象，表示操作正在进行中。一旦操作完成，Promise将会转为Fulfilled状态（表示成功）或Rejected状态（表示失败），并返回相应的结果或错误信息。

• Promise是一个构造函数，对外提供统一的 API，自己身上有all、reject、resolve等方法，原型上有then、catch等方法。

二.深浅拷贝是什么，以及常用方法有哪些？

浅拷贝：拷贝的是栈中的地址，修改拷贝后的数据，原始数据也会改变。

深拷贝：拷贝的是堆中的数据，修改拷贝后的数据，对原始数据没有影响。

他们的实现方法 浅拷贝：

• Object.assign()

• 函数库lodash的 _.clone 方法

• es6的展开运算符 …

• Array.prototype.concat()

• Array.prototype.slice()

深拷贝：

• JSON.parse(JSON.stringify())

• 函数库lodash的 _.cloneDeep 方法

• jQuery.extend()方法

• 手写递归方法

三.重绘和回流是什么？

即对页面进行重新绘画。页面中元素发生可见性的变化（如修改颜色、更换背景），这种导致页面重新渲染的现象称为重绘。

回流也能叫做重排,页面中元素发生位置或尺寸的变化，比如增加或删除dom节点、修改元素宽高等，会重新构造dom树再次渲染，这就是回流。

有重绘不一定有回流，有回流就一定有重绘。

四.get与post区别

• GET请求参数是在url中存在的，POST请求的参数是在请求主体中存在的

• POST的安全性比GET好

• GET请求会造成浏览器的一次浏览记录，POST请求不会有浏览记录

• GET请求有长度限制,POST没有长度限制

五.vue路由模式

hash模式是将路由信息放在URL的hash部分（即#后面的部分），因此hash模式下的URL不会发送到服务器，只会在客户端进行匹配。

history模式将路由信息放在了正常的URL中，因此history模式下的URL会发送到服务器，而需要服务器配置来重定向到正确的页面，所以它需要服务器和客户端配合使用。

一般情况下，在开发环境使用hash模式，在生产环境使用history模式。

六.http协议与https协议区别

1. http是超文本传输协议，它是客户端和服务器之间进行通信的基础协议。https则是具有安全性的ssl加密传输协议。

2. http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

3. http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

七.vue中计算属性与监听

相同为：

和data是同一个等级，计算属性和监听都可以监听数据变化

区别为：

1.Computed 计算监视对象,写在了函数内部,凡是函数内部有 this.相关属性改变都会触发当前函数，当数据没有变化时，它会读取缓存。而 watch 每次都需要执行函数。methods 也是每次都需要执行

2.数据变化时执行异步操作，这个时候使用 watch

3.watch 监听单个，computed 监听多个

4.Computed监听的属性不能和data中的属性冲突，但是watch中监听的属性必须在 data 中声明

八.防抖节流

防抖和节流本质是不一样的。

防抖是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段事件执行，

函数防抖一定连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次

节流应用场景:

• 提交按钮、用户注册时候的手机号验证、邮箱验证

• 高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率

防抖应用场景:

• window 对象的 resize、scroll 事件

• 拖拽时候的 mousemove

• 射击游戏中的 mousedown、keydown 事件

• 文字输入、自动完成的 keyup,事件

九.如何进行性能优化

(1) 减少 http 请求次数

(2) 减少 DNS 查找

(3) 避免重定向

(4) 使用 Aiax 缓存

(5) 少用全局变量、减少 DOM 操作的使用

(6) 优化图片大小，通过 CSS Sprites (精灵图) 优化图片,

(7) 将 css 放在顶部，将is 放在底部

(8) 延迟加载和懒加载

十.箭头函数与普通函数的区别

1. 语法更加简洁、清晰

2. 箭头函数中this的指向不同

3. 箭头函数全都是匿名函数

4. 箭头函数不能用于构造函数

5. 箭头函数不具有arguments对象

6. 箭头函数不具有prototype原型对象

十一.闭包

闭包相当于一个嵌套函数，外部可以访问到局部变量

作用就是可以让局部变量的值始终保持在内存中。

优点：把局部变量始终保持在内存中，可以避免使用全局变量。

缺点：闭包访问的局部变量在使用完资源不会立即销毁，会造成内存浪费

十二.call，apply，bind

call、apply、bind都是JavaScript中管理函数作用域的方法。

call()和apply()都可以将函数作为对象的方法来调用，即改变函数的执行环境。不同的是，call()方法接受的是若干个参数列表，而apply()方法接受的是一个包含多个参数的数组。

bind()方法则是在函数的执行环境绑定一个特定的this值，并返回一个新的函数，该新函数的this值被绑定为传递给bind()方法的第一个参数。同时，bind()方法也可以传递若干个参数作为新函数的参数。（注意：bind()方法并不会立即执行原函数，而是返回一个新的绑定了this值的函数）。

因此，call()和apply()适用于需要在执行函数时动态改变函数的执行环境，而bind()适用于需要将函数的this值永久地绑定到一个特定的对象上。

十三.数组方法以及说出常用的实际运用

• push() 向数组尾端插入新元素unshift() 向数组前端插入新元素

• pop() 删除数组中最后一个元素

• shift() 删除数组中第一个元素

• splice() 在某一个下标处插入或删除某一个元素

• concat() 拼接数组

• join() 将数组转换为字符串，参数作为分隔符

• reverse() 颠倒数组

• slice() 通过开始下标和结束下标截取数组

• sort() 通过Unicode进行排序

十四.说一下对vue中keep alive的理解

1. keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

2. keep-alive 组件有一个特殊的属性 called include 和 exclude，用于指定哪些组件需要被缓存（include）或排除不被缓存（exclude）。

3. 使用 keep-alive 包裹动态组件后，当组件被切换到其他地方时，它会被缓存起来，下次再切换回来时，会直接从缓存中取出，并且保持之前的状态。这样可以避免组件的重新创建、初始化和数据请求等操作，提高页面切换的性能和响应速度。

十五.vue中如何使用自定义指令

1）局部指令

new Vue({ directives:{指令名:配置对象} }) 或 new Vue({ directives:{指令名:回调函数} })

2）全局指令

Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

配置对象中常用的3个回调

1、bind指令：指令与元素绑定时使用

2、inserted指令：指令所在元素被插入页面时使用

3、update指令：所在模板结构被重新解析时使用

3）注意

1、指令定义时不加 v- ，但使用时要加 v-

2、指令名如果是多个单词，要使用kebab-case命名方式，例：v-big-house

十六.HTML5新增的语义化标签有哪些

1. <header>：定义文档或区块的页眉。

2. <nav>：定义导航链接的区块。

3. <main>：定义文档的主要内容。

4. <article>：定义可以独立于页面的其他内容进行分发或重用的独立内容块。

5. <section>：定义文档中的节（section、区块）。

6. <aside>：定义页面内容之外的内容（例如侧边栏、广告区域）。

7. <footer>：定义文档或区块的页脚。

8. <figure>：定义独立的媒体内容，通常与<figcaption>一起使用。

9. <figcaption>：定义<figure>元素的标题。

10. <time>：定义日期或时间。

11. <mark>：定义需要突出显示的文本。

12. <progress>：定义任务的进度。

13. <meter>：定义度量衡或某个值的范围。

14. <details>：定义用户可见或隐藏的额外细节或信息。

15. <summary>：定义<details>元素的摘要或标题。

16. <datalist>：定义<input>元素的预定义选项列表。

十七.css中清除浮动的方式

额外标签法(在最后一个浮动标签后，新加一个标签，给其设置clear：both)

优点：通俗易懂，方便

缺点：添加无意义标签，语义化差

父元素添加overflow:hidden，通过触发BFC方式，实现清除浮动

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

使用after伪元素清除浮动

优点：符合闭合浮动思想，结构语义化正确

ie6-7不支持伪元素:after，使用zoom:1触发hasLayout.

使用before和after双伪元素清除浮动

优点：代码更简洁

缺点：用zoom:1触发hasLayout.

十八.this的指向在js中发生的变化

①this默认情况下时指向window

②this在函数中指向，谁调用，指向谁

③this在对象中指向，谁调用对象中的方法，指向的就是当前对象

④this在构造函数中，指向的是实例化实参的变量。

十九.简述Ajax执行流程并说出常见状态码

ajax的执行过程

创建XMLHttpRequest对象

建立连接 open()

发送请求 send()

接受来自服务器端的相应 onreadystatechange事件

HTTP状态码

1##：请求收到，继续处理

2##：操作成功收到，分析、接受

3##：完成此请求必须进一步处理

4##：请求包含一个错误语法或不能完成

5##：服务器执行一个完全有效请求失败

20.vue双向数据绑定原理

vue数据的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其核心就是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持，在数据变化时发布消息给订阅者，触发相应的监听回调。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。