前端面试题整理（持续更新）

一、js基础类

1.描述下类的继承和原型链

1原型链继承（对象间的继承）
      //要继承的对象
       var parent={
            name : "baba"
　　　       say : function(){
                   alert("I am baba");
            }
       }

//新对象
var child = proInherit(parent);

//测试
alert(child.name);  //"baba"
child.say();        //"I am baba"

2.类式继承（构造函数间的继承）

//父类构造函数
function Parent() {
        this.name = "baba";
}
//父类原型方法
Parent.prototype.getName = function () {
        return this.name;
}

//子类构造函数
function Child() {
       this.name = "cc";
}

//类式继承
classInherit(Parent, Child);

//实例
var child = new Child();
alert(child.getName())     //“baba”

2.addEventListener的使用，三个参数分别代表什么？

第一个参数为事件类型，第二个参数为回调函数，第三个函数为布尔值（决定事件冒泡还是捕获,false冒泡，true捕获）

3.事件冒泡和捕获的区别？事件捕获的用处？

image.png

最先触发根节点，在某些特定场景中不会在中途受到去其他方法终止冒泡捕获的影响，提高方法或组件的实用性

4.箭头函数和普通函数的区别？函数声明和函数表达式的区别？

1.箭头函数和普通函数的this指向不同，箭头函数中this的指向是谁声明则指向谁，普通函数的this指向为谁调用则this指向谁，箭头函数没有原型
2.函数声明:
funcation funcationname(){},
表达式：
let funcationname=funcation(){}

5.session，local，cookie的区别是什么？

Cookie能在浏览器和服务器之间来回传递，其他两个不能,且可设置有效时长

6.什么是闭包，闭包的作用？

函数中定义个函数，函数内的函数则形成闭包，闭包能防止变量污染，闭包内部能访问外部，但是外部不能访问内部变量，但是也会造成内存泄露，在函数执行结束后需将变量清除掉，避免内存占用过多

7.如何实现局部刷新

8.map，sort，foreach，fliter方法会不会改变原数组

foreach可以改变数组自身，取决具体操作
sort排序，直接改变原数组
map,fliter有返回值，不改变原数组

9.promise用法，如何解决同步、异步、高并发

10.ES6新属性，函数this指向

let 箭头函数 Set map filter promise async-await const

11.数据类型有几种，修改数组指定元素有哪些方法

Object，Number，Blean，Date
split

12.判断对象非空有几种方法

Object.keys(data).length==0

13.前端解决跨域，http协议、状态

代理配置，ifram

14.前端性能优化方法，及SEO

减少http请求,使用浏览器缓存,减少DOM操作,CSS选择符优化.
控制首页链接数量,标签语义化

15.盒子模型有几种，区别在哪

分为IE盒模型和普通盒模型，普通盒模型的宽计算为width加padding加border加margin，而IE盒模型的宽计算就是width，不包括padding及向外的值

16.单选、多选组件如何封装

17.原型挂载对象方法

18.new的执行过程

1. 创建一个Object对象              var obj = {}
2. 将构造函数的this指向这个对象      函数名.bind(obj);
3. 执行构造函数中的代码             obj增加属性
4. 返回Object对象                 return obj

二、css基础类

1.网页灰白色如何实现

//颜色全局过滤
html{
filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-webkit-filter: grayscale(1);
}

2.实现盒子水平垂直居中的方法？

3.@important和link的区别

4.未知宽高垂直水平居中，flex布局

5.兼容问题如何解决（机型、单位区别等）

6.软件键盘弹起导致输入框被遮挡问题如何解决

三、框架类

react
1.hooks的使用，不要在循环，条件或嵌套函数中调用 Hook，为什么？

确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确
了解更多规则详情：https://react.docschina.org/docs/hooks-rules.html#explanation

2.在hook中如何使用等效于react中的挂载完成生命周期钩子函数？

3.组件之间的通讯方式有几种？

4.key的作用是什么？

5.生命周期

1.getDefaultProps()
注：getDefaultProps这种定义方式是用在你定义组件用的是React.createClass方式的
如果使用的是es6的语法，例如用的是class 组件名 extends React.Component的话，就不要用
getDefaultProps这种方式去定义props了，而是应该用 static propTypes ＝｛｝来定义，这样就不会有警了

     设置默认的props，也可以用dufaultProps设置组件的默认属性. ---》设置
2.getInitialState()
注：与getDefaultProps的区别在于前者设置默认的 props，后者设置初始的state在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义 this.state。此时可以访问this.props

3.componentWillMount()
注：组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。

4. render()
注：react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。

5.componentDidMount()
注：组件渲染之后调用，只调用一次。可以在此请求数据

·更新
1.componentWillReceiveProps(nextProps)
注：组件初始化时不调用，组件接受新的props时调用。

2.shouldComponentUpdate(nextProps, nextState)
注：react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候

3.componentWillUpdata(nextProps, nextState)
注：组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state

4.render()
注：组件渲染

5.componentDidUpdate()
注：组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。

·卸载
componentWillUnmount()
注：组件将要卸载时调用，一些事件监听和定时器需要在此时清除。

image.png

vue
1.描述vuex的实现原理？

持有state，并使其响应化,使用混入的方法,use是先执行，而this指向的是vue实例，是在main.js中后创建的，使用混入才能在vue实例的指定周期里拿到store实例并做些事情
Vuex的双向绑定通过调用 new Vue实现，然后通过 Vue.mixin 注入到Vue组件的生命周期中，再通过劫持state.get将数据放入组件中

2.组件之间的通讯方式有几种？

属性传值，子传父使用$emit父组件使用方法接收，session和local，vuex

3.数据双向绑定的原理是什么？

Vue的数据双向绑定原理是数据劫持，结合发布订阅者模式，通过Object.defineProperty()来劫持各个属性的setter,getter属性，当数据变化时发布消息给订阅者，触发对应的回调函数。

4.重绘和重构的区别？

重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）

5.描述下插槽？

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

6.vue观察者模式的原理是啥？

7.谈一下vue组件封装？

8.vuex里的异步和同步有什么区别？

9.token失效如何实现无感刷新？

10.vue-router

1、导航被触发
2、在失活的组件里调用离开守卫
3、调用全局的 beforeEach 守卫
4、在重用的组件里调用 beforeRouteUpdate 守卫
5、在路由配置里调用 beforEnter
6、解析异步路由组件
7、在被激活的组件里调用 beforeRouteEnter
8、调用全局的 beforeResolve 守卫
9、导航被确认
10、调用全局的 afterEach 钩子
11、触发 DOM 更新
12、在创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数

11.vue组件的拆分粒度越细越好吗？为什么？

你的每个组件都会创建vnode，然后vue执行patch方法渲染vnode，然后生成dom，拆分组件力度过细，会导致嵌套组件过深，并且内部还创建组件实例来维护组件状态，以及组件初始化的时候响应数据处理，整个应用的初始化时长会变长，占用的内存空间也会变大。组件的封装应根据可复用性和业务逻辑的抽象方面考虑

其他
1.vue和react在数据变化的时候更新方式有什么不同？

2.vue和react有什么区别，什么时候触发路由重定向？

3vue和react的渲染有什么区别？

4.如何解决长列表数据量过大，导致小程序触发回收机构

5.如何实现通讯录效果（如：有A、B、C三个导航菜单，点击A即跳转到A板块内容，同理，滑动界面到某个板块时，对应的菜单呈选中状态）

6.小程序兼容问题

1.ios和安卓时间显示兼容问题

7.h5兼容问题