前端面试题总结--持续更新

一、JavaScript 中的数据类型可以分为两种类型：

基本数据类型（值类型）：字符串（String）、数字（Number）、布尔（Boolean）、空（Null）、未定义（Undefined）、Symbol(Symbol 是 ECMAScript6 中引入的一种新的数据类型，表示独一无二的值。)；
引用数据类型：对象（Object）、数组（Array）、函数（Function）。

二、数组的遍历方法和用法

foEach——遍历数组
map——指定条件处理数组元素，返回由处理过后的元素组成的新数组
filter——筛选出满足指定条件的数组元素，返回满足条件的元素组成的新数组
some——判断数组中的元素是否满足指定条件，只要有一个满足就返回true
every——判断数组中的元素是否满足指定条件，只要有一个不满足就返回false
以上具体用法可以在前面新增数组方法那篇文章中找到

三、Localstorage 、sessionStorage. cookie 的区别是什么?

共同点:都是保存在浏览器端的，且同源的（同源是指，域名、协议、端口相同。）。

区别:1.cookie数据始终携带在同源的http请求中，即cookie在浏览器和服务器间来回传递，而sessionStorage和Localstorage不会自动把数据发送给服务器，只在本地保存。cookie数据还有路径(path) 的概念，可以限制cookie只属于某个路径下。
2.存储大小限制也不同，cookie数据不能超过4k, 同时因为每次http请求都会携带cookie, 所有cookie只适合保存很小 的数据。如会话标识。sessionStorage和Localstorage虽然也有大小储存的限制， 但比cookie大很多。 可以达到5M或更大。
3.数据有效期不同，sessionStorage, 仅在当前浏览器窗口闭之前有效，Localstorage始终有效， 窗口或者浏览器关闭也一直保存，除非手动删除，cookie只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭。
4.作用域不同，sessionStorage不能在不同的浏览器中共享，即使是同一个页面，locastorage在所有的同源窗口中都是共享的，cookie也是在所有同源窗口中共享的。
5.web Storage支持事件通知机制，可以将数据更新的通知发送给监听者。
6.web storage的api接口使用更方便。二、H5的浏览器储存有哪些?

1.cookie
cookie自身有一个过期属性，并且在每次的通信过程中会传送向服务端。
2.localStorage. sessionStorage
JocalStorage:永久储存,除非手动删除就-直存在。
sessionStorage:只存在一个页面周期内，页面关闭就清除了。

四、常见的元素隐藏方式

1.使用display,;none;隐藏元素，渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听Q事件。
2.使用isibility:hidden;隐藏元素。 元素在页面中仍占据空间，但是不会响应绑定的监听事件。
3.使用opacity:0;将元素的透明度设置为0,以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
4.通过使用绝对定位Q将元素移除可视区域内，以此来实现元素的隐藏。
5.通过z-index负值， 来使其他元素遮盖住该元素，以此来实现隐藏。
6.通过clip/clip-path元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置,但是不会响应绑定的监听事件。
7.过transform:scale(0,0)来将元素缩放为0,以此来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

五、什么是防抖和节流

防抖和节流都是为了阻止某项操作高频触发
1.防抖是让用户多次触发，只生效最后一次，适用于只需要一次触发生效的场景
防抖应用场景：表单里的按钮，用户点击过快，发送多次请求
2.节流是让用户的操作，每隔一段时间触发一次，适用于多次触发要多次生效的场景
节流应用场景：监听滚动事件

六、怎么理解深拷贝和浅拷贝

深拷贝：拷贝数据，改变旧对象的数据的时候，新对象的数据不会改变
浅拷贝：拷贝引用地址，改变旧对象的数据的时候，新对象的数据也会跟着改变
实现深拷贝的方法: 1. JSON.parse(JSON.stringify()) 2. 递归for-in 3. jQuery $.extend() 4. _.cloneDeep()
实现浅拷贝的方法: 1. 剩余(扩展)运算符 2. concat() 3. Object.assign() 4. slice()

