2021前端最新面试题

一．es5,es6平时工作用到了那些新特性
1.JSON.parse(),JSON.stringfy()
2.let const
3.箭头函数
4.promise
5.async ,await
6.forEach,filter,map,some,every,includes,find,findIndex,reduce
7.解构运算符，展开运算符(…)
8.剩余参数(…参数名)
9.es6模块化
10.trim,startsWith,endsWith,includes

二.说说对作用域链的理解
函数作用域内使用的变量，如果是在本作用域找不到定义，会往上一级查找，一层一层查找，直到找到全局作用域，如果都没有返回undefined.这种一层一层类似锁链的关系，叫作用域链。

三.手写ajax代码
let xhr = new XmlHttpRequest();
xhr.open(“get”,”url”);
xhr.οnlοad=function(){
if(xhr.status200&&xhr.readyState4){
console.log(xhr.responseText);
}
}
xhr.send();

四.onclick和addEventListener绑定单击事件的区别
1.onclick可以写在标签上，addEventListener只能写在js代码中
2.onclick只能绑定点击事件，addEventListener可以绑定多种事件
3.两者都可以绑定多个事件，onclick的方式后面的事件会覆盖前面的事件，addEventListener则不会
4.addEventListener可以精确控制事件触发的阶段，通过第三个参数控制，默认是false也就是冒泡阶段，如果是true就是捕获阶段触发事件
5.onclick只对html元素起作用，addEventListener对任何DOM元素都有用。

五.async和await的作用
把异步书写代码方式改为同步书写代码的方式，代码结构更清晰更简洁，易于后期维护，解决回调地狱的问题。

六.箭头函数和普通函数的区别
1.定义写法不同，箭头函数写法更简洁
2.箭头函数没有arguments,只能使用剩余参数
3.箭头函数都是匿名函数
4.this指向不同
5.箭头函数没有构造函数，不能new
6.apply,call,bind不能修改箭头函数的this指向，只能传参。

七.splice()和join()的用法
1.splice(起始索引，个数，值1,值2…),可以对数组元素进行添加删除操作
2.join(分隔符),可以把数组分隔，通过分隔符连接为一个字符串

八.如何理解闭包
闭包是指可以访问另一个函数中的变量的函数，也就是函数嵌套关系。
作用1: 可以创建一个封闭作用域
作用2：把函数作用域变量提升或延伸为全局作用域变量，不易销毁

九.如何将类数组转换为标准数组
1.[].slice.call(类数组)
2.Array.from(类数组)

类数组的形式:
1.对象

2.dom对象数组
3.arguments数组
4.字符串

十.apply,call和bind方法的区别
它们都是用来修改this指向的,第一个参数都是指定this绑定的对象，第二个参数是传参
apply第二个参数是数组形式
call和bind第二个参数是参数列表形式
apply和call都是立即执行函数
bind不会立即执行而是返回新的函数

十一.数组去重的方式，任意选一种实现

十二.box-sizing常用的属性有哪些?请分别说明作用
常用属性: content-box(默认盒子模型),border-box(IE盒子模型或者叫怪异盒子)，inherit(继承父级元素的盒子模型)

默认盒子模型可见宽度=width+内边距+边框(内容区保持不变)
ie盒子模型可见宽度 = width(自动修改内容区大小，保持可见宽度与width值一致)
ie盒子模型适用于移动端弹性盒子布局。

十三.浏览器内核有哪些
浏览器内核通常指的是渲染引擎，用于解析html标签。
chrome: 是谷歌的浏览器核心，代表浏览器: google浏览器，360浏览器
trident: 是微软开发的浏览器核心，也就是360浏览器中的兼容模式，代表浏览器: IE浏览器，360极速浏览器
webkit: 是一个开源项目，目前很流行的浏览器内核，代表浏览器: 安卓默认浏览器，苹果safari浏览器，遨游浏览器
gecko: 是火狐浏览器核心，最早是由网景公司开发的，老牌浏览器核心
Blink: 是webkit的一个分支

十四.html5新特性有哪些，html和Html5的区别
新特性:
1.音视频标签: ,
2.语义化标签:

,

3.画布canvas
4.地理定位
5.增强型表单
6.拖拽
7.localStorage,sessionStorage
8.websocket
9.增加了一些新事件：ondrag,onresize,onplay,onpause

区别:
1.文档类型定义，h5简洁
2.html5增加了大量的语义标签
3.图片，html5通过canvas可以直接在浏览器上绘图

十五.简述清除浮动的几种方式
1.在父元素内最后一个位置加上一个空div，并且给空div加上clear:both样式。
2.给父元素也设置浮动。
3.给父元素设置overflow:hidden样式
4.创建伪类样式
.clearfix:after{
content:’’;
display:block;
clear:both;
}
十六.块级元素水平居中的方式
margin:0 auto;

