js部分

1.数据类型有哪些？

有8种类型，分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt；

其中Symbol、BigInt为ES6中新增的数据类型。

Symbol代表一个独一无二且不可变的数据类型，主要解决可能出现的全局变量冲突的问题。

BigInt是一种数字类型的数据，可以安全的存储和操作最大整数。

2.数据类型检测方法有哪些？

有四种，分别是typeof，instanceof，constructor和Object.prototype.toString.call()

其中typeof检测数组、对象、null都会被判断为object。

instaceof只能判断引用数据类型。

3.判断数组的方式有

有5种，分别是instanceof，

Object.prototype.toString.call()，

Array.prototype.isPrototypeOf

通过原型链做判断，

通过ES6中的Array.isArray()判断

4.null和undefined区别

null表示一个空对象，主要赋值给可能会返回对象的变量，作为初始化。

undefined表示为定义，一般变量声明了但是没有定义会返回undefined

5.typeof null的结果是什么？

Object，因为他和Object的类型标签都是000。

6.为什么0.1+0.2 ! == 0.3，如何让其相等

因为数据是利用2进制存储的，这两个数都是无限循环的数字需要进行舍入，所以转为10进制会有误差。判断0.1+0.2-0.3< Number.EPSILON即可。

7.isNaN 和 Number.isNaN 函数的区别？

Number.isNaN会先判断参数是否为数字，如果是数字再继续判断是不是NAN，不会进行类型转换，相对于isNaN来说更准确。

8.什么是JavaScript中的包装类型

在调用基本类型的属性或方法时，Js会在后台进行隐式转换，可以用Object（）来观察，也可以用valueOf倒转回去。

9.如何进行隐式转换？

用ToPrimitive方法。

10.new操作符的实现原理？

1.创建一个新的空对象。

2.设置原型为函数的原型。

3.让这个函数的this指向这个对象。

4.函数返回的是值就返回创建的对象，返回的是引用类型，就返回这个引用类型的对象。

11.让js脚本延迟加载的方法？

给js添加defer属性（在文档解析完执行脚本）

async属性进行异步加载，

定时器，活着把js放最下面

12.什么事类数组？常见的类数组有哪些？怎么转变为数组？

类数组就是有length属性和若干索引属性的对象。常见的有arguments和DOM方法的返回结果。最常用的转变为数组的方法是Array.from()

13.数组的原生方法有哪些？

增：push unshift splice concat

删：pop shift splice slice

改：splice

查：indexOf includes find

排序：reverse sort

转换：join

迭代方法：some every forEach filter map

补：字符串有哪些常用的方法？

增：+或着模板语法或者concat
删：slice，substr，substring
改：trim（删除空格） repeat（复制） padStart toUpdateCase
查：indexof includes charAt（返回指定索引位置的值）

14.如何遍历类数组？

可以先转成数组，或者用展开运算符，或者用call和apply方法。

15.forin forof的区别？

forin主要为了遍历对象，但是会遍历到整个原型链，性能比较差，forof是Es6新增的方法，可以不会遍历到原型链，也适合遍历数组字符串等等。

16.谈谈对于原型原型链的理解？

使用构造函数实例对象时，构造函数内部有一个prototype属性，这个对象的指针指向prototype属性，这个指针就成为对象的原型。

当访问一个对象的属性时，如果内部不存在这个属性，就会在他的原型对象里找这个属性，如果还是没有，就再原型对象的原型上找，一直找，这就是原型链。

17.对于闭包的理解？有啥用？

一个函数引用了一个函数，那么内部的函数就称为闭包，他可以访问到外部函数的变量。

可以延长变量的生命周期。

18.对于作用域和作用域链的理解。

作用域有三种，全局作用域，函数作用域，块级作用域。

当在当前作用域找不到所需变量时，就会去父级中寻找，找不到就再往上找，直到window对象，这就是作用域链

19.对于this的理解。

函数调用this指向全局对象

作为方法调用this指向这个对象

new一个构造函数，this指向实力出来的对象。

this可以用call apply指定this指向

20.call和apply的区别

传入参数形式不一样，apply传入数组，call传入多个参数。

21.对于Promise的理解，对于async的理解

Promise是一种对于异步编程的心方法，解决了地狱回调的问题。

async是Promise的一种语法糖，Promise虽然解决了地狱回调问题，但是他还是一直在调用then方法，代码看起来还是一个链式调用，使用async会让代码看起来更像是同步代码。

