前端面试题（一）

1. forEach、for in、 for of 区别

forEach 用于调用数组的每个元素，并将元素传递给回调函数
for in 遍历数组中的索引，可以用来遍历对象，不会跳过空元素
for of 直接遍历数组中的值

2.什么是原型链

原型链：一个对象在调用方法或者访问属性的时候沿着原型一层一层向上查找的链式结构
实例对象的__proto__指向构造函数的prototype

3.new命令的原理

1，创建一个空对象
2，将这个空对象的原型，指向构造函数的prototype
3，将这个对象赋值给构造函数内部的this关键字
4，开始执行构造函数内部的代码

4.Promise.all 和 Promise.race区别

promise.all执行多个promise,等最后一个promise返回结果之后,才会执行.then,并且将所有promise的结果以数组的形式返回 只要有一个抛出异常,那么promise.all进入catch
promise.race 只要有任意一个promise返回结果,那么就中断执行,进入.then 返回的值是最先执行完毕的promise返回值

5.数组的filter some every 过滤

filter 每次遍历的时候都要返回一个条件
        //当这个条件为true的时候，当前值就会被保留。否则就会被过滤掉，返回一个新数组
some 遍历的时候返回一个条件，当有一个条件为true的时候，终止遍历，返回true
every  只有所有返回条件都为true的时候才会输出true

6.数组去重方法

循环遍历 利用对象属性名不冲突   ES6 set()

7.什么是闭包

闭包就是能够读取其他函数内部变量的函数
优点：可以避免全局变量的污染
缺点：增大内存使用，可能会造成内存泄漏

8.同源策略

域名端口协议一致，不一致就会导致跨域，非同源资源间需要进行访问，则需要实现跨域。

9.跨域方法

CORS 服务端设置请求头，允许任何来源访问

jsonp jsonp原理:动态创建script标签，然后通过script标签的src属性请求后台接口，并且传递回调函数给后台，后台会响应回调结果

10.节流 和 防抖

节流:多次执行一段逻辑的时候,每隔一段时间,执行一次 实现过程：每次执行时，设置一个定时器，在定时器时间内如果有新的定时器，则清除上一个，一直到最后 防抖:多执行,只取最后一次结果 实现过程：执行时，相当于给函数设置一个标志位，在一个定时器执行没有结束前，不执行其他的定时器，直到定时器结束，再接收新的定时器

11.判断一个对象是不是空对象

Object.keys()
遍历
JSON.stringify() == "{}"

12.typeOf(null) = Object

13. 对象怎么去重

创建一个空对象，遍历对象，判断空对象里是否有对象的属性，没有就赋值，有就跳过 Object.keys(obj).forEach(key => {if (un)})

14. 怎么对象中不想要的属性

delete obj.name

15.服务端渲染 SSR的优缺点

服务端渲染：服务端先将html内特殊标记过的区域，进行数据填充，然后再返回给客户端。
优点：服务端渲染不需要先下载一堆 js 和 css 后才能看到页面，有利于seo
缺点：加重服务器负载，开发复杂

16.改变原数组的方法

pop push shift unshift splice()添加或者删除元素 sort()数组排序 reverse()倒序 fill()填充数组 copyWithin() 指定成员复制到其他位置

17.哪些操作会造成内存泄漏

闭包，变量提升

18.JS模块化的几种规范

CommonJS AMD CMD

19.不会改变原数组的方法

join() cancat() ...ES6扩展运算符  indexOf() includes() slice()

20.router route的区别

router是VueRouter的一个对象,这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。
route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

21.事件循环

js是单线程的，在主队列的任务是宏任务，主线程之外有个任务队列存放微任务，当主线程上的任务执行完后，转到任务队列执行微任务，然后在转回主线程，这样循环的过程叫做事件循环

22.事件代理

事件代理就是利用事件冒泡的思想，将子节点的事件冒泡给父节点，由父节点的监听函数统一处理多个子元素的事件

23.keep alive 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

24.vue登录页面流程

1. 获取用户输入的用户名和密码 本地校验 本地校验通过 进行第2步
2. 调用服务器登入接口,传递用户名和用户密码
3. 登入成功 后台返回token 存到本地存储 将页面跳转到主页
4. 后续请求数据 都需要携带token 校验通过返回数据 校验失败返回到登入页

