这篇博文中的面试题是我在掘金上看到的,没有答案。于是希望通过这篇文章补充答案,加深记忆。
原文链接:2016各大互联网公司前端面试汇总
据原文作者所说:2016年行业整体对前端的需求是供大于求的。不过大公司对于前端的要求越来越高,而小公司相对来说要求较低,能够快速上手即可。在过去的一年里,前端发展依旧很迅速,会React的或者React Native的会很吃香,而传统IE6的兼容性几乎不再考察。下面是一些知名企业的前端面试问题。(题目部分先后,部分题目是老生常谈,也罗列出来了)
百度篇
1.写出JavaScript运行结果:
for(var i=0; i<10; i++){} alert(i);
Answer:10。因为JavaScript中没有块级作用域,所以最终i为10,并且为全局变量。如果这里的var修改为let(ES6中关键字),则将报错(i未被定义)。
2.Cookie、sessionStrorage、localStorage的区别
Answer:
共同点:它们都是保存在浏览器端的,且同源的。(同源策略规定:不同域的客户端脚本在没有明确授权的情况下,不能读写对方的资源。其中同源是指同协议,同域名,同端口。对方的资源是指web页面,包括cookie、http消息头、dom树等。因此不同源,是不可能读取对方的cookie资源的。)
区别:(1)cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存。(2)cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。(3)存储大小限制也不同,cookie数据不能超过4k,因为每次http请求都会携带cookie,所以cookie只能保存很小的数据,如会话标识。而sessionStorage和localeStorage虽然也有存储大小的限制,但比cookie大的多,可以达到5M或更大。(4)数据有效期不同。sessionStorage仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localeStorage始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前有效,就是窗口或浏览器关闭。(5)作用域不同。sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage在所有的同源窗口中都是共享的;cookie同样也是在所有的同源窗口中共享。
3.JSONP原理
Answer:
很简单,就是利用<script>标签没有跨域限制的"漏洞"(历史遗迹)来达到与第三方通讯的目的。当需要通讯是,本站脚本建立一个<script>元素,地址指向第三方的API网址,形如: <script src="http://www.example.net/api?param1=1¶m2=2"></script> 。并在本站提供一个回调函数用于接收数据(函数名可约定,或通过地址参数传递)。第三方产生的响应为json数据的包装(故称之为jsonp,即 json padding),形如:callback({"name":"hax","gender":"male"}),即在第三方API中调用本站的回调函数,这样浏览器会调用callback函数,并传递解析后json对象作为参数,本站脚本可在callback函数里处理所传入的数据。("历史遗迹"的意思就是:如果在今天重新设计的话,也许就不会允许这样简单的跨域了,比如可能像XHR一样按照CORS规范要求服务器发送特定的http头)。
注:引用自贺师俊在知乎中的回答。
4.简述css盒模型
Answer:
所有的HTML元素可以看作盒子,在css中,"box model"这一术语是用来设计和布局中使用。css盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距、边框、填充和实际内容。
css盒模型根据width以及height的定义不同一般可分为标准盒模型和IE5.X和6中在怪异模式中的非标准盒模型。
标准盒模型:width=实际内容
非标准盒模型:width=border-left-width+padding-left+实际内容+padding-right+border-right-width
5.说说get和post请求的区别
Answer:
相同点:两者均是在客户机和服务器之间进行请求-响应时最常用的HTTP请求方法。
不同点:(1)GET - 从指定的资源请求数据
POST - 向指定的资源提交要被处理的数据
(2)查询字符串(名称/值对)是在GET请求的URL中发送的:如/test/demo_form.php?name1=value1&name2=value2;在POST请求中是在请求的HTTP消息主体中发送的,如:
POST /test/demo_form.php HTTP/1.1 Host: w3cschool.cc name1=value1&name2=value2
(3)
6.下面代码的运行结果:
var a = {n: 1} var b = a; a.x = a = {n: 2}; console.log(a.x); console.log(b.x);
Answer:
console.log(a.x);//undefined
console.log(b.x);//Object
思路:第一步:创建一个a对象,然后变量指针b指向变量指针a指向的对象。
第二步:赋值方向:对于A=B=C,方向为B=C,A=B。且.运算符的优先级高于=运算符。因此先在变量指针a和b所指向的对象中创建一个x属性,然后将{n:2}对象复制给a,于是变量指针a指向了这个新的对象(变量指针b仍指向原来的对象),接着把a赋值给起初是a和b共同指向的对象。
结论:因此可以得到a.x为undefined的结果,因为a指向了一个新对象,故无x属性,而b.x是由a赋值的,所以b.x是一个对象{n:2}。
http://www.cnblogs.com/xxcanghai/p/4998076.html