校招基本告一段落，总结一下天才老王1993

2017-10-12 16:44:00

399 166

你知道Flex项目也可以成为Flex容器吗？是的，是可能的！

你想嵌套多深就嵌套多深（不过理智的做法是保持一个合理的水平）。

2:总结flexbox

3：规划布局

4：CSS选择器

5：现代各种布局

6：Hexo

7:react+redux书

7-17：

1：e.target.parentNode.remove();成功，查询一下JS原生的remove方法

2：复习JSDOM的原生操作方法，比如innerHTML(),insertBefore()等

3：技术之瞳

4：jquery的each,map等方法

5：数组和对象的深浅拷贝

7-18

1:MD5这种JS文件无法直接在index.js里面载入，需要用webpack加入的原因和如何加入？

4：screenX,pageX,client,offset…

7：js怎么编写鼠标的右击事件

7.24

1.checked事件的变化记住账号1

2:backbone路由的封装怎么做的

7.25

1.JS原生的onclick事件写法

2:左右添加

3接口不重复问题

7.26

一面

举一个例子，有一个大型的图库网站，为网页中的所有图片添加某些行为，例如单机图片后让他隐藏或显示。如果使用window.onload方法来处理，那么用户必须等到每一副图片都加载完毕后，才可以进行操作。如果使用jquery中的$(document).ready()方法来进行设置，只要DOM就绪就可以操作了，不需要等待所有图片加载完毕。显然，吧网页解析为DOM树的速度比吧网页中的所有关联文件加载完毕的素的快很多。

另外，需要注意一点，由于在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的HTML下载完毕，并且已经即诶下为DOM树了，但很有可能图片还未加载完毕，所有例如图片的高度和宽度这样的属性此时比一定有效。要解决这个问题，可以使用Jquery中另一个关于页面加载的方法-----load（）方法。load（）方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象，则会在所有内容（包括窗口。框架，对象和图像等）加载完毕后触发，如果处理函数绑定在元素上，则会在元素的被容加载完毕后加载。jquery代码如下：

$(window).load(function(){

//代码

});

等价于javascript中的以下代码：

window.onload=function(){

}

2、form表单当前页面无刷新提交iframe

3、setTimeout和setInterval区别，如何互相实现？

参考资料：javascript高级程序设计第三版：重复定时器

4、如何避免多重回调—promise，promise简单描述一下，如何在外部进行resolve()

官方文档

通俗解释

感性理解

我们回来总结一下，异步回调的传统做法有四个问题：

1.嵌套层次很深，难以维护

2.代码难以复用

3.堆栈被破坏，无法正常检索，也无法正常使用try/catch/throw

4.多个异步计算同时进行，无法预期完成顺序，必须借助外层作用域的变量，有

误操作风险

Promise保留异步在无阻塞上的优势，又能让我们写代码写的更舒服

5、margin坍塌？水平方向会不会坍塌

6、伪类和伪元素区别

简单来说，伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。

8、数组去重

