面试题
面试是查漏补缺的时候,希望自己能够找到满意的工作。
一、单选题(ps答案都是B.)
1、以下不是typeof的返回值的是 ( )
A、object B、null C、undefined D、number
typeof :检测基本数据类型,返回类型是String
- 字符串 ---"string"
- 数值 -----"number"
- 布尔值 --- "number"
- undefined -"undefined" 未定义或者未赋值
- null ------"object"
- object ----"object"
- function -- "function"
instanceof:检测是哪种对象的实例(根据原型链来识别),返回类型是Boolean
2、position属性中存在兼容性问题的是 ( )
A、absolute B、fixed C、relative D、static
fixed对ie6存在兼容问题,这真的很坑。。。。
3、以下CSS选择器对<div id="id" class="class1 class2">123123</div>生效的是 ( )
A、#id.class1.class2 div B、div.class1.class2#id C、.class1#id.class2 div D、.class1.class2#id div
不多说,给个别人整理好的
http://www.ruanyifeng.com/blog/2009/03/css_selectors.html
4、this默认指向的是 ( )
A、Object B、Window C、document D、prototype
Window 不用说
5、以下哪一个属性不属于jq的ajax方法 ( )
A、usename B、errorType C、global D、dataFilter
jq 的ajax方法
- beforeSend:在发送请求之前调用,并且传入一个 XMLHttpRequest 作为参数。
- error:在请求出错时调用。传入 XMLHttpRequest 对象,描述错误类型的字符串以及一个异常对象(如果有的话)
- dataFilter:在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据(可能是处理过的)传递给 success 回调函数。
- success:当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
- complete:当请求完成之后调用这个函数,无论成功或失败。传入 XMLHttpRequest 对象,以及一个包含成功或错误代码的字符串。
6、以下哪一个jq方法得到的是“同胞”( )
A、find B、siblings C、eq D、filter
siblings
7、prototype最终指向的是( )
A、window B、Object C、Function D、null
object
8、angular环境下以下选项正常情况下一定生效的是( )
A、<p>{{parseInt(55.66)}}</p> B、<p>{{13.14 | someFilter}}</p>
C、ng-click="parseInt(55.66)" D、<p>{{JSON.stringfy(55.66)}}</p>
angular没接触过,这两题先留着
9、关于 angularMVVM的描述中错误的是( )
A、VM与V双向绑定 B、VM单向更新M C、C单项加工VM D、V和VM可以互相通知
二、填空题
1、显式类型转换和隐式类型转换?
显示转换:
- Boolean() --转换为Boolean类型
数据类型 转换为true的值 转换为false的值
Boolean true false
String 任何非空字符串 “” (空字符串)
Number 任何非零数字值(包括无穷大) 0和NaN
Object 任何对象 null
Underfined n/a undefined
- Number() --转换为Number类型
有三个方法转换为Number类型Number()、parseInt()、parseFloat()
方法Number()
数据类型 转换得到
Boolean true - 1, false - 0
Number 简单的传入传出
null 0
Underfined NaN
String
-
- "" ---- 0
- "011" --- 11 //会去掉0
- "1.1" --- 1.1 //
- "0x1" --- 1 //转换为十进制
- "cdc2" ---NaN //其他的转换为NaN()
parseInt()函数
由于Number()函数在转换字符串时比较复杂而且不够合理,因此在处理字符串的时候更常用的是parseInt()函数。parseInt()函数在转换字符串时,更多的是看其是否符合数值模式。它会忽略字符串前面的空格,直至找到第一个非空格字符。如果第一个字符不是数字字符或者负号,parseInt()就会返回NaN;也就是说,用parseInt()转换空字符串会返回NaN。(Number()对空字符返回0).如果第一个字符是数字字符,parseInt()会继续解析第二个字符、直至解析完所有后续的字符或者遇到了一个非数字字符。
var num0 = parseInt("1234blue") //1234 var num1 = parseInt("") //NaN var num2 = parseInt("0xa") //10 var num3 = parseInt(22.5) // 22 var num4 = parseInt("22.5") //22 var num5 = parseInt("070") //70 var num6 = parseInt("70") //70 var num7 = parseInt("0xf", 16) //15 var num8 = parseInt("AF", 16) //175 var num9 = parseInt("AF") //NaN
parseFloat()函数
var num0 = parseFloat("1234blue") // 1234 var num1 = parseFloat("0xA") // 0 var num2 = parseFloat("22.5") // 22.5 var num4 = parseFloat("22.34.5") // 22.34 var num5 = parseFloat("0908.5") // 908.5 var num6 = parseFloat("3.123e7") // 31230000
转换为字符串
2、数组操作方法?
参考之前的博客
3、get和post方法区别?
get 一般是向后台请求数据,post则是向后台发送数据
get 的数据会在url上显示出来不安全,post则不会
get 传输字段数有限制,post在理论上没有限制
4、前端跨域解决问题的方案有?
当存在协议,域名,端口号这三者有一个不同,此时发起请求就需要跨域请求。
浏览器的同源策略
url | 说明 | 是否允许通信 |
http://www.a.com/a.js http://www.a.com/b.js |
同一域名下 | 允许 |
http://www.a.com/hha/a.js http://www.a.com/sdc/b.js |
同一域名不同文件夹 | 允许 |
http://www.a.com:8000/a.js http://www.a.com/b.js |
同一域名不同端口号 | 不允许 |
http://www.a.com/a.js https://www.a.com/b.js |
同一域名不同协议 | 不允许 |
http://www.a.com/a.js http://70.32.92.74/b.js |
域名和域名对于的IP | 不允许 |
http://www.a.com/a.js http://script.a.com/b.js |
主域相同子域不同 | 不允许 |
http://www.a.com/a.js http://a.com/b.js |
同一域名不同二级域名 | 不允许 |
http://www.cnblogs.com/a.js http://www.a.com/b.js |
不同域名 | 不允许 |
注意:
第一:当协议和端口号不同造成的跨域问题,前端是无法解决的
第二:在跨域问题上一般通过url来判断是否在同一个域内,而不是通过查看两个域是否在同一个ip地址上或者是同一个ip地址是否对应着两个不同的域
window.location.protocol + window.location.host。也就是需要判断Domains,protocol,ports必须匹配
跨域解决方案:
1、document.domain + iframe解决(只有主域相同的时候才能解决)
在www.a.com/a.html中:
document.domain = 'a.com'; var ifr = document.createElement('iframe'); ifr.src = 'http://www.script.a.com/b.html'; ifr.display = none; document.body.appendChild(ifr); ifr.onload = function(){ var doc = ifr.contentDocument || ifr.contentWindow.document; //在这里操作doc,也就是b.html ifr.onload = null; };
在www.script.a.com/b.html中:
document.domain = 'a.com';
2、动态创建script
script标签不受同源策略的限制。
function loadScript(url, func) { var head = document.head || document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = url; script.onload = script.onreadystatechange = function(){ if(!this.readyState || this.readyState=='loaded' || this.readyState=='complete'){ func(); script.onload = script.onreadystatechange = null; } }; head.insertBefore(script, 0); } window.baidu = { sug: function(data){ console.log(data); } } loadScript('http://suggestion.baidu.com/su?wd=w',function(){console.log('loaded')}); //我们请求的内容在哪里? //我们可以在chorme调试面板的source中看到script引入的内容
3、location.hash + iframe
原理是利用location.hash来进行传值。
假设域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html传递信息。
1) cs1.html首先创建自动创建一个隐藏的iframe,iframe的src指向cnblogs.com域名下的cs2.html页面
2) cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据
3) 同时在cs1.html上加一个定时器,隔一段时间来判断location.hash的值有没有变化,一旦有变化则获取获取hash值
注:由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值,所以要借助于a.com域名下的一个代理iframe
代码如下:
先是a.com下的文件cs1.html文件:
function startRequest(){ var ifr = document.createElement('iframe'); ifr.style.display = 'none'; ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo'; document.body.appendChild(ifr); } function checkHash() { try { var data = location.hash ? location.hash.substring(1) : ''; if (console.log) { console.log('Now the data is '+data); } } catch(e) {}; } setInterval(checkHash, 2000);
cnblogs.com域名下的cs2.html:
//模拟一个简单的参数处理操作 switch(location.hash){ case '#paramdo': callBack(); break; case '#paramset': //do something…… break; } function callBack(){ try { parent.location.hash = 'somedata'; } catch (e) { // ie、chrome的安全机制无法修改parent.location.hash, // 所以要利用一个中间的cnblogs域下的代理iframe var ifrproxy = document.createElement('iframe'); ifrproxy.style.display = 'none'; ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata'; // 注意该文件在"a.com"域下 document.body.appendChild(ifrproxy); } }
a.com下的域名cs3.html
//因为parent.parent和自身属于同一个域,所以可以改变其location.hash的值 parent.parent.location.hash = self.location.hash.substring(1);
4、window.name + iframe
window.name 的美妙之处:name 值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。
1) 创建a.com/cs1.html
2) 创建a.com/proxy.html,并加入如下代码
<head> <script> function proxy(url, func){ var isFirst = true, ifr = document.createElement('iframe'), loadFunc = function(){ if(isFirst){ ifr.contentWindow.location = 'http://a.com/cs1.html'; isFirst = false; }else{ func(ifr.contentWindow.name); ifr.contentWindow.close(); document.body.removeChild(ifr); ifr.src = ''; ifr = null; } }; ifr.src = url; ifr.style.display = 'none'; if(ifr.attachEvent) ifr.attachEvent('onload', loadFunc); else ifr.onload = loadFunc; document.body.appendChild(iframe); } </script> </head> <body> <script> proxy('http://www.baidu.com/', function(data){ console.log(data); }); </script> </body>
在b.com/cs1.html中包含:
<script> window.name = '要传送的内容'; </script>
5、postMessage(HTML5中的XMLHttpRequest Level 2中的API)
a.com/index.html中的代码:
<iframe id="ifr" src="b.com/index.html"></iframe> <script type="text/javascript"> window.onload = function() { var ifr = document.getElementById('ifr'); var targetOrigin = 'http://b.com'; // 若写成'http://b.com/c/proxy.html'效果一样 // 若写成'http://c.com'就不会执行postMessage了 ifr.contentWindow.postMessage('I was there!', targetOrigin); }; </script>
b.com/index.html中的代码:
<script type="text/javascript"> window.addEventListener('message', function(event){ // 通过origin属性判断消息来源地址 if (event.origin == 'http://a.com') { alert(event.data); // 弹出"I was there!" alert(event.source); // 对a.com、index.html中window对象的引用 // 但由于同源策略,这里event.source不可以访问window对象 } }, false); </script>
6、cors
CORS背后的思想,就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。
IE中对CORS的实现是xdr
var xdr = new XDomainRequest(); xdr.onload = function(){ console.log(xdr.responseText); } xdr.open('get', 'http://www.baidu.com'); ...... xdr.send(null);
其它浏览器中的实现就在xhr中
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if(xhr.readyState == 4){ if(xhr.status >= 200 && xhr.status < 304 || xhr.status == 304){ console.log(xhr.responseText); } } } xhr.open('get', 'http://www.baidu.com'); ...... xhr.send(null);
实现跨浏览器的CORS
function createCORS(method, url){ var xhr = new XMLHttpRequest(); if('withCredentials' in xhr){ xhr.open(method, url, true); }else if(typeof XDomainRequest != 'undefined'){ var xhr = new XDomainRequest(); xhr.open(method, url); }else{ xhr = null; } return xhr; } var request = createCORS('get', 'http://www.baidu.com'); if(request){ request.onload = function(){ ...... }; request.send(); }
7、JSONP
JSONP包含两部分:回调函数和数据。
回调函数是当响应到来时要放在当前页面被调用的函数。
数据就是传入回调函数中的json数据,也就是回调函数的参数了。
function handleResponse(response){ console.log('The responsed data is: '+response.data); } var script = document.createElement('script'); script.src = 'http://www.baidu.com/json/?callback=handleResponse'; document.body.insertBefore(script, document.body.firstChild); /*handleResonse({"data": "zhe"})*/ //原理如下: //当我们通过script标签请求时 //后台就会根据相应的参数(json,handleResponse) //来生成相应的json数据(handleResponse({"data": "zhe"})) //最后这个返回的json数据(代码)就会被放在当前js文件中被执行 //至此跨域通信完成
jsonp虽然很简单,但是有如下缺点:
1)安全问题(请求代码中可能存在安全隐患)
2)要确定jsonp请求是否失败并不容易
8、web sockets
web sockets是一种浏览器的API,它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)
web sockets原理:在js创建了web socket之后,会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。
只有在支持web socket协议的服务器上才能正常工作。
var socket = new WebSockt('ws://www.baidu.com');//http->ws; https->wss socket.send('hello WebSockt'); socket.onmessage = function(event){ var data = event.data; }
5、JSONP返回的内容格式?
就是json的格式
{"name":"hhh","id":"12" ....}
6、列举原生以及jq增删改查节点的方法?
三、简答题
1、以下代码的执行结果的区别是什么?
console.log($(".className").is(".className")) console.log($(".className").eq(0)) console.log($(".className")[0]) console.log($(".className").children(0)) console.log($(".className").not(0)) console.log($(".className").next()) console.log($(".className").find("*"))
2、以下代码的执行结果是什么?为什么?
for (var i = 0; i < 10; i++) { setTimeout((function(i) { console.log(i) })(i), i*1000) } // 0-9 for(var i = 0; i < 10; i++) { setTimeout(function(){ console.log(i) }, 1000) } //10个10
setTimeout执行机制是等到任务列表没有任务执行的时候开始执行,等执行时循环已经走完,所以第二个输出10个10。而第一个给了一个闭包,将i作为形参传入输出0-9。
3、以下代码的执行结果是什么? 为什么?
var a, b; (function(){ alert(a); // undefined,因为在自执行函数内部var了a,这里的a是var的a,但是没有初始化 alert(b); //undefined,全局变量的b,声明未初始化 var a = b = 3;
// 这条语句的拆分实际上是这样的 var a;b = 3;a = b,而var a;会被提升到这个局部变量的最顶端,b改变的是全局b alert(a); //3,局部变量a alert(b); //3,全局变量b })(); alert(a); //undefined ,和自执行函数内部a无关
alert(b);// 3, 全局b
(function(){ console.log(a) //undefined,声明未初始化 var a = 0 })() 相当于 (function(){ var a //undefined,声明未初始化 console.log(a) a = 0 })()
4、以下代码的执行结果是什么? 为什么?
var sum = (function(a) { this.a = a // sum.a = 21 return function(b) { return this.a + b } }(function(a, b){ return a }(21,22))) // a = 21
console.log(sum) // function(b) { return this.a + b}
console.log(sum(20)) //b = 20传入 this.a 指的是sum.a,所以21+ 20 为41
vue 自定义指令
事件委托代码
垂直居中(8种方法)
vue写过的组件(怎么写的代码)
es6 箭头函数解决了什么问题
es6 let,const
mvc和mvvm区别