前端面试题记录+总结
1. <a></a>是行内元素还是块级元素？ 2. JS的基本类型有哪几种？ 3. 了解过es6吗？ 4. Array（记不太清具体问题是什么？但是没答出来） 5. vue-if和vue-on的区别？ 6. vue怎么绑定数据？ 7. 有没有学过react 8. 学习轨迹——大一设计、大二前端 9. 选择这个专业的原因，离家这么远上大学的原因 10. 毕业之后的意向 11. 项目意义，设计结构 12. 爱好是什么？ 13. 为什么简历上没有写培训经历？（**这个问题真的是把我问懵了，这个我还真不会写。。。不喜欢上培训班，从来没有过被培训的经历。。。。反应好久才说，嗯~我都是自己学的，我没有过被培训的经历。**）
可能是看我大二的原因，问的问题都比较基础，主要侧重的是问项目经验和未来的职业规划（好纠结为什么没有问实习经历啊啊啊，这个我有可多话说了）面试官问完说咱们毕竟是一个公司，你还有两年毕业，中间变数很多，公司培养一个人需要很多成本的，万一你毕业走了怎么办？这个我当时也懵了，然后我沉默了。。。然后面试就结束了。。。[大哭][大哭]现在觉得自己就是宛如一个智障~
6月7日更新后续
虽然这个面试挂掉了，但是面试官加了我的微信，然后就把他经常在面试中会问到别人的题发给我了~好激动啊哈哈哈哈
javascript
- array是object类型吗
- localStorage和sessionStorage的生命周期
- canvas中心点旋转角度
- 阻止冒泡及默认行为
- 深拷贝和浅拷贝及其应用
- == 和===的区别
- 什么是纯函数
- promise和callback区别
- var a = { count: 1 }; var b = a; a = nul; b = ? { count: 1 }
- 箭头函数和普通函数的区别以及内部如何实现
- var a = { count: 1 }; var b = a; b.count = 2; a.count = ? { count: 2 }
- 定时器为什么是不精准的
- 修饰器
- 是否可以通过ajax下载一个200k的文件
- map，forEach， filter的区别
- async await的理解
- 如何解决跨域的几种方式
- 表单可以跨域吗
- Es6解构
css
- div垂直居中 table-cell,inline-block,flex, 绝对定位+负边距，translate
- 实现上下固定，中间滚动的布局
react
- 如何避免组件卸载后执行setState
- react的生命周期
- react创建组建的3种方式 React.createClass, class，Stateless Functional
- react PropTypes 指定的多个对象类型中的一个 oneOfType
- setState是同步的还是异步的
- 为什么虚拟dom比真实dom性能好
- compoentWillReceiveProps的触发条件是什么
- pureComponent
- 服务端渲染ssr
- 父如何调用子的方法,子如何调用父得方法
vue
- v-if 和 v-show 有什么区别
- v-on可以监听多个方法吗
- 实现一个自己的MVVM
- vue中key的作用
- 为什么不能直接修改vuex中的$store
react-native
- react-native性能优化
- 如何用js判断本地是否安装了app
- react-native webview通信
git
- 克隆指定分支 -b
- 版本回退
- 强制推送远程分支 -f
- 如何撤销暂存区
JavaScript
array是object类型吗
答：是的，利用
console.log(Object.prototype.toString.call([]));检验，它会输出
[object Array]，这样你就可以判断它的类型了
localStorage和sessionStorage的生命周期
答：sessionStorage 存储的数据的生命周期是一个会话，而 localStorage 存储的数据的生命周期是永久，直到被主动删除，否则数据永远不会过期的。
canvas中心点旋转角度
阻止冒泡及默认行为
答：s冒泡和捕获是事件的两种行为，使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。使用event.preventDefault()可以取消默认事件。参考：http://caibaojian.com/javascript-stoppropagation-preventdefault.html
深拷贝和浅拷贝及其应用
答：浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。参考：https://mp.weixin.qq.com/s/FFp56h9MnMKK4OM0BjDd1Q
==
和===
的区别
答：
===严格相等，会比较两个值的类型和值；
==抽象相等，比较时，会先进行类型转换，然后再比较值
promise和callback区别
答：https://www.lazycoffee.com/articles/view?id=58ab09eea072b332753d9774
什么是纯函数
纯函数是满足如下条件的函数：
相同输入总是会返回相同的输出。
不产生副作用。
不依赖于外部状态。
如果调用一个函数，但是不使用其返回值，这个函数还意义，那么它毫无疑问是一个非纯函数。对于纯函数，那就是一个空操作。
var a = { count: 1 }; var b = a; a = null; b = ? { count: 1 }
箭头函数和普通函数的区别以及内部如何实现
答:箭头函数在定义之后，this 就不会发生改变了，无论用什么样的方式调用它，this 都不会改变；
原因：箭头函数不会自动绑定局部变量，如this，arguments，super(ES6)，new.target(ES6)等。
参考：https://www.geek-share.com/detail/2711977078.html
定时器为什么是不精准的
答：JS里setTimeout是不精确的，因为它所做的事情只是把任务添加到事件队列当中。如果在这个任务执行之前有别的任务执行的比较慢（比如死循环、大规模DOM操作、fs.同步IO等），那么后面的任务就会被推迟执行了。
是否可以通过ajax下载一个200k的文件
查到可以通过ajax下载文件，但大小限制好像没有查到相关资料。https://www.geek-share.com/detail/2704256017.html
map，forEach， filter的区别
答：https://blog.csdn.net/xiaxiangyun/article/details/80425143
map()
map()方法按照原始数组元素顺序依次处理元素，返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。可看作是对原数组进行映射。
注意：map()方法不会对空数组进行检测。
array.map(function(currentValue,index,arr), thisValue)
//参数：当前元素、当前元素的索引、当前元素所属的数组
var wallets = people.map(function (dude) {
return dude.wallet;
});
forEach()
forEach()方法用于遍历数组的每个元素，将元素传给回调函数。
注意：forEach()对于空数组是不会调用回调函数的。
array.forEach(function(currentValue, index, arr), thisValue)
//参数：当前元素、当前元素的索引、当前元素所属的数组
people.forEach(function (dude) {
dude.pickUpSoap();
});
filter()
filter()方法会筛选出数组中符合条件的项，组成一个新数组。
array.filter(function(currentValue,index,arr), thisValue)
//参数：当前元素、当前元素的索引、当前元素所属的数组
var fatWallets = wallets.filter(function (wallet) {
return wallet.money > 100;
});
总结
相同点：
- 都会循环遍历数组中的每一项；
- map()、forEach()和filter()方法里每次执行匿名函数都支持3个参数，参数分别是：当前元素、当前元素的索引、当前元素所属的数组；
- 匿名函数中的this都是指向window；
- 只能遍历数组。
不同点：
- map()速度比forEach()快；
- map()和filter()会返回一个新数组，不对原数组产生影响；forEach()不会产生新数组，返回undefined；reduce()函数是把数组缩减为一个值(比如求和、求积)；
- map()里可以用return，而forEach()里用return不起作用，forEach()不能用break，会直接报错；
- reduce()有4个参数，第一个参数为初始值。
async await的理解
async函数是
Generator函数的语法糖。使用 关键字
async来表示，在函数内部使用
await来表示异步。
想较于 Generator，
Async函数的改进在于下面四点：
- 内置执行器。Generator 函数的执行必须依靠执行器，而 Aysnc 函数自带执行器，调用方式跟普通函数的调用一样
- 更好的语义。async 和 await 相较于 * 和 yield 更加语义化
- 更广的适用性。co 模块约定，yield 命令后面只能是 Thunk 函数或 Promise对象。而 async 函数的 await命令后面则可以是 Promise 或者 原始类型的值（Number，string，boolean，但这时等同于同步操作）
- 返回值是 Promise。async 函数返回值是 Promise 对象，比 Generator 函数返回的 Iterator对象方便，可以直接使用 then() 方法进行调用
如何解决跨域的几种方式
这个文章写得好清楚啊https://juejin.im/entry/57d21eadbf22ec005f9c7d76
表单可以跨域吗
答：浏览器不允许js跨域提交内容。
因为原页面用 form 提交到另一个域名之后，原页面的脚本无法获取新页面中的内容。所以浏览器认为这是安全的。而 AJAX 是可以读取响应内容的，因此浏览器不能允许你这样做。如果你细心的话你会发现，其实请求已经发送出去了，你只是拿不到响应而已。所以浏览器这个策略的本质是，一个域名的 JS ，在未经允许的情况下，不得读取另一个域名的内容。但浏览器并不阻止你向另一个域名发送请求。
Es6解构
https://juejin.im/post/5c45622a51882524f2303aa0
vue
v-if 和 v-show 有什么区别
相同点：
两者都是在判断DOM节点是否要显示。
不同：
- 实现方式
v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点 v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。
2.编译过程
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件； v-show只是简单的基于css切换；
- 编译条件
v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译； v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留；
4.性能消耗
v-if有更高的切换消耗，不适合做频繁的切换； v-show有更高的初始渲染消耗，适合做频繁的额切换；
v-on可以监听多个方法吗
答：可以监听
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <button v-on:click="myclick('hello','world','你好世界',$event)" >button1</button> -->
<button @click="myclick('hello','world','你好世界',$event)">点我text</button>
<!-- v-on绑定多个事件教程里这样子写，但是貌似已经不支持这样子的写法了，内联方式下事件处理器只能绑定一个方法，要是想要绑定多个事件，用下面第二行的方式-->
<!-- <button v-on="{mouseenter: onEnter,mouseleave: onLeave}">鼠标进来</button> -->
<button @mouseenter="onEnter" @mouseleave="onLeave">鼠标进来</button>
<!-- 一个事件绑定多个函数，按顺序执行，这里分隔函数可以用逗号也可以用分号-->
<button @click="a(),b()">点我ab</button>
<button @click="one()">点我onetwothree</button>
<!-- v-on修饰符 .stop .prevent .capture .self 以及指定按键.{keyCode|keyAlias} -->
<!-- 这里的.stop 和 .prevent也可以通过传入&event进行操作 -->
<!-- 全部按键别名有：enter tab delete esc space up down left right -->
<form @keyup.delete="onKeyup" @submit.prevent="onSubmit">
<input type="text" placeholder="在这里按delete">
<button type="submit">点我提交</button>
</form>
</div>
<script src="vue221.js"></script>
<script>
var vm = new Vue({
el:"#app",
methods:{
//这里是es6对象里函数写法
a(){console.log("a");},
b(){console.log("b");},
one(){
console.log("one");
this.two();
this.three();
},
two(){
console.log("two");
},
three(){
console.log("three");
},
myclick(msg1,msg2,msg3,event){
console.log(msg1+msg2+"--"+msg3);
console.log(event);
},
onKeyup(){
console.log("you press 'delete'");
},
onSubmit(){
console.log("sumited");
},
onEnter(){
console.log("mouse enter");
},
onLeave(){
console.log("mouse leave");
}
}
});
</script>
</body>
</html>
自己动手实现一个MVVM
搜到了get上的例子：https://github.com/DMQ/mvvm
vue中key的作用
参考：https://juejin.im/post/5aae19aa6fb9a028d4445d1a
为什么不能直接修改vuex中的$store
官方不推荐直接修改，一般通过mutation修改
后面的react还没有学过，就先不总结啦~