22.Promise内置的方法有哪些？

Promise.resolve直接进入成功状态调用.then,同理Promise.reject直接进入失败状态。

Promise.all可以完成并行任务，接收的promise对象都是成功all就是成功，有一个失败all就是失败。

Promise.race和all类似，但是他执行完第一个resolved就返回了。

Promise.finally是不管什么状态都会执行。

23.对象继承的方法有哪些？

1.原型链继承：会造成修改混乱

2.利用构造函数继承：只能继承父类的属性，不能使用父类原型上的属性和方法

3.以上两种组合继承：但是我们是把父类的实例作为子类的原型，这样会造成子类中多了不必要的属性。

4.原型继承：利用Object.create来进行浅拷贝，但是也可能造成修改混乱

5.寄生事继承：

6.寄生组合类继承：使用父类原型的副本作为子类的原型，避免创建不必要的属性。

24.什么是深浅拷贝？如何实现深拷贝？

浅拷贝是拷贝的内存地址
深拷贝会开辟一个新栈，不会改变另一个对象的属性。

可以用lodash中的 _.cloneDeep()
可以用jquery中的 jQuery.extend()

25.什么是事件循环？

事件循环就是实现单线程非阻塞的方法。在js中，所有的任务分为同步任务和异步任务，异步任务又分成宏任务和微任务。在执行任务时，首先在主线程中执行同步任务，异步任务进到队列。待主线程中的任务执行完毕，再将异步任务从队列中拉到主线程中执行。

26.什么是递归？

递归就是函数定义中使用函数自身的方法。

尾递归只需要保存一个调用栈

27.什么是函数缓存

就是把函数运算结构进行缓存，可以用闭包或者柯里化实现函数缓存。

28.怎么理解防抖和节流

防抖：n秒后执行，如果n秒内重复执行则重新计时节流：n秒内只能运行一次，重复执行只生效一次

vue部分

1.vue的理解？

vue是一个MVVM框架，利用Object.defineProperty实现了响应式，并且使用了组件化编程，使代码逻辑更加清晰简单。

2.双向数据绑定的原理

在Observe种对data执行响应化的处理

在Compile中找到动态绑定的数据，从data中获取并初始化视图

定义一个更新函数和Watcher，当有数据变化时，Watcher会调用更新函数，

由于动态绑定的数据可能会出现多次，所以它所有的Watcher都需要一个Dep来管理。

3.对SPA的理解

SPA是单页面应用，是使用vue-router来实现的。

4.vue-router有那两种模式，有什么区别？

1.hash模式：现在是基本是SPA的标配，hash值会出现在URL中，URL有#，不会出现在http请求中，对后端没有影响。

2.history模式：URL没有#，输入URL需要后台配置支持。

5. 路由如何传参？

可以用query和params方式来传递参数，params模式需要进行占位，通过$router来获取

6.路由守卫

全局有三个路由钩子：router.beforeEach，router.afterEach和router.beforeResolve

路由独享守卫：beforeEnter

组件内部钩子：beforeRouteUpdate、beforeRouteEnter、beforeRouteLeave

7.对vuex的理解

vuex实际上就是一个vue提供的仓库，有三个模块，actions，mutations，state。利用dispatch将方法和参数提交给actions，一般想后台请求数据就在这个模块中完成。利用commit提交给mutations，mutations是修改state的唯一推荐方法。而state就是存储数据的库。getters就相当于计算属性

7.v-show和v-if的区别

v-show的显示隐藏是给该元素添加css属性，元素还在，但是v-if是直接讲dom元素添加或删除。

v-if切换有一个局部的编译/卸载，切换时会适当销毁和重建内部的监听和子组件。

v-if时false时不会操作，知道时true才开始操作，一般用于不会变化的值时，v-show一般用于频繁发生改变的操作。

8.v-for和v-if为啥不建议一起用？

因为v-for的优先级比v-if高，所以会先循环再判断，造成性能浪费，可以在外层嵌套template进行v-if判断。如果判断在内部，那么用计算属性先过滤再循环

9.对于生命周期的理解

共分为8个阶段，创建前后，挂载前后，更新前后，销毁前后。

created用于获取异步数据，

mounted获取数据和dom

10.NextTick是什么？

当数据更新了，在dom中渲染后，自动执行该函数，一般在created中操作dom要用到这个函数

11.data为什么是个函数不是对象？