25.v-model的原理

vue的实例结合订阅者模式，通过Object.defineProperty（）进行数据劫持，为数据动态添加getter和setter方法

26.computed 和 watch区别

computed 计算属性，解决模板中放入过多的逻辑会让模板过重且难以维护的问题，可以随着响应式属性的改变而改变，但是计算结果会缓存
 watch  监听数据，实时更新

在模板业务逻辑较重的时候,使用computed,在需要响应参数实时变化的时候使用watch

27.组件间的传值

父子   父组件给子组件绑定一个属性，子组件通过props接收
  子父   子组件定义一个方法。通过$emit()传递方法，在父组件中找到子组件，使用@调用方法
 EventBus 传值  建立一个事件中心用来接收和发送事件，$emit发送  $on调用

28.vue声明周期钩子函数

beforecreate 实例创建之前，得不到$el $data
   created    创建之后，得不到$el
   beforeMount  挂载前，可以得到$el $data，但$el未编译
   mounted     挂载后，都可以得到
   beforeUpdate  更新之前。el中的数据是未更新的
   updated   更新之后，el数据已更新
   beforeDestory 用于卸载定时器
   destoryed

29.vue-router中的hash路由和history路由

hash 通过监听hash值变化来响应页面变化
history 使用popstate事件来监听历史栈记录的变化来响应页面的变化

二者区别

hash路由地址栏有#
hash值没有变化时不触发页面更新
history在地址没有变化时刷新会触发404，原因是history在页面刷新是会把地址	栏内容当做接口向后端请求响应

30.路由钩子

前置钩子 Router.beforeEach 在页面跳转前触发
后置钩子 Router.afterEach  在路由完成跳转后触发
组件内钩子  beforeRouterEnter  路由进入之前，获取不到当前实例this
	        beforeRouterUpdate  路由改变，组件被复用时调用
	        beforeRouterLeave  导航离开该组件时调用

31.路由懒加载

先加载一部分数据，触发某个条件后异步加载剩余数据
实现按需加载，加快加载速度，提升用户体验

32.keep-alive

使用keep-alive组件包裹动态组件,可以缓存组件数据,避免组件的重复渲染导致的性能问题

33.v-show 和 v-if 的区别和应用场景

v-show / v-if 都用于控制元素的显示和隐藏，当值是true则显示，否则不显示
区别：v-if会直接移除dom结构，v-show只是隐藏
使用场景：初次渲染开销较大时使用v-if ，频繁切换时使用v-show

34. map()和forEach()区别

map()会生成一个新的数据并返回，forEach会修改原数组

35. 观察者模式和发布订阅者模式

观察者模式： 观察者直接订阅主题，而当主题被激活的时候，会触发观察者里的事件
发布订阅模式：当发布者发布该事件到调度中心，也就是该事件触发时，由调度中心统一调度订阅者

36. 静态方法和实例方法

静态方法属于整个类所有,因此调用它不需要实例化,可以直接调用(类.静态方法())。实例方法必须先实例化,创建一个对象,才能进行调用(对象.实例方法())。

37. undefined和none为什么不能用toSting()方法

undefined/null 不是一个对象，没有原型

38.回流和重绘？

回流：当render tree 的一部分因为元素的规模尺寸、布局、隐藏等改变需要重构 重绘：当render tree 中的一些元素需要更新属性，而这些属性只是影响元素外观、风格，而不影响布局 区别：回流必将引起重绘，而重绘不一定会引起回流

39.vueX

是一种开发模式，状态几种放在store中，改变状态的方式是提交mutation，异步逻辑封装在action

40.react的生命周期

初始渲染阶段：

componentWillMount()
render()
componentDidMount()

更新阶段

componentWillReceiveProps(nextProps)
shouldComponentUpdate(nextProps, nextState)
componentWillUpdate(nextProps, nextState)
componentDidUpdate(prevProps,prevState,snapShot)

卸载

componentWillUnmount()

即将被移除的钩子

componentWillMount
componentWillReceiveProps
componentWillUpdate

新增的钩子

static  getDerivedStateFromProps(nextProps, nextState) 
getSnapshotBeforeUpdate(prevProps, prevState)

41.元素居中的方法

给父元素定位，子元素absolute,上下左右为0，margin：auto
或者将父元素设为弹性盒，设置子元素水平垂直居中