六、get和post的区别

传参的地方不一样
--get方法拼接在URL里面，post在send方法里面
--post方法设置参数格式（设置请求头格式）
get:用来获取数据的，只是用来查询数据，不对服务器的数据做任何的修改，新增，删除等操作,数据暴露在地址栏不安全，适合一些不重要的数据，适合小量数据请求。
post:数据发送到服务器以创建或更新资源，侧重于更新数据，数据在请求体里面，不会直接暴露，比较安全，可以发送比较大的数据

七、this指向的理解

在普通函数中：this指向window
在构造函数中：this指向实例对象
在对象方法中：this指向对象本身
在事件绑定中：this指向事件源
在定时器中：this指向window

八、什么是重绘回流

1. 重绘（repaint）：屏幕的一部分要重绘。渲染树节点发生改变，但不影响该节点在页面当中的空间位置及大小。譬如某个div标签节点的背景颜色、字体颜色等等发生改变，但是该div标签节点的宽、高、内外边距并不发生变化，此时触发浏览器重绘（repaint）。
   2 .回流（reflow）：也有称重排，当渲染树节点发生改变，影响了节点的几何属性（如宽、高、内边距、外边距、或是float、position、display：none;等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。譬如JS为某个p标签节点添加新的样式："display:none;"。导致该p标签被隐藏起来，该p标签之后的所有节点位置都会发生改变。此时浏览器需要重新生成渲染树，重新布局，即回流（reflow）。

• 注意：回流必将引起重绘，而重绘不一定会引起回流。

九、什么时候会引起回流

当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流：
1.添加或者删除可见的DOM元素；
2.元素位置改变——display、float、position、overflow等等；
3.元素尺寸改变——边距、填充、边框、宽度和高度。
4.内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高改变；
5.页面渲染初始化；
6.浏览器窗口尺寸改变——resize事件发生时；

十、Vue中computed与watch的区别

1.功能上: computed是计算属性, watch是 监听-个值的变化，然后执行对应的回调。
2.是否调用缓存: computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。
3.否调用return: computed中的函数必须要用returm返回, watch中的函数不是必须要用return。
4.computed默认第一次加载的时候就开始监听; watch默认第一次加载不做监听， 如果需要第一-次加载做监听， 添加immediate属性, 设置为true (immediate.true)
5.使用场景: compuee---当一个属性受多个属性影响的时候，使用compue----购物车商品结算。 watch- 当一条数据影响多条数据的 时候，使用watch--- -搜索框.

十一、Vue中v-if和v-show的区别

实现原理不同：v-if是直接新增删除DOM节点，v-show是切换标签的display样式。v-show对于频繁切换状态的场景更加节省性能，但是如果为了提升初识渲染的速度应该使用v-if

十一、常用的 声明周期(钩子)函数

beforeCreate	在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了
created	在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来
beforeMount	在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已
mounted	el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件
beforeUpdate	数据更新时调用，发生在虚拟DOM打补丁之前。 页面上数据还是旧的
updated	由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的
beforeDestroy	实例销毁之前调用
destroyed	实例销毁后调用

十二、Vue数组变异方法---触发视图更新

• 在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变

• 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展

• Vue.$set(更改的数据 ，数据的第几项(索引)、更改后的数据)

push()	往数组最后面添加一个元素，成功返回当前数组的长度
pop()	删除数组的最后一个元素，成功返回删除元素的值
shift()	删除数组的第一个元素，成功返回删除元素的值
unshift()	往数组最前面添加一个元素，成功返回当前数组的长度
splice()	有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值
sort()	sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse()	reverse() 将数组倒序，成功返回倒序后的数组

十三、promise的三种状态

pending(待定)	初始状态，既没有被兑现，也没有被拒绝
fulfilled(已兑现)	意味着操作成功完成
rejected(已拒绝)	味着操作失败