web前端面试题整理笔记

1.css2与css3的区别？
答：css3语言是朝着模块方向发展的，css3中新增了
（1）属性、伪类、伪元素选择器
（2）border-radius:15px圆角边框
（3）多列布局（兼容性不好，还不能用到实际中）
（4）阴影shadow如text-shadow:50px 5px 10px red;
（5）渐变（线性渐变与径向渐变）、过渡（transition）、动画（@keyfromes创建动画）
（6）弹性盒子display:flex;align-items：center；（垂直居中）
（7）媒体查询 目的：根据媒体类型的不同分别展示不同的样式（@media）

2.h4与h5的区别？
答：
（1）用于绘画的canvas元素
（2）用于媒介回放的video和audio元素
（3）对本地离线存储的更好的支持
（4）新的特殊内容元素（新语义化标签）article、footer、header、nav、section等
（5）新的表单控件，如calender、date、time、email、url、search

3.element、vant、ant-design的区别？
答：vant倾向于移动端开发，elementUI框架界面比较美观，ant-design框架组件库更全

4.原型、解决js继承问题？
答：
（1）原型的作用：节省内存空间，实现数据共享（继承）
（2）任何一个函数都有prototype属性，其本身是个对象，而构造函数的prototype

属性称之为原型
（3）原型对象上的属性和方法可以被实例化对象继承
（4）原型是对象所以也有controller属性，原型的controller属性指向构造函数
（5）原型链：实例化对象的_proto_属性指向构造函数的原型，原型的_proto_属性指向Object（）构造函数的原型，也就是Object（）.prototype,Object（）构造函数的原型也是对象，也有_proto_指向null

5.jQuery是什么？有哪些选择器？
（1）jQuery是一个快速简洁的js框架，封装常用的js功能代码，更少的代码做更多的事
（2）选择器：基本选择器#id，.class等，层级选择器后代、子代、同辈等，过滤选择器：first,:odd,:eq(index)等，表单选择器等
6.axios与ajax？
（1）axios是通过promise实现对ajax技术的一种封装（提供了一些并发请求接口，方便了很多操作）。axios是ajax，ajax不止axios

7.bs完成响应式布局？
答：.col-sm-6小型设备时占一半6份(xs超小，md中，lg大等)

8.js实现冒泡排序
//思路：先比较一轮一次，然后用for循环比较一轮多次，然后再加for循环比较多轮多次
//从大到小排序
var array=[10,20,9,8,79,65,100];
//比较轮数
for ( var i=0;i<array.length-1;i++){
//每轮比较次数，次数=长度-1-此时的轮数
for (var j=0;j<array.length-1-i;j++) {
if (array[j] > array[j + 1]) {
var temp = array[i];
array[j] = array[j + 1];
array[j + 1] = temp;
} //end if
}//end for 次数
} //end for 轮数
console.log(array);

9.js实现翻转字符
答：str.split()转化成数组，然后使用arr.reverse()翻转数组，然后使用
arr.join()数组转化为字符串

10.正则匹配用法
答：正则.text(字符串)

11.es6是干什么的？有哪些特点？
答：新增了promise（处理回调地狱），set（可用于去重，是一种新的数据结构），let,const,箭头函数，解构赋值（将元素分解开赋值给变量），模板字符串（是书写更简单）等

12.vue中父子组件传值？
答：父传子：通过prop属性，子组件通过props属性接收从父组件传过来的值，而父组件传值的时候使用v-bind将子组件中预留的变量名绑定为data里面的数据
子传父：子传父的实现方式就是用了this.$emit来遍历getData事件，首先用按钮来触发setData事件，在setData中用this.$emit来遍历getData事件，最后返回this.msg

13.vuex相关，底层原理是什么？
答：Vuex是一个专为Vue.js应用程序开发的状态管理模式
state:vuex的基本数据，用来储存变量
getters：对state中的数据进行加工
mutation：修改state中的值，通过this.$store.commit(‘mutation类型（函数名）’，“参数，参数一般是对象形式”)调用。
action：可包含异步操作，不可直接修改state，通过context关键字触发mutation改变state
module：对store进行拆分维护

14.解决跨域问题，jsonp原理？
答：1.后台开放，简单，方便，但安全性不足
2.jionp，利用script标签，不受同源策略限制的特性，使用回调函数解决，返回数据类型为jsonp格式
3.配置代理
在vue.confug.js中使用proxy配置代理

15.触底加载事件
答：if（滚动高度+可视区域>=页面高度）{do something函数}

16.$route与$router的区别？
答：this.$router.push是路由跳转传参，this.$route.query是接收参数

17.接口安全性保证（oathto）
答：通过token值保证安全性

18.路由的三个钩子函数
答：路由中全局钩子两个：beforeEach（to,from,next）和afterEach(不用next函数)
单个路由里面的钩子两个：beforeEnter和beforeleave（主要用于写某个指定路由跳转时需要执行的逻辑）
组件路由钩子三个：beforeRouterEnter，beforeRouteUpdate,beforeRouteLeave(to,from,next)
19.computed与medtheds、watch的区别？
答：1.数据量大，需要缓存的时候用computed；每次确实需要重新加载，不需要缓存时用methods
2.尽量用computed计算属性来监视数据的变化，因为它本身就具有这个特性
3.虽然计算属性大多数情况下很适合，但有些情况下我们需要自定义一个监听（watcher），在数据变化时来执行异步操作，这时watch是很有用的

20.node.js是什么？
答：是一个非阻塞事件驱动I/O特性的js运行环境，轻量高效。
node模块有三种：具名核心模块，自己写的文件夹，第三方模块

21.git是什么？
答：是世界上最先进的分布式版本控制系统（强调个体，速度快，灵活），workspace（工作区），index/Stage（暂存区），repository（本地仓库），remote（远程仓库）
1.可克隆版本库
2.git add .添加带暂存区
3.git commit 提交到本地仓库
4.git branch 列出本地分支， git branch 【分支名】创建分支，git checkout -b[分支名]创建并切换到指定分支，git branch -d【分支名】删除分支
5.merge操作会生成一个新的节点，之前的提交分开显示。而rebase操作不会生成新的节点，是将两个分支融合成一个线性的提交。
6.git revert是用一次新的commit来回滚之前的commit，git reset是直接删除指定的commit。
7.git remote add origin 地址
git push [remote][branch] 上传本地指定分支到远程仓库