《WEB前端面试题个人合集》第1期：第一题到第三十题（可睡前复习...）【诗书画唱】
目录：
一． es5,es6平时工作用到了哪些新特性
二. 说说对作用域链的理解
三. 手写ajax代码
四. onclick和addEventListener绑定单击事件的区别
五. async和await的作用
六. 箭头函数和普通函数的区别
七. splice()和join()的用法
八. 如何理解闭包
九. 如何将类数组转换为标准数组
十. apply,call和bind方法的区别
十一. 数组去重的方式，任意选一种实现
十二. box-sizing常用的属性有哪些?请分别说明作用
十三. 浏览器内核有哪些
十四. html5新特性有哪些，html和Html5的区别
十五. 简述清除浮动的几种方式
十六. 块级元素水平居中的方式
十七. 什么是盒子模型
十八. bootstrap栅格系统用于屏幕适配的样式有几种
十九． vue的优点和缺点
二十. vue生命周期函数的作用
二十一. vue父子组件传值，兄弟组件传值
二十二. v-if和v-show的区别
二十三. v-on为什么能绑定多个事件
二十四. 什么是vue过滤器，怎么使用
二十五. axios是什么，简述使用它完成登录的流程
二十六. 简述提高小程序应用程序速度的方法
二十七. vue-loader是什么，有哪些用途
二十八. 微信小程序页面间传值的方法
二十九. JavaScript的基本数据类型
三十. 什么是盒子模型？
一．es5,es6平时工作用到了哪些新特性
1.JSON.parse(),JSON.stringify()
2.let const
3.箭头函数
4.promise
5.（2个关于异步的方法：）async ,await
6.（9个关于数组的方法，其中5个f开头的方法，some，map,every,includes,reduce可看出音乐句子：some map,every includes,reduce 一些map，每个 includes，reduce 。有时内容看出句子记忆会更容易。forEach filter,find findIndex ：forEach 遍历每个 filter，找到 findIndex）forEach,filter,find,findIndex,some，map,every,includes,reduce
7.解构运算符，展开运算符(...)
8.剩余参数(...参数名)
9.es6模块化
10.trim,startsWith,endsWith
多发现和记录规律，增加记忆点。
二. 说说对作用域链的理解
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到 window 对象即被终止，作用域链向下访问变量是不被允许的。注意：JS没有块级作用域，若要形成块级作用域，可通过（function（）｛｝）（）；立即执行的形式实现。
(
函数作用域内使用的变量，如果是在本作用域找不到定义，会往上一级查找，一层一层查找，直到找到全局作用域，如果都没有找到，就返回undefined。这种一层一层类似锁链的关系，叫作用域链。)
三. 手写ajax代码
let xhr = new XMLHttpRequest();
xhr.open(“get”,”url”);
xhr.onreadystatechange=function(){
if(xhr.status==200&&xhr.readyState==4){
console.log(xhr.responseText);
}
}
xhr.send();
四. onclick和addEventListener绑定单击事件的区别
onclick可以写在标签上，addEventListener只能写在js代码中
2. onclick只能绑定点击事件，addEventListener可以绑定多种事件
3. 两者都可以绑定多个事件，onclick的方式后面的事件会覆盖前面的事件，addEventListener则不会
4. addEventListener可以精确控制事件触发的阶段，通过第三个参数控制，默认是false也就是冒泡阶段，如果是true就是捕获阶段触发事件
5. onclick只对html元素起作用，addEventListener对任何DOM元素都有用。
五. async和await的作用
async 是一个修饰符，async 定义的函数会默认的返回一个Promise对象，
因此对async函数可以直接进行then操作,返回的值即为then方法的传入函数
await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容，
获取的是Promise函数中resolve或者reject的值
如果await 后面并不是一个Promise的返回值，则会按照同步程序返回值处理,为undefined
(把异步书写代码方式改为同步书写代码的方式，代码结构更清晰更简洁，易于后期维护，解决回调地狱的问题。)
六. 箭头函数和普通函数的区别
定义写法不同，箭头函数写法更简洁,使用箭头定义
2. 箭头函数没有arguments,只能使用剩余参数,每一个普通函数调用后都具有一个arguments对象，用来存储实际传递的参数。
3. 箭头函数都是匿名函数,普通函数可以有匿名函数，也可以有具名函数
4. this指向不同,在普通函数中，this总是指向调用它的对象，或者，如果用作构造函数，它指向创建的对象实例。【个人注释：箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值】
5. 箭头函数没有构造函数，不能new
6. apply,call,bind不能修改箭头函数的this指向，只能传参。
7. 其它区别:
1）.箭头函数不能当做Generator函数。【个人注释：箭头函数不能当做Generator函数,不能使用yield关键字】
2）箭头函数不具有prototype原型对象。
3）箭头函数不具有super
4）箭头函数不具有new.target
七. splice()和join()的用法
1.splice(起始索引，个数，值1,值2...),可以对数组元素进行添加删除操作
2. join(分隔符),可以把数组分隔，通过分隔符连接为一个字符串
八. 如何理解闭包
定义：闭包是有权限访问其他函数作用域内的变量的一个函数。
简单说:其实闭包就是一个函数，一个外部函数通过调用函数并return返回出内部函数，这里的内部函数就是一个闭包，此时在内部函数中是可以访问到外部函数的变量的。
由于在JS中，变量的作用域属于函数作用域，在函数执行后作用域就会被清理、内存也随之回收。
但是由于闭包是建立在一个函数内部的子函数，由于其可访问上级作用域的原因，即使上级函数执行完，作用域也不会随之销毁，这时的子函数——也就是闭包，便拥有了访问上级作用域中的变量的权限，即使上级函数执行完后作用域内的值也不会被销毁。
(
闭包是指可以访问另一个函数中的变量的函数，也就是函数嵌套关系。
作用1: 可以创建一个封闭作用域
作用2：把函数作用域变量提升或延伸为全局作用域变量，不易销毁)
九. 如何将类数组转换为标准数组
1.[].slice.call(类数组)
2. Array.from(类数组)
【
类数组的形式:
1.对象
2. dom对象数组
3. arguments数组
4. 字符串
【
个人理解：
声明一个函数传一个参数，直接控制台打印arguments，就可以看出arguments是类数组。
用标签选择器获取多个p标签等等，会获得一个数组，是dom对象数组。
字符串由一个一个的字符组成，所以可以看成类数组】
】
十. apply,call和bind方法的区别
它们都是用来修改this指向的,第一个参数都是指定this绑定的对象，第二个参数是传参
apply第二个参数是数组形式
call和bind第二个参数是参数列表形式
apply和call都是立即执行函数
bind不会立即执行而是返回新的函数
十一. 数组去重的方式，任意选一种实现
我的改进：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//数组去重的方法一：
var arr= [1,2,3,5,4,4,3];
console.log(Array.from(new Set(arr)));
//数组去重的方法二：
var arr= [1,2,3,5,4,4,3];
var newArr = arr.filter(function(item, index){
return arr. indexOf(item,0) === index;
});
console. log(newArr);
//数组去重的方法三：
var arr= [1,2,3,5,4,4,3];
var tempArr=[];
for(let i=0;i<arr.length;i++){
if(!tempArr.includes(arr[i])){
tempArr.push(arr[i]);
}}
console.log(tempArr);
</script>
</body>
</html>
十二.box-sizing常用的属性有哪些?请分别说明作用
常用属性: content-box(默认盒子模型),border-box(IE盒子模型或者叫怪异盒子)，inherit(继承父级元素的盒子模型)
默认盒子模型可见宽度=width+内边距+边框(width就是内容区宽度)
ie盒子模型可见宽度 = width(自动修改内容区大小，保持可见宽度与width值一致)
ie盒子模型适用于移动端弹性盒子布局。
width
height
十三. 浏览器内核有哪些
浏览器内核通常指的是渲染引擎，用于解析html标签。
chrome浏览器内核: 是谷歌的浏览器核心，谷歌浏览器早期用的是webkit,现在用的是blink,
代表浏览器: google浏览器，360浏览器
trident: 是微软开发的浏览器核心，也就是360浏览器中的兼容模式，代表浏览器: IE6-10浏览器，360极速浏览器
webkit: 苹果公司自主研发的内核，是一个开源项目，也是Safari浏览器使用的内核。 Webkit引擎包含渲染引擎WebCore和javascript引擎JSCore。代表浏览器: 苹果safari浏览器，早期Google Chrome、Opera及各种国产浏览器高速模式也使用Webkit作为内核
gecko: 是火狐浏览器核心，最早是由网景公司开发的，老牌浏览器核心
Blink: 是webkit的一个分支，有Google和Opera Software开发的渲染引擎，谷歌还自己开发了v8引擎用于解析js代码。
十四. html5新特性有哪些，html和Html5的区别
新特性:
1.音视频标签: <video>,<audio>
2. 语义化标签:<header>,<article>
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;
}
第十五题解析
::after表示法是在CSS3中引入的，::符号是指伪元素，:符号是指伪类。
element:after {style properties} /*CSS2语法*/
element::after {style properties} /*CSS3语法*/
用于向渲染的元素后添加内容。
短元音/ɪ/的发音方法
.clear:after { content: ""; display: block; clear: both; }
这里的.clearfix和.clear是类名，是自定义的。
fix 使固定 英[fɪks]
:after
:after 选择器向选定元素的最后子元素后面插入内容。
使用content 属性来指定要插入的内容。
（个人理解其作用是：在后面插内容的）
CSS样式.clear{clear:both;height:0;font-size:0px;overflow:hidden;}.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden;}这两个样式，分别什么情况下使用？
这是两种清除浮动的方式，.clear 就是在需要清除浮动的父元素内部的所有浮动元素后面添加一个无意义的空标签来清除浮动，并且自定义其CSS为clear:both，加上其它属于是为了让这个标签不受其它因素的影响；.clearfix:after 就是利用after伪对象来清除浮动，该方法只适用于非IE浏览器，该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素。
content
clear和clearfix的区别
十六. 块级元素水平居中的方式
1 固定宽度，父子元素都不浮动，通过设置外边距margin:0 auto;
2. 绝对定位，通过设置left:0;right:0;margin:auto;
3. 弹性盒子, justify-content:center(默认主轴水平居中)
4. 父子元素都浮动的情况下，margin-left:50%,transform:translateX(-50%)
第十六题解析
十七. 什么是盒子模型
盒子模型是一种对于块级元素特征的描述，主要用于对页面进行布局，包括4个特征:
margin(外边距),padding(内边距),border(边框),content(内容区)
padding
十八. bootstrap栅格系统用于屏幕适配的样式有几种
1 手机屏幕: col-xs 小于768px
2. 平板电脑屏幕: col-sm 768-992px
3. pc: col-md 992-1200px
4. 大pc: col-lg 1200px以上
栅格[shān gé]
栅格系统
第十八题解析
十九． vue的优点和缺点
vue 是一套构建用户界面的渐进式框架（MVVM框架）。
vue采用自底向上增量开发的设计。vue的核心只关注视图层，是一个构建数据驱动的Web页面的库。
优点:
1. 轻便易用
2. 双向绑定
3. 组件化，模块化，利用功能重复利用，便于团队协作
4. 指令，简化了DOM操作
5. 虚拟DOM,利用diff算法提高DOM更新渲染的效率
缺点:
1. 不支持ie8.0以下的浏览器
2. 比较适合开发单页面应用，不适合seo优化
第十九题解析
diff
二十. vue生命周期函数的作用
生命周期函数用于描述vue对象从创建到销毁的一整个过程，在这个过程中，分为几个阶段，每个阶段都有对应的函数，这些函数就叫生命周期函数，也叫钩子函数。生命周期函数用于开发人员在生命周期不同的时期进行相应的逻辑处理。
beforeCreate: 创建之前，el还没有挂载DOM元素，data为undefined，都还没初始化。
created: 对象创建完成，data就有了，通常在这个阶段发送远程请求。
beforeMount: data数据已经初始化完毕，但是都是虚拟状态，还没有更新到页面中
mounted: vue实例挂载完成，更新的数据，就可以渲染到页面上去。
beforeUpdate: data更新之前触发
updated: data数据更新完成之后触发，这个过程可以用watch监控变量的变化
beforeDestroy: 对象销毁之前
destroyed: 销毁的时候触发，这个时候组件的属性方法都销毁了。
第二十题解析
destroy
彻底破坏
【英 【dɪˈstrɔɪ】 】
watch
观看【英 [wɒtʃ] 】
el
这道面试题的el我暂时理解为父级元素(和最外层的id为app的div有关）
【有些人说el是挂载点(可以理解为data数据生效的地方)】
二十一. vue父子组件传值，兄弟组件传值
1 父传子，通过子组件的props属性获取父元素传的值
2. 子传父，通过指定事件传值，用$emit(“函数名”,参数)发送消息。
3. 兄弟间传值:
a. 创建一个中间vue对象，通过这个对象的属性来传值
b. 使用$emit(“函数名”,参数)发送数据，使用$on(“函数名”,function(参数){})
4. 本地存储，比如，localStorage,sessionStorage
5. Vuex,数据共享
第二十一题解析
二十二. v-if和v-show的区别
1. 两个都可以控制元素的显示和隐藏，v-if还可以分支控制
2. v-if通过创建和销毁元素来达到效果，v-show通过display来达到效果
3. v-if创建的时候资源消耗较少，但是切换的时候消耗资源比较大，所以适合不频繁切换的场合
4. v-show切换的时候消耗的资源比较少，所以适合频繁切换的场合
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(跨域脚本)攻击】
登录流程:
获取用户名和密码并进行格式验证
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文件，把<template>,<style>,<script>三个部分，分别提取出来，把它们分别交给对应的loader去进行处理。
2. 有了vue-loader等一些loader插件，才可以使用.less和.scss这些预处理css文件。
.less文件一般交给css-loader处理
vue-template-compiler: 对template部分进行转换
less
二十八. 微信小程序页面间传值的方法
1. 使用navigator标签，通过url属性按照get传值方式进行传值。
2. 编程式导航,比如:wx.navigateTo({url:””})
3. 通过getCurrentPages()取得页面栈进行传值
页面栈
pages
二十九. JavaScript的基本数据类型
Number、String 、Boolean 、Null、Undefined
Object 是 JavaScript 中所有对象的父对象
数据封装类对象：Object、Array、Boolean、Number 和 String
其他对象：Function、Arguments、Math、Date、RegExp、Error
新类型：Symbol
Boolean
三十. 什么是盒子模型？
盒子模型是CSS中的一种布局模式，盒子模型包括content（内容区）+padding（填充区）+border（边框区）+margin（外边界区），
可以分别理解为盒子里装着的物品+物品与箱子之间的空隙+箱子+箱子外的区域。
