爱奇艺
一面:考察基本技能情况。FIS打包原理,webpack模块打包,weex和react native等混合开发方式,考察关于内嵌的APP h5考察较多。平时对GitHub社区的贡献情况。在koa外面封装一层akb框架是为了什么;最后一题用vue实现轮播图。面试时间大概一个多小时。
二面:二面面试官是阿里过来的,问的细节很细。主要是问答题目,LS缓存技术使用,神马搜索用来缓存页面片段,和UC有较多技术合作;建议多在GitHub上贡献代码,提PR,把平时的项目放在开源社区,而不是罗列简单的网站;数组去重;ES6常用功能并讲讲怎么使用的(let,const,箭头函数,array,promise,module,ascny/await等)。问了很多平时会用到的技术,掌握熟悉因而随机应变;面试时间约一个小时。
三面:技术经理。问了离职的原因和对自己的未来职业规划。聊了大约20分钟。
四面:影业部门VP。主要了解候选人的情况,走个过场。大约15分钟。
五面:hr面试,聊了下现在的具体情况。离职原因:1.部门技术封闭 2.晋升机制排队 3.薪资。福利:14薪,按照季度发。
快手
一面面试题
1.
1 alert(typeof(null)); 2 alert(typeof(undefined)); 3 alert(typeof(NaN));
// object
// undefined
// number
2.
1 var str=”12345f”; 2 alert(str+1); 3 alert(1+2+’3’+4);
// "12345f1"
// 334 string
3.
1 var x =1 ;y=0;z=0; 2 var add = function(x){ 3 return x=x+1; 4 } 5 y=add(x); 6 function add(x){ 7 return x=x+2; 8 } 9 z=add(x); 10 console.log(x); 11 console.log(y); 12 console.log(z);
4.
1 for(var i = 0; i < 3;i++){ 2 (function(){ 3 setTimeout(function(){ 4 console.log(i); 5 },0) 6 })() 7 }
// 3 输出三次
1 for(var i = 0; i < 10; i++) { 2 (function(e) { 3 setTimeout(function() { 4 console.log(e); 5 }, 1000); 6 })(i); 7 }
// 0,1,2,3,4,5,6,7,8,9 正确
5.三种以上方法实现数组去重
function dedupe(array){ return Array.from(new Set(array)); } dedupe([1,1,2,3]) //[1,2,3]
let arr = [1,2,3,3]; let resultarr = [...new Set(arr)]; console.log(resultarr); //[1,2,3]
Array.prototype.distinct = function (){ var arr = this, ret = []; arr.forEach(function(e, i, array) { if (array.indexOf(e) === i) { ret.push(e); } }); return ret; }; var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,]; var b = a.distinct(); console.log(b.toString()); //1,2,3,4,5,6,56
Array.prototype.distinct = function (){ var arr = this, result = [], len = arr.length; arr.forEach(function(v, i ,arr){ //这里利用map,filter方法也可以实现 var bool = arr.indexOf(v,i+1); //从传入参数的下一个索引值开始寻找是否存在重复 if(bool === -1){ result.push(v); } }) return result; }; var a = [1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,3,3,3,3,3,3,3,2,3,3,2,2,1,23,1,23,2,3,2,3,2,3]; var b = a.distinct(); console.log(b.toString()); //1,23,2,3
Array.prototype.distinct = function (){ var arr = this, i, obj = {}, result = [], len = arr.length; for(i = 0; i< arr.length; i++){ if(!obj[arr[i]]){ //如果能查找到,证明数组元素重复了 obj[arr[i]] = 1; result.push(arr[i]); } } return result; }; var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,]; var b = a.distinct(); console.log(b.toString()); //1,2,3,4,5,6,56
6.console.log({}==!{});
// false
7.Debounce 和 Throttle 的原理是什么?并用代码实现
/**
*
* @param func {Function} 实际要执行的函数
* @param wait {Number} 延迟时间,单位是毫秒(ms)
* @param wait {Boolean} 一定时间内,先执行/后执行
*
* @return {Function} 返回一个“去抖”了的函数
*/
var debounce = function(func, wait, immediate) {
// 设置定时器
let timeout;
return (...args) => {
const later = () => {
timeout = null;
if (!immediate) func.apply(this, args);
};
const callNow = immediate && !timeout;
// 进入先清除定时器
claerTimeout(timeout);
// 重新设置一个定时器,如果没有连续触发函数,就执行定时器,也是就是核心原理
timeout = setTimeout(later, wait);
if (callNow)
func.apply(this, args);
}
};
window.addEventListener('resize',debounce(function(){ console.log(1); },1000,true));
/** * * @param fn {Function} 实际要执行的函数 * @param delay {Number} 执行间隔,单位是毫秒(ms) * * @return {Function} 返回一个“节流”函数 */ function throttle(fn, threshhold) { // 记录上次执行的时间 var last // 定时器 var timer // 默认间隔为 250ms threshhold || (threshhold = 250) // 返回的函数,每过 threshhold 毫秒就执行一次 fn 函数 return function () { // 保存函数调用时的上下文和参数,传递给 fn var context = this var args = arguments var now = +new Date() // 如果距离上次执行 fn 函数的时间小于 threshhold,那么就放弃 // 执行 fn,并重新计时 if (last && now < last + threshhold) { clearTimeout(timer) // 保证在当前时间区间结束后,再执行一次 fn timer = setTimeout(function () { last = now fn.apply(context, args) }, threshhold) // 在时间区间的最开始和到达指定间隔的时候执行一次 fn } else { last = now fn.apply(context, args) } } }
8.正则表达式限制文本框只能输入数字和小数点(二位小数点)
obj.value = obj.value.replace(/[^d.]/g,''); //必须保证第一个为数字而不是. obj.value = obj.value.replace(/^./g,''); //保证只有出现一个.而没有多个. obj.value = obj.value.replace(/.{2,}/g,'.');
9.纯css实现单行居中,两行居左,超过两行省略(dom结构自定)
<h2><p>单行居中,多行居左</p></h2> p { display: inline-block; text-align: left; display: -webkit-box; // 设置display,将对象作为弹性伸缩盒子模型显示 -webkit-line-clamp: 2; // 限制在一个块元素显示的文本的行数 -webkit-box-orient: vertical; // 规定框的子元素应该被水平或垂直排列 } h2{ text-align: center; }
// 利用inline-block
元素可以被父级text-align:center
居中的特性
// -webkit-line-clamp
10.下面这个图形,只使用一个标签,可以有多少种实现方式:
- border-left
- border-image
- box-shadow 内外阴影box-shadow:-5px 0px 0 0 deeppink;
- background-image
- 伪类
- outline:5px solid deeppink;
- 渐变
11.active-class是哪个组件的属性?嵌套路由怎么定义?
router-Link;
{ path: '/me', name: 'Me', component: Me, children: [ { path: 'collection', name: 'Collection', component: Collection }, { path: 'trace', name: 'Trace', component: Trace } ] }
12.说出至少4种vue当中的指令和它的用法?
v-model
和 v-show,v-html,v-text,v-on,v-bind,v-for,v-if
13.vuex有哪几种属性?
state => 基本数据 getters => 从基本数据派生的数据 mutations => 提交更改数据的方法,同步! actions => 像一个装饰器,包裹mutations,使之可以异步。 modules => 模块化Vuex
快手二面
vue组件的依赖管理是如何实现的。
双向绑定的定义和实现原理。
vue指令,如何写自定义指令。
node的require的原理,资源如何引入的,node的单线程和多进程的关系。
vue的生命周期。
如何实现多个页面渲染时间的统计(pv和渲染耗时)
算出一个数组元素最后一次出现的位置,时间复杂度和空间复杂度。
如何实现一个暂停函数,1分钟后再执行后续的逻辑,不能用定时器。
面试官还真的是要看脸缘~~~
阿里云(待定)
一面:谈谈自己使用的项目,讲解了很长时间的项目;具体讲解URL访问的整体流程(访问流程,DOM和render进程等);事件机制;SSR。
搜狗
一面:一面面试官是搜索VP,聊了百度大搜的整体的技术架构,还是很愉快的,约一个小时。
二面:二面是HR面,面的比较随意,约半个小时。
三面:三面试技术小组长,约一个小时。还算凑合。
挂了的原因可能是要的太多,可能是学校比较渣, 非985,挂的莫名其妙。
美团外卖(GG)
一面:实现Vue的事件通信机制;实现Vue的双向绑定;当用户频繁点击页面出现弹窗的时候如何优化性能(各种刁钻角度提问)。代码里如何鉴别是ajax请求(有方法判断我吃翔)。在电脑上实践代码,面试官口述表达偶尔不清,意思理解错误。Done。
美团新零售(待定,对hr一脸懵逼)
一面:问了问项目经验和相关技术。三个常见题目(1.找到数组中最后一次出现的index 2.实现一个url获取参数函数,需要对字符串,数字,URL,null等做单独处理 3.从左到右,从上到下元素递增的二维数组,找出指定元素,如何更快)。
映客直播(23k,放弃)
一面:四页面试题,基本都是常规题目,讲了讲百度的检索机制,题目基本也过了一遍。感觉良好
二面:面试官特别装逼,是映客的前端负责人,主要问的几个常见的问题(vue的双向绑定原理;数组如何使用不会更新视图;继承里面的各种__proto__和构造函数,对原型链的继承要很熟悉;webpack/fis的实现原理,以及常见的配置项。)
三面: 整体技术负责人,谈了谈面包,感觉一般般。
hr: HR给人感觉很强势,不想给很高的价。不推荐映客直播!!!
滴滴外卖(GG)
一面:CSS选择器权重,具体情境很特殊;变量提升和作用域,也是各种复杂嵌套;LeetCode算法题三道。Done。