十七.什么是盒子模型
盒子模型是一种对于块级元素特征的描述，包括4个特征:
margin(外边距),padding(内边距),border(边框),content(内容区)

十八.bootstrap栅格系统用于屏幕适配的样式有几种
1.手机屏幕: col-xs 小于768px
2.平板电脑屏幕: col-sm 768-992px
3.pc: col-md 992-1200px
4.大pc: col-lg 1200px以上

十九．vue的优点和缺点
优点:
1.轻便易用
2.双向绑定
3.组件化，模块化
4.虚拟DOM,利用diff算法提高DOM更新渲染的效率
缺点:
1.不支持ie8.0以下的浏览器
2.比较适合开发单页面应用，不适合seo优化

二十. vue生命周期函数的作用
生命周期函数用于描述vue对象从创建到销毁的一整个过程，在这个过程中，分为几个阶段，每个阶段都有对应的函数。
beforeCreate: 创建之前，el还没有挂载DOM元素，data
为undefined，都还没初始化。
created: 对象创建完成，data就有了，通常在这个阶段发送远程请求。
beforeMount: data数据已经初始化完毕，但是都是虚拟状态，还没有更新到页面中
mounted: vue实例挂载完成，更新的数据，就可以渲染到页面上去。
beforeUpdate: data更新之前触发
updated: data数据更新完成之后触发，这个过程可以用watch监控变量的变化
beforeDestroy: 对象销毁之前
destroyed: 销毁的时候触发，这个时候组件的属性方法都销毁了。

二十一. vue父子组件传值，兄弟组件传值
1.父传子，通过子组件的props属性获取父元素传的值
2.子传父，通过指定事件传值，用$emit(“函数名”,参数)发送消息。3.兄弟间传值:a.创建一个中间vue对象，通过这个对象的属性来传值b.使用$emit(“函数名”,参数)发送数据，使用$on(“函数名”,function(参数){})

二十二. v-if和v-show的区别
1.两个都可以控制元素的显示和隐藏，v-if还可以分支控制
2.v-if通过创建和销毁元素来达到效果，v-show通过display来了达到效果
3.v-if创建的时候资源消耗较少，但是切换的时候消耗资源比较大，所以适合不频繁切换的场合
4.v-show切换的时候消耗的资源比较少，所以适合频繁切换的场合

二十三. v-on为什么能绑定多个事件
原生js就支持绑定多个事件，是通过on事件名和addEventListener来绑定的，这两个方式都支持绑定多个事件。
on事件名的方式绑定多个事件，只有最后一次绑定的起作用.
addEventListener方式绑定的多个事情，都能正常触发。

二十四. 什么是vue过滤器，怎么使用
过滤器是用于给插值表达式的值做格式化处理的。分为全局过滤器和局部过滤器。在插值表达式中通过管道符来使用。
全局过滤器定义:
Vue.filter(“名称”,function(参数1，参数2，参数3…){
});
局部过滤器定义:
new Vue({
filters:{
过滤器名:function(参数1，参数2，参数3…){
}
})

使用:
{{值 | 过滤器名1( 参数) | 过滤器名2( 参数)… }}

二十五. axios是什么，简述使用它完成登录的流程
axios是一个基于promise的发送异步请求的库
特点(这个题可以不写):
1.可以在服务端发送异步请求
2.支持promiseAPI
3.可以直接使用async await
4.有拦截器
5.可以取消请求
6.自动转换json格式字符串
7.防御xsrf(跨域脚本)攻击
登录流程:
1.获取用户名和密码并进行格式验证
2.使用axios的post方法发送登录请求
3.后台把登录成功与否的信息返回给前端
4.前端在axios的then方法中获取成功信息并且进行相应处理，在catch方法中获取失败信息进行相应处理

二十六. 简述提高小程序应用程序速度的方法
1.把本地资源如图片等，做成外部链接
2.减少data数据的大小，尽量只绑定用到的数据
3.页面上，减少无用标签的使用
4.动态效果不使用css动画，而使用外部加载gif图片的方式
5.不频繁更新的数据可以使用本地缓存来保存

二十七. vue-loader是什么，有哪些用途
vue-loader是webpack的一个插件，负责把vue模板相关的语法文件转换为浏览器能够解析的语法文件。
1.vue-loader解析.vue文件，把,

二十八. 微信小程序页面间传值的方法
1.使用navigator标签，通过url属性按照get传值方式进行传值。
2.编程式导航,比如:wx.navigateTo({url:””})
3.通过getCurrentPages()取得页面栈进行传值