先说下背景吧,本人工作经验两年,在一家携程注资的OTA公司工作,所以用的空号,防止被同事认出来。。。看了电视上的凌空SOHO大厦,确实很壮观,就萌生了去上海看看的想法
所以我就投了简历,很快,中午投递出去,下午就接到了HR的电话,约了今天面试,上海下着大雨,真的是大都市,走在路上,感觉自己真的很渺小。
到了携程大楼,先是HR给了张表,填了一堆,画了个树,我无耻的画了一张前端图谱,不过后来发现也没人看这东西。
笔试
首先上来,是40分钟的笔试。
题目一
<div id="d">
<div id = "a"></div>
<div id = "b"></div>
<div id = "c"></div>
</div>
<script>
var a = [document.getElementById('a'),document.getElementById('b'),document.getElementById('c')];
var b = [document.getElementById('d').getElementsByTagName('div')];
问a 和 b 的区别。
</script>
说真的,是出于紧张呢还是咋地,我真就愣生生没看出来,我还在想,返回都是数组, 是不是哪个打出来的是个标签,然后不能继续使用它下面的方法了呢。。。<b>卒</b>。
实际上真的就是b多加了一个[]
,造成了一个二维数组,tagName
本来就返回一个数组啊
题目二 - 数组去重
请手打一个数组去重的方法,题目是[1,2,3,2].distinct() = [1,2,3]。
这里我用了hash的方法去的重
Array.prototype.distinct = Array.prototype.distinct || function(){
var len = this.length,
i = 0,
hash = {},
myArr = [];
for(; i < len; i ++){
if(!hash[this[i]]){
hash[this[i]] = true;
myArr.push(this[i])
}
}
return myArr;
}
后来面试的时候,面试官说我这 方法不好,用不着hash,我不知道他是不是想说indexOf
,但是他也没告诉我具体的方案- -
题目三,考察闭包
function mo(){
var x = 0;
return function(){
console.log(++x)
}
}
var a = mo();
var b = mo();
a();
a();
b();
答案是1,2,1。这个没啥a再次执行的时候没有走mo()函数,直接走的内部函数,保存了外层的x变量给自己用。
题目四
var p = [];
var A = new Function();
A.prototype = p;
var a = new A;
a.push(1);
console.log(a.length);
console.log(p.length);
这题我写的undefined,0。回家输出发现是1,0。不理解的是a在new 完后真的就给了一个Array 对象。具体还要去研究一下
更新此题,当我看明白了之后,我只能佩服出题人啊,先来逐句解析。
-
本题考查了一个重要的知识点,那就是new操作符具体干了什么
其实我是知道的,但是仅仅是知道,真的看到了,却又没仔细去想,一个简单的new的过程就是var obj = {};obj._proto_ = A.prototype;A.apply(obj);
,明白的瞬间就明白了,a new 出来后就不是一个对象了,是数组对象了,所以拥有了push方法,没有报错,顺便一提的是new 如果在继承对象是没有参数的情况下,是可以不加后面的括号的,编译器会自动替你加上的
题目五,数组降维
想到这题,我写了一个自以为不错的解法,结果基本功不熟练,没反应过来join()会自动添加逗号,其实不是没反应过来,还是平时依赖控制台次数多了。。。控制台看到了问题会立马改,纸上就不是这样了。
```
function fn(arr){
return Array.from(arr.join());
}
```
23333333,一堆逗号啊掉数组里了。
function fn(arr){ var tempArr = Array.from(arr.join('-')); for(var i = 0;i<tempArr.length;i++){ if(isNaN(tempArr[i])){ tempArr.splice(i,1) } } return tempArr; }
这样就可以了,真是后悔莫及,不过我又写了第二种方法,再一次暴露了依赖控制台的毛病,不是不会,不是没思路,就是写错。。。
function fn(arr){
var myArr = [];
var fn2 = function(arr2){
for(var i = 0;i<arr2.length;i++){
//说真的,这个我真是懵逼了当时
//我就在想,什么是数组具备的而数字不具备的。
//所以思维在紧张的情况下真的会被锁死
//于是我神奇的用了'sort' in arr2[i] 来替代下面的条件.
//虽然控制台直接敲xx in 啥的可以,但是会报错,我也不明白是咋回事。这个下面说
if(Array.isArray(arr2[i])){
// fn2.apply(null,arr2[i]);
//我开始写的apply,因为arr2[i]是一个数组,但是没反应过来的是
//arr2[i]对于函数来说,就是一个单独的参数[],所以应该用call
fn2.call(null,arr2[i])
}
else{
myArr.push(arr2[i]);
}
}
}
fn2(arr);
return myArr;
}
fn([1,2,3,[4,5,[6,7]]]);
上面的'sort' in xx我在浏览器上测试
面试
一面面了大概1个小时40分钟的样子,后来有别人预定了会议室,要开会,不然可能还要再面下去。。。
终于有时间更新了,这几天还要驾校重车,还要加班,好累。
没有顺序
函数声明和函数表达式有什么区别
答:如果是使用的函数表达式,那么函数调用就不能在表达式之前,如果是函数声明,由于在全局执行上下文的执行创建阶段时,函数声明会提升到上面,所以是可以在函数声明之前调用函数的。函数声明既然会提升,优先级是什么,和var比呢
答:函数声明比var高,如果这个时候console.log(a);function a(){};var a=1;
,不管var a = 1
写在函数前面还是后面,都只会输出函数。因为var a初始化为undefined,遇到同名的会被忽略。函数声明的提升为什么会比var高,编译器干了什么事情
答:不知道,猜测编译器里定义的时候就是这么定义的吧。 - -es6 装饰器用过没,是干什么用的(应该是es7的,反正我也没答出来,答出来肯定还继续深的问)
答:没用过,不会es6中的扩展运算符...的实现原理
答:我不会,但是我知道扩展运算符的用法,反正都讲出来了。es6中的解构中的...和上面的区别
答:说真的,我也不知道啥区别,不是一样用吗?[...org,name] = [1,2,3,4] 这样的话,org里是个啥
答:开始问的放后面是啥,我想了半天,没敢说,我说难道后面的就没抓到,全被org抓走了?其实不是,直接报错了,...是rest的意思,既然是rest,那就只能放在最后啊
更新说明我还不会用,区别应该是问的es7中的解构。原理就是es6直接采用for of,也就是说,所有总有迭代器的对象都能使用扩展运算符,在es6里说不能放前面的,但是在es7里如果用于对象是可以放前面的。懂了这个,上面几题就都该会了
-
for of 和for in区别
答:for in 是键值对形式,for of 是输出value形式,然后for of只要是配置了迭代器,都能遍历。 -
this的指向问题
答:这个正常的都说了 -
箭头函数中的this
答:这里说的不好,我只说了用了箭头函数的话,this就被传进来了。就不需要绑定进来了。
箭头函数中的this默认指向在定义它时,它所处的对象,而不是执行时的对象, 定义它的时候,可能环境是window
- 什么是闭包(这里答的不太好,虽然都会用啊处理的,我用类似如下代码举例,貌似面试官并不满意...)
function aa(){
var a = 1;
return function bb(){
console.log(a);
}
}
aa()()
-
什么是作用域
答:在进入脚本标签编译阶段的时候就定义了各类作用域,外面的变量就在全局作用域,函数内部的就在函数的作用域里,作用域外的函数不能访问某个作用域里面的东西 -
什么是作用域链
答:在各级执行上下文创建阶段的时候,就确定了各级作用域,串起来就是作用域链了。比如闭包的时候外部函数出栈之后,内部函数还保留了对外部函数某个变量的引用,就是通过作用域链找过去的 -
什么是原型
答:prototype,好像我也说不出啥,就举个函数的写原型的例子。 - js有哪些设计模式(我说有工厂模式,构造函数模式,原型模式,面试官说这是面向对象,不过我觉得有啥区别,面向对象编程不久是要用这些设计模式吗)
- 这些模式都是咋写的,我手写给他看
-
为什么要用原型
答:共享原型里的东西给下属继承的对象,这样在new的时候不用重新创建,节省内存空间 -
eval的缺点
答:我说了用法,就是可执行string,然后缺点没说,没怎么研究,只是看了一眼用法类型的 -
with的缺点
答:没用过,在网上看到过,说不要用,然后我就不用,应该会导致性能问题吧 -
在严格模式下能不能用eval
答:不能 -
es5和es6严格模式的区别
答:不知道 -
什么是柯里化,举React和Redux的例子
答:解释了柯里化是啥,举不出来例子,没看过源码啊或者是对react了解的不够多 -
什么是纯函数
答:不产生任何交互的函数?答的不好,我说reducer应该就是个纯函数,猜对了而已。
纯函数是指 不依赖于且不改变它作用域之外的变量状态 的函数纯函数的概念链接
- 页面和服务器之间的交互有哪几种(ajax,websocket,不满意)
-
ajax的Type有几种(我只知道post和get)
这题我可能没有理解... - get和post的区别(我说的表象区别,url参数,安全性,大小限制,面试官不是很满意)
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
-
HTTP请求头上都有什么信息
答:UA,HOST,其他的我也没说,就说还有几个没注意.. -
如何统计页面上的按钮被点击了多少次
答:和服务器交互?反正也只能存服务器啊... -
单页面应用和多页面应用的区别
答:一个跳页面是内部的,一个跳页面是href整页刷新的。 -
哪种更容易被SEO到,优化SEO
答:猜测是多页面,页面多呗...优化的不知道
- cookie和localstorage区别(我说大小,安全,有效期,貌似又不是很满意)
-
JSON.stringify(大OBJ)的时候会有什么问题
答:性能损失。 -
script标签顺序怎么控制,涉及到依赖必须要有先后
答:在HTML层就控制顺序呗,显然不是他要的答案 -
除了直接引用script标签,如果不用import require这样的东西,怎么调用其它页面的js
答:真不知道,a.js里除了用script标签引用b.js -
import和require的区别
答:import是静态加载,一旦你import,内容就进来了,require是动态加载,用的时候才加载,后面又问了一些,后面就不会了 -
函数节流怎么实现
答:简单是settimeout,时间超出就执行,没超出再进来的话就直接clear掉。面试官觉得太简单了。 -
canvas 绘制原理
答:不知道 -
如何使用canvas拖动一个小球撞击另外一个小球,然后另外一个小球被撞击出去
答:canvas一年半没用铁定不记得了(总共也就2年经验),但是说了一下实现思路 -
canvas 里有很多小球时如何优化性能
答:不知道 - 微信小程序跳转页面最多能跳转多少层 不会
- RN中listview 的key值的实现原理 不会
然后还问了一些关于项目上的问题,以及如何设计一个搜索组件,需要考虑到哪些问题。
应该就这些,没想起来的想起来再补充,感觉答的不好,很多都不记得了。
三分之一的题目 比如实现原理啊,缺点啊,为什么啊,会有什么问题啊,此类问题要么不会,要么答的不好
总共就这么多,我要继续巩固基础了~!!!!!!!