1.Array.prototype.unique1=function()2.{3.varn=[];//一个新的临时数组4.for(vari=0;i

flex{1}flex{1}flex{1}

二面

1、说下对this的理解

2、实现bind函数

3、数组和链表区别，分别适合什么数据结构

数组的特点是快速随机访问链表的特点是快速插入删除

4、对mvc的理解

5、描述一个印象最深的项目，在其中担任的角色，解决什么问题

服务器不理解请求的语法。

服务器拒绝请求。

1xx（临时响应）2xx（成功）3xx（重定向）4xx（请求错误）5xx（服务器错误）

7、描述下二分查找

8、在函数中使用array.prototype.slice.call(arguments,1);的作用？

arguments是每个函数在运行的时候自动获得的一个近似数组的对象（传入函数的参数从0开始按数字排列，而且有length）。比如当你func('a','b','c')的时候，func里面获得的arguments[0]是'a'，arguments[1]是'b'，依次类推。但问题在于这个arguments对象其实并不是Array，所以没有slice方法。Array.prototype.slice.call()可以间接对其实现slice的效果，而且返回的结果是真正的Array。

三面

2、如何评价bat

3、描述下在实习中做过的一个项目，解决了什么问题，在其中担任了什么角色？这个过程存在什么问题，有什么值得改进的地方

4、如何看待加班，如果有个项目需要连续一个月加班，你怎么看

5、遇到的压力最大的一件事是什么？如何解决的

6、平时有什么爱好

7、自身有待改进的地方

8、n长的数组放入n-1个数，不能重复，找出那个缺失的数

思路：数组之和减去自然数之和，结果就是那个重复的。

等差数列求和公式

9、手里有什么offer

10、你对于第一份工作最看重的三个方面是什么

11、如何评价现在的前端

12、有什么问题

7-28

1：JS异步开发教程

7-31

1：自己的产品

3：书总结一下技术之瞳/react/JS高级/你不知道的JS

4：

1、手写jsonp的实现

2、手写链表倒数第K个查找

cookie在请求头，url似乎在请求行？

4、原型链的解释

原型链是作为实现继承的主要方法，基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

5、对闭包的理解，实现一个暴露内部变量，而且外部可以访问修改的函数（get和set，闭包实现）

自己写得set的例子

varf1=function(x){

vara=1;

functionf2(b){

a=a+b;

returna

returnf2

varx=f1();

varxx=x(2);

闭包就是能够读取其他函数内部变量的函数

7、{}=={}[]==[]null==undefined

{}=={}false

[]==[]false

null==undefinedtrue

null==nulltrue

undefined==undefinedtrue

解答

null表示一个值被定义了，定义为“空值”；undefined表示根本不存在定义。

所以设置一个值为null是合理的，如objA.valueA=null;但设置一个值为undefined是不合理的

6、基本的数据类型

ECMAScript中有5中简单数据类型（也称为基本数据类型）:Undefined、Null、Boolean、Number和String。还有1中复杂的数据类型————Object，Object本质上是由一组无序的名值对组成的。Array，Date，Function+基本包装类Number,String,Boolean均归于Object

7、基本的两列自适应布局

发现有了position的属性，不再与正常文档流中的元素互相影响

.sub,.extra{

position:absolute;

top:0;

width:200px;

.sub{

left:0;

background-color:yellow;

.extra{

right:0;

background-color:black;

.main{

background-color:blue;

margin:0200px;

left

main

right

11、OSI模型，HTTP,TCP,UDP分别在哪些层

OSI分层（7层）：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层

物理层与数据链路层为上面的协议族提供服务我们一般很少接触。IP在网络层，TCP/UDP在传输层，应用层一般是我们经常接触的东西HTTP在应用层ARP（地址解析协议）在链路层

12、网站性能优化

CDN是什么？使用CDN有什么优势？

varquicksort=function(arr){

if(arr.length<=1){

returnarr

varnum=Math.floor(arr.length/2);

varitem=arr.splice(num,1);

vararrleft=[];

vararrright=[];

for(vari=0;i

if(arr[i]

arrleft.push(arr[i]);

else{

arrright.push(arr[i]);

returnquicksort(arrleft).concat(item[0],quicksort(arrright));

console.log(quicksort([1,2,3,5,4]));

注意一下i

一面问的基础知识很多，但是基本都答出来了，面完后有些蒙逼。

二面是一位女面试官，给的压力很大，人比较严肃，不苟言笑，后来听说二面是压力面，二面问了50分钟。

2、在jquery方法和原型上面添加方法的区别和实现（$.extend,$.fn.extend），以及jquery对象的实现（returnnewjQuery.fn.init）

为jQuery类添加类方法，可以理解为添加静态方法

对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

3、手写一个递归函数（考察arguments.callee，以及arguments的解释）

//arguments.callee是一个指向正在执行函数的指针

functionfactorial(num)

{if(num<=1){return1;}

else{returnnum*arguments.callee(num-1);}}

在一个函数调用另一个函数时，被调用函数会自动生成一个caller属性，指向调用它的函数对象。如果该函数当前未被调用，或并非被其他函数调用，则caller为null。

当函数被调用时，它的arguments.callee对象就会指向自身，也就是一个对自己的引用。由于arguments在函数被调用时才有效，因此arguments.callee在函数未调用时是不存在的（即null.callee），且解引用它会产生异常。

4、对前端路由的理解？前后端路由的区别？

1，什么是前端路由？路由是根据不同的url地址展示不同的内容或页面前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据url的不同返回不同的页面实现的。2，什么时候使用前端路由？在单页面应用，大部分页面结构不变，只改变部分内容的使用

3，后端路由：

PhysicalDataLinkNetworkTransportSessionPresentationApplication

5、介绍一下webpack和gulp，以及项目中具体的使用

6、你对es6的了解

7、解释一下vue和react，以及异同点

学习一下vue

8、前后端分离的意义以及对前端工程化的理解

组件化：组件化实际上是一种按照模板(HTML)+样式(CSS)+逻辑(JS)三位一体的形式对面向对象的进一步抽象

规范化：规范化其实是工程化中很重要的一个部分，项目初期规范制定的好坏会直接影响到后期的开发质量。

我能想到的有以下一些内容：

目录结构的制定

编码规范

前后端接口规范

文档规范

组件管理

Git分支管理

Commit描述规范

定期CodeReview

视觉图标规范

...

自动化：我认为，前端工程化的很多脏活累活都应该交给自动化工具来完成。

###图标合并

不要再用PS拼雪碧图了，统一走Webpack吧；

不要再用Icomoon了，统一走Webpack吧。

###持续集成

###自动化构建

###自动化部署

###自动化测试

10、使用css实现一个三角形

#triangle-up{width:0;height:0;border-left:50pxsolidtransparent;border-right:50pxsolidtransparent;border-bottom:100pxsolidred;}

宽度一定要为0，left,right是三角形的中心往左往右长度；bottom是三角形的高；

10.5CSS3D效果？

13、解释一下call函数和apply函数的作用，以及用法

1、介绍一下自己

2、你说自己抗压能力强，具体表现在哪里？

3、对前端前景的展望，以后前端会怎么发展

4、手写第一次面试没有写出来的链表问题，要求用es6写

5、平时是怎么学技术的？

7、接下来有什么计划？这个学期和下个学期的计划是？

8、项目中遇到的难点，或者你学习路上的难点

9、你是通过什么方法和途径来学习前端的

12、你在团队中更倾向于什么角色？

13、对java的理解

14、介绍node.js，并且介绍你用它做的项目

百度外卖

1、介绍自己

2、手写一个js的深克隆

3、for函数里面setTimeout异步问题

4、归并排序

1、实现两个数组的排序合并，我一开始先合并再排序，他不乐意，然后我用了类似插入排序的方法。

2、手写一个原生ajax

functionstate_Change()

{

//这里应该是函数具体的逻辑

else

alert("ProblemretrievingXMLdata");

6、手写实现jquery里面的insertAfter

结合nextSibling和insertBefore来实现

9、AMD和CMD，commonJS的区别

AMD依赖前置；CMD就近依赖（牺牲性能来换取更多开发便利）；

NodeJS是CommonJS规范的实现；CommonJS的这个Modules规范设计之初是为了server端设计的，它是一个同步的模式。但是这种模式并不适合于浏览器端，大家设想一下如果浏览器同步模式一个一个加载模块，那么打开将会变得非常的慢，所以AMD就是为了这个诞生，它最大的特点就是可以异步的方式加载模块。(CMD也是异步的)那么RequrieJS其实就是AMD现在用的最广泛，最流行的实现。

8-1

8-2

不讲这个问题有没有意义，在我看来的确没有意义，但是这个的根源其实不是在于这些问题是否有意义。而在于

你能够控制面试官问出你擅长回答的问题？

作为一名面试官，我面试过很多人了也算，首先，挑选简历的时候我就会挑选我能问出问题的简历，如果一个简历看了之后我都问不出什么针对性的问题，只能随口问一个“闭包怎么写”这样的问题的话，这个简历也没什么面试的必要性了。所以第一关就是，简历有可以让面试官针对性提问的内容，有亮眼的内容，有思考有总结，这样我们就可以愉快的进行一场互相交流的面试了，而不是给你一张卷子，你挨个写代码写算法。

这些表达都是从你想呈现的自己拥有的优秀特质作为起点来总结的，

平常多思考下什么样的工程师特质是大家希望看到的，

这些是你要做的，是你要总结的，就是你下次面试的时候要表达的

如果你的简历和你的自我介绍都没什么说头，那不好意思，为了应付一下，我有个面试题列表，我只能从里面随便挑一条出来问，都是很形式化的题目，其实你回答对了也没卵用，只是凑合一下场面而已啦，毕竟这些问题随便google一下就知道掌握了。

说的都是大实话，不管是做面试官，还是去面试，想清楚自己要表达出什么东西来，想清楚自己想要得到什么信息，都一样，凡事就怕用心！

8-3

2：浏览器缓存机制

3：图片轮播

锋利的JQUERY

C:\Users\Administrator\Downloads\[jb51.net]fengli_jquery\实例下载\04第四章\第四章例子\10-实例

3.5Jquery的show()很容易就可以有从上往下的渐变效果，怎么做到的？

show()使用的css3动画效果从上往下需要高度，Jquery算高度的方法还不知道

4：React拖拽

5.你知道什么是CSS预处理么

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

通俗的说，“CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在CSS中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。结构清晰，便于扩展，轻松实现多重继承

6.关于浮动的原理和工作方式，你可以描述一下么

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

7.浮动会产生什么影响呢，要怎么处理？

父元素的高度无法被撑开，影响与父元素同级的元素与浮动元素同级的非浮动元素（内联元素）会跟随其后若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法：使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

.clearfix{display:inline-block;}/*forIE/Mac*/

8.你了解哪些选择器？以及这些选择器的使用场景？

9.你知道它们的权重怎么计算么

12.你从jQuery学到了什么？（跳坑了竟说自己看过源代码...然后不会说了..)

18.你知道attribute和property的区别么

元素上的属性（包括自定义）都是attribute，但只有id,title,class等同时也是property，attribute就是DOM元素自带的属性，property是这个元素作为对象附加的内容，比如firstChild等

21.淘宝那里的商品项，如图片，滚动到了才加载，你知道怎么实现么

问题19的zhihu回答里面有个LazyLoadImages好像有点类似

8-4

hash属性是一个可读可写的字符串，该字符串是URL的锚部分（从#号开始的部分）。

语法:location.hash=anchorname

如果页面里面有id为nogo的元素，点击这个链接后，锚点机制会作用，页面贴齐这个元素上缘

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

Object('abc')//{0:"a",1:"b",2:"c",length:3,[[PrimitiveValue]]:"abc"}

letarr=[1,2,3];let{0:first,[arr.length-1]:last}=arr;first//1last//3

4:廖雪峰JS

8-7

1：js关于for循环中的闭包问题？

for(vari=0,arr=[];i<=3;i++){arr.push(function(){alert(i)});}arr[0]();//结果不是0arr[1]();//全是4改装后for(vari=0,arr=[];i<=3;i++){arr.push((function(i){returnfunction(){alert(i);}})(i));}使用闭包可以解决了，为什么第一次代码中的i读取的一直是I变量的最后的结果呢那个大神能给分析一下第一段代码的执行的具体步骤呢？

2：为什么需要闭包呢

局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。

特点

占用更多内存

不容易被释放

何时使用

既想反复使用，又想避免全局污染

如何使用

1.定义外层函数，封装被保护的局部变量。2.定义内层函数，执行对外部函数变量的操作。3.外层函数返回内层函数的对象，并且外层函数被调用，结果保存在一个全局的变量中。

3：

vark=(functionfun(x){

if(x>0){

x--;

console.log(x);

}else{

console.log("lala");

return"lala";

fun(x);

})(3)

console.trace(k);

为什么打印结果是undefined

k就是你的fun(3),fun(3)按照你代码，没有显式给出返回值，默认就是返回的undefined。

如果你要做递归的话，应该给里面的fun(x)加上return变成returnfun(x);如此就能让k为lala了。

5：还是真弄一下原生JS和JQUERY然后从作品入手写一个工程

廖雪峰+MDN+JS高级+你不知道的JS+JQUERY

6：廖雪峰

1.字符串：多行字符串,模板字符串

2.对象：

中括号运算符总是能代替点运算符。但点运算符却不一定能全部代替中括号运算符。中括号运算符可以用字符串变量的内容作为属性名。点运算符不能。

vartest={aa:12,bb:34};//或者vartest={};

varcc="acqId"

test[cc]=12;

test["cc"]=13;

console.log(test[cc]);//13

console.log(test[“cc”]);//12

console.log(test[aa]);//报错中括号运算符可以用纯数字为属性名。点运算符不能。中括号运算符可以用js的关键字和保留字作为属性名。点运算符不能。

如果我们要检测xiaoming是否拥有某一属性，可以用in操作符：

'name'inxiaoming;//true

不过要小心，如果in判断一个属性存在，这个属性不一定是xiaoming的，它可能是xiaoming继承得到的：

'toString'inxiaoming;//true

因为toString定义在object对象中，而所有对象最终都会在原型链上指向object，所以xiaoming也拥有toString属性。

要判断一个属性是否是xiaoming自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法：

xiaoming.hasOwnProperty('name');//true

for...in语句用于遍历数组或者对象的属性

8-8

3.ES6新类型Map和Set

初始化Map需要一个二维数组，或者直接初始化一个空Map。Map具有以下方法：

varm=newMap();//空Map

m.set('Adam',67);//添加新的key-value

m.set('Bob',59);

m.has('Adam');//是否存在key'Adam':true

m.get('Adam');//67

m.delete('Adam');//删除key'Adam'

m.get('Adam');//undefined

或

varm=newMap([['Michael',95],['Bob',75],['Tracy',85]]);

不同于object的是JavaScript的对象有个小问题，就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。

Map是一组键值对的结构，具有极快的查找速度。

Set

Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。

要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set：

vars1=newSet();//空Set

vars2=newSet([1,2,3]);//含1,2,3

通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果：

>>>s.add(4)

>>>s

{1,2,3,4}

通过delete(key)方法可以删除元素：

ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。

具有iterable类型的集合可以通过新的for...of循环来遍历。

for...of循环是ES6引入的新的语法

你可能会有疑问，for...of循环和for...in循环有何区别？

for...in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。

当我们手动给Array对象添加了额外的属性后，for...in循环将带来意想不到的意外效果：

for...of循环则完全修复了这些问题，它只循环集合本身的元素：

这就是为什么要引入新的for...of循环。

然而，更好的方式是直接使用iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数。以Array为例：

vara=['A','B','C'];

a.forEach(function(element,index,array){

//element:指向当前元素的值

//index:指向当前索引

//array:指向Array对象本身

alert(element);

Set与Array类似，但Set没有索引，因此回调函数的前两个参数都是元素本身

①作用域

名字空间

全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。

减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如：

//唯一的全局变量MYAPP:

varMYAPP={};

//其他变量:

MYAPP.name='myapp';

MYAPP.version=1.0;

//其他函数:

MYAPP.foo=function(){

return'foo';

};

把自己的代码全部放入唯一的名字空间MYAPP中，会大大减少全局变量冲突的可能。

许多著名的JavaScript库都是这么干的：jQuery，YUI，underscore等等。

②变量

由于var和let申明的是变量，如果要申明一个常量，在ES6之前是不行的，我们通常用全部大写的变量来表示“这是一个常量，不要修改它的值”：

varPI=3.14;

ES6标准引入了新的关键字const来定义常量，const与let都具有块级作用域：

'usestrict';

constPI=3.14;

PI=3;//某些浏览器不报错，但是无效果！

PI;//3.14

⑤对象方法的this

如果以对象的方法形式调用，比如xiaoming.age()，该函数的this指向被调用的对象，也就是xiaoming，这是符合我们预期的。

如果单独调用函数，比如getAge()，此时，该函数的this指向全局对象，也就是window。

坑爹啊！

更坑爹的是，如果这么写：

varfn=xiaoming.age;//先拿到xiaoming的age函数fn();//NaN也是不行的！要保证this指向正确，必须用obj.xxx()的形式调用！

有些时候，喜欢重构的你把方法重构了一下：

varxiaoming={

name:'小明',

birth:1990,

age:function(){

functiongetAgeFromBirth(){

vary=newDate().getFullYear();

returny-this.birth;

returngetAgeFromBirth();

xiaoming.age();//UncaughtTypeError:Cannotreadproperty'birth'ofundefined

结果又报错了！原因是this指针只在age方法的函数内指向xiaoming，在函数内部定义的函数，this又指向undefined了！（在非strict模式下，它重新指向全局对象window！）

修复的办法也不是没有，我们用一个that变量首先捕获this：

varthat=this;//在方法内部一开始就捕获this

returny-that.birth;//用that而不是this

xiaoming.age();//25

用varthat=this;，你就可以放心地在方法内部定义其他函数，而不是把所有语句都堆到一个方法中。

装饰器

利用apply()，我们还可以动态改变函数的行为。

JavaScript的所有对象都是动态的，即使内置的函数，我们也可以重新指向新的函数。

现在假定我们想统计一下代码一共调用了多少次parseInt()，可以把所有的调用都找出来，然后手动加上count+=1，不过这样做太傻了。最佳方案是用我们自己的函数替换掉默认的parseInt()：

varcount=0;

varoldParseInt=parseInt;//保存原函数

window.parseInt=function(){

count+=1;

returnoldParseInt.apply(null,arguments);//调用原函数

//测试:

parseInt('10');

parseInt('20');

parseInt('30');

count;//3

⑥高阶函数（参数里有函数的函数比如array.map）

Array.reduce

如果我们继续改进这个例子，想办法把一个字符串13579先变成Array——[1,3,5,7,9]，再利用reduce()就可以写出一个把字符串转换为Number的函数。

牵扯到的问题是：将字符串变成数字的隐式转换（符号）

vararr=['1','2','3'];

varr;

r=arr.map(parseInt);

[1,NaN,NaN]

由于map()接收的回调函数可以有3个参数：callback(currentValue,index,array)，通常我们仅需要第一个参数，而忽略了传入的后面两个参数。不幸的是，parseInt(string,radix)没有忽略第二个参数，导致实际执行的函数分别是：

parseInt('0',0);//0,按十进制转换

parseInt('1',1);//NaN,没有一进制

parseInt('2',2);//NaN,按二进制转换不允许出现2

可以改为r=arr.map(Number);，因为Number(value)函数仅接收一个参数。

Filter()

Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。

可以用来数组去重

箭头函数对this的影响

this

箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。

回顾前面的例子，由于JavaScript函数对this绑定的错误处理，下面的例子无法得到预期结果：

varobj={

getAge:function(){

varb=this.birth;//1990

varfn=function(){

returnnewDate().getFullYear()-this.birth;//this指向window或undefined

returnfn();

现在，箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj：

varfn=()=>newDate().getFullYear()-this.birth;//this指向obj对象

obj.getAge();//25

如果使用箭头函数，以前的那种hack写法：

varthat=this;

就不再需要了。

由于this在箭头函数中已经按照词法作用域绑定了，所以，用call()或者apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略：

getAge:function(year){

varfn=(y)=>y-this.birth;//this.birth仍是1990

returnfn.call({birth:2000},year);

obj.getAge(2015);//25

Generator

generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。

标准对象

总结一下，有这么几条规则需要遵守：

1.不要使用newNumber()、newBoolean()、newString()创建包装对象；

2.用parseInt()或parseFloat()来转换任意类型到number；

3.用String()来转换任意类型到string，或者直接调用某个对象的toString()方法；

4.通常不必把任意类型转换为boolean再判断，因为可以直接写if(myVar){...}；

5.typeof操作符可以判断出number、boolean、string、function和undefined；

6.判断Array要使用Array.isArray(arr)；

7.判断null请使用myVar===null；

8.判断某个全局变量是否存在用typeofwindow.myVar==='undefined'；

9.函数内部判断某个变量是否存在用typeofmyVar==='undefined'。

10.最后有细心的同学指出，任何对象都有toString()方法吗？null和undefined就没有！确实如此，这两个特殊值要除外，虽然null还伪装成了object类型。

更细心的同学指出，number对象调用toString()报SyntaxError：

123.toString();//SyntaxError

遇到这种情况，要特殊处理一下：

123..toString();//'123',注意是两个点！

(123).toString();//'123'

不要问为什么，这就是JavaScript代码的乐趣！

JSON

序列化

JSON.stringify(xiaoming,null,'');

如果我们还想要精确控制如何序列化小明，可以给xiaoming定义一个toJSON()的方法，直接返回JSON应该序列化的数据

反序列化

拿到一个JSON格式的字符串，我们直接用JSON.parse()把它变成一个JavaScript对象

8-9

使用new关键字调用函数（newClassA(…)）的具体步骤：

1.创建空对象；varobj={};

2.设置新对象的constructor属性为构造函数的名称，设置新对象的__proto__属性指向构造函数的prototype对象；obj.__proto__=ClassA.prototype;

3.使用新对象调用函数，函数中的this被指向新实例对象：ClassA.call(obj);//{}.构造函数();

就是obj执行一遍构造函数，把属性什么的通过this.xx=xx;给obj。

4.将初始化完毕的新对象地址，保存到等号左边的变量中

注意：若构造函数中返回this或返回值是基本类型（number、string、boolean、null、undefined）的值，则返回新实例对象；若返回值是引用类型的值，则实际返回值为这个引用类型。

关于prototype和__proto__的关系

摘自JS高级：

我们创建的每个函数都有一个prototype属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

Constructor（构造函数）属性包含的是一个指向prototype所在函数的指针，通过这个构造函数可以继续为原型对象添加方法和属性。

而当调用构造函数创建一个实例之后，该实例将包含一个指针叫做[prototype]，也就是浏览器支持下的__proto__；

例如Array.prototype.slice.call();实际上Array就是一个构造函数啦！所以用的是prototype。

3.class继承

我们先回顾用函数实现Student的方法：

functionStudent(name){

this.name=name;

Student.prototype.hello=function(){

alert('Hello,'+this.name+'!');

如果用新的class关键字来编写Student，可以这样写：

classStudent{

constructor(name){

hello(){

最后，创建一个Student对象代码和前面章节完全一样：

varxiaoming=newStudent('小明');

xiaoming.hello();

class继承

用class定义对象的另一个巨大的好处是继承更方便了。想一想我们从Student派生一个PrimaryStudent需要编写的代码量。现在，原型继承的中间对象，原型对象的构造函数等等都不需要考虑了，直接通过extends来实现：

classPrimaryStudentextendsStudent{

constructor(name,grade){

super(name);//记得用super调用父类的构造方法!

this.grade=grade;

myGrade(){

alert('Iamatgrade'+this.grade);

注意PrimaryStudent的定义也是class关键字实现的，而extends则表示原型链对象来自Student。子类的构造函数可能会与父类不太相同，例如，PrimaryStudent需要name和grade两个参数，并且需要通过super(name)来调用父类的构造函数，否则父类的name属性无法正常初始化。

PrimaryStudent已经自动获得了父类Student的hello方法，我们又在子类中定义了新的myGrade方法。

ES6引入的class和原有的JavaScript原型继承有什么区别呢？实际上它们没有任何区别，class的作用就是让JavaScript引擎去实现原来需要我们自己编写的原型链代码。简而言之，用class的好处就是极大地简化了原型链代码。

练习

请利用class重新定义Cat，并让它从已有的Animal继承，然后新增一个方法say()，返回字符串'Hello,xxx!'：

classAnimal{

classCatextendsAnimal{

super(name);

say(){

return`Hello,${this.name}!`

varkitty=newCat('Kitty');

4.浏览器对象

window

navigator

screen

location

document

history

5.操作DOM

由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。

在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.getElementById()和document.getElementsByTagName()，以及CSS选择器document.getElementsByClassName()。

第二种方法是使用querySelector()和querySelectorAll()，需要了解selector语法，然后使用条件来获取节点，更加方便.

严格地讲，我们这里的DOM节点是指Element，但是DOM节点实际上是Node，在HTML中，Node包括Element、Comment、CDATA_SECTION等很多种，以及根节点Document类型，但是，绝大多数时候我们只关心Element，也就是实际控制页面结构的Node，其他类型的Node忽略即可。根节点Document已经自动绑定为全局变量document。

6.更新DOM

一种是修改innerHTML属性,第二种是修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签

修改CSS也是经常需要的操作。DOM节点的style属性对应所有的CSS，可以直接获取或设置。因为CSS允许font-size这样的名称，但它并非JavaScript有效的属性名，所以需要在JavaScript中改写为驼峰式命名fontSize

//获取...

varp=document.getElementById('p-id');

//设置CSS:

p.style.color='#ff0000';

p.style.fontSize='20px';

p.style.paddingTop='2em';

7.插入DOM

有两个办法可以插入新的节点。一个是使用appendChild，把一个子节点添加到父节点的最后一个子节点。

如果我们要把子节点插入到指定的位置怎么办？可以使用parentElement.insertBefore(newElement,referenceElement);，子节点会插入到referenceElement之前。

8.删除DOM

要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：

//拿到待删除节点:

varself=document.getElementById('to-be-removed');

//拿到父节点:

varparent=self.parentElement;

//删除:

varremoved=parent.removeChild(self);

removed===self;//true

注意到删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。

MDN-ChildNode.remove()

ChildNode.remove()方法把从它所属的DOM树中删除对象。

Hereisdiv-01

Hereisdiv-02

Hereisdiv-03

varel=document.getElementById('div-01');

el.nextElementSibling.remove();

//id为'div-02'的div被删掉了

8-10

提交表单

注意到id为md5-password的标记了name="password"，而用户输入的id为input-password的没有name属性。没有name属性的的数据不会被提交。

2.操作文件

在HTML表单中，可以上传文件的唯一控件就是。

注意：当一个表单包含时，表单的enctype必须指定为multipart/form-data，method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。

出于安全考虑，浏览器只允许用户点击来选择本地文件，用JavaScript对的value赋值是没有任何效果的。当用户选择了上传某个文件后，JavaScript也无法获得该文件的真实路径：

由于JavaScript对用户上传的文件操作非常有限，尤其是无法读取文件内容，使得很多需要操作文件的网页不得不用Flash这样的第三方插件来实现。

随着HTML5的普及，新增的FileAPI允许JavaScript读取文件内容，获得更多的文件信息。

HTML5的FileAPI提供了File和FileReader两个主要对象，可以获得文件信息并读取文件。

下面的例子演示了如何读取用户选取的图片文件，并在一个

中预览图像

鼠标悬停几秒钟查看此处动态绑定的提示信息！

varapp2=newVue({

el:'#app-2',

data:{

message:'页面加载于'+newDate()

})

这里我们遇到点新东西。你看到的v-bind属性被称为指令。指令带有前缀v-，以表示它们是Vue提供的特殊属性。可能你已经猜到了，它们会在渲染的DOM上应用特殊的响应式行为。简言之，这里该指令的作用是：“将这个元素节点的title属性和Vue实例的message属性保持一致”。

8-11

1.react的extends语法（MDN）

使用extends

classSquareextendsPolygon{

constructor(length){

//这里把length传参给父类的构造方法

//作为父类Polygon的宽和高

super(length,length);

//备注：在衍生类中使用this前必须先调用super()方法

//忽视这一点将会导致一个引用错误

this.name='Square';

getarea(){

returnthis.height*this.width;

setarea(value){

this.area=value;

Getter/Setter访问器属性

get语法将一个对象属性绑定到查询该属性时将被调用的一个函数上。

语法E

{getprop(){...}}

{get[expression](){...}}

super关键字用于调用一个对象的父对象上的函数。

语法

super([arguments]);

//调用父对象/父类的构造函数

super.functionOnParent([arguments]);

//调用父对象/父类上的方法

当设置了-webkit-scrollbar属性的时候，即使只设置了width,也会使滚动条变透明。

因此仅仅需要如下两条就可以有很漂亮的滚动条

#mobile-body-content::-webkit-scrollbar{width:8px}

#mobile-body-content::-webkit-scrollbar-thumb{background-color:#bdf4eb;-webkit-border-radius:4px;border-radius:4px}

4：通过同时设置元素的top和bottom，确定元素的高度。

5：如何让height:100%;起作用

如果想让一个元素的百分比高度height:100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值。

6：定宽元素居中方法2

{position:absolute;

left:50%;

width:300px;

margin-left:150px;}

7:利用伪元素::before或::after产生阴影

#mobile-body-bg:before{

position:relative;

width:100%;

height:25px;

background:linear-gradient(rgba(34,195,170,0.1)0,transparent);}

8.CSS动画

transform-origin设置旋转元素的基点位置

animation:msgBounceIn.4s;

animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)

@keyframesmsgBounceIn{

from{transform:scale(0)}//from相当于0%,to相当于100%

40%{transform:scale(1.03)}

75%{transform:scale(0.98)}

to{transform:scale(1)}

补充一个：transition属性width:100px;transition:width2s;

8-13

1.git文件上传

本地文件更新服务器

服务器覆盖本地

transform:translateY(100%);

transition-duration:.3s;

transition-property:transform;

然后

background-color:rgba(0,0,0,0.5);

border-radius:20px;opacity:1;-webkit-transition:opacity.3s;transition:opacity.3s

transform:translateY(0)

完成对话框的显现！

.close-btn{

height:20px;

padding:12px18px;

.close-btn:before{

top:10px;

-webkit-transform:rotateZ(45deg);

-ms-transform:rotate(45deg);

transform:rotateZ(45deg);

.close-btn:after{

-webkit-transform:rotateZ(-45deg);

-ms-transform:rotate(-45deg);

transform:rotateZ(-45deg);

.close-btn:before,.close-btn:after{

content:'';

display:block;

width:16px;

height:2px;

top:8px;

background-color:#ddd;

#mobile.has-prompt#prompt-bg{

z-index:50;

height:100%;

-webkit-border-radius:20px;

5：右边对话框浮动的清除方法

.msg-row::before,.msg-row::after{

content:"";

display:table;

.msg-row::after{

clear:both;

6.为什么.clear:after和:before的display属性要定义为table

.cf:after，.cf:before{content:"";display:table;}.cf:after{clear:both;}：before是因为table类型能生成独立的bfc，防止上边距塌陷，：after负责清除浮动，防止父级高度塌陷；配合使用，代码少，效率高。

仅仅是清楚父级高度塌陷的代码经测试只需要

.main::after{

就可以做到，原理就是利用伪元素清除浮动

8-15

Classcomponentsshouldalwayscallthebaseconstructorwithprops.

下面我的例子，constructor的标配就是super(props);会自动传入组件的props;

constructor(props){

super(props);

this.state={

replyarr:["hehe"]

只有当不需要consructor的时候可以简写如下

classWelcomeextendsReact.Component{

render(){

return

Hello,{this.props.name}

;

5.官方实例

classClockextendsReact.Component{

this.state={date:newDate()};

componentDidMount(){

this.timerID=setInterval(

()=>this.tick(),

1000

);

componentWillUnmount(){

clearInterval(this.timerID);

tick(){

this.setState({

date:newDate()

return(

Hello,world!

Itis{this.state.date.toLocaleTimeString()}.

ReactDOM.render(

document.getElementById('root')

①this.setState({comment:'Hello'});

②当state更新需要用到之前的值时，要使用函数进行更新

Becausethis.propsandthis.statemaybeupdatedasynchronously,youshouldnotrelyontheirvaluesforcalculatingthenextstate.

Forexample,thiscodemayfailtoupdatethecounter:

//Wrong

counter:this.state.counter+this.props.increment,

Tofixit,useasecondformofsetState()thatacceptsafunctionratherthananobject.Thatfunctionwillreceivethepreviousstateasthefirstargument,andthepropsatthetimetheupdateisappliedasthesecondargument:

//Correct

this.setState((prevState,props)=>({

counter:prevState.counter+props.increment

}));

更新state数组写法一：

counter:prevState.replyarr.push("一只羊")

写法二：

this.state.replyarr.push("一只羊");

replyarr:this.state.replyarr

react里面这种写法很多，如果不加上bind(this)那么在reply1里面调用this结果是null？

①如果你的点击事件触发的方法里需要引用this。就需要绑定啊。不然你的this是null（记得如果没绑定this应该是全局window。但这里this就是null，撸完手上的需求去看一下react源码）所以

1.你要么在创建的时候绑定：

Save

this.handleClick=this.handleClick.bind(this)

3.还有一种是利用闭包把作用域包起来

this.handleClick}>Save

如果用第一种会在每次点击时通过bind创建一个新的方法，所以一般用23两种情况，显示调用bind()只是为了保证this值。

②

this.x=9;

varmodule={

x:81,

getX:function(){returnthis.x;}

module.getX();//返回81

varretrieveX=module.getX;

retrieveX();//返回9,在这种情况下，"this"指向全局作用域

//创建一个新函数，将"this"绑定到module对象

//新手可能会被全局的x变量和module里的属性x所迷惑

varboundGetX=retrieveX.bind(module);

boundGetX();//返回81

结合这里的例子进行理解，React构造方法中的bind即将handleClick函数与这个组件Component进行绑定以确保在这个处理函数中使用this时可以时刻指向这一组件。

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

如：

var$v=$("#v");//jQuery对象

varv=$v[0];//DOM对象

alert(v.checked)//检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

$('#content').scrollTop($('#content')[0].scrollHeight);

一开始出错的原因是REACT内容渲染前就设置了高度，渲染后没有重新设置，因此写在componentDidUpdate函数里面，在state改变后自动调用！

componentDidUpdate(prevProps,prevState){

varcontentSH=$("#mobile-body-content")[0].scrollHeight;

varcontentCH=$("#mobile-body-content")[0].clientHeight;

varscrollTopValue=contentSH-contentCH;

$("#mobile-body-content").scrollTop(scrollTopValue);

9.与滚动栏适配的进度条

//与滚动栏适配的进度条(function(){var$w=$(window);var$prog2=$('.bottombar');varwh=$w.height();varh=$('body').height();varsHeight=h-wh;$w.on('scroll',function(){window.requestAnimationFrame(function(){//scrollTop()是滚了多少，sHeight是可以滚多少varperc=Math.max(0,Math.min(1,$w.scrollTop()/sHeight));updateProgress(perc);});});

functionupdateProgress(perc){$prog2.css({width:perc*100+'%'});}

}());

10.

$(window).height();//浏览器当前窗口可视区域高度

$(document).height();//浏览器当前窗口文档的高度

$(document.body).height();//浏览器当前窗口文档body的高度

$(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度包括borderpaddingmargin

$(window).width();//浏览器当前窗口可视区域宽度

$(document).width();//浏览器当前窗口文档对象宽度

$(document.body).width();//浏览器当前窗口文档body的高度

$(document.body).outerWidth(true);//浏览器当前窗口文档body的总宽度包

11.①Jquery里面的{}——$().css设置多个属性时就是这么写

②各种高度和鼠标位置

网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth(包括边线的宽)网页可见区域高：document.body.offsetHeight(包括边线的高)网页正文全文宽：document.body.scrollWidth网页正文全文高：document.body.scrollHeight网页被卷去的高：document.body.scrollTop网页被卷去的左：document.body.scrollLeft网页正文部分上：window.screenTop网页正文部分左：window.screenLeft屏幕分辨率的高：window.screen.height屏幕分辨率的宽：window.screen.width屏幕可用工作区高度：window.screen.availHeight屏幕可用工作区宽度：window.screen.availWidth

③生命周期函数

④缓慢滑动到目标位置

Jquery的offset()可以获得元素的位置，从而定位到元素所在处

⑤同步和异步的概念

异步代码会被放入一个事件队列，等到所有其他代码执行后才进行，而不会阻塞线程。

12.JS的单线程和异步机制

怎样理解阻塞非阻塞与同步异步的区别？

虽然JavaScript是单线程的，可是浏览器内部不是单线程的。你的一些I/O操作、定时器的计时和事件监听（click,keydown…）等都是由浏览器提供的其他线程来完成的。

如果想利用多线程处理一些耗时较长的任务，可以使用HTML5提出的WebWorker。

8-16

明天改改样式往github上面架一下

8-17

以前都是在牛客看别人的面经,面试经验什么的,这次该换我来写了,

实习:

校招:

7.20开始投简历

蚂蚁金服UED

一面:55分钟

1.如何让各种情况下的div居中(绝对定位的div,垂直居中,水平居中)

2.display有哪些值？说明他们的作用

None,block,inline-block,table,cell

5.requirejs实现原理

6.requirejs怎么防止重复加载

7.ES6里头的箭头函数的this对象与其他的有啥区别

8.tcp/udp区别

小结TCP与UDP的区别：1.基于连接与无连接；2.对系统资源的要求（TCP较多，UDP少）；3.UDP程序结构较简单；4.流模式与数据报模式；5.TCP保证数据正确性，UDP可能丢包，TCP保证数据顺序，UDP不保证。

TCP三次握手过程1主机A通过向主机B发送一个含有同步序列号的标志位的数据段给主机B,向主机B请求建立连接,通过这个数据段,主机A告诉主机B两件事:我想要和你通信;你可以用哪个序列号作为起始数据段来回应我.2主机B收到主机A的请求后,用一个带有确认应答(ACK)和同步序列号(SYN)标志位的数据段响应主机A,也告诉主机A两件事:我已经收到你的请求了,你可以传输数据了;你要用哪佧序列号作为起始数据段来回应我3主机A收到这个数据段后,再发送一个确认应答,确认已收到主机B的数据段:"我已收到回复,我现在要开始传输实际数据了这样3次握手就完成了,主机A和主机B就可以传输数据了.3次握手的特点没有应用层的数据SYN这个标志位只有在TCP建产连接时才会被置1握手完成后SYN标志位被置0

CSRF（Cross-siterequestforgery跨站请求伪造）是一种依赖web浏览器的、被混淆过的代理人攻击。CSRF定义的主语是”请求“，是一种跨站的伪造的请求，指的是跨站伪造用户的请求，模拟用户的操作。

GET和POST的使用

在web程序的设计原则上，GET传递参数的操作，不应该改变程序的内部结构，主要用于查询信息的过滤。对于数据库的更删改操作，一定要使用POST方式传值。

XSS和CSRF攻击的防御

防御XSS攻击可以通过以下两方面操作：1，对用户表单输入的数据进行过滤，对javascript代码进行转义，然后再存入数据库；2，在信息的展示页面，也要进行转义，防止javascript在页面上执行。

关系型数据库：最常见应用最广的一类数据库，建立在关系模型基础上数据模型大致上就是二维表，一个突出的特点是用SQL进行操作，能满足大部分需求。常见的MySQL，Oracle，MicrosoftSQLServer等。

MySQL，开源的关系型数据库，在现代数据库中比较典型，能满足你大部分需求，毕竟Oracle很贵。一般用起来要运行一个MySQL的服务，然后用客户端去连接它，比如在Java里或者用shell连接127.0.0.1:3306。之后就可以愉快地执行SQL语句增删查改了。

例子：比如学生信息管理系统，服务器123.123.123.123:306上用的MySQL，另一个服务器上的Web应用可以连接到它，学生基本信息一个表，班级信息一个表。学生的班级id字段是外键连接到班级信息表的班级id。

SQLite，一个非常迷你的关系型数据库，麻雀虽小五脏俱全。（需要远程连服务器上的数据库还是乖乖用MySQL），连接数据库就像是打开个db文件，比如用shell或者编程语言连接到e:\example.db。之后就可以愉快地用SQL语句增删查改了。非常适合嵌入到应用内部，比如android应用。显然，如果你写的程序访问的数据想存成一个本地文件，你自己设计文件格式存数据很麻烦不如用这个。比如做个名片管理app，内嵌mingpian.db来保存名片。

非关系型数据库：由于关系型数据库虽然数据结构很严谨规范，有一大堆约束（比如保证每个数据主键唯一啊，存在别的表里的数据用外键连接啊之类的），但是在某些时候存在不足，比如我从今天开始存的数据都比昨天的多了俩字段，或者今天开始每条数据里面嵌入了一个列表，这时候关系型数据库就不好用了（要么建新表，要么alter旧表，然而改变里面存了N多数据的旧表的结构代价很大），再比如数据以增加为主，并且修改一条记录某个字段时要求旧的版本不能丢。

为了满足这些需求，就出现了非关系型数据库，也有人称之为NoSQL数据库，放弃一部分关系型数据库的“严谨”，而支持各种别的特性。常见的有HBase、MongoDB、Redis等等。MongoDB按分类可以算“基于文档的数据库”，里面数据的“长相”参见JSON格式。然而在我看来，很多吵吵着用MongoDB的情况MySQL完全可以胜任。

一面:50分钟

5.gulp与webpack区别

7.说下你知道的响应状态码

10.对nodejs了解多少

二面:90分钟(视频面)

首先是两个编程题

2.实现一个可拖动的div(要考虑到浏览器兼容性)

二面:40分钟

1.遇到过哪些浏览器兼容性问题

2.清除浮动有哪几种方式,分别说说

最强浮动解决帖！

三面:90分钟

1.你学过数据结构没,说说你都了解些什么

2.你学过计算机操作系统没,说说你都了解些什么

3.你学过计算机组成原理没,说说你都了解些什么

4.你学过算法没,说说你都了解些什么

5.说下选择排序,冒泡排序的实现思路

复习技术之瞳

7.让你设计一个前端css框架你怎么做

12.浏览器缓存的区别

17.js中上下文是什么

箭头函数没有自身的this,arguments,super,new.target,而是通过上溯词法作用域找到最近定义的那个.

foo:()=>console.log(this)

这段代码里箭头函数里头的this指向的是定义了箭头函数的那个执行上下文,显然即window.

21.平常在项目中用到过哪些设计模式,说说看

美团

Geolocation

5.webpack怎样配置

7.link和@import有什么区别

11.出了道url去参数的题让在纸上写

小结：题目暂时就先这么多，先把书看完

8-18

前台是用servlet写得

8-19

3．Vark;alert(k);

4.二叉树资料

5.在Linux上，对于多进程，子进程继承了父进程的下列哪些？

父进程和子进程拥有独立的地址空间和PID参数。

'a'=97'A'=65

微软操作系统（DOS、WINDOWS等）中磁盘文件存储管理的最小单位叫做“簇”扇区：硬盘不是一次读写一个字节而是一次读写一个扇区（512个字节）簇：系统读读写文件的基本单位，一般为2的n次方个扇区(由文件系统决定)

电脑的最小存储单位是字节Byte，一个字节，是由八位二进制位组成的,就是这八位数字只是由“0”和“1”两个数字组成，例如：11111000，00000001，00000101等，1个英文字母、英文标点、半角数字在计算机是以八位二进制数保存就是一个字节大小，1个汉字(包括中文标点全角数字)就是2个字节(十六位二进制)

1位二进制大小就是1bit

DNS知识点

A：DNS就是将域名翻译成IP地址。

B：主要用UDP，但是当请求字节过长超过512字节时用TCP协议，将其分割成多个片段传输。

C：DNS协议默认端口号是53。

D：操作系统的DNS缓存：windowsDNS缓存的默认值是MaxCacheTTL，它的默认值是86400s，也就是一天。macOS严格遵循DNS协议中的TTL。

11.

看二分法实现细节，取中值时：mid=low+((high-low)/2);是取左中值

12.

线性结构是一个有序数据元素的集合。[1]

常用的线性结构有：线性表，栈，队列，双队列，数组，串。

关于广义表，是一种非线性的数据结构。

常见的非线性结构有：二维数组，多维数组，广义表，树(二叉树等)，图。

特征

1．集合中必存在唯一的一个"第一个元素"；

2．集合中必存在唯一的一个"最后的元素"；

3．除最后元素之外，其它数据元素均有唯一的"后继"；

4．除第一元素之外，其它数据元素均有唯一的"前驱"。

数据结构中线性结构指的是数据元素之间存在着“一对一”的线性关系的数据结构。

如（a0,a1,a2,.....,an）,a0为第一个元素，an为最后一个元素，此集合即为一个线性结构的集合。

相对应于线性结构，非线性结构的逻辑特征是一个结点元素可能对应多个直接前驱和多个后继。

13.

C语言，设有宏定义：

#defineA4+5

#defineBA*A

则表达式B*B的值为

4+5*4+5*4+5*4+5=69

14.pure

15.CSS媒体查询

CSS语法

@mediamediatypeand|not|only(mediafeature){CSS-Code;}

你也可以针对不同的媒体使用不同stylesheets:

@media媒体类型and（媒体特性）{你的样式}

@mediascreenand(max-width:300px){body{background-color:lightblue;}}

8-22

思路二：

8-23

class是js关键字，这里要用className。对于E选项，在jsx中直接写行内样式时不能采用引号，而是style={{color:'red'}}的方式

本题需要将数组a=[1,2,3]变成[1,2,3,4],需要改变原数组a。

Array对象常用方法中：

不改变原数组：

1、concat()

连接两个或多个数组

不改变原数组

返回被连接数组的一个副本

2、join()

把数组中所有元素放入一个字符串

返回字符串

3、slice()

从已有的数组中返回选定的元素

返回一个新数组

4、toString()

把数组转为字符串

返回数组的字符串形式

改变原数组：

5、pop()

删除数组最后一个元素，如果数组为空，则不改变数组，返回undefined

改变原数组

返回被删除的元素

6、push()

向数组末尾添加一个或多个元素

返回新数组的长度

7、reverse()

颠倒数组中元素的顺序

返回该数组

8、shift()

把数组的第一个元素删除，若空数组，不进行任何操作，返回undefined

返回第一个元素的值

9、sort()

对数组元素进行排序(ascii)

10、splice()

从数组中添加/删除项目

11、unshift()

向数组的开头添加一个或多个元素

A选项，a.reverse()后返回值即数组a变成[3,2,1],再使用unshift()方法在数组开头添加一个4，a数组就变成了[4,3,2,1]。注，unshift()返回新数组的长度，此处为4。正确。

B选项，push()方法返回新数组的长度，是一个number类型，不是数组，所以不能再用“.”操作符继续执行reverse()方法。错误。

C选项，正确。

D选项，splice()语法：arrayObject.splice(index,howmany,item1,.....,itemX)。参数：index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。howmany：必需。要删除的项目数量。如果设置为0，则不会删除项目。item1,...,itemX：可选。向数组添加的新项目。返回值：Array：包含被删除项目的新数组，如果有的话。

由于a.splice(3,1,4)中的index为3，超过了数组a的下标，所以3后面的1也不会起作用。a.splice(3,1,4)会将4插入到数组a末尾。但splice()返回值是被删除项目的新数组，由于a.splice(3,1,4)并没有删除元素，所以返回的新数组为空，对空数组reverse()还是空。(如果D选项改成a.splice(3,1,4);a.reverse()就正确了。)错误。

4.HTTP2.0

多路复用

多路复用允许同时通过单一的HTTP/2连接发起多重的请求-响应消息。

可以给请求添加优先级

服务器主动推送serverpush

首部压缩：HTTP2的头部会减小，从而减少流量传输

5.position:sticky

CSS属性选择用于定位元素的替代规则，被设计为对脚本动画效果有用。position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果

我们需要实现动态加载一个JavaScript资源，但是有几处不知道如何处理，需要您的帮助完成这一项工作

varscript=document.createElement(“script”);

varhead=document.getElementsByTagName(“head”)[0];

script.type=“text/javascript”;

script.src=“//i.alicdn.com/resource.js”;

//绑定资源加载成功事件

script.1=function(){

//判断资源加载状态是否为加载成功或加载完成

if(2.test(script.3)){

script.onreadystatechange=null;

....

//绑定资源加载失败事件

script.4=function(){

head.insertBefore(script,head.firstChild)

(1)onreadystatechange(2)/^(loaded|complete)$/(3)readyState(4)onerror

即传统的原生APP开发模式,Android基于Java语言,底层调用Google的API;iOS基于OC或者Swift语言,底层调用App官方提供的API。体验最后。

即移动端的网站,将页面部署在服务器上,然后用户使用各大浏览器访问。一般泛指SPA(SinglePageApplication)模式开发出的网站。体验最差。

即混合开发,由Native通过JSBridge等方法提供统一的API,然后用Html5+JS来写实际的逻辑,调用API,这种模式下,由于Android,iOS的API一般有一致性,而且最终的页面也是在webview中显示,所有有跨平台效果

Facebook发起的开源的一套新的APP开发方案,使用JS+部分原生语法来实现功能。初次学习成本较高,但是在入门后,经过良好的封装也能够实现大部分的跨平台。而且体验很好。

对比Hybird和ReactNative

hybird的出现仅仅是为了呈现，说实话如果没有css，或许hybird这种东西就不会出现。如果你打算做一个新闻客户端，hybird绝对是不二的选择。而交互永远是hybird的痛，且不说android局部滚动和ios的各种fixed与input的基情，就算是各种屏幕分辨率的处理方案都得恶心的想吐了。

IndexdDB是HTML5的本地存储，把一些数据存储到浏览器（客户端）中，当与网络断开时，可以从浏览器中读取数据，用来做一些离线应用。

Cookie通过在客户端(浏览器)记录信息确定用户身份，最大为4kb。

url参数用的是get方法，从服务器上获取数据，大小不能大于2kb。

Session是服务器端使用的一种记录客户端状态的机制。

post是向服务器传送数据，数据量较大。

localStorage也是HTML5的本地存储，将数据保存在客户端中。

原型链找不到时，返回的是undefined而不是null;

9.输出对象中值大于2的key的数组

vardata={a:1,b:2,c:3,d:4};

Object.keys(data).filter(function(x){return1;})

期待输出：[“c”,”d”]

参考答案(1)data[x]>2

Object.keys(Object)

Array.filter(function)

Object是包含属性和方法的对象，可以是创建的对象或现有文档对象模型(DOM)对象。

Object.keys(object)的返回值是一个数组，其中包含对象的可枚举属性和方法的名称。

Array.filter(function)对数组进行过滤返回符合条件的数组。

Object.keys(data)的返回值为数组["a","b","c","d"]，经过filter(function(x){return;})过滤，返回值大于2的key的数组。x为返回数组的属性名称即“a"、"b"、"c"、“d”，则对应的属性值为data[x]，比较语句为data[x]>2。

width:100px;

float:left;

float:right;

margin-left:100px;

margin-right:200px;

.layout{

display:flex;

flex:1;

.aside{

11.没数据的时候的饼图

12.IPV6和IPV4的区别

15.ES6模块的实现

16.阐述现代前端组件化框架一些关键特性实现的原理

组件化机制

数据绑定机制

上下级组件之间数据传递的机制

17.函数柯里化

8-24

1.箭头函数能否作为构造函数

2.react写一个倒计时（聚划算这种）

3.元素相对于浏览器左上角的距离

DOMRect对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了width和height外的属性都是相对于视口的左上角位置而言的。

——————————————————————————————————————

1.您是一个什么样的人？请您选取三个词描述自己。为了描述更生动，每个描述词后请举例说明。（限300字）

友善：从小到大每个集体总有因为各种原因显得很弱势的人，我都会在看不下去的时候拉一把。活力：虽然研究生毕业已经25岁了，但是我可能因为家里有个姐姐，所以我的心态更年轻，碰到挫折也不容易受到打击。上进：虽然不是计算机系，但是我对计算机的热爱促使我克服了种种困难完成学业的同时掌握了多方面的技能。

2.未来，您希望自己成为一个什么样的人？为此您付出了哪些努力？（限300字）

3.您怎么看待自己毕业后的第一份工作？为什么？（限300字）

第一份工作我认为能进大公司就进大公司，中国移动就是其中的典型，以中国移动举例，中国移动的平台是非常大的，作为国家背景的运营商旗下的子公司物联网公司也是一样。在这里面项目的水平和数量都是很高的，对自己是很好的锻炼，而且我本身是南京人，不希望到处奔波，最好能在一个稳定的公司里面一直努力成长就好了。

4.您为什么选择应聘中移物联网有限公司？您希望中移物联网有限公司能给您带来什么？（限300字）

中国移动作为现在三大运营商里面的龙头，中移物联网公司作为他旗下的互联网公司，既有国企规范的优势，也有互联网迅捷的特点，选择这样的公司作为第一份工作室理所应当的。我个人希望公司可以给我成长的平台和稳定的发展，我相信我和中移的实力会越来越强。

8-25

ParyTheLord16:13:49

邱总，额我想问一下，，我要写那个定时调度的话，写在那个项目的哪里阿？，，

邱添16:14:55

你会spring框架么

邱添16:15:09

你可以写一个基于spring框架的调度

邱添16:15:21

项目里面内置了spring框架

邱添16:15:43

或者你可以写一个java程序，然后再linux做调度任务邱总，额我想问一下，，我要写那个定时调度的话，写在那个项目的哪里阿？，，

8-28

8-29

首先，并不是说你一打开一个页面就会产生一个session。所谓session你可以这样理解：当你与服务端进行会话时，比如说登陆成功后，服务端会为你开壁一块内存区间，用以存放你这次会话的一些内容，比如说用户名之类的。那么就需要一个东西来标志这个内存区间是你的而不是别人的，这个东西就是sessionid(jsessionid只是tomcat中对sessionid的叫法，在其它容器里面，不一定就是叫jsessionid了。),而这个内存区间你可以理解为session。然后，服务器会将这个sessionid发回给你的浏览器，放入你的浏览器的cookies中（这个cookies是内存cookies，跟一般的不一样，它会随着浏览器的关闭而消失）。之后，只有你浏览器没有关闭，你每向服务器发请求，服务器就会从你发送过来的cookies中拿出这个sessionid,然后根据这个sessionid到相应的内存中取你之前存放的数据。但是，如果你退出登陆了，服务器会清掉属于你的内存区域，所以你再登的话，会产生一个新的session了。不好意思，我可能说得不太清楚，但这方面的知识网上有不少，你可以了解下session的原理。

8-30

8-311.

3.BFC

4.事件节流

5.回调XX（没听懂）

6.实现一个浏览器内部标签页间的通讯用什么方式

7.垃圾回收

8.状态码304

10.ES6语法

11.怎么设置一个在PC端与手机端都可以浏览的页面

12.怎么实现自适应布局，媒体查询

13.JS模块化，AMD,CMD。。。

14.代码组织方式

15.怎么学习前端

16.跨域JSONP前后端有什么约定吗

身为非科班出身，感觉任重道远，努力加油吧，很多看过没用过，面试问的很详细，很多扩展，感觉比较注重“你用过吗？”，这似乎是面试中出现频率最高的词了，当然还有“没事”。

各位加油吧！！

9-4

美图

编程题

1.$.extend

2.DOM操作

3.正则

4.去重和合并

简答

9-6

9-7

①网络协议三要素：语义，语法，交换规则

②在公钥密码体制中，不公开的是(私钥)。

④从运输层的角度看，通信的真正端点是--进程。

⑤关于IP地址

6.求各位数字和：利用432/10=>43的特性，得到去一位的数字，不断%10得到每一位。

7.对行内元素设置margin-top和margin-bottom是否起作用

不起作用。（需要注意行内元素的替换元素img、input，他们是行内元素，但是可以为其设置宽高，并且margin属性也是对其起作用的，有着类似于Inline-block的行为）

8.对内联元素设置padding-top和padding-bottom是否会增加它的高度

不会。同上题，要注意行内元素的替换元素，img设置padding-top/bottom是会起作用的。

9.问：如果设置

的font-size:10rem;那么当用户重置或拖拽浏览器窗口时，它的文本会不会受到影响？

答：不会。

9-11

SMTP：全称是“SimpleMailTransferProtocol”，即简单邮件传输协议。它是一组用于从源地址到目的地址传输邮件的规范，通过它来控制邮件的中转方式。SMTP协议属于TCP/IP协议簇，它帮助每台计算机在发送或中转信件时找到下一个目的地。SMTP服务器就是遵循SMTP协议的发送邮件服务器。

POP3：是PostOfficeProtocol3的简称，即邮局协议的第3个版本,它规定怎样将个人计算机连接到Internet的邮件服务器和下载电子邮件的电子协议。它是因特网电子邮件的第一个离线协议标准,POP3允许用户从服务器上把邮件存储到本地主机（即自己的计算机）上,同时删除保存在邮件服务器上的邮件，而POP3服务器则是遵循POP3协议的接收邮件服务器，用来接收电子邮件的。

博客中介绍，pop3：从服务器下载到本地；SMTP：发送或者中转邮件。

9-12

1.JS在线编程格式

2.《计算机网络》第五版复习笔记

9-13

面试官的问题：

问java和C++的区别？

答我第一反应是java没有指针，当然这不是答案，面试宝典都有，不细说了

问java的开发经验？

答我记得不清楚了，没怎么说，自己要好好准备项目。

问写一段代码实现继承和多态

答只写了继承

问项目中有没有用到数据库连接池？

答没有也要说有，这是很常见的题，目前常用的是c3p0连接池，自己百度

问java设计模式还是数据库范式？

7.以下的哪一种颜色格式支持上百万种颜色，但是不支持无损压缩？

A、bmp

B、jpg

C、gif

D、tif

答案：A

9-18

手写filter

vararr=[1,2,3];

arr.filter2=filter2;

varre=arr.filter2(mid);

functionfilter2(mid){

varhehe=[];

for(variofthis){

varrer=mid(i);

console.log(rer);

if(rer){

console.log(i);

hehe.push(i);

console.log(hehe);

functionmid(z){

if(z<2){returntrue}

else{returnfalse}

2.内存泄漏

一上来面试官就让我介绍下我做的项目。我介绍了之后，就没有然后了（当时我以为会深问）。

然后就是编程了。

1.经典的柯里化问题。编写一个函数，实现add(2)(3)。

2.作用域问题。

varlength=10;

functionfn(){

console.log(this.length);

length:5,

method:function(fn){

fn();

arguments[0]();

obj.method(fn,1);

问会输出什么？这个我回答的不好，但是面试官说(⊙v⊙)嗯，也没给我纠错。哎╮(╯▽╰)╭

3.第三个是输出下面的四个标签对应的索引。这个也总结过，但是写的时候有瑕疵，哎╮(╯▽╰)╭

4.用2到3行写出二维数组变成一维数组的函数。

我的思路是用slice接口把数组中的一位数字切出来，然后拼接concat下一位数字。有好的思路，留言哈

然后编程就结束了。其中最主要的是楼主没用过牛客网上的JavaScript（node0.12.12）编程过，所以全程就相当于是在纸上写代码。会了就不会犯这么多低级错误了。（磕墙……）

4.html5都包括什么，我提到语义化，然后问em/strong/i都怎么用的

5.canvas与svg

6.requestAnimationFrame

2、bootstrap布局，栅格布局，怎么处理不同设备上的差异

4、ajax跨域，有哪些解决方法，举了几个实例让实现跨域，访问子域算不算跨域等等等

5、一两个简单的算法题（记不清了）

6、求数组中最大数

7、事件委托，点击ul中的li弹出li内容，动态添加li

8、原型链继承：b.prototype=newa()不对吗？

9、es6，异步原因，promisesetmap等等

她倡导使用flux模式来进行组件间数据传输，这种做法叫unidirectionaldataflow(单向数据流)，单向数据流的好处是与之前angularJS提出的two-waydatabinding相比较而言，因为单向，所以各种变化都是可预计、可控制的。不像two-waydatabinding那样，变化一但复杂起来，大家都互相触发变化，到最后一个地方变了，你根本猜不出来她还会导致其他什么地方跟着一起变。这个需要大量实践才能有所感受，如果你初学，那听听就算了，不必死磕。

这个东西的好处是减少DOM操作，减少DOM操作的目的是提高浏览器的渲染性能

6．数据绑定

7.组件化开发

8.react有什么用？优点和缺点有哪些？

喜欢React的人很多，但是喜欢它的原因都不太一样

比较现实的优点：

能够实现服务器端的渲染，便于搜索引擎优化。这一点要比Backbone,Angular1.x和Ember早期强

能够很好的和现有的代码结合。React只是MVC中的View层，对于其他的部分并没有硬性要求。意味着很多公司在选择用Angular全部重构和用React部分重构的时候，选择了React部分重构

因为一切都是component，所以代码更加模块化，重用代码更容易

学起来非常容易，几个小时就可以入门

因为强调只从this.props和this.state生成HTML，写起来bug比较少

比较高大上的优点，就是大家在大会上会说的优点：

因为用了virtualdom，所以性能很好

因为强调只从this.props和this.state生成HTML，所以非常的functionalprogramming

缺点：

并不是一个完整的框架，基本都需要加上ReactRouter和Flux才能写大型应用

gulp环境中gulp-sass为何一直安装失败？

首先，gulp的源码里没有任何一部分是定义pipe的。

gulp的pipe方法是来自nodejsstreamAPI的。gulp本身是由一系列vinyl模块组织起来的。

THE END

校招基本告一段落，总结一下天才老王1993

Hello,{this.props.name}

Hello,world!

Itis{this.state.date.toLocaleTimeString()}.

名片使用中以下描述错误的是:()

个人礼仪考试题（通用8篇）

商务礼仪期末考试及答案

礼仪考试题库

2023年礼仪考试试题(六篇)

接待礼仪模拟考试题及答案

职场礼仪知识竞赛题,职场礼仪知识竞赛题（附答案）,职场知识竞赛题

i茅台散花飞天答题答案是什么i茅台散花飞天答案一览

时尚精品范文

校招基本告一段落，总结一下天才老王1993

i茅台散花飞天答题答案汇总最新2024散花飞天答题所有题目答案大全