金三银四，春天来了~又到了跳槽的高峰期。以下是最近面试常问的一些面试题。前端新人一枚，问题都比较基础。
首先推荐个 chrome 的插件吧，在去一个公司面试前不知道他的技术栈是什么，可以通过浏览他的网站通过这个插件看看这个公司都用了什么。也可以有一个方向去准备。如果有童鞋因为墙的问题的话~~
戳这里：https://github.com/Howie126313/vpn
Javascript：
Q1：用到的 ES6 新特性。
A：
1、箭头函数；（可以避免 this 指向问题）
2、模板字符串；
3、扩展运算符；
4、设置函数默认值；
5、class 声明类及相关继承的方法；
6、@functionName 类的修饰器；
Q2：计算 1-10000 出现过多少个 0 。
A：
!function () {
let num = 0
const rule = /0/g
for (let i = 1; i <= 10000; i++) {
if(i.toString().includes(0)){
if (i.toString().match(rule)) {
num += i.toString().match(rule).length
}
}
}
console.log(num)
}()
Q3：以下代码分别输出值是什么 。
A：
!function () {
for (var i = 0; i < 5; i++) {
console.log(i)
}
console.log(i);
}()
!function () {
for (let i = 0; i < 5; i++) {
console.log(i)
}
console.log(i);
}()
Q4：typeof 和 instanceof 区别。
A：
typeof 的返回值为‘number’,‘string’,’boolean’,’function’,’undefined’,’object’。所以在判断数组时，返回值为 ‘object’；
instanceof 是判断变量是否为某个对象的实例，返回值布尔值。
e.g:
var o = {};
var a = [];
o instanceof Array // false
a instanceof Array // true
a instanceof Object // true
Q5：for 、for…in 相对于 for…of 的缺点。
A：
- for 书写麻烦...(我也不知道 _ )
- for…in: 遍历顺序不确定，for…in不光能遍历数组还能遍历对象，因此在遍历数组内值得同时，还会遍历数组自身的属性以及数组原型链上的可枚举属性；
- for..of (ES6): 可以使用 break 来终止整个循环，或者 continute 来跳出当前循环，继续后面的循环；结合 key() 获取到循环的索引，并且是数字类型，不是字符串类型；
Q6：同时发送多个异步请求，请求之前没有关联。
A：使用 aync 、await 发送，声明三个请求，之后通过 promise.all() 一起发送，此时三个请求为并行。如果直接发送，三个请求会以串行的方式发送。
有关 aync 、 await 异步请求的详细教程：https://segmentfault.com/a/1190000011526612
e.g:
async function correctDemo() {
let p1 = sleep(1000);
let p2 = sleep(1000);
let p3 = sleep(1000);
await Promise.all([p1, p2, p3]);
}
Q7: 使用 Jquery 获取 select 当前的 value 值。
A: $("select option: selected").val();
Q8：JQuery 中 给其他 js 库。释放后，可能会引起 jqExtend 工作不正常。
e.g:
var $jq = jQuery.noConflict(true);
Q9: 正则相关。
A:
元字符：
1、.:匹配除了\n所有字符；
2、\d:匹配所有的数字0-9；
3、\w:匹配数字、字母、下划线；
4、\s:匹配所有空白占位符；
5、\D:匹配所有的非数字；
6、\W:匹配所有的非数字、字母、下划线；
7、\S:匹配所有非空白占位符；
8、\u:匹配中文；
匹配所有的中文:[\u4e00-\u9fa5]
注意:\代表转译,一些带有特殊意义的字符,需要转译；(\n代表换行)
括号：
():标记一个子表达式的开始和结束位置；
[]:代表一个区间，定义字符的匹配范围；
\d===[0-9];
\w===[a-z0-9A-Z];
\D===[^0-9];
\w===[^a-z0-9A-Z];
^代表区间取反；
{}:表示匹配长度；
n{x}:x个n；
n{x,y}:最少x个n，最多y个n；
n{x,}:最少x个n，最多无限；
量词：
+：最少一个，最多无限个{1，}；
*：最少0个，最多无限个{0,
？：最少0个，最多1个{0，1}
Q10：跨域
A：浏览器的同源策略会导致跨域，只要是为了防止 CSRF 攻击。只要协议、域名和端口有任何一个不同就被当做是跨域操作。解决方法：jsonp、服务器代理、设置 webpack 中 proxytable 或者 iframe 等方式。
Q11：数据类型
A：基本数据类型：number string boolean undefined null;引用数据类型：object function array data
css3：
Q1：实现三栏布局，左右定宽中间自适应。（三种方式）
A：
1、flex:
<head>
<style>
.wrap {
display: flex;
background-color: yellowgreen;
}
.t1 {
width: 200px;
height: 100px;
background-color: red;
}
.t2 {
flex: 1;
height: 100px;
background-color: blue;
}
.t3 {
width: 200px;
height: 100px;
background-color: hotpink;
}
</style>
</head>
<body>
<div class="wrap">
<div class="t1">left</div>
<div class="t2">center</div>
<div class="t3">right</div>
</div>
</body>
2、grid:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrap {
display: grid;
grid-template-columns: 200px 1fr 200px;
}
.wrap>div {
height: 200px;
}
.t1 {
background-color: aqua;
}
.t2 {
background-color: hotpink;
}
.t3 {
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="wrap">
<div class="t1">left</div>
<div class="t2">center</div>
<div class="t3">right</div>
</div>
</body>
3、 position:
<head>
<style>
.wrap {
background-color: aqua;
padding: 20px;
position: relative;
}
.t1 {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 100px;
background-color: blue;
}
.t2 {
height: 100px;
background-color: brown;
margin: 0 220px;
}
.t3 {
position: absolute;
right: 0;
top: 0;
width: 200px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div class="wrap">
<div class="t1">left</div>
<div class="t2">center</div>
<div class="t3">right</div>
</div>
</body>
4、float:
<head>
<style>
.wrap {
background-color: aqua;
overflow: hidden;
padding: 20px;
}
.d1 {
width: 200px;
height: 100px;
float: left;
background-color: brown;
}
.d2 {
width: 200px;
height: 100px;
float: right;
background-color: blueviolet;
}
.d3 {
height: 100px;
background-color: blue;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="d1">left</div>
<div class="d2">right</div>
<div class="d3">center</div>
</div>
</body>
Q2：常用清楚浮动的方法，为什么 overflow 能够清楚浮动？BFC 是什么？哪些属性能够触发 BFC ？
A：
清楚浮动的方法：
- 使用伪元素；
- 在浮动元素下，写一个空的 div 设置 clear: both 属性；
- 父级设置浮动；
- 父级设置 overflow: hidden/auto ；
为什么 overflow 能够清除浮动：
因为 overflow 的属性值出发了 BFC 。
BFC 是什么：
BFC 全称是块级排版上下文，用于对块级元素排版。BFC 会生成一个区域，使这个块圾元素内部的排版完全独立隔绝。就好像声明了一个 function 就会生成 一个独立的作用域一样。
那些属性能够触发 BFC ：
float 的值不为 none ；
overflow 的值不为 visible ；
display 的值为 inline-block、table-cell、table-caption
position 的值为 absolute 或 fixed。
Vue：
Q1: vue 双向数据绑定是如何实现的。
A：vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，利用 Object.defineProperty() 实现了数据的劫持。ES6 的 proxy 也可以实现相应的效果，但兼容性不如前者。
具体方法：https://www.cnblogs.com/canfoo/p/6891868.html
Q2：vue 计算属性的实现，computed 和 watch 区别。
A：计算属性也是通过 Object.defineProperty() 和发布者-订阅者模式实现的；
computed：经过处理返回的数据值,只要源数据没有发生改变,computed函数里面对相应的数据就不会反生改变,相当于缓存在本地;发生改变的时候,computed对应数据的函数也会发生改变;
watch：watch比较适合对状态的监控，比如监控页面一个变量的值改变，需要进行什么操作，而不只是简单的返回一个值。
Q3：vue 常用的生命周期，各周期都做了什么。
A：
beforeCreate:
组件实例被创建，对 data 进行双向绑定，初始化方法；
created :
组件实例创建完成，属性已绑定，dom 还未生成。将模板编译成函数；运行 render 方法返回一个 vnode 对象（虚拟dom）；
beforeMount:
此时 el 还未对数据进行渲染；
mounted:
el 被新建的 vm.$el替换，并挂载到实例上；
beforeUpdate:
数据更新时调用，新 dom 渲染之前。这里适合在更新前访问现有的 dom；
Updated:
数据更新导致虚拟 dom 重新渲染；
beforeDestory:
实例销毁之前，实例仍然完全可用；
destoryed：
vue 实例销毁后调用，实例指示的所有东西都会解绑定，事件监听也会被移除，子实例也会被销毁；
Q4：vue 组件间传值。
A：
- 通过 prop 和 $emit 方法在父子级组件间进行传值；
- 通过 eventBus 进行组件间传值；
- 使用 Vuex；
- 通过 $ref 获取组件实例，调用该组件方法时，使用参数传值；
- 使用作用域插槽；
Q5：原生 Javascript 实现简单的 vue 双向数据绑定。
A：实现方式，利用 Object.defineProperty 或 ES6 的 proxy 实现。前者兼容性更好。
- Object.defineProperty：
<body>
<input id="input" type="text">
<p id="output"></p>
</body>
<script>
var data = {}
Object.defineProperty(data, 'words', {
set: function(newval) {
document.getElementById('input').value = newval
document.getElementById('output').innerHTML = newval
}
});
document.addEventListener('keyup', function(e) {
data.words = e.target.value
})
</script>
Q6: 关于服务端渲染
A：服务器端渲染（SSR），基于 react 的渲染框架 next.js 以及基于 vue 的 nuxt.js。SSR 对于首屏加载时间的优化很明显，同时还可以方便的进行 SEO （google 不需要）。
其他：
Q1：网页优化。
A：这就是个坑~说不完.....看这里https://segmentfault.com/a/1190000011554027
Q2：websocket 是什么。
A：类似一个即时通讯的效果，正常 ajax 需要我们发送请求，后台才会返回数据。websocket 是一次连接之后，如果不去断开，连接不会中断。当服务器数据发生变化时，后台会向前台发送数据。常用的 socket.io 是一个封装了 Websocket、基于 Node 的 JavaScript 框架，包含 client 的 JavaScript 和 server 的 Node。
详细介绍：https://zhuanlan.zhihu.com/p/23467317
Q3：Cookie、localStorage、sessionStorage 的区别
A：
cookie 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效,存放数据大小一般4K左右，而sessionStorage与localStorage大小在5兆左右，在客户端生成，localStorage除非被清除，否则会永久保存，sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除，cookie在与服务器端通信每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题,而sessionStorage与localStorage仅在客户端（即浏览器）中保存，不参与和服务器的通信。
参考：http://jerryzou.com/posts/cookie-and-web-storage/
Q4：打开网页浏览器都做了什么
A：使用 html 创建 dom，使用 css 创建 css 对象模型，基于这两者执行脚本（scripts）。合并 dom 和 css 对象模型形成渲染树，使用渲染书布局所有元素。然后渲染所有元素。
Q5：webpack url-loader 和 file-loader 区别
A：file-loader 解析项目中 url 引入，根据配置将图片拷贝到相应的路径；再根据配置，修改打包后文件的引用路径，使其指向正确的文件。url-loader 简单的说，他封装了 file-loader，但不依赖 file-loader。url-loader 的工作分两种：1）文件小于 limit 的值， 将其转为 DataURL。相当于把图片翻译成字符串打包到文件中，但图片较大会影响性能；2）大于 limit url-loader 会调用 file-loader 进行处理。
网友评论