因为vue会存在多个组件，每个组件中都有data，在A组件修改data的时候，实际上也会更改其他组件中的data造成数据污染。

12.对于mixin的理解

如果当不同组件需要相同代码的时候，可以用mixin给这些代码提出来

13.什么是虚拟DOM

它是对于真实DOM的抽象，在节点发生改变时，经过diff算法得到需要修改的值，再更新视图，减少dom操作，提高性能

14.组件间的通信方式有几种？

通过props传递
通过ref
通过$emit触发自定义事件
EvenBus全局事件
Vuex

15.给对象添加新属性，界面不会刷新，为什么？怎么搞？

新增加的属性并没有通过Object.definepropty设置成响应式数据。

使用Vue.set方法

16.了解Vue.observable吗？

Vue.observable是给对象添加响应式。返回的对象可以直接用在函数或者计算属性中。

一般在非父子通信时可以用到。

17.key有啥用？

key给每一个vnode一个唯一的id，是diff的一种优化策略，可以根据key更快更准确的找到节点。可以更高效的刷新dom。

18.怎么缓存组件？

使用keep-alive，一般用于缓存路由组件

缓存后如何获取数据？beforeRouteEnter或者自身的actived

19.vue中有哪些常见的修饰符

表单修饰符 trim lazy number
事件修饰符 once prevent stop
鼠标修饰符
键盘修饰符

20.封装过axios？封装哪些内容？

封装baceURL，timeout，请求拦截器和响应拦截器

HTTP协议

1.HTTP1.0 1.1 2.0的区别

1.0：每次与服务器交互都会新开一个连接

1.1：建立一次连接可以进行多次请求，将这些请求按次序执行

2.0：一次连接，多路复用，无序通畅

2.状态码

1 表示消息
2 表示成功
3 表示重定向
4 表示请求错误
5 表示服务器错误

3.GET和POST的区别

GET请求是获取数据，POST请求是向指定资源提交，比如注册用户
GET请求将参数放在URL中，相比于POST不安全。
get请求URL地址有长度限制，根据浏览器的不同，限制字节长度不同

4.HTTP常见的请求头有哪些？什么作用？

Accept:浏览器能够处理的内容类型
Cookie：当前页面设置的任何Cookie
Host：发出请求的页面所在的域
Referer：发出请求的页面的URL
User-Agent：浏览器的用户代理字符串

5.输入URL敲下回车后？

URL解析
DNS 查询
TCP 连接
HTTP 请求
响应请求
页面渲染

6. http和https的却别

HTTP 的URL 以http:// 开头，而HTTPS 的URL 以https:// 开头
HTTP 是明文传输，HTTPS 通过 SSL\TLS 进行了加密
HTTP 的端口号是 80，HTTPS 是 443
HTTPS 需要到 CA 申请证书，一般免费证书很少，需要交费
HTTP 的连接很简单，是无状态的；
HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。

7.cookie 和localStorage和sessionStorage的区别

cookie可以设置失效时间，如果不设置的话即使关闭浏览器默认失效
local是永久保存的，除非手动清除。
session是仅在当前页面下有效
cookie仅能存放4kb数据，而另外两个可以存放5MB
cookie会携带HTTP头，如果存放过多数据会造成性能问题，而另外两个是在浏览器中保存，不参与服务器的通信

CSS部分

1.标准盒子与怪异盒子的理解？

标准盒子的width和length不带边框和边距；可以用box-sizing: border-box来转成怪异盒子模型。

2.有哪些选择器？

id选择器，类选择器，标签选择器，后代选择器，子代选择器。还有一些伪类选择器和伪选择器

3.px、em、rem、vh与vw

px是绝对单位，按照精确的像素展示

em是相对单位，基于自身字体大小

rem也是相对单位，基于html的字体大小

vh和vw主要用于页面视口大小的布局。

4.使元素水平居中的方法

利用定位 + margin:auto
先移动50%，再margin负值。
先移动50%，再用transform移动-50%
flex布局

5.如何实现两栏一栏自适应，三栏一栏自适应

利用flex弹性布局，自适应部分flex：1

6.如何理解回流和重绘

回流：布局或属性需要改变。重绘：布局不发生改变的情况下，改变样式。

在CSS中可以使用visibility代替display:none
尽量避免使用table布局
避免多层内嵌样式
动画应用到定位的元素上。
在js中可以避免频繁操作样式，频繁访问DOM，可以用变量缓存起来

前端面试题答法